almost done converting it, soon frontend will become root and everyth…

…ing outside of it will be deleted.

frontend/App.js

@@ -10,7 +10,6 @@ import _ from './config/firebaseConfig';
 import ChatScreen from './screens/Chat.js';
 import ProfileScreen from './screens/Profile.js';
 import LoginScreen from './screens/Login.js';
-import LoadingScreen from './screens/Loading.js';
 
 //User Context
 import {MainProvider} from './contexts/Main.js';
@@ -33,7 +32,7 @@ const App = () => {
     <MainProvider>
       <NavigationContainer theme={DarkTheme}>
         <Stack.Navigator 
-          initialRouteName="Loading"
+          initialRouteName="Login"
           screenOptions={{
             headerShown: false,
             // headerBackground: () => (
@@ -60,10 +59,6 @@ const App = () => {
             name="Login" 
             component={LoginScreen} 
           />
-          <Stack.Screen
-            name="Loading"
-            component={LoadingScreen}
-          />
         </Stack.Navigator>
       </NavigationContainer>
     </MainProvider>

frontend/components/AlertModal.js

@@ -1,10 +1,13 @@
 import react from 'react';
 import { View, Text, StyleSheet, Image, Modal, Pressable} from 'react-native';
 import { useTheme } from '@react-navigation/native';
+import { useMainContext } from '../contexts/Main';
 
-const AlertModal = ({visible, setVisible, message}) => {
+const AlertModal = () => {
     const { colors } = useTheme();
 
+    const { alertModalVisible: visible, setAlertModalVisible: setVisible, alertModalMessage: message } = useMainContext();
+
     const styles = StyleSheet.create({
         modalContainer: {
             flex: 1,

frontend/config/firebaseConfig.js

@@ -1,7 +1,8 @@
 // Import the functions you need from the SDKs you need
 import { initializeApp } from "firebase/app";
-import { getAuth } from "firebase/auth";
+import { getAuth, getReactNativePersistence } from "firebase/auth";
 import { getFirestore } from "firebase/firestore";
+import AsyncStorage from '@react-native-async-storage/async-storage';
 
 // For Firebase JS SDK v7.20.0 and later, measurementId is optional
 const firebaseConfig = {
@@ -16,5 +17,7 @@ const firebaseConfig = {
 
 // Initialize Firebase
 const app = initializeApp(firebaseConfig);
-const auth = getAuth(app);
+const auth = getAuth(app, {
+  persistence: getReactNativePersistence(AsyncStorage),
+});
 const db = getFirestore(app);

frontend/contexts/Main.js

@@ -4,20 +4,20 @@ import {app} from '../config/firebaseConfig';
 const MainContext = createContext();
 
 export const MainProvider = ({children}) => {
-    const [authUser, setAuthUser] = useState(null); // Firebase Auth User
     const [profile, setProfile] = useState(null); // Firestore User Profile
     const [messages, setMessages] = useState([]);
     const [token, setToken] = useState(null); 
 
-    useEffect(() => {
-        if(!authUser) {
-            setProfile(null);
-            setMessages([]);
-        }
-    }, [authUser]);
+    const [alertModalVisible, setAlertModalVisible] = useState(false);
+    const [alertModalMessage, setAlertModalMessage] = useState("");
+
+    const showAlertModal = (message) => {
+        setAlertModalMessage(message);
+        setAlertModalVisible(true);
+    };
 
     return (
-        <MainContext.Provider value={{authUser, setAuthUser, profile, setProfile, messages, setMessages, token, setToken}}>
+        <MainContext.Provider value={{profile, setProfile, messages, setMessages, token, setToken, showAlertModal, alertModalVisible, setAlertModalVisible, alertModalMessage}}>
             {children}
         </MainContext.Provider>
     )

frontend/screens/Chat.js

@@ -9,25 +9,27 @@ import TypingIndicator from "react-native-gifted-chat/lib/TypingIndicator"
 import { useTheme } from '@react-navigation/native';
 
 
-const styles = StyleSheet.create({
-    input: {
-        height: 40,
-        margin: 12,
-        borderWidth: 1,
-        padding: 10,
-    },
-    view: {
-        flex: 1,
-    }
-  });
+
 
 
 const ChatScreen = ({navigation}) => {
-    const {user, messages, setMessages, config, helpers, token} = useContext(MainContext);
+    const {} = useContext(MainContext);
     const [isTyping, setIsTyping] = useState(false);
 
     const colors = useTheme().colors;
 
+    const styles = StyleSheet.create({
+        input: {
+            height: 40,
+            margin: 12,
+            borderWidth: 1,
+            padding: 10,
+        },
+        view: {
+            flex: 1,
+        }
+      });
+
     const onSend = useCallback(async (msgs = []) => {      
         setMessages(previousMessages => GiftedChat.append(previousMessages, msgs))
         try {
@@ -64,7 +66,6 @@ const ChatScreen = ({navigation}) => {
     return (
         <View style={styles.view}>
             <SettingsButton navigation={navigation} />
-
 
             {/* This will house the ChatGPT responses + past user queries */}
             <GiftedChat

frontend/screens/Login.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { SafeAreaView, Text, TextInput, View, StyleSheet, Button, Alert, Pressable } from 'react-native'
 import { useTheme } from '@react-navigation/native';
 import AsyncStorage from '@react-native-async-storage/async-storage';
@@ -9,16 +9,14 @@ import { useMainContext } from '../contexts/Main';
 import authService from '../services/authService'; 
 import profileService from '../services/profileService';
 
-const LoginScreen = ({ navigation }) => {
-    const { setUser, setMessages, setToken } = useMainContext();
+import { getAuth, onAuthStateChanged } from "firebase/auth";
 
+const LoginScreen = ({ navigation }) => {
     const [email, onChangeEmail] = React.useState('');
     const [name, onChangeName] = React.useState('');
     const [password, onChangePassword] = React.useState('');
 
-    //TODO: Put this onto the AlertModal somehow
-    const [alertVisible, setAlertVisisble] = React.useState(false);
-    const [alertMessage, setAlertMessage] = React.useState("");
+    const { showAlertModal } = useMainContext();
 
     const {colors} = useTheme();
 
@@ -58,37 +56,41 @@ const LoginScreen = ({ navigation }) => {
         }
     });
 
-    async function loginHandler() {
+    const loginListener = onAuthStateChanged(getAuth(), async (user) => {
         try {
-            await authService.login(email, password);
             await profileService.getProfileDoc();
-            //await messageService.getMessages();
-
+            await messageService.getMessagesDoc();
             navigation.navigate('Chat');
         } catch (err) {
             console.log(err);
-            setAlertMessage(err.message);
-            setAlertVisisble(true);
+            showAlertModal(err.message);
+        }
+    });
+
+    async function loginHandler() {
+        try {
+            await authService.login(email, password);
+        } catch (err) {
+            console.log(err);
+            showAlertModal(err.message);
         }
     }
 
     async function registerHandler() {
         try {
+            loginListener(); // Remove the listener so that it doesn't fire when we register
             await authService.register(email, password, name); //Fields are validated in authService
             await profileService.setProfileDoc();
-            //await messageService.getMessages();
-
-            setAlertMessage("Success!, Please Check Your Email to Verify!");
-            setAlertVisisble(true);
+            await messageService.setMessagesDoc();
+
+            showAlertModal("Please check your email for a verification link!");
         } catch (err) {
             console.log(err);
-            setAlertMessage(err.message);
-            setAlertVisisble(true);
+            showAlertModal(err.message);
         }
     }
 
     return (
-        // Everything in one View - Can only return one thing
         <View>
             <Text style={styles.welcome}>Welcome to PT-GPT!</Text>
             <Text
@@ -131,11 +133,7 @@ const LoginScreen = ({ navigation }) => {
                     <Text style={styles.buttonText}>Register</Text>
                 </Pressable>      
             </View>
-            <AlertModal
-                visible={alertVisible}
-                setVisible={setAlertVisisble}
-                message={alertMessage}
-            ></AlertModal>
+            <AlertModal></AlertModal>
         </View>
     );
 }

frontend/screens/Profile.js

@@ -11,21 +11,22 @@ import BackButton from '../components/BackButton';
 
 import authService from "../services/authService";
 import profileService from "../services/profileService";
-import { set } from "mongoose";
 
 const unitOptions = ["Metric", "Imperial"];
 const personalityOptions = ["AI", "Cthulhu", "Dracula", "Hercules", "Mickey Mouse", "Popeye", "Robin Hood", "Sherlock", "Tarzan", "Thor", "Zorro"];
 
+
 const ProfileScreen = ({ navigation }) => {
-    const { authUser, profile } = useMainContext();
+    const { profile } = useMainContext();
 
+    const auth = getAuth();
+
     const [localProfile, setLocalProfile] = useState({});
     const [name, setName] = useState('');
     const [email, setEmail] = useState('');
     const [difference, setDifference] = useState({});
 
-    const [alertVisible, setAlertVisisble] = React.useState(false);
-    const [alertMessage, setAlertMessage] = React.useState("");
+    const {showAlertModal} = useMainContext();
 
     const colors = useTheme().colors;
 
@@ -77,26 +78,26 @@ const ProfileScreen = ({ navigation }) => {
             goals: profile.goals || '',
             personality: profile.personality || '',
         });
-        setName(authUser.name || '');
-        setEmail(authUser.email || '');
+        setName(auth.currentUser.displayName || '');
+        setEmail(auth.currentUser.email || '');
         setDifference({
             name: false,
             email: false,
             profile: false
         })
     }
-    useEffect(initializeLocalState, [profile, authUser]); // Whenever profile or authUser changes, update local state
+    useEffect(initializeLocalState, [profile]); // Whenever profile changes, update local state
 
     useEffect(() => {
         setDifference({
             ...difference,
-            name: name.localeCompare(authUser.name) != 0
+            name: name.localeCompare(auth.currentUser.displayName) != 0
         })
     }, [name]); // Whenever state changes, check if there are pending changes
     useEffect(() => {
         setDifference({
             ...difference,
-            email: email.localeCompare(authUser.email) != 0
+            email: email.localeCompare(auth.currentUser.email) != 0
         })
     }, [email]); // Whenever state changes, check if there are pending changes
     useEffect(() => {
@@ -112,14 +113,13 @@ const ProfileScreen = ({ navigation }) => {
             if(difference.email) await authService.updateEmail(email);
             if(difference.profile) await profileService.updateProfile(localProfile);          
         } catch (err) {
-            setAlertMessage(err.message);
-            setAlertVisisble(true);
+            console.log(err);
+            showAlertModal(err.message);
         }
     }
 
     async function logout(){
         await authService.signOut();
-        //await AsyncStorage.removeItem('token');
         navigation.navigate('Login');
     }
 
@@ -347,11 +347,7 @@ const ProfileScreen = ({ navigation }) => {
             </Pressable>
 
 
-            <AlertModal
-                visible={alertVisible}
-                setVisible={setAlertVisisble}
-                message={alertMessage}
-            ></AlertModal>
+            <AlertModal></AlertModal>
         </View>
     );
 }