Merge pull request #334 from IvanIFChen/tma740-header-pic-bug

[TMA-740] Head Pic Bug

6 files changed, 59 insertions, 37 deletions

diff --git a/src/components/profile/Avatar.tsx b/src/components/profile/Avatar.tsx
index 5d677983..e57a56a3 100644
--- a/src/components/profile/Avatar.tsx
+++ b/src/components/profile/Avatar.tsx
@@ -12,15 +12,15 @@ interface AvatarProps {
   screenType: ScreenType;
 }
 const Avatar: React.FC<AvatarProps> = ({style, screenType, userXId}) => {
-  const {avatar} = userXId
-    ? useSelector((state: RootState) => state.userX[screenType][userXId])
-    : useSelector((state: RootState) => state.user);
+  const {avatar} = useSelector((state: RootState) =>
+    userXId ? state.userX[screenType][userXId] : state.user,
+  );
 
   return (
     <Image
       style={[styles.image, style]}
       defaultSource={require('../../assets/images/avatar-placeholder.png')}
-      source={{uri: avatar}}
+      source={{uri: avatar, cache: 'reload'}}
     />
   );
 };
diff --git a/src/components/profile/Cover.tsx b/src/components/profile/Cover.tsx
index b7502cff..ee804ff3 100644
--- a/src/components/profile/Cover.tsx
+++ b/src/components/profile/Cover.tsx
@@ -10,16 +10,16 @@ interface CoverProps {
   screenType: ScreenType;
 }
 const Cover: React.FC<CoverProps> = ({userXId, screenType}) => {
-  const {cover} = userXId
-    ? useSelector((state: RootState) => state.userX[screenType][userXId])
-    : useSelector((state: RootState) => state.user);
+  const {cover} = useSelector((state: RootState) =>
+    userXId ? state.userX[screenType][userXId] : state.user,
+  );
 
   return (
     <View style={[styles.container]}>
       <Image
         style={styles.image}
         defaultSource={require('../../assets/images/cover-placeholder.png')}
-        source={{uri: cover}}
+        source={{uri: cover, cache: 'reload'}}
       />
     </View>
   );
diff --git a/src/screens/profile/EditProfile.tsx b/src/screens/profile/EditProfile.tsx
index 8afaeb6d..de950923 100644
--- a/src/screens/profile/EditProfile.tsx
+++ b/src/screens/profile/EditProfile.tsx
@@ -1,52 +1,48 @@
-import React, {Fragment, useCallback, useEffect, useState} from 'react';
 import {RouteProp} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
+import React, {Fragment, useCallback, useEffect, useState} from 'react';
 import {
-  Text,
+  Alert,
+  Image,
+  Keyboard,
+  KeyboardAvoidingView,
+  Platform,
+  SafeAreaView,
   StatusBar,
   StyleSheet,
-  Image,
+  Text,
   TouchableOpacity,
-  Alert,
   View,
-  SafeAreaView,
-  KeyboardAvoidingView,
-  Platform,
-  Keyboard,
 } from 'react-native';
 import {Button} from 'react-native-elements';
+import ImagePicker from 'react-native-image-crop-picker';
+import Animated from 'react-native-reanimated';
+import {useDispatch, useSelector} from 'react-redux';
 import {
   Background,
+  SocialIcon,
+  TabsGradient,
   TaggBigInput,
-  TaggInput,
   TaggDropDown,
-  TabsGradient,
-  SocialIcon,
+  TaggInput,
 } from '../../components';
-import ImagePicker from 'react-native-image-crop-picker';
+import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator';
 import {
-  EDIT_PROFILE_ENDPOINT,
-  websiteRegex,
   bioRegex,
-  genderRegex,
   CLASS_YEAR_LIST,
+  genderRegex,
+  websiteRegex,
 } from '../../constants';
-import AsyncStorage from '@react-native-community/async-storage';
-import {MainStackParams} from '../../routes';
-import Animated from 'react-native-reanimated';
-import {HeaderHeight, SCREEN_HEIGHT} from '../../utils';
-import {RootState} from '../../store/rootReducer';
-import {useDispatch, useSelector} from 'react-redux';
-import {loadUserData} from '../../store/actions';
-import {BackgroundGradientType, ScreenType} from '../../types';
 import {
-  ERROR_DOUBLE_CHECK_CONNECTION,
-  ERROR_SOMETHING_WENT_WRONG_REFRESH,
   ERROR_UPLOAD_LARGE_PROFILE_PIC,
   ERROR_UPLOAD_SMALL_PROFILE_PIC,
 } from '../../constants/strings';
-import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator';
+import {MainStackParams} from '../../routes';
 import {patchEditProfile} from '../../services';
+import {loadUserData, resetHeaderAndProfileImage} from '../../store/actions';
+import {RootState} from '../../store/rootReducer';
+import {BackgroundGradientType, ScreenType} from '../../types';
+import {HeaderHeight, SCREEN_HEIGHT} from '../../utils';
 
 type EditProfileNavigationProp = StackNavigationProp<
   MainStackParams,
@@ -78,6 +74,7 @@ const EditProfile: React.FC<EditProfileProps> = ({route, navigation}) => {
 
   useEffect(() => {
     if (needsUpdate) {
+      dispatch(resetHeaderAndProfileImage());
       dispatch(loadUserData({userId, username}));
     }
   }, [dispatch, needsUpdate, userId, username]);
@@ -120,7 +117,10 @@ const EditProfile: React.FC<EditProfileProps> = ({route, navigation}) => {
       onPress={goToGalleryLargePic}
       style={styles.largeProfileUploader}>
       {form.largePic ? (
-        <Image source={{uri: form.largePic}} style={styles.largeProfilePic} />
+        <Image
+          source={{uri: form.largePic, cache: 'reload'}}
+          style={styles.largeProfilePic}
+        />
       ) : (
         <Text style={styles.largeProfileText}>ADD HEADER IMAGE</Text>
       )}
@@ -137,7 +137,10 @@ const EditProfile: React.FC<EditProfileProps> = ({route, navigation}) => {
       onPress={goToGallerySmallPic}
       style={styles.smallProfileUploader}>
       {form.smallPic ? (
-        <Image source={{uri: form.smallPic}} style={styles.smallProfilePic} />
+        <Image
+          source={{uri: form.smallPic, cache: 'reload'}}
+          style={styles.smallProfilePic}
+        />
       ) : (
         <Text style={styles.smallProfileText}>ADD PROFILE PICTURE</Text>
       )}
diff --git a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx
index e1bcb477..b072a9b5 100644
--- a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx
+++ b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx
@@ -52,7 +52,7 @@ const SuggestedPeopleUploadPictureScreen: React.FC<SuggestedPeopleUploadPictureS
   const navigation = useNavigation();
   const {
     user: {userId: loggedInUserId},
-    profile: {university = UniversityType.brown},
+    profile: {university = UniversityType.Empty},
   } = useSelector((state: RootState) => state.user);
 
   useEffect(() => {
diff --git a/src/store/actions/user.ts b/src/store/actions/user.ts
index 374154da..e7d985ac 100644
--- a/src/store/actions/user.ts
+++ b/src/store/actions/user.ts
@@ -8,6 +8,7 @@ import {
 import {UserType} from '../../types/types';
 import {getTokenOrLogout} from '../../utils';
 import {
+  clearHeaderAndProfileImages,
   profileCompletionStageUpdated,
   setIsOnboardedUser,
   setNewNotificationReceived,
@@ -55,6 +56,18 @@ export const loadUserData = (
   }
 };
 
+export const resetHeaderAndProfileImage = (): ThunkAction<
+  Promise<void>,
+  RootState,
+  unknown,
+  Action<string>
+> => async (dispatch) => {
+  await dispatch({
+    type: clearHeaderAndProfileImages.type,
+    payload: {},
+  });
+};
+
 /**
  * To update editable socials
  * @param social social to be updated
diff --git a/src/store/reducers/userReducer.ts b/src/store/reducers/userReducer.ts
index 587aa374..9ff9ba01 100644
--- a/src/store/reducers/userReducer.ts
+++ b/src/store/reducers/userReducer.ts
@@ -70,6 +70,11 @@ const userDataSlice = createSlice({
     setSuggestedPeopleImage: (state, action) => {
       state.suggestedPeopleImage = action.payload.suggestedPeopleImage;
     },
+
+    clearHeaderAndProfileImages: (state) => {
+      state.avatar = '';
+      state.cover = '';
+    },
   },
 });
 
@@ -84,5 +89,6 @@ export const {
   setNewNotificationReceived,
   setReplyPosted,
   setSuggestedPeopleImage,
+  clearHeaderAndProfileImages,
 } = userDataSlice.actions;
 export const userDataReducer = userDataSlice.reducer;