Changed image url concatenations to use createUrlPath helper (#2166)

* change from "None" to "No category" * implement disabled state for none checked categories * remove unnessesary code * rewrite LoginForm.jsx to tsx * replace UseSelector by UseAppSelector * rewrite GoogleLogin to tsx format * rewrite OfferDetails to tsx format * rewrite LoginForm.jsx to tsx * replace UseSelector by UseAppSelector * remove unnessesary handleCheckboxChange function * remove unnessesary space * Changed image url concatenations to use createUrlPath helper * Update AccountIcon.tsx * Update createUrlPath in helper-functions.tsx * code fix * remove unnessesary space * Fix sonar: refactor to use an optional chain expression * Rewrote ProfileItem to tsx format (#2226) * Created tests for count-active-filters.tsx (#2191) * Rewrote DateFilter to tsx format and fixed sonar issues (#2240) * rewrote DateFilter to tsx * extended DesktopDatePickerProps * Rewrote SubjectsStep to tsx format (#2233) * Rewrote SubjectsStep to tsx format * fix sonar issue * fix sonar issue 2 * Rewrote FindBlock to tsx format (#2234) * Rewrote FindBlock to tsx format * fixed tests * Rewrote ProfileDoneItemsList to tsx format (#2235) * Rewrote ProfileDoneItemsList to tsx format * changed imports * Fixed privacy policy translation (#2153) * Fixed privacy policy translation * Fixed en version * Add an error tooltip for User Profile (#2164) * Add an error tooltip for User Profile * Add open on hover behaviour * Fix style: added gap and decreased error icon * Add an error tooltip to the personal info tab * Fix test * Fix linter errors * Update src/pages/edit-profile/EditProfile.tsx Co-authored-by: Olenka Hryk <[email protected]> * Refactor enableTooltipError to use optional chain expression --------- Co-authored-by: Olenka Hryk <[email protected]> * Fix error caused when category is cleared (#2205) * Rewrote ProfileContainerMobile to tsx (#2220) * Rewrote ProfileContainerMobile to tsx * Refactor doneItems type * Fix doneItems type * Rewrote ProfileContainerDesktop to tsx (#2223) * Rewrote ProfileContainerDesktop to tsx * Refactor doneItems type * Fix doneItems type * Rewrote SearchInput to tsx (#2210) * Rewrote SearchInput to tsx * Refactor setSearch to use React.Dispatch type * Rewrote VideoPresentation to tsx (#2212) * Rewrote EmailConfirmModal to tsx (#2244) * Rewrote AdminNavBarItem to tsx (#2237) * Rewrote SignupForm to tsx (#2238) * Rebase develop into feature/1944/change-image-url-concatenation * Update AccountIcon.tsx * Update createUrlPath in helper-functions.tsx * Fix sonar: refactor to use an optional chain expression --------- Co-authored-by: Bohdan <[email protected]> Co-authored-by: Bohdan Mylyi <[email protected]> Co-authored-by: PavloDolia <[email protected]> Co-authored-by: Anastasiia Matiushenko <[email protected]> Co-authored-by: Olenka Hryk <[email protected]>
ita-social-projects · Aug 5, 2024 · aff370f · aff370f
1 parent 8ad6d72
commit aff370f
Show file tree

Hide file tree

Showing 10 changed files with 42 additions and 17 deletions.
diff --git a/src/components/message/Message.tsx b/src/components/message/Message.tsx
@@ -76,7 +76,9 @@ const Message: FC<MessageProps> = ({
   const avatar = !isMyMessage && isAvatarVisible && (
     <Link onClick={handleLinkClick} to={pathToProfile}>
       <Avatar
-        src={photo && `${import.meta.env.VITE_APP_IMG_USER_URL}${photo}`}
+        src={
+          photo && createUrlPath(import.meta.env.VITE_APP_IMG_USER_URL, photo)
+        }
         sx={spliceSx(styles.avatar, sx.avatar)}
       />
     </Link>

diff --git a/src/components/user-profile-info/UserProfileInfo.tsx b/src/components/user-profile-info/UserProfileInfo.tsx
@@ -67,7 +67,7 @@ const UserProfileInfo: FC<UserProfileInfoProps> = ({
 
   const avatar = (
     <Avatar
-      src={photo && `${import.meta.env.VITE_APP_IMG_USER_URL}${photo}`}
+      src={photo && createUrlPath(import.meta.env.VITE_APP_IMG_USER_URL, photo)}
       sx={spliceSx(styles.avatar, sx.avatar)}
     />
   )

diff --git a/src/containers/about-chat-sidebar/AboutChatSidebar.tsx b/src/containers/about-chat-sidebar/AboutChatSidebar.tsx
@@ -91,7 +91,8 @@ const AboutChatSidebar: FC<AboutChatSidebarProps> = ({
             <Box sx={styles.chatInfo}>
               <Avatar
                 src={
-                  photo && `${import.meta.env.VITE_APP_IMG_USER_URL}${photo}`
+                  photo &&
+                  createUrlPath(import.meta.env.VITE_APP_IMG_USER_URL, photo)
                 }
                 sx={styles.userAvatar}
               />

diff --git a/src/containers/chat/chat-item/ChatItem.tsx b/src/containers/chat/chat-item/ChatItem.tsx
@@ -15,7 +15,7 @@ import {
   OverlapEnum,
   PositionEnum
 } from '~/types'
-import { getFormattedDate } from '~/utils/helper-functions'
+import { createUrlPath, getFormattedDate } from '~/utils/helper-functions'
 
 interface ItemOfChatProps {
   isActiveChat: boolean
@@ -84,7 +84,10 @@ const ChatItem: FC<ItemOfChatProps> = ({
           overlap={OverlapEnum.Circular}
         >
           <Avatar
-            src={photo && `${import.meta.env.VITE_APP_IMG_USER_URL}${photo}`}
+            src={
+              photo &&
+              createUrlPath(import.meta.env.VITE_APP_IMG_USER_URL, photo)
+            }
             sx={styles.img}
           />
         </Badge>

diff --git a/src/containers/edit-profile/profile-tab/profile-tab-form/ProfileTabForm.tsx b/src/containers/edit-profile/profile-tab/profile-tab-form/ProfileTabForm.tsx
@@ -32,6 +32,7 @@ import { snackbarVariants } from '~/constants'
 import { imageResize } from '~/utils/image-resize'
 import { styles } from '~/containers/edit-profile/profile-tab/profile-tab-form/ProfileTabForm.styles'
 import { openAlert } from '~/redux/features/snackbarSlice'
+import { createUrlPath } from '~/utils/helper-functions'
 
 export interface ProfileTabFormProps {
   data: EditProfileForm
@@ -106,7 +107,7 @@ const ProfileTabForm: FC<ProfileTabFormProps> = ({
   const { photo } = data
   const photoToDisplay =
     typeof photo === 'string'
-      ? photo && `${import.meta.env.VITE_APP_IMG_USER_URL}${photo}`
+      ? photo && createUrlPath(import.meta.env.VITE_APP_IMG_USER_URL, photo)
       : photo?.src
 
   return (

diff --git a/src/containers/my-cooperations/my-cooperations-details/MyCooperationsDetails.tsx b/src/containers/my-cooperations/my-cooperations-details/MyCooperationsDetails.tsx
@@ -104,7 +104,10 @@ const MyCooperationsDetails = () => {
             <Avatar
               src={
                 offer.author.photo &&
-                `${import.meta.env.VITE_APP_IMG_USER_URL}${offer.author.photo}`
+                createUrlPath(
+                  import.meta.env.VITE_APP_IMG_USER_URL,
+                  offer.author.photo
+                )
               }
             />
             <Typography sx={style.profileName}>

diff --git a/src/containers/navigation-icons/AccountIcon.tsx b/src/containers/navigation-icons/AccountIcon.tsx
@@ -13,6 +13,7 @@ import { defaultResponses } from '~/constants'
 import { styles } from '~/containers/navigation-icons/NavigationIcons.styles'
 
 import { UserResponse, UserRole } from '~/types'
+import { createUrlPath } from '~/utils/helper-functions'
 
 interface AccountIconProps {
   openMenu: (event: MouseEvent) => void
@@ -45,7 +46,10 @@ const AccountIcon: FC<AccountIconProps> = ({ openMenu }) => {
       <Avatar
         alt='User Avatar'
         onClick={openMenu}
-        src={`${import.meta.env.VITE_APP_IMG_USER_URL}${photo}`}
+        src={
+          photo &&
+          createUrlPath(import.meta.env.VITE_APP_IMG_USER_URL || '', photo)
+        }
         sx={styles.accountIcon}
       >
         {!loading && firstName && lastName && `${firstName[0]}${lastName[0]}`}

diff --git a/src/containers/user-profile/profile-info/ProfileContainerDesktop.tsx b/src/containers/user-profile/profile-info/ProfileContainerDesktop.tsx
@@ -11,6 +11,7 @@ import ProfileDoneItemsList from '~/components/icon-with-text-list/ProfileDoneIt
 
 import { styles } from '~/containers/user-profile/profile-info/ProfileInfo.styles'
 import { UserResponse } from '~/types'
+import { createUrlPath } from '~/utils/helper-functions'
 
 interface ProfileContainerDesktopProps {
   actionIcon: ReactNode
@@ -31,13 +32,16 @@ const ProfileContainerDesktop = ({
   doneItems,
   chipItems
 }: ProfileContainerDesktopProps) => {
-  const avatarSrc = userData.photo
-    ? `${import.meta.env.VITE_APP_IMG_USER_URL}${userData.photo}`
-    : ''
   return (
     <Box sx={styles.container}>
       <Box sx={styles.avatarContainer}>
-        <Avatar src={avatarSrc} sx={styles.img} />
+        <Avatar
+          src={
+            userData.photo &&
+            createUrlPath(import.meta.env.VITE_APP_IMG_USER_URL, userData.photo)
+          }
+          sx={styles.img}
+        />
       </Box>
       {actionIcon}
 

diff --git a/src/containers/user-profile/profile-info/ProfileContainerMobile.tsx b/src/containers/user-profile/profile-info/ProfileContainerMobile.tsx
@@ -11,6 +11,7 @@ import ProfileDoneItemsList from '~/components/icon-with-text-list/ProfileDoneIt
 
 import { styles } from '~/containers/user-profile/profile-info/ProfileInfo.styles'
 import { UserResponse } from '~/types'
+import { createUrlPath } from '~/utils/helper-functions'
 
 interface ProfileContainerMobileProps {
   actionIcon: ReactNode
@@ -31,14 +32,20 @@ const ProfileContainerMobile = ({
   userData,
   chipItems
 }: ProfileContainerMobileProps) => {
-  const avatarSrc = userData.photo
-    ? `${import.meta.env.VITE_APP_IMG_USER_URL}${userData.photo}`
-    : ''
   return (
     <Box sx={styles.container}>
       <Box sx={styles.wrapperForPhoto}>
         <Box sx={styles.avatarContainerMobile}>
-          <Avatar src={avatarSrc} sx={styles.img} />
+          <Avatar
+            src={
+              userData.photo &&
+              createUrlPath(
+                import.meta.env.VITE_APP_IMG_USER_URL,
+                userData.photo
+              )
+            }
+            sx={styles.img}
+          />
         </Box>
 
         <TitleWithDescription

diff --git a/src/utils/helper-functions.tsx b/src/utils/helper-functions.tsx
@@ -206,7 +206,7 @@ export const createUrlPath = (
   query = {}
 ) => {
   let trimmedUrl = URL
-  while (trimmedUrl.endsWith('/')) {
+  while (trimmedUrl?.endsWith('/')) {
     trimmedUrl = trimmedUrl.slice(0, -1)
   }