Fix lint+format frontend

fixing formatting and linting of some code. Some additional code cleaning and a bit of refactoring for example to tear apart style.ts and logic of some components.
amosproj · Jul 8, 2024 · b1d48d6 · b1d48d6
1 parent feaa850
commit b1d48d6
Show file tree

Hide file tree

Showing 14 changed files with 112 additions and 96 deletions.
diff --git a/package.json b/package.json
@@ -64,6 +64,7 @@
     "react-native-svg": "15.2.0",
     "react-native-toast-message": "^2.2.0",
     "react-native-url-polyfill": "^2.0.0",
+    "react-native-uuid": "^2.0.2",
     "react-native-vector-icons": "^10.1.0",
     "react-native-web": "~0.19.10",
     "reactfire": "^4.2.3",

diff --git a/src/backend/RAG/LangChain_Implementation/get_google_docs.py b/src/backend/RAG/LangChain_Implementation/get_google_docs.py
@@ -66,7 +66,6 @@ def download_file(file_id, credentials_path, file_name):
 
 # Example usage
 document_id = extract_document_id_from_url(
-
     'https://docs.google.com/document/d/1GtLyBqhk-cu8CSo4A15WTgGDbMbL4B9LLjdvBoU3234/edit'
 )
 # print("Document id: ", document_id)

diff --git a/src/frontend/components/ChatBubble/index.tsx b/src/frontend/components/ChatBubble/index.tsx
@@ -1,10 +1,10 @@
-import type { conversationMessage } from 'src/frontend/types';
-import { ActivityIndicator, IconButton, Button, useTheme } from 'react-native-paper';
-import { Style } from './style';
+import * as Speech from 'expo-speech';
+import React, { useState } from 'react';
 import { ScrollView, Text, TextInput, View } from 'react-native';
+import { ActivityIndicator, Button, IconButton, useTheme } from 'react-native-paper';
 import type { MD3Colors } from 'react-native-paper/lib/typescript/types';
