Modularized as much as possible

4 files changed, 123 insertions, 202 deletions

diff --git a/src/components/profile/Cover.tsx b/src/components/profile/Cover.tsx
index e0b1e7e8..711eeb46 100644
--- a/src/components/profile/Cover.tsx
+++ b/src/components/profile/Cover.tsx
@@ -1,6 +1,5 @@
 import React, {useState, useEffect} from 'react';
 import {
-  Alert,
   Image,
   StyleSheet,
   View,
@@ -11,15 +10,10 @@ import {
 import {COVER_HEIGHT, IMAGE_WIDTH} from '../../constants';
 import {ScreenType} from '../../types';
 import GreyPurplePlus from '../../assets/icons/grey-purple-plus.svg';
-import ImagePicker from 'react-native-image-crop-picker';
-import {
-  ERROR_UPLOAD_LARGE_PROFILE_PIC,
-  ERROR_UPLOAD_SMALL_PROFILE_PIC,
-} from '../../constants/strings';
-import {patchEditProfile} from '../../services';
 import {useDispatch, useSelector} from 'react-redux';
 import {loadUserData, resetHeaderAndProfileImage} from '../../store/actions';
 import {RootState} from '../../store/rootreducer';
+import {patchProfile, validateImageLink} from '../../utils';
 
 interface CoverProps {
   userXId: string | undefined;
@@ -35,32 +29,6 @@ const Cover: React.FC<CoverProps> = ({userXId, screenType}) => {
   const [loading, setLoading] = useState(false);
   const [validImage, setValidImage] = useState<boolean>(true);
 
-  const {
-    profile: {website, biography, gender, snapchat, tiktok, university_class},
-    avatar,
-  } = useSelector((state: RootState) => state.user);
-
-  const isCustomGender =
-    gender !== '' && gender !== 'female' && gender !== 'male';
-
-  const [form, setForm] = React.useState({
-    largePic: cover ? cover : '',
-    smallPic: avatar ? avatar : '',
-    website: website ? website : '',
-    bio: biography ? biography : '',
-    gender: isCustomGender ? 'custom' : gender,
-    customGenderText: isCustomGender ? gender : '',
-    snapchat: snapchat,
-    tiktok: tiktok,
-    isValidWebsite: true,
-    isValidBio: true,
-    isValidGender: true,
-    isValidSnapchat: true,
-    isValidTiktok: true,
-    attemptedSubmit: false,
-    classYear: university_class,
-  });
-
   useEffect(() => {
     checkAvatar(cover);
   }, []);
@@ -74,76 +42,22 @@ const Cover: React.FC<CoverProps> = ({userXId, screenType}) => {
     }
   }, [dispatch, needsUpdate]);
 
-  const goToGalleryLargePic = () => {
-    ImagePicker.openPicker({
-      smartAlbums: [
-        'Favorites',
-        'RecentlyAdded',
-        'SelfPortraits',
-        'Screenshots',
-        'UserLibrary',
-      ],
-      width: 580,
-      height: 580,
-      cropping: true,
-      cropperToolbarTitle: 'Select Header',
-      mediaType: 'photo',
-    }).then((picture) => {
-      if ('path' in picture) {
-        setForm({
-          ...form,
-          largePic: picture.path,
-        });
-        handleSubmit();
-      }
-    });
-  };
-
-  const handleSubmit = () => {
-    if (!form.largePic) {
-      Alert.alert(ERROR_UPLOAD_LARGE_PROFILE_PIC);
-      return;
-    }
-    if (!form.smallPic) {
-      Alert.alert(ERROR_UPLOAD_SMALL_PROFILE_PIC);
-      return;
-    }
-
-    const request = new FormData();
-    request.append('largeProfilePicture', {
-      uri: form.largePic,
-      name: 'large_profile_pic.jpg',
-      type: 'image/jpg',
-    });
-
+  const handleNewImage = async () => {
+    setLoading(true);
+    const result = await patchProfile('Select Header Picture', user.userId);
     setLoading(true);
-    patchEditProfile(request, user.userId)
-      .then((_) => {
-        setNeedsUpdate(true);
-        setValidImage(true);
-        // navigation.pop();
-      })
-      .catch((error) => {
-        Alert.alert(error);
-      });
-    setLoading(false);
+    if (result) {
+      setNeedsUpdate(true);
+    } else {
+      setLoading(false);
+    }
   };
 
-  const checkAvatar = (url: string | undefined) => {
-    if (!url) {
-      setValidImage(false);
+  const checkAvatar = async (url: string | undefined) => {
+    const valid = await validateImageLink(url);
+    if (valid !== validImage) {
+      setValidImage(valid);
     }
-    fetch(url)
-      .then((res) => {
-        if (res.status === 200) {
-          setValidImage(true);
-        } else {
-          setValidImage(false);
-        }
-      })
-      .catch((_) => {
-        setValidImage(false);
-      });
   };
 
   if (!validImage && userXId === undefined && !loading) {
@@ -156,8 +70,8 @@ const Cover: React.FC<CoverProps> = ({userXId, screenType}) => {
             source={{uri: cover, cache: 'reload'}}>
             <TouchableOpacity
               accessible={true}
-              accessibilityLabel="ADD PROFILE PICTURE"
-              onPress={() => goToGalleryLargePic()}>
+              accessibilityLabel="ADD HEADER PICTURE"
+              onPress={() => handleNewImage()}>
               <GreyPurplePlus style={styles.plus} />
               <Text style={styles.text}>Add Picture</Text>
             </TouchableOpacity>
diff --git a/src/components/profile/TaggAvatar.tsx b/src/components/profile/TaggAvatar.tsx
index f74a202d..1f6bbba6 100644
--- a/src/components/profile/TaggAvatar.tsx
+++ b/src/components/profile/TaggAvatar.tsx
@@ -1,17 +1,12 @@
 import React, {useState, useEffect} from 'react';
-import {Alert, StyleSheet, TouchableOpacity} from 'react-native';
+import {StyleSheet, TouchableOpacity} from 'react-native';
 import {RootState} from '../../store/rootreducer';
 import {ScreenType} from '../../types';
 import {Avatar} from '../common';
 import {useDispatch, useSelector} from 'react-redux';
 import {loadUserData, resetHeaderAndProfileImage} from '../../store/actions';
 import PurplePlus from '../../assets/icons/purple-plus.svg';
-import ImagePicker from 'react-native-image-crop-picker';
-import {
-  ERROR_UPLOAD_LARGE_PROFILE_PIC,
-  ERROR_UPLOAD_SMALL_PROFILE_PIC,
-} from '../../constants/strings';
-import {patchEditProfile} from '../../services';
+import {patchProfile, validateImageLink} from '../../utils';
 
 const PROFILE_DIM = 100;
 
@@ -32,34 +27,9 @@ const TaggAvatar: React.FC<TaggAvatarProps> = ({
   const [needsUpdate, setNeedsUpdate] = useState(false);
   const [loading, setLoading] = useState(false);
   const [validImage, setValidImage] = useState<boolean>(true);
-
-  const {
-    profile: {website, biography, gender, snapchat, tiktok, university_class},
-    cover,
-  } = useSelector((state: RootState) => state.user);
   const {user} = useSelector((state: RootState) =>
     userXId ? state.userX[screenType][userXId] : state.user,
   );
-  const isCustomGender =
-    gender !== '' && gender !== 'female' && gender !== 'male';
-
-  const [form, setForm] = React.useState({
-    largePic: cover ? cover : '',
-    smallPic: avatar ? avatar : '',
-    website: website ? website : '',
-    bio: biography ? biography : '',
-    gender: isCustomGender ? 'custom' : gender,
-    customGenderText: isCustomGender ? gender : '',
-    snapchat: snapchat,
-    tiktok: tiktok,
-    isValidWebsite: true,
-    isValidBio: true,
-    isValidGender: true,
-    isValidSnapchat: true,
-    isValidTiktok: true,
-    attemptedSubmit: false,
-    classYear: university_class,
-  });
 
   useEffect(() => {
     checkAvatar(avatar);
@@ -74,80 +44,23 @@ const TaggAvatar: React.FC<TaggAvatarProps> = ({
     }
   }, [dispatch, needsUpdate]);
 
-  const goToGallerySmallPic = () => {
-    ImagePicker.openPicker({
-      smartAlbums: [
-        'Favorites',
-        'RecentlyAdded',
-        'SelfPortraits',
-        'Screenshots',
-        'UserLibrary',
-      ],
-      width: 580,
-      height: 580,
-      cropping: true,
-      cropperToolbarTitle: 'Select Profile Picture',
-      mediaType: 'photo',
-      cropperCircleOverlay: true,
-    }).then((picture) => {
-      if ('path' in picture) {
-        setForm({
-          ...form,
-          smallPic: picture.path,
-        });
-        handleSubmit();
-      }
-    });
-  };
-
-  const handleSubmit = async () => {
-    if (!form.largePic) {
-      Alert.alert(ERROR_UPLOAD_LARGE_PROFILE_PIC);
-      return;
-    }
-    if (!form.smallPic) {
-      Alert.alert(ERROR_UPLOAD_SMALL_PROFILE_PIC);
-      return;
-    }
-
-    const request = new FormData();
-    request.append('smallProfilePicture', {
-      uri: form.smallPic,
-      name: 'small_profile_pic.jpg',
-      type: 'image/jpg',
-    });
-
+  const handleNewImage = async () => {
     setLoading(true);
-    patchEditProfile(request, user.userId)
-      .then((_) => {
-        setNeedsUpdate(true);
-        setValidImage(true);
-        // navigation.pop();
-      })
-      .catch((error) => {
-        Alert.alert(error);
-      });
-    setLoading(false);
+    const result = await patchProfile('Select Profile Picture', user.userId);
+    if (result) {
+      setNeedsUpdate(true);
+    } else {
+      setLoading(false);
+    }
   };
 
-  const checkAvatar = (url: string | undefined) => {
-    if (!url) {
-      setValidImage(false);
+  const checkAvatar = async (url: string | undefined) => {
+    const valid = await validateImageLink(url);
+    if (valid !== validImage) {
+      setValidImage(valid);
     }
-    fetch(url)
-      .then((res) => {
-        if (res.status === 200) {
-          setValidImage(true);
-        } else {
-          setValidImage(false);
-        }
-      })
-      .catch((_) => {
-        setValidImage(false);
-      });
   };
 
-
   if (!validImage && userXId === undefined && !loading) {
     return (
       <>
@@ -155,7 +68,7 @@ const TaggAvatar: React.FC<TaggAvatarProps> = ({
         <TouchableOpacity
           accessible={true}
           accessibilityLabel="ADD PROFILE PICTURE"
-          onPress={() => goToGallerySmallPic()}>
+          onPress={() => handleNewImage()}>
           <PurplePlus style={styles.plus} />
         </TouchableOpacity>
       </>
diff --git a/src/utils/common.ts b/src/utils/common.ts
index ce4ab7d1..95e77f64 100644
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@@ -180,3 +180,20 @@ const _crestIcon = (university: UniversityType) => {
       return require('../assets/images/bwbadges.png');
   }
 };
+
+export const validateImageLink = async (url: string | undefined) => {
+  if (!url) {
+    return false;
+  }
+  return fetch(url)
+    .then((res) => {
+      if (res.status === 200) {
+        return true;
+      } else {
+        return false;
+      }
+    })
+    .catch((_) => {
+      return false;
+    });
+};
diff --git a/src/utils/users.ts b/src/utils/users.ts
index 334cb3c0..bc81bbc6 100644
--- a/src/utils/users.ts
+++ b/src/utils/users.ts
@@ -1,3 +1,4 @@
+import {Alert} from 'react-native';
 import AsyncStorage from '@react-native-community/async-storage';
 import {INTEGRATED_SOCIAL_LIST} from '../constants';
 import {isUserBlocked, loadSocialPosts, removeBadgesService} from '../services';
@@ -24,6 +25,8 @@ import {
   UserType,
   UniversityBadge,
 } from './../types/types';
+import ImagePicker from 'react-native-image-crop-picker';
+import {patchEditProfile} from '../services';
 
 const loadData = async (dispatch: AppDispatch, user: UserType) => {
   await Promise.all([
@@ -240,3 +243,77 @@ export const navigateToProfile = async (
     screenType,
   });
 };
+
+export const patchProfile = async (title: string, userId: string) => {
+  let imageSettings = {};
+  switch (title) {
+    case 'Select Header Picture':
+      imageSettings = {
+        smartAlbums: [
+          'Favorites',
+          'RecentlyAdded',
+          'SelfPortraits',
+          'Screenshots',
+          'UserLibrary',
+        ],
+        width: 580,
+        height: 580,
+        cropping: true,
+        cropperToolbarTitle: title,
+        mediaType: 'photo',
+      };
+      break;
+    case 'Select Profile Picture':
+      imageSettings = {
+        smartAlbums: [
+          'Favorites',
+          'RecentlyAdded',
+          'SelfPortraits',
+          'Screenshots',
+          'UserLibrary',
+        ],
+        width: 580,
+        height: 580,
+        cropping: true,
+        cropperToolbarTitle: title,
+        mediaType: 'photo',
+        cropperCircleOverlay: true,
+      };
+      break;
+  }
+
+  return await ImagePicker.openPicker(imageSettings)
+    .then((picture) => {
+      if ('path' in picture) {
+        const request = new FormData();
+        switch (title) {
+          case 'Select Header Picture':
+            request.append('largeProfilePicture', {
+              uri: picture.path,
+              name: 'large_profile_pic.jpg',
+              type: 'image/jpg',
+            });
+            break;
+          case 'Select Profile Picture':
+            request.append('smallProfilePicture', {
+              uri: picture.path,
+              name: 'small_profile_pic.jpg',
+              type: 'image/jpg',
+            });
+            break;
+        }
+
+        return patchEditProfile(request, userId)
+          .then((_) => {
+            return true;
+          })
+          .catch((error) => {
+            Alert.alert(error);
+            return false;
+          });
+      }
+    })
+    .catch((_) => {
+      return false;
+    });
+};