User Context and User Type created and wrapped chat screen

client/src/app/(home)/_layout.tsx

@@ -3,20 +3,23 @@ import { Stack } from "expo-router";
 import { SettingsProvider } from "../../contexts/SettingsContext";
 import { SocketProvider } from "../../contexts/SocketContext";
 import { LocationProvider } from "../../contexts/LocationContext";
+import { UserProvider } from "../../contexts/UserContext";
 
 const AuthLayout = () => {
   return (
     <LocationProvider>
       <SocketProvider>
-        <SettingsProvider>
-          <Stack
-            screenOptions={{
-              headerShown: false,
-            }}
-          >
-            <Stack.Screen name="chatchannel" options={{}} />
-          </Stack>
-        </SettingsProvider>
+        <UserProvider>
+          <SettingsProvider>
+            <Stack
+              screenOptions={{
+                headerShown: false,
+              }}
+            >
+              <Stack.Screen name="chatchannel" options={{}} />
+            </Stack>
+          </SettingsProvider>
+        </UserProvider>
       </SocketProvider>
     </LocationProvider>
   );

client/src/components/Chat/ChatScreen.tsx

@@ -14,15 +14,15 @@ import {
 import { ChatInput } from "../Common/CustomInputs";
 import { ChatSendButton } from "../Common/CustomButtons";
 import MessageChannel from "../Common/MessageChannel";
-import { LinearGradient } from "expo-linear-gradient";
 import * as Crypto from "expo-crypto";
 import { generateName } from "../../utils/scripts";
-import { useSettings } from "../../contexts/SettingsContext";
 import { SignOutButton } from "../Common/AuthButtons"
 import { MessageType } from "../../types/Message";
 import { LocationProvider } from "../../contexts/LocationContext";
 import { useSocket } from "../../contexts/SocketContext";
+import { useSettings } from "../../contexts/SettingsContext";
 import { useLocation } from "../../contexts/LocationContext";
+import { useUser } from "../../contexts/UserContext"; // imported for when it needs to be used
 import { AuthStore } from "../../services/store";
 
 const ChatScreen = () => {
@@ -32,8 +32,10 @@ const ChatScreen = () => {
   const keyboardBehavior = Platform.OS === "ios" ? "padding" : undefined;
   const socket = useSocket();
   const location = useLocation();
-  const { user } = AuthStore.useState();
-
+  const user = useUser();  
+  const userAuth = AuthStore.useState()
+  // Note: To prevent complexity, all user information is grabbed from different contexts and services. If we wanted most information inside of UserContext, we would have to import contexts within contexts and have state change as certain things mount, which could cause errors that are difficult to pinpoint.
+
   // Message loading and sending logic
   const [messages, setMessages] = React.useState<MessageType[]>([]);
   const [messageContent, setMessageContent] = React.useState<string>("");
@@ -54,7 +56,9 @@ const ChatScreen = () => {
   const onHandleSubmit = () => {
     if (messageContent.trim() !== "") {
       const newMessage: MessageType = {
-        uid: String(user?.uid), 
+        author: {
+          uid: String(userAuth.userAuthInfo?.uid), 
+        },
         msgId: Crypto.randomUUID(), 
         msgContent: messageContent.trim(),
         timeSent: Date.now(),

client/src/components/Common/MessageChannel.tsx

@@ -20,7 +20,7 @@ const MessageChannel: React.FC<MessageChannelProps> = ({ messages }) => {
         renderItem={({ item }) => (
           <Message
             messageContent={item.msgContent}
-            author={item.uid} // TODO: call server to get author name from UID. Or should this stored with MessageType?
+            author={item.author.uid} 
             time={item.timeSent}
           />
         )}

client/src/contexts/SettingsContext.tsx

@@ -36,9 +36,6 @@ export const SettingsProvider = ({
   children: React.ReactNode;
 }) => {
   const [theme, setTheme] = useState("light");
-  const [displayName, setDisplayName] = useState("");
-  const [foregroundPfpImage, setForegroundPfpImage] = useState("");
-  const [backgroundPfpImage, setBackgroundPfpImage] = useState("");
 
   // Initial settings load
   useEffect(() => {

client/src/contexts/SocketContext.tsx

@@ -1,6 +1,5 @@
 import React, { createContext, useContext, useEffect, useState } from "react";
 import { io, Socket } from "socket.io-client";
-import * as Network from "expo-network";
 import { useLocation } from "./LocationContext";
 import { EXPO_IP } from "@env";
 
@@ -27,11 +26,6 @@ export const SocketProvider = ({ children }: { children: React.ReactNode }) => {
       }
     });
 
-    // socketIo.on("message", (data: MessageType, ack) => {
-    //   console.log("Sending message to server:", data);
-    //   if (ack) console.log("Server acknowledged message:", ack);
-    // });
-
     return () => {
       isMounted = false;
       socket?.disconnect();