From f524d22cab019a799997422e1aa2f6ea595f261d Mon Sep 17 00:00:00 2001
From: Kirstie <39728053+epixieme@users.noreply.github.com>
Date: Tue, 9 Apr 2024 19:36:23 +0100
Subject: [PATCH 1/2] committing package.lock

---
 package-lock.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ba43ddc5..7da4d762 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6175,13 +6175,13 @@
       "version": "15.7.12",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
       "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/@types/react": {
       "version": "18.2.73",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.73.tgz",
       "integrity": "sha512-XcGdod0Jjv84HOC7N5ziY3x+qL0AfmubvKOZ9hJjJ2yd5EE+KYjWhdOjt387e9HPheHkdggF9atTifMRtyAaRA==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -7437,7 +7437,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/dag-map": {
       "version": "1.0.2",

From 413ec4ee90ffb8bbfae42c57b21086c636a9e1d7 Mon Sep 17 00:00:00 2001
From: Kirstie <39728053+epixieme@users.noreply.github.com>
Date: Fri, 12 Apr 2024 09:45:57 +0100
Subject: [PATCH 2/2] Pushing onScroll solution for fading out the tooltip

---
 .../ClimateFeedScreen.tsx                     | 29 ++++++++++++++-----
 src/shared/hooks/useCmTooltip.tsx             |  1 +
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/screens/UserAAuthorizedScreens/ClimateFeedScreen.tsx b/src/screens/UserAAuthorizedScreens/ClimateFeedScreen.tsx
index 92906662..3f47c0b6 100644
--- a/src/screens/UserAAuthorizedScreens/ClimateFeedScreen.tsx
+++ b/src/screens/UserAAuthorizedScreens/ClimateFeedScreen.tsx
@@ -1,5 +1,5 @@
-import { useEffect, useState } from 'react';
-import { ActivityIndicator, FlatList, StyleSheet, View } from 'react-native';
+import { useEffect, useRef, useState } from 'react';
+import { ActivityIndicator, Animated, Dimensions, FlatList, StyleSheet, View } from 'react-native';
 
 import { NativeStackScreenProps } from '@react-navigation/native-stack';
 import { ClimateFeedStackParams } from 'src/navigation/Stacks/ClimateFeedStack';
@@ -9,6 +9,7 @@ import ClimateEffect from 'src/types/ClimateEffect';
 import { CmTypography, Screen, Content, Section } from '@shared/components';
 import { ClimateFeedCard } from '@features/climate-feed/components';
 import { useAppSelector } from 'src/store/hooks';
+import { useCmTooltip } from 'src/shared/hooks';
 
 type Props = NativeStackScreenProps<ClimateFeedStackParams, 'ClimateFeedScreen'>;
 
@@ -16,6 +17,18 @@ function ClimateFeedScreen({ navigation }: Props) {
   const apiClient = useApiClient();
   const sessionId = useAppSelector((state) => state.auth.sessionId);
   const [climateFeed, setClimateFeed] = useState<ClimateEffect[]>();
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+  const { fadeOut } = useCmTooltip(fadeAnim);
+
+  const handleScroll = (event: { nativeEvent: { contentOffset: { y: number } } }) => {
+    // Set the threshold for scrolling
+    const threshold = Dimensions.get('window').height;
+    // Check if the user has scrolled beyond the threshold
+    if (event.nativeEvent.contentOffset.y > threshold) {
+      // Fade out the tooltip
+      fadeOut();
+    }
+  };
 
   function gotoDetailsScreen(climateEffect: ClimateEffect) {
     navigation.navigate('ClimateDetailsScreen', { climateEffect });
@@ -26,7 +39,7 @@ function ClimateFeedScreen({ navigation }: Props) {
   }, [sessionId]);
 
   if (climateFeed === undefined) {
-    return <ActivityIndicator size='large' color='black' style={{ marginTop: 100 }} />;
+    return <ActivityIndicator size="large" color="black" style={{ marginTop: 100 }} />;
   }
 
   return (
@@ -34,12 +47,14 @@ function ClimateFeedScreen({ navigation }: Props) {
       <Section style={{ paddingVertical: 0 }}>
         <Content style={{ alignItems: 'stretch' }}>
           <FlatList
+            onScroll={handleScroll}
             ListHeaderComponent={
               <>
-                <CmTypography variant='h1' style={styles.heading}>Explore climate change impacts</CmTypography>
-                <CmTypography variant='body' style={styles.text}>
-                  This is your personalized homepage based on your unique climate personality. Check out
-                  these articles to stay informed!
+                <CmTypography variant="h1" style={styles.heading}>
+                  Explore climate change impacts
+                </CmTypography>
+                <CmTypography variant="body" style={styles.text}>
+                  This is your personalized homepage based on your unique climate personality. Check out these articles to stay informed!
                 </CmTypography>
               </>
             }
diff --git a/src/shared/hooks/useCmTooltip.tsx b/src/shared/hooks/useCmTooltip.tsx
index e2ed9eed..b778f397 100644
--- a/src/shared/hooks/useCmTooltip.tsx
+++ b/src/shared/hooks/useCmTooltip.tsx
@@ -40,6 +40,7 @@ function useCmTooltip(fadeAnim: Animated.Value | Animated.ValueXY) {
     activeTooltipIndex,
     toggleTooltip,
     handleCardPress,
+    fadeOut,
   };
 }