Merge pull request #429 from brian-tagg/tma844-bugfix-plus-sign

[TMA-844] Plus sign for profile and header in profile

1 files changed, 90 insertions, 5 deletions

diff --git a/src/components/profile/TaggAvatar.tsx b/src/components/profile/TaggAvatar.tsx
index ea0bdb65..8ccae2ef 100644
--- a/src/components/profile/TaggAvatar.tsx
+++ b/src/components/profile/TaggAvatar.tsx
@@ -1,9 +1,13 @@
-import React from 'react';
-import {StyleSheet} from 'react-native';
-import {useSelector} from 'react-redux';
+import React, {useState, useEffect} from 'react';
+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 {patchProfile, validateImageLink} from '../../utils';
+import {useIsFocused} from '@react-navigation/native';
 
 const PROFILE_DIM = 100;
 
@@ -11,17 +15,85 @@ interface TaggAvatarProps {
   style?: object;
   userXId: string | undefined;
   screenType: ScreenType;
+  editable: boolean;
 }
 const TaggAvatar: React.FC<TaggAvatarProps> = ({
   style,
   screenType,
   userXId,
+  editable = false,
 }) => {
-  const {avatar} = useSelector((state: RootState) =>
+  const {avatar, user} = useSelector((state: RootState) =>
     userXId ? state.userX[screenType][userXId] : state.user,
   );
+  const dispatch = useDispatch();
+  const [needsUpdate, setNeedsUpdate] = useState(false);
+  const [updating, setUpdating] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [validImage, setValidImage] = useState<boolean>(true);
+  const isFocused = useIsFocused();
 
-  return <Avatar style={[styles.image, style]} uri={avatar} />;
+  useEffect(() => {
+    checkAvatar(avatar);
+    setLoading(false);
+  }, []);
+
+  useEffect(() => {
+    checkAvatar(avatar);
+  }, [avatar, isFocused]);
+
+  useEffect(() => {
+    checkAvatar(avatar);
+    if (needsUpdate) {
+      const userId = user.userId;
+      const username = user.username;
+      dispatch(resetHeaderAndProfileImage());
+      dispatch(loadUserData({userId, username}));
+    }
+  }, [dispatch, needsUpdate]);
+
+  const handleNewImage = async () => {
+    setLoading(true);
+    const result = await patchProfile('profile', user.userId);
+    setLoading(true);
+    if (result) {
+      setUpdating(true);
+      setNeedsUpdate(true);
+      setLoading(false);
+    } else {
+      setLoading(false);
+    }
+  };
+
+  const checkAvatar = async (url: string | undefined) => {
+    const valid = await validateImageLink(url);
+    if (valid !== validImage) {
+      setValidImage(valid);
+    }
+  };
+
+  return (
+    <>
+      <Avatar
+        style={[styles.image, style]}
+        uri={avatar}
+        loading={loading}
+        loadingStyle={styles.loadingLarge}
+      />
+      {editable &&
+        !validImage &&
+        userXId === undefined &&
+        !loading &&
+        !updating && (
+          <TouchableOpacity
+            accessible={true}
+            accessibilityLabel="ADD PROFILE PICTURE"
+            onPress={() => handleNewImage()}>
+            <PurplePlus style={styles.plus} />
+          </TouchableOpacity>
+        )}
+    </>
+  );
 };
 
 const styles = StyleSheet.create({
@@ -29,6 +101,19 @@ const styles = StyleSheet.create({
     height: PROFILE_DIM,
     width: PROFILE_DIM,
     borderRadius: PROFILE_DIM / 2,
+    overflow: 'hidden',
+  },
+  plus: {
+    position: 'absolute',
+    bottom: 35,
+    right: 0,
+  },
+  loadingLarge: {
+    height: PROFILE_DIM * 0.8,
+    width: PROFILE_DIM * 0.8,
+    alignSelf: 'center',
+    justifyContent: 'center',
+    aspectRatio: 2,
   },
 });