From d18577743144540da5603a0a55a71e7a72633451 Mon Sep 17 00:00:00 2001
From: Ore Ogundipe <oreogundipe@gmail.com>
Date: Wed, 2 Aug 2023 08:56:01 +0100
Subject: [PATCH] feat: delay home tab until next release & move everything to
 insights page

---
 .../prompts/headers/insights-header.tsx       |   2 +-
 .../sheets/prompt-options-sheet.tsx           |   2 +-
 .../src/navigation/insights-navigator.tsx     |   4 +-
 fusionMobile/src/navigation/tab-navigator.tsx |  11 +-
 fusionMobile/src/pages/home.tsx               | 169 +-----------------
 fusionMobile/src/pages/insights.tsx           | 144 ++++++++++++++-
 6 files changed, 149 insertions(+), 183 deletions(-)

diff --git a/fusionMobile/src/components/prompts/headers/insights-header.tsx b/fusionMobile/src/components/prompts/headers/insights-header.tsx
index 2dea5237..c8c18154 100644
--- a/fusionMobile/src/components/prompts/headers/insights-header.tsx
+++ b/fusionMobile/src/components/prompts/headers/insights-header.tsx
@@ -8,7 +8,7 @@ export const InsightsHeader = () => {
   return (
     <View className="flex flex-row p-5 justify-between flex-nowrap bg-dark">
       <View className="flex flex-row">
-        <Text className="font-sans-bold text-[26px] text-white">Monthly</Text>
+        <Text className="font-sans-bold text-[26px] text-white">Weekly</Text>
         <Button
           variant="ghost"
           size="icon"
diff --git a/fusionMobile/src/components/prompts/prompt-details/sheets/prompt-options-sheet.tsx b/fusionMobile/src/components/prompts/prompt-details/sheets/prompt-options-sheet.tsx
index 3ed443e2..8518c0d8 100644
--- a/fusionMobile/src/components/prompts/prompt-details/sheets/prompt-options-sheet.tsx
+++ b/fusionMobile/src/components/prompts/prompt-details/sheets/prompt-options-sheet.tsx
@@ -124,7 +124,7 @@ export const PromptOptionsSheet: FC<PromptOptionsSheetProps> = ({
       },
     },
     {
-      option: "View Responses",
+      option: "View Insights",
       icon: <FontAwesome5 name="history" size={18} color="white" />,
       onPress: () => {
         onBottomSheetClose?.();
diff --git a/fusionMobile/src/navigation/insights-navigator.tsx b/fusionMobile/src/navigation/insights-navigator.tsx
index 99dfd30a..5f77a960 100644
--- a/fusionMobile/src/navigation/insights-navigator.tsx
+++ b/fusionMobile/src/navigation/insights-navigator.tsx
@@ -7,7 +7,9 @@ import { InsightsHeader } from "~/components";
 import { InsightsScreen } from "~/pages/insights";
 
 export type InsightsStackParamList = {
-  InsightsPage: undefined;
+  InsightsPage: {
+    promptUuid: string | null;
+  };
 };
 
 export type InsightsScreenNavigationProp =
diff --git a/fusionMobile/src/navigation/tab-navigator.tsx b/fusionMobile/src/navigation/tab-navigator.tsx
index 64669392..416aec8b 100644
--- a/fusionMobile/src/navigation/tab-navigator.tsx
+++ b/fusionMobile/src/navigation/tab-navigator.tsx
@@ -8,7 +8,6 @@ import { ComponentType } from "react";
 import type { SvgProps } from "react-native-svg";
 
 import { AccountStack } from "./account-navigator";
-import { HomeStack } from "./home-navigator";
 import { InsightsStack } from "./insights-navigator";
 import { PromptStack } from "./prompt-navigator";
 
@@ -54,11 +53,11 @@ export type TabList<T extends keyof TabParamList> = {
 };
 
 const tabs: TabType[] = [
-  {
-    name: "Home",
-    component: HomeStack,
-    label: "Home",
-  },
+  // {
+  //   name: "Home",
+  //   component: HomeStack,
+  //   label: "Home",
+  // },
   {
     name: "PromptNavigator",
     component: PromptStack,
diff --git a/fusionMobile/src/pages/home.tsx b/fusionMobile/src/pages/home.tsx
index a28e6cd3..e46c0845 100644
--- a/fusionMobile/src/pages/home.tsx
+++ b/fusionMobile/src/pages/home.tsx
@@ -1,15 +1,7 @@
 import { useNavigation } from "@react-navigation/native";
-import dayjs from "dayjs";
 import React from "react";
-import { View, Text } from "react-native";
-import { PanGestureHandler, State } from "react-native-gesture-handler";
+import { View } from "react-native";
 
-import { Button, ChevronLeft, ChevronRight, Screen } from "../components";
-
-import { Prompt, PromptResponse } from "~/@types";
-import { ChartContainer } from "~/components/charts/chart-container";
-import { usePromptsQuery } from "~/hooks/usePrompts";
-import { promptService } from "~/services";
 import { appInsights } from "~/utils";
 
 export function HomeScreen() {
@@ -22,91 +14,9 @@ export function HomeScreen() {
     });
   }, []);
 
-  const { data: savedPrompts, isLoading } = usePromptsQuery();
-
-  const [activeChartPrompt, setActiveChartPrompt] = React.useState<
-    Prompt | undefined
-  >();
-  const [activeChartPromptResponses, setActiveChartPromptResponses] =
-    React.useState<PromptResponse[]>([]);
-
-  const [chartStartDate, setChartStartDate] = React.useState<dayjs.Dayjs>(
-    dayjs().startOf("week")
-  );
-  React.useEffect(() => {
-    if (savedPrompts && savedPrompts.length > 0) {
-      setActiveChartPrompt(savedPrompts[0]);
-    }
-    // TODO: order the saved prompts by moving inactive prompts to the end
-  }, [isLoading]);
-
-  React.useEffect(() => {
-    if (activeChartPrompt) {
-      console.log("activeChartPrompt", activeChartPrompt);
-      (async () => {
-        const res = await promptService.getPromptResponses(
-          activeChartPrompt.uuid
-        );
-
-        // sort events
-        res.sort((a, b) => {
-          return a.triggerTimestamp - b.triggerTimestamp;
-        });
-
-        setActiveChartPromptResponses(res);
-      })();
-    }
-  }, [activeChartPrompt]);
-
-  const onHandlerStateChange = (event: {
-    nativeEvent: { state: number; translationX: number };
-  }) => {
-    if (
-      event.nativeEvent.state === State.END &&
-      event.nativeEvent.translationX < -50
-    ) {
-      // Check if the swipe is left (translationX is less than -50)
-      if (
-        chartStartDate.startOf("week").unix() === dayjs().startOf("week").unix()
-      ) {
-        return;
-      }
-      setChartStartDate(chartStartDate.add(1, "week"));
-    } else if (
-      event.nativeEvent.state === State.END &&
-      event.nativeEvent.translationX > 50
-    ) {
-      // Check if the swipe is right (translationX is greater than 50)
-      setChartStartDate(chartStartDate.subtract(1, "week"));
-    }
-  };
-
-  const panActiveChartPrompt = (direction: "left" | "right") => {
-    if (savedPrompts && savedPrompts.length > 0) {
-      const currentIndex = savedPrompts.findIndex(
-        (prompt) => prompt.uuid === activeChartPrompt?.uuid
-      );
-
-      if (direction === "left") {
-        if (currentIndex === 0) {
-          setActiveChartPrompt(savedPrompts[savedPrompts.length - 1]);
-        } else {
-          setActiveChartPrompt(savedPrompts[currentIndex - 1]);
-        }
-      } else {
-        if (currentIndex === savedPrompts.length - 1) {
-          setActiveChartPrompt(savedPrompts[0]);
-        } else {
-          setActiveChartPrompt(savedPrompts[currentIndex + 1]);
-        }
-      }
-    }
-  };
-
   return (
-    <Screen>
-      <View>
-        {/* <>
+    <View>
+      {/* <>
           <View className="flex flex-row w-full justify-between p-5">
             <Text className="text-base font-sans-bold text-white">
               Your health data
@@ -121,77 +31,6 @@ export function HomeScreen() {
             size="md"
           />
         </> */}
-        <>
-          <View className="flex flex-row w-full justify-between p-5">
-            <Text className="text-base font-sans-bold text-white">
-              {chartStartDate.format("MMM D") +
-                " - " +
-                chartStartDate.add(1, "week").format("MMM D")}
-            </Text>
-
-            {chartStartDate < dayjs().startOf("week") ? (
-              <Text
-                className="text-base font-sans text-[#A7ED58]"
-                onPress={() => setChartStartDate(dayjs().startOf("week"))}
-              >
-                View current week
-              </Text>
-            ) : (
-              <Text
-                className="text-base font-sans text-[#A7ED58]"
-                onPress={() => console.log("view all stats")}
-              >
-                View all stats
-              </Text>
-            )}
-          </View>
-          {/* select the first available prompt */}
-          {savedPrompts && savedPrompts.length > 0 && (
-            <View className="flex flex-col w-full bg-secondary-900">
-              <View className="flex flex-row w-full h-auto justify-between p-3 border-b-2 border-tint rounded-t">
-                {/* this is where the header of the chart is */}
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  leftIcon={<ChevronLeft />}
-                  onPress={() => panActiveChartPrompt("left")}
-                />
-
-                <Text className="font-sans text-base text-white text-[20px] ml-2 w-[80%] text-center">
-                  {activeChartPrompt?.promptText}
-                </Text>
-
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  leftIcon={<ChevronRight />}
-                  onPress={() => panActiveChartPrompt("right")}
-                />
-              </View>
-
-              <PanGestureHandler onHandlerStateChange={onHandlerStateChange}>
-                <View>
-                  {/* this is where the chart is */}
-                  {activeChartPrompt && (
-                    <ChartContainer
-                      prompt={activeChartPrompt}
-                      startDate={chartStartDate}
-                      timePeriod="week"
-                    />
-                  )}
-                </View>
-              </PanGestureHandler>
-            </View>
-          )}
-        </>
-
-        <Button
-          title="Use Fusion Copilot"
-          onPress={() => console.log("connect to apple health")}
-          className="w-full p-5 mt-10"
-          size="md"
-        />
-      </View>
-    </Screen>
+    </View>
   );
 }
diff --git a/fusionMobile/src/pages/insights.tsx b/fusionMobile/src/pages/insights.tsx
index 10aa6aca..cbf7864f 100644
--- a/fusionMobile/src/pages/insights.tsx
+++ b/fusionMobile/src/pages/insights.tsx
@@ -1,11 +1,22 @@
 import { useNavigation } from "@react-navigation/native";
-import React from "react";
-import { View, Text, Image } from "react-native";
-
-import { Screen } from "../components";
+import dayjs from "dayjs";
+import React, { useEffect } from "react";
+import { View, Text } from "react-native";
+import {
+  State,
+  PanGestureHandler,
+  ScrollView,
+} from "react-native-gesture-handler";
 
+import { Prompt } from "~/@types";
+import { Screen, ChartContainer, Select } from "~/components";
+import { usePromptsQuery } from "~/hooks";
 import { appInsights } from "~/utils";
 
+export interface InsightsScreenProps {
+  activePrompt: Prompt;
+}
+
 export function InsightsScreen() {
   const navigation = useNavigation();
 
@@ -16,13 +27,128 @@ export function InsightsScreen() {
     });
   }, []);
 
+  const { data: savedPrompts, isLoading } = usePromptsQuery();
+
+  const [activeChartPrompt, setActiveChartPrompt] = React.useState<
+    Prompt | undefined
+  >();
+
+  const [chartStartDate, setChartStartDate] = React.useState<dayjs.Dayjs>(
+    dayjs().startOf("week")
+  );
+
+  const [selectedPromptUuid, setSelectedPromptUuid] =
+    React.useState<string>(null);
+
+  React.useEffect(() => {
+    if (savedPrompts && savedPrompts.length > 0) {
+      setSelectedPromptUuid(savedPrompts[0].uuid);
+    }
+  }, [isLoading]);
+  const handleActivePromptSelect = (promptUuid: string) => {
+    const prompt = savedPrompts?.find((p) => p.uuid === promptUuid);
+    setActiveChartPrompt(prompt);
+  };
+
+  useEffect(() => {
+    if (selectedPromptUuid) {
+      handleActivePromptSelect(selectedPromptUuid);
+    }
+  }, [selectedPromptUuid]);
+
+  const onHandlerStateChange = (event: {
+    nativeEvent: { state: number; translationX: number };
+  }) => {
+    if (
+      event.nativeEvent.state === State.END &&
+      event.nativeEvent.translationX < -50
+    ) {
+      // Check if the swipe is left (translationX is less than -50)
+      if (
+        chartStartDate.startOf("week").unix() === dayjs().startOf("week").unix()
+      ) {
+        return;
+      }
+      setChartStartDate(chartStartDate.add(1, "week"));
+    } else if (
+      event.nativeEvent.state === State.END &&
+      event.nativeEvent.translationX > 50
+    ) {
+      // Check if the swipe is right (translationX is greater than 50)
+      setChartStartDate(chartStartDate.subtract(1, "week"));
+    }
+  };
+
   return (
     <Screen>
-      <View className="flex flex-1 flex-col gap-7 items-center justify-center">
-        <Image source={require("../../assets/pie-chart.png")} />
-        <Text className="font-sans-light max-w-xs text-center text-white text-base">
-          Hello there, looks like you haven’t logged enough data to track
-        </Text>
+      <View className="flex-1">
+        <ScrollView nestedScrollEnabled>
+          <>
+            <View className="flex flex-row w-full justify-between p-5">
+              <Text className="text-base font-sans-bold text-white">
+                {chartStartDate.format("MMM D") +
+                  " - " +
+                  chartStartDate.add(1, "week").format("MMM D")}
+              </Text>
+
+              {chartStartDate < dayjs().startOf("week") ? (
+                <Text
+                  className="text-base font-sans text-[#A7ED58]"
+                  onPress={() => setChartStartDate(dayjs().startOf("week"))}
+                >
+                  View current week
+                </Text>
+              ) : (
+                <Text
+                  className="text-base font-sans text-[#A7ED58]"
+                  onPress={() => console.log("view all stats")}
+                >
+                  View all stats
+                </Text>
+              )}
+            </View>
+
+            {/* select the first available prompt */}
+            {savedPrompts && savedPrompts.length > 0 && (
+              <View className="flex flex-col w-full bg-secondary-900">
+                <View className="flex flex-row w-full h-auto justify-between p-3 border-b-2 border-tint rounded-t">
+                  <Select
+                    items={savedPrompts.map((prompt) => ({
+                      label: prompt.promptText,
+                      value: prompt.uuid,
+                    }))}
+                    value={selectedPromptUuid}
+                    placeholder="Select prompt"
+                    setValue={setSelectedPromptUuid}
+                    dropDownDirection="BOTTOM"
+                    listMode="SCROLLVIEW"
+                    scrollViewProps={{
+                      nestedScrollEnabled: true,
+                      indicatorStyle: "white",
+                    }}
+                  />
+                </View>
+
+                <View className="-z-30">
+                  <PanGestureHandler
+                    onHandlerStateChange={onHandlerStateChange}
+                  >
+                    <View>
+                      {/* this is where the chart is */}
+                      {activeChartPrompt && (
+                        <ChartContainer
+                          prompt={activeChartPrompt}
+                          startDate={chartStartDate}
+                          timePeriod="week"
+                        />
+                      )}
+                    </View>
+                  </PanGestureHandler>
+                </View>
+              </View>
+            )}
+          </>
+        </ScrollView>
       </View>
     </Screen>
   );