[TMA - 426] Fix recent search + Add refresh control (#138)

* Got rid of small lint errors before start

* Final push

* Final

* disable scroll first try / logic

* small change

* Try to make the cover photo consistent with different screen sizes

* Final change

* added RefreshControl

* removed scale effect

* Fix misorientation of cover

* remove more scale stuff

* fix userIDs for different views

* Mend refresh control

* white bg

Co-authored-by: hsalhab <husam_salhab@brown.edu>

1 files changed, 60 insertions, 7 deletions

diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index 73f6fad3..f2e0db0a 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -1,5 +1,12 @@
-import React, {useCallback, useEffect, useState, useContext} from 'react';
-import {LayoutChangeEvent, StyleSheet, View} from 'react-native';
+import React, {useCallback, useEffect, useState} from 'react';
+import {
+  LayoutChangeEvent,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  RefreshControl,
+  StyleSheet,
+  View,
+} from 'react-native';
 import Animated from 'react-native-reanimated';
 import {
   MomentType,
@@ -8,8 +15,8 @@ import {
   ScreenType,
   UserType,
 } from '../../types';
-import {defaultMoments} from '../../constants';
-import {SCREEN_HEIGHT} from '../../utils';
+import {COVER_HEIGHT, defaultMoments} from '../../constants';
+import {fetchUserX, SCREEN_HEIGHT, userLogin} from '../../utils';
 import TaggsBar from '../taggs/TaggsBar';
 import {Moment} from '../moments';
 import ProfileBody from './ProfileBody';
@@ -29,10 +36,12 @@ import {
   EMPTY_PROFILE_PREVIEW_LIST,
   EMPTY_MOMENTS_LIST,
 } from '../../store/initialStates';
+import {Cover} from '.';
+import {Background} from '../onboarding';
 
 interface ContentProps {
   y: Animated.Value<number>;
-  userXId: string;
+  userXId: string | undefined;
   screenType: ScreenType;
 }
 
@@ -68,6 +77,22 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
   const [isFollowed, setIsFollowed] = useState<boolean>(false);
   const [isBlocked, setIsBlocked] = useState<boolean>(false);
   const [profileBodyHeight, setProfileBodyHeight] = useState(0);
+  const [shouldBounce, setShouldBounce] = useState<boolean>(true);
+  const [refreshing, setRefreshing] = useState<boolean>(false);
+
+  const onRefresh = useCallback(() => {
+    const refrestState = async () => {
+      if (!userXId) {
+        await userLogin(dispatch, loggedInUser);
+      } else {
+        await fetchUserX(dispatch, user, screenType);
+      }
+    };
+    setRefreshing(true);
+    refrestState().then(() => {
+      setRefreshing(false);
+    });
+  }, []);
 
   /**
    * If own profile is being viewed then do not show the follow button.
@@ -169,12 +194,35 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
     await dispatch(updateUserXFollowersAndFollowing(user.userId, state));
   };
 
+  const handleScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+    /**
+     * Set the new y position
+     */
+    const newY = e.nativeEvent.contentOffset.y;
+    y.setValue(newY);
+
+    /**
+     * Do not allow overflow of scroll on bottom of the screen
+     * SCREEN_HEIGHT - COVER_HEIGHT = Height of the scroll view
+     */
+    if (newY >= SCREEN_HEIGHT - COVER_HEIGHT) {
+      setShouldBounce(false);
+    } else if (newY === 0) {
+      setShouldBounce(true);
+    }
+  };
+
   return (
     <Animated.ScrollView
       style={styles.container}
-      onScroll={(e) => y.setValue(e.nativeEvent.contentOffset.y)}
+      onScroll={(e) => handleScroll(e)}
+      bounces={shouldBounce}
       showsVerticalScrollIndicator={false}
-      scrollEventThrottle={1}>
+      scrollEventThrottle={1}
+      refreshControl={
+        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+      }>
+      <Cover {...{userXId, screenType}} />
       <ProfileCutout />
       <ProfileHeader {...{userXId, screenType}} />
       <ProfileBody
@@ -206,6 +254,11 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
 };
 
 const styles = StyleSheet.create({
+  refreshControlContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
   container: {
     flex: 1,
   },