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,12 +14,12 @@ import {
 import { ChatInput } from "../Common/CustomInputs";
 import { ChatSendButton } from "../Common/CustomButtons";
 import MessageChannel from "../Common/MessageChannel";
-import { LinearGradient } from "expo-linear-gradient";
 import { MessageType } from "../../utils/types";
 import * as Crypto from "expo-crypto";
 import { generateName } from "../../utils/scripts";
 import { useSettings } from "../../contexts/SettingsContext";
 import { SignOutButton } from "../Common/AuthButtons"
+import { useUser } from "../../contexts/UserContext"
 
 const ChatScreen = () => {
   const settings = useSettings();
@@ -31,13 +31,15 @@ const ChatScreen = () => {
   const [messages, setMessages] = React.useState<MessageType[]>([]);
   const [message, setMessage] = React.useState<string>("");
 
+  const user = useUser();
+
   // For when the user sends a message (fired by the send button)
   const onHandleSubmit = () => {
     if (message.trim() !== "") {
       const newMessage: MessageType = {
         msgID: Crypto.randomUUID(),
         messageContent: message.trim(),
-        author: generateName(),
+        author: user.displayName,
       };
 
       setMessages([...messages, newMessage]);

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";
 

client/src/contexts/UserContext.tsx

@@ -0,0 +1,38 @@
+import React, { createContext, useContext } from 'react';
+import { UserType } from '../utils/types';
+import { useState, useEffect } from 'react';
+import { generateName } from '../utils/scripts';
+
+const UserContext = createContext<UserType>({
+    userID: "something",
+    displayName: "default",
+    pfp: "null"
+});
+
+const [user, setUser] = useState<UserType>({
+    userID: "something",
+    displayName: "default",
+    pfp: "null"
+});
+
+useEffect(() => {
+    user.displayName = generateName();
+}, []);
+
+export const useUser = () => {
+    return useContext(UserContext);
+}
+
+/*
+export const changeUsername = (newUsername: string) => {
+    setUser
+}
+*/
+
+export const UserProvider = ({ children }: {children: React.ReactNode}) => {
+    return (
+        <UserContext.Provider value={user}>
+            {children}
+        </UserContext.Provider>
+    );
+};

client/src/utils/types.ts

@@ -2,4 +2,10 @@ export type MessageType = {
   messageContent: string;
   author: string;
   msgID: string;
+};
+
+export type UserType = {
+  userID: string;
+  displayName: string;
+  pfp: string;
 };