-import React, { useState } from 'react';
-import * as Speech from 'expo-speech';
+import type { conversationMessage } from 'src/frontend/types';
+import { Style } from './style';
 
 type ChatBubbleProps = {
   message: conversationMessage;

diff --git a/src/frontend/components/Header/index.tsx b/src/frontend/components/Header/index.tsx
@@ -4,7 +4,7 @@ import * as Clipboard from 'expo-clipboard';
 import * as FileSystem from 'expo-file-system';
 import * as MediaLibrary from 'expo-media-library';
 import React, { useEffect } from 'react';
-import { Alert, Pressable, View, Platform } from 'react-native';
+import { Alert, Platform, Pressable, View } from 'react-native';
 import RNFS from 'react-native-fs';
 import { IconButton, Surface, Text, useTheme } from 'react-native-paper';
 import { useActiveChatId, useGetChat, useLLMs } from 'src/frontend/hooks';

diff --git a/src/frontend/components/PersonalInfoForm/index.tsx b/src/frontend/components/PersonalInfoForm/index.tsx
@@ -9,12 +9,9 @@ import {
   TextInput,
   Title
 } from 'react-native-paper';
-
-type UserProfile = {
-  name: string;
-  styleInstructions: string;
-  personalInstructions: string;
-};
+import uuid from 'react-native-uuid';
+import type { UserProfile } from 'src/frontend/types';
+import { Style } from './style';
 
 const PersonalInfoForm = () => {
   const [profiles, setProfiles] = useState<UserProfile[]>([]);
@@ -25,14 +22,15 @@ const PersonalInfoForm = () => {
 
   const handleSave = () => {
     const data = {
+      id: uuid.v4() as string,
       name,
       styleInstructions,
       personalInstructions
     };
 
     if (currentProfile) {
       const updatedProfiles = profiles.map((profile) =>
-        profile === currentProfile ? data : profile
+        profile.id === currentProfile.id ? data : profile
       );
       setProfiles(updatedProfiles);
     } else {
@@ -53,7 +51,7 @@ const PersonalInfoForm = () => {
   };
 
   const handleDelete = (profile: UserProfile) => {
-    const updatedProfiles = profiles.filter((p) => p !== profile);
+    const updatedProfiles = profiles.filter((p) => p.id !== profile.id);
     setProfiles(updatedProfiles);
     if (currentProfile === profile) {
       setName('');
@@ -65,16 +63,16 @@ const PersonalInfoForm = () => {
 
   return (
     <PaperProvider>
-      <SafeAreaView style={styles.container}>
+      <SafeAreaView style={Style.container}>
         <ScrollView>
-          <Card style={styles.card}>
+          <Card style={Style.card}>
             <Card.Content>
               <Title>Personal Information</Title>
               <TextInput
                 label='Name'
                 value={name}
                 onChangeText={(text) => setName(text)}
-                style={styles.input}
+                style={Style.input}
               />
               <Text variant='titleSmall'>
                 Style Instructions: How would you like the bot to respond?
@@ -84,7 +82,7 @@ const PersonalInfoForm = () => {
                 placeholder='Example: The style should be formal and detailed'
                 value={styleInstructions}
                 onChangeText={(text) => setStyleInstructions(text)}
-                style={styles.input}
+                style={Style.input}
                 numberOfLines={4}
                 maxLength={250}
                 multiline={true}
@@ -97,34 +95,34 @@ const PersonalInfoForm = () => {
                 placeholder="Example: I'm a content creator who teaches people about the newest AI tools."
                 value={personalInstructions}
                 onChangeText={(text) => setPersonalInstructions(text)}
-                style={styles.input}
+                style={Style.input}
                 numberOfLines={4}
                 maxLength={250}
                 multiline={true}
               />
-              <Button mode='contained' onPress={handleSave} style={styles.button}>
+              <Button mode='contained' onPress={handleSave} style={Style.button}>
                 {currentProfile ? 'Update' : 'Save'}
               </Button>
             </Card.Content>
           </Card>
 
-          <Card style={styles.card}>
+          <Card style={Style.card}>
             <Card.Content>
               <Title>Saved Profiles</Title>
-              {profiles.map((profile, index) => (
-                <View key={index} style={styles.profile}>
+              {profiles.map((profile) => (
+                <View key={profile.id} style={Style.profile}>
                   <Paragraph>Name: {profile.name}</Paragraph>
                   <Button
                     mode='outlined'
                     onPress={() => handleEdit(profile)}
-                    style={styles.profileButton}
+                    style={Style.profileButton}
                   >
                     Edit
                   </Button>
                   <Button
                     mode='contained'
                     onPress={() => handleDelete(profile)}
-                    style={styles.profileButton}
+                    style={Style.profileButton}
                   >
                     Delete
                   </Button>
@@ -138,34 +136,4 @@ const PersonalInfoForm = () => {
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: 16,
-    backgroundColor: '#f5f5f5'
-  },
-  card: {
-    marginBottom: 16
-  },
-  input: {
-    marginBottom: 16
-  },
-  button: {
-    marginTop: 16
-  },
-  textInput: {
-    height: 100,
-    textAlignVertical: 'top'
-  },
-  profile: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: 10
-  },
-  profileButton: {
-    marginLeft: 10
-  }
-});
-
-export default PersonalInfoForm;
+export { PersonalInfoForm };
diff --git a/src/frontend/components/PersonalInfoForm/style.ts b/src/frontend/components/PersonalInfoForm/style.ts
@@ -0,0 +1,31 @@
+import { StyleSheet } from 'react-native';
+
+export const Style = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 16,
+    backgroundColor: '#f5f5f5'
+  },
+  card: {
+    marginBottom: 16
+  },
+  input: {
+    marginBottom: 16
+  },
+  button: {
+    marginTop: 16
+  },
+  textInput: {
+    height: 100,
+    textAlignVertical: 'top'
+  },
+  profile: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 10
+  },
+  profileButton: {
+    marginLeft: 10
+  }
+});
diff --git a/src/frontend/hooks/index.ts b/src/frontend/hooks/index.ts
@@ -6,4 +6,3 @@ export * from './useLLMs';
 export * from './useActiveChatId';
 export * from './useCreateChat';
 export * from './useLLMsTypes';
-export * from './useGetLLMResponse';
diff --git a/src/frontend/routes/MainRoutes.tsx b/src/frontend/routes/MainRoutes.tsx
@@ -2,7 +2,7 @@ import { createDrawerNavigator } from '@react-navigation/drawer';
 import React from 'react';
 import { Header } from '../components';
 import { Screens } from '../helpers';
-import { ChatUI, DrawerMenu, CustomInstructions } from '../screens';
+import { ChatUI, CustomInstructions, DrawerMenu } from '../screens';
 
 export type MainDrawerParams = {
   [Screens.Chat]: { chatId: string | null };

diff --git a/src/frontend/screens/ChatUI/index.tsx b/src/frontend/screens/ChatUI/index.tsx
@@ -7,29 +7,29 @@ import { type RouteProp, useNavigation, useRoute } from '@react-navigation/nativ
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import Constants from 'expo-constants';
 import * as Speech from 'expo-speech';
+import { Timestamp } from 'firebase/firestore';
 import React from 'react';
 import { useCallback, useState } from 'react';
 import { useEffect, useRef } from 'react';
 import { ScrollView, Text, TextInput, View } from 'react-native';
 import { Keyboard } from 'react-native';
 import { Vibration } from 'react-native';
+import { ActivityIndicator, Button, IconButton } from 'react-native-paper';
+import { useTheme } from 'react-native-paper';
+import { ChatBubble } from 'src/frontend/components';
 import { Screens, getLLMResponse } from 'src/frontend/helpers';
-import type { AppRoutesParams } from 'src/frontend/routes';
-import type { MainDrawerParams } from 'src/frontend/routes/MainRoutes';
-import type { Chat, conversationMessage } from 'src/frontend/types';
 import {
-  useUpdateChat,
-  useGetChat,
+  LLM_MODELS,
   useActiveChatId,
   useCreateChat,
-  LLM_MODELS,
-  useLLMs
+  useGetChat,
+  useLLMs,
+  useUpdateChat
 } from 'src/frontend/hooks';
-import { Timestamp } from 'firebase/firestore';
-import { ActivityIndicator, IconButton, Button } from 'react-native-paper';
-import { useTheme } from 'react-native-paper';
+import type { AppRoutesParams } from 'src/frontend/routes';
+import type { MainDrawerParams } from 'src/frontend/routes/MainRoutes';
+import type { Chat, conversationMessage } from 'src/frontend/types';
 import { styles } from './style';
-import { ChatBubble } from 'src/frontend/components';
 
 export type ChatUiProps = {
   chatId: string;

diff --git a/src/frontend/screens/CustomInstructions/index.tsx b/src/frontend/screens/CustomInstructions/index.tsx
@@ -1,25 +1,14 @@
 // src/frontend/screens/CustomInstructions.tsx
 import React from 'react';
-import { View, Text, StyleSheet  } from 'react-native';
-import  PersonalInfoForm  from '../../components/PersonalInfoForm';
+import { StyleSheet, Text, View } from 'react-native';
+import { PersonalInfoForm } from '../../components/PersonalInfoForm';
+import { Style } from './style';
 
 export function CustomInstructions() {
-    return (
-      <View style={styles.container}>
-        <Text style={styles.title}>Custom Instructions</Text>
-        <PersonalInfoForm />
-      </View>
-    );
-  }
-
-  const styles = StyleSheet.create({
-    container: {
-      flex: 1,
-      padding: 16,
-    },
-    title: {
-      fontSize: 24,
-      fontWeight: 'bold',
-      marginBottom: 16,
-    },
-  });
+  return (
+    <View style={Style.container}>
+      <Text style={Style.title}>Custom Instructions</Text>
+      <PersonalInfoForm />
+    </View>
+  );
+}
diff --git a/src/frontend/screens/CustomInstructions/style.ts b/src/frontend/screens/CustomInstructions/style.ts
@@ -0,0 +1,13 @@
+import { StyleSheet } from 'react-native';
+
+export const Style = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 16
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    marginBottom: 16
+  }
+});
diff --git a/src/frontend/screens/DrawerMenu/index.tsx b/src/frontend/screens/DrawerMenu/index.tsx
@@ -6,6 +6,7 @@ import { ActivityIndicator, Button, Drawer, IconButton, Searchbar, Text } from '
 import { Style } from './style';
 
 import { GoogleSignin } from '@react-native-google-signin/google-signin';
+import type { DrawerNavigationProp } from '@react-navigation/drawer';
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { signOut } from 'firebase/auth';
 import { Timestamp } from 'firebase/firestore';
@@ -15,11 +16,8 @@ import { ChatItem } from 'src/frontend/components';
 import { Screens } from 'src/frontend/helpers';
 import { LLM_MODELS, useActiveChatId, useCreateChat, useGetAllChat } from 'src/frontend/hooks';
 import type { AppRoutesParams } from 'src/frontend/routes';
+import type { MainDrawerParams } from 'src/frontend/routes/MainRoutes';
 import type { Chat } from 'src/frontend/types';
-import { MainDrawerParams } from 'src/frontend/routes/MainRoutes';
-import { DrawerNavigationProp } from '@react-navigation/drawer';
-
-
 
 /**
  * NOTE: needs to be called DrawerMenu because Drawer is already defined in react-native-paper
@@ -35,7 +33,7 @@ export function DrawerMenu() {
   // ------------ Define navigation functions ------------
   const goToProfile = () => {
     //navigation.navigate('Profile');
-    
+
     navigate('Main', { screen: Screens.CustomInstructions });
   };
 

diff --git a/src/frontend/types/index.d.ts b/src/frontend/types/index.d.ts
@@ -21,3 +21,11 @@ export type User = {
   email: string;
   chats: Chat[];
 };
+
+export type UserProfile = {
+  // Uniquely identify profiles by id
+  id: string;
+  name: string;
+  styleInstructions: string;
+  personalInstructions: string;
+};
diff --git a/yarn.lock b/yarn.lock
@@ -3318,6 +3318,11 @@ charenc@0.0.2, charenc@~0.0.1:
   resolved "https://registry.yarnpkg.com/charenc/-/charenc-0.0.2.tgz#c0a1d2f3a7092e03774bfa83f14c0fc5790a8667"
   integrity sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA==
 
+child_process@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/child_process/-/child_process-1.0.2.tgz#b1f7e7fc73d25e7fd1d455adc94e143830182b5a"
+  integrity sha512-Wmza/JzL0SiWz7kl6MhIKT5ceIlnFPJX+lwUGj7Clhy5MMldsSoJR0+uvRzOS5Kv45Mq7t1PoE8TsOA9bzvb6g==
+
 chownr@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-2.0.0.tgz#15bfbe53d2eab4cf70f18a8cd68ebe5b3cb1dece"
@@ -6862,6 +6867,11 @@ react-native-url-polyfill@^2.0.0:
   dependencies:
     whatwg-url-without-unicode "8.0.0-3"
 
+react-native-uuid@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/react-native-uuid/-/react-native-uuid-2.0.2.tgz#3da192e342ef35ee95a7def676ab41c1256dfd66"
+  integrity sha512-5ypj/hV58P+6VREdjkW0EudSibsH3WdqDERoHKnD9syFWjF+NfRWWrJb2sa3LIwI5zpzMvUiabs+DX40WHpEMw==
+
 react-native-vector-icons@^10.1.0:
   version "10.1.0"
   resolved "https://registry.yarnpkg.com/react-native-vector-icons/-/react-native-vector-icons-10.1.0.tgz#c98a225213700177d23492e32d1dc920b9bae8aa"