fix: resolved service calls handling + other profile page changes

GenerateNU · Nov 30, 2023 · 75074bc · 75074bc
1 parent cbddd33
commit 75074bc
Show file tree

Hide file tree

Showing 22 changed files with 398 additions and 288 deletions.
diff --git a/client-new/src/components/filecollection/FileList.tsx b/client-new/src/components/filecollection/FileList.tsx
@@ -7,19 +7,20 @@ import {
   widthPercentageToDP as w
 } from 'react-native-responsive-screen';
 
-import FileIcon from '../icons/FileIcon';
 import FileRow from './FileRow';
 
 type FileListProps = {
   files: IFile[];
 };
 
-export default function FileList(props: FileListProps) {
+const FileList: React.FC<FileListProps> = ({ files }) => {
   return (
     <View paddingTop={h('2%')}>
-      {props.files.map((file, index) => (
+      {files?.filter((file) => file.file_name !== undefined).map((file) => (
         <FileRow key={file.id} file={file} />
       ))}
     </View>
   );
 }
+
+export default FileList;
diff --git a/client-new/src/components/filecollection/FileRow.tsx b/client-new/src/components/filecollection/FileRow.tsx
@@ -22,8 +22,8 @@ type FileRowProps = {
 const FileRow: React.FC<FileRowProps> = ({ file }) => {
   const size = ConvertFileSize(file.file_size);
   const { 0: fileName, 1: fileEnding } = file.file_name.split('.');
-  const truncatedName = fileName.length > 40 ? fileName.substring(0, 40) + '...' + fileEnding : fileName + '.' + fileEnding;
-  const date = RelativeTime(new Date(file.created_at));
+  const truncatedName = fileName.length > 40 ? fileName.substring(0, 40) + '...' : fileName + '.' + fileEnding;
+  // const date = RelativeTime(new Date(file.created_at));
 
   const handlePress = async () => {
     const url = await fetchFileURL(file.id);
@@ -45,32 +45,32 @@ const FileRow: React.FC<FileRowProps> = ({ file }) => {
 
   return (
     <Pressable onPress={() => handlePress()}>
-    <View flexDirection={'row'}>
-      <View justifyContent={'center'} paddingBottom={h('1.5%')}>
-        <FileIcon />
-      </View>
+      <View flexDirection={'row'}>
+        <View justifyContent={'center'} paddingBottom={h('1.5%')}>
+          <FileIcon key={file.id} />
+        </View>
 
-      <View
-        display={'flex'}
-        flexGrow={1}
-        marginLeft={w('5%')}
-        borderBottomColor={'#4A4A4A33'}
-        borderBottomWidth={1.25}
-        paddingBottom={h('1.5%')}
-        marginTop={h('1%')}
-      >
-        <Text style={{ width: w('60%') }}>{truncatedName}</Text>
-        <Text>1 item ∙ {size}</Text>
-        {/* <Text>Created {date.toString()}</Text> */}
-      </View>
-      <View
-        paddingRight={0}
-        justifyContent={'center'}
-        paddingBottom={h('1.5%')}
-      >
-        <ThreeDotsIcon />
+        <View
+          display={'flex'}
+          flexGrow={1}
+          marginLeft={w('5%')}
+          borderBottomColor={'#4A4A4A33'}
+          borderBottomWidth={1.25}
+          paddingBottom={h('1.5%')}
+          marginTop={h('1%')}
+        >
+          <Text style={{ width: w('60%') }}>{truncatedName}</Text>
+          <Text>1 item ∙ {size}</Text>
+          {/* <Text>Created {date.toString()}</Text> */}
+        </View>
+        <View
+          paddingRight={0}
+          justifyContent={'center'}
+          paddingBottom={h('1.5%')}
+        >
+          <ThreeDotsIcon />
+        </View>
       </View>
-    </View>
     </Pressable>
   );
 }

diff --git a/client-new/src/components/icons/FileIcon.tsx b/client-new/src/components/icons/FileIcon.tsx
@@ -17,7 +17,6 @@ const FileIcon = (props) => (
       xmlns="http://www.w3.org/2000/svg"
       width="100%"
       height="100%"
-      fill="none"
       viewBox={`0 0 ${originalWidth} ${originalHeight}`}
       {...props}
     >

diff --git a/client-new/src/components/reusable/CircleProgress.tsx b/client-new/src/components/reusable/CircleProgress.tsx
@@ -45,7 +45,7 @@ const CircleProgress = ({ progress }) => {
           strokeDashoffset={animatedValue.interpolate({
             inputRange: [0, 100],
             outputRange: [circumference, progressStrokeDashoffset],
-          })}
+          })}   
           strokeLinecap="round"
           fill="none"
           transform="rotate(-90 50 50)"

diff --git a/client-new/src/contexts/ProfileContext.tsx b/client-new/src/contexts/ProfileContext.tsx
@@ -77,6 +77,7 @@ export const ProfileProvider: React.FC<ProfileProviderProps> = ({
       console.log('[profile context] fetched profile', fetchedProfile);
       if (fetchedProfile) {
         setProfile(fetchedProfile);
+        console.log('[profile context] fetched profile completed onboarding', fetchedProfile?.completed_onboarding_response)
         setCompletedOnboarding(fetchedProfile?.completed_onboarding_response)
         await setItemAsync('profile', JSON.stringify(fetchedProfile));
         await setItemAsync('completedOnboarding', JSON.stringify(fetchedProfile?.completed_onboarding_response || false))

diff --git a/client-new/src/navigation/Router.tsx b/client-new/src/navigation/Router.tsx
@@ -5,21 +5,23 @@ import AuthStack from '@/navigation/AuthStack';
 import { NavigationContainer } from '@react-navigation/native';
 
 import React from 'react';
-import { View, Text } from 'react-native';
+import { ActivityIndicator, Text } from 'react-native';
+import { View } from 'native-base';
 
 export default function Router() {
-  const { completedOnboarding } = useProfile();
+  const { profile, completedOnboarding } = useProfile();
 
-  console.log('completedOnboarding', completedOnboarding);
-
-  if (completedOnboarding === null) {
+  if (completedOnboarding == undefined || profile == undefined) {
     return (
-      <View>
-        <Text>Loading...</Text>
+      <View flex={1} justifyContent="center" alignItems="center">
+        <ActivityIndicator size="large" />
       </View>
-    )
+    );
   }
 
+  console.log('[router] completedOnboarding profile', profile.completed_onboarding_response);
+  console.log('[router] completedOnboarding', completedOnboarding);
+
   return (
     <NavigationContainer>
       {completedOnboarding ? <AppStack /> : <AuthStack />}

diff --git a/client-new/src/screens/app/BottomTabNavigator.tsx b/client-new/src/screens/app/BottomTabNavigator.tsx
@@ -11,7 +11,6 @@ import FileCollectionScreen from './FileCollectionScreen';
 import GuideScreen from './GuideScreen';
 import HomeScreen from './HomeScreen';
 import MapScreen from './MarketplaceScreen';
-import ProfileScreen from './ProfileScreen';
 import TaskScreen from './TaskScreen';
 import ProfileStack from '@/navigation/ProfileStack';
 

diff --git a/client-new/src/screens/app/FileCollectionScreen.tsx b/client-new/src/screens/app/FileCollectionScreen.tsx
@@ -22,40 +22,12 @@ export default function FileCollectionScreen() {
   const [filter, setFilter] = useState(null);
 
   const { isPending, data: files, error, refetch } = useQuery({
-    queryKey: ['userFiles', user?.id, filter],
+    queryKey: ['userfiles', user?.id, filter],
     queryFn: () => fetchUserFilesList(user.id, filter),
     // staleTime: 60000 // TEMP, unsolved refetch when unncessary
   });
   console.log('Query Key:', ['userFiles', user?.id, filter]);
 
-  if (isPending) {
-    return (
-      < View
-        flex={1}
-        justifyContent={'center'}
-        alignItems={'center'}
-        bg={'#FFF9EE'}
-      >
-        <ActivityIndicator size="large" />
-      </View>
-
-    );
-  }
-
-  if (error) {
-    return (
-      < View
-        flex={1}
-        justifyContent={'center'}
-        alignItems={'center'}
-        bg={'#FFF9EE'}
-      >
-        <Text>Error!</Text>
-        <Text>{error.message}</Text>
-      </View>
-    );
-  }
-
 
   return (
     <SafeAreaView style={{ flex: 1, backgroundColor: '#FFF9EE' }}>
@@ -86,9 +58,10 @@ export default function FileCollectionScreen() {
               tintColor={'#ff0000'}
             />
           }>
-          <FileList
-            files={files}
-          />
+          {isPending && <ActivityIndicator style={{ marginTop: 50 }} />}
+          {error && <Text>Error: {error.message}</Text>}
+          {files && files.length === 0 && <Text>No files found</Text>}
+          {files && <FileList files={files} />}
         </ScrollView>
       </ScreenBody>
     </SafeAreaView>

diff --git a/client-new/src/screens/app/HomeScreen.tsx b/client-new/src/screens/app/HomeScreen.tsx
@@ -49,11 +49,7 @@ export default function HomeScreen({ navigation }) {
             tintColor={'#ff0000'}
           />
         }
-        >
-          <Button onPress={() => {
-            logout();
-            setCompletedOnboarding(false);
-          }}>Logout</Button>
+      >
           <View w={'95%'} flexDir={'column'} justifyContent={'space-between'}>
             <LegacyWordmark />
             <View>

diff --git a/client-new/src/screens/app/ProfileScreen.tsx b/client-new/src/screens/app/ProfileScreen.tsx
diff --git a/client-new/src/screens/app/profile/AllPersonasScreen.tsx b/client-new/src/screens/app/profile/AllPersonasScreen.tsx
@@ -1,6 +1,6 @@
-import {View, Text} from "native-base";
+import { View, Text, ScrollView } from "native-base";
 import {SafeAreaView} from "react-native-safe-area-context";
-import {Pressable} from "react-native";
+import { ActivityIndicator, Pressable } from "react-native";
 import Svg, {Path} from "react-native-svg";
 import {useEffect, useState} from "react";
 import { IPersona } from "@/interfaces/IPersona";
@@ -12,15 +12,14 @@ import {
 } from "react-native-responsive-screen";
 import React from "react";
 import LegacyWordmarkWithBackArrow from "@/components/reusable/LegacyWordMarkWithBackArrow";
+import { useQuery } from "@tanstack/react-query";
 
 /**
  * Screen to render all personas
  * @param route and navigation are props passed in by the react navigation stack
  * @returns All Peronas Screen
  */
-export default function AllPersonasScreen({route, navigation}) {
-  const [personas, setPersonas] = useState<IPersona[]>([]);
-
+export default function AllPersonasScreen({ route, navigation }) {
   /**
    * Sends user to the persona screen. Must pass in title and description of the persona.
    * @param title Title of persona
@@ -36,58 +35,50 @@ export default function AllPersonasScreen({route, navigation}) {
    * Fetch all data for this screen:
    * - All personas
    */
-  const fetchData = async () => {
-    try {
-      const personasData = await getAllPersonas();
-      setPersonas(personasData);
-    } catch (error) {
-      console.log(error);
-    }
-  };
+  const { isPending, data: personas, error } = useQuery({
+    queryKey: ["allPersonas"],
+    queryFn: async () => await getAllPersonas(),
+  });
 
-  /**
-   * Load in all personas on first render
-   */
-  useEffect(() => {
-    fetchData();
-  }, []);
 
   return (
     <SafeAreaView
       style={{alignItems: "center", flex: 1, backgroundColor: "#FFFAF2"}}
     >
-      <View width={340} marginTop={50} height={"auto"}>
-        <LegacyWordmarkWithBackArrow
-          handleOnPress={() => navigation.navigate("My Persona Screen")}
-        />
-        <Text
-          style={{
-            color: "#252525",
-            fontFamily: "Open Sans",
-            fontSize: 15,
-            fontWeight: "700",
-            lineHeight: 20,
-            marginTop: 18,
-            marginBottom: 16,
-          }}
-        >
-          All Personas
-        </Text>
-        {personas.map((value, index) => (
-          <View marginBottom={h("1")} key={index}>
-            <PersonaCard
-              title={value.persona_title}
-              subtitle={value.persona_description}
-              image='https://i.postimg.cc/44Qn7BWC/temp-Image-KY7-Maq.jpg'
-              border={true}
-              backgroundColor='white'
-              handleOnPress={() =>
-                toPersona(value.persona_title, value.persona_description)
-              }
-            />
-          </View>
-        ))}
-      </View>
+      <ScrollView showsVerticalScrollIndicator={false}>
+        <View width={340} marginTop={50} height={"auto"}>
+          <LegacyWordmarkWithBackArrow handleOnPress={() => navigation.navigate("My Persona Screen")} />
+          <Text
+            style={{
+              color: "#252525",
+              fontFamily: "Open Sans",
+              fontSize: 15,
+              fontWeight: "700",
+              lineHeight: 20,
+              marginTop: 18,
+              marginBottom: 16,
+            }}
+          >
+            All Personas
+          </Text>
+          {isPending && <ActivityIndicator style={{ marginTop: 50 }} />}
+          {error && <Text>Something went wrong ...</Text>}
+          {personas?.map((value, index) => (
+            <View marginBottom={h("1")} key={index}>
+              <PersonaCard
+                title={value.persona_title}
+                subtitle={'Lorem ipsum dolor sit amet'}
+                image='https://i.postimg.cc/44Qn7BWC/temp-Image-KY7-Maq.jpg'
+                border={true}
+                backgroundColor='white'
+                handleOnPress={() =>
+                  toPersona(value.persona_title, value.persona_description)
+                }
+              />
+            </View>
+          ))}
+        </View>
+      </ScrollView>
     </SafeAreaView>
   );
 }