Render current-user profile picture/display name in chat screen (290)

client/app/components/chat/ChatMessage.tsx

@@ -3,9 +3,15 @@ import { View, StyleSheet, Text, Image, Dimensions } from "react-native";
 
 import { useSettings } from "../../contexts/SettingsContext";
 import { MessageProps } from "../../types/Props";
+import { SettingStore } from "../../services/SettingsStore"
+import { icons } from "../../styles/icons"
+
+const Message: React.FC<MessageProps> = ({ messageContent, time, author, profilePicIndex , profileColor }) => {
+  // Import textSettings from useSettings
+  const textSettings = useSettings();
+  // Import current settings from SettingStore container
+  //const profileSettings = SettingStore.useState();
 
-const Message: React.FC<MessageProps> = ({ messageContent, time, author }) => {
-  const settings = useSettings();
   const currDay = new Date(Date.now()).toLocaleDateString([], {
     weekday: "long",
   })
@@ -20,22 +26,22 @@ const Message: React.FC<MessageProps> = ({ messageContent, time, author }) => {
   // Text should have a different color to contrast with the background color
   const authorStyleProps = {
     ...styles.authorStyle,
-    color: settings && settings.theme !== "light" ? "white" : "black",
+    color: textSettings && textSettings.theme !== "light" ? "white" : "black",
   };
   return (
     <View style={styles.container}>
       <View style={styles.profileImageContainer}>
         <Image
-          style={styles.profileImage}
-          source={require("../../../assets/icons/user/fake_pfp.jpg")}
+          style={[styles.profileImage, { backgroundColor: profileColor }]}
+          source={icons[profilePicIndex]}
         />
       </View>
       <View style={styles.contentContainer}>
         <View style={styles.messageHeader}>
           <Text style={authorStyleProps}>{author}</Text>
           <Text
             style={{
-              color: settings && settings.theme !== "light" ? "white" : "black",
+              color: textSettings && textSettings.theme !== "light" ? "white" : "black",
               fontSize: 12,
             }}>
             {[weekday, " at ", timestamp]}
@@ -44,7 +50,7 @@ const Message: React.FC<MessageProps> = ({ messageContent, time, author }) => {
         <View style={styles.messageContent}>
           <Text
             style={{
-              color: settings && settings.theme !== "light" ? "white" : "black",
+              color: textSettings && textSettings.theme !== "light" ? "white" : "black",
             }}>
             {messageContent}
           </Text>
@@ -107,4 +113,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default Message;
+export default Message;

client/app/components/chat/MessageChannel.tsx

@@ -18,6 +18,8 @@ const MessageChannel: React.FC<MessageChannelProps> = ({ messages }) => {
         <Message
           messageContent={item.msgContent}
           author={item.author.displayName} // TODO: call server to get author name from UID. Or should this stored with MessageType?
+          profilePicIndex={item.author.profilePicIndex}
+          profileColor={item.author.profileColor}
           time={item.timestamp}
         />
       )}

client/app/screens/chat/ChatScreen.tsx

@@ -16,17 +16,17 @@ import { useSocket } from "../../contexts/SocketContext";
 import { AuthStore } from "../../services/AuthStore";
 import { Message } from "../../types/Message";
 import { useState, useEffect } from "react";
-import { useUser } from "@app/contexts/UserContext";
+import { SettingStore } from "../../services/SettingsStore"
 import NearbyHeader from "@app/components/chat/NearbyHeader";
 import React from "react";
 
 const ChatScreen = () => {
-  const settings = useSettings();
+  const settings = useSettings()
+  const profileSettings = SettingStore.useState();
   const screenHeight = Dimensions.get("window").height;
   const keyboardBehavior = Platform.OS === "ios" ? "padding" : undefined;
   const socket = useSocket();
   const location = useLocation();
-  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.
 
@@ -56,7 +56,9 @@ const ChatScreen = () => {
       const newMessage: Message = {
         author: {
           uid: String(userAuth.userAuthInfo?.uid),
-          displayName: String(user?.displayName),
+          displayName: profileSettings.displayName,
+          profilePicIndex: profileSettings.profilePicIndex,
+          profileColor: profileSettings.profileColor,
         },
         msgId: Crypto.randomUUID(),
         msgContent: messageContent.trim(),
@@ -84,6 +86,7 @@ const ChatScreen = () => {
       style={{
         backgroundColor:
           settings && settings.theme !== "light" ? "#191d20" : "white", // Needs to be changed to be a prop later (new issue?)
+          // Note: Can probably change to use profileSettings.isDarkMode if wanted.
       }}>
       <KeyboardAvoidingView
         behavior={keyboardBehavior}

client/app/screens/settings/SettingsScreen.tsx

@@ -18,6 +18,8 @@ import {
 import { SettingsItem } from "../../components/settings/SettingsItem";
 import {ColorInput, DisplayNameInput} from "@app/components/settings/TextInputs";
 import { appSignOut } from "../../services/AuthStore";
+import { SettingStore, changeName, changeProfileIndex, changeProfileColor } from "../../services/SettingsStore"
+import { icons } from "../../styles/icons"
 
 // List of settings items
 // toggle type: a switch
@@ -51,12 +53,12 @@ const Sections = [
 ];
 
 const SettingsScreen: React.FC = () => {
+  // Import current settings from SettingStore container
+  const settings = SettingStore.useState();
+
   const [data, setData] = useState({
-    displayName: "Display Name",
-    profilePicIndex: 0, // index for icons array
-    profileColor: "#1199ff",
     notifyNewMessage: true,
-    darkMode: false,
+    darkMode: settings.isDarkMode,
     language: "English",
     deleteMessages: false,
   });
@@ -67,19 +69,7 @@ const SettingsScreen: React.FC = () => {
     profileColor: false,
   });
 
-
-  const iconStyle = [styles.icon, {backgroundColor: data.profileColor}]
-
-  const icons = [
-    require("../../../assets/icons/user/face_01.png"),
-    require("../../../assets/icons/user/face_02.png"),
-    require("../../../assets/icons/user/face_03.png"),
-    require("../../../assets/icons/user/face_04.png"),
-    require("../../../assets/icons/user/face_05.png"),
-    require("../../../assets/icons/user/face_06.png"),
-    require("../../../assets/icons/user/face_07.png"),
-    require("../../../assets/icons/user/fake_pfp.jpg"),
-  ];
+  const iconStyle = [styles.icon, {backgroundColor: settings.profileColor}]
 
   const [loading, setLoading] = useState(false);
 
@@ -132,27 +122,31 @@ const SettingsScreen: React.FC = () => {
             <TouchableWithoutFeedback>
               <View style={styles.userModal}>
                 <View style={styles.header}>
-                  <Text style={styles.headerText}>Hi {data.displayName}!</Text>
+                  <Text style={styles.headerText}>Hi {settings.displayName}!</Text>
                   <Text>    </Text>
                   <Pressable onPress={() => setProfileVisible(false)}>
                     <Image
                         style={iconStyle}
-                        source={icons[data.profilePicIndex]}
+                        source={icons[settings.profilePicIndex]}
                     />
                   </Pressable>
                 </View>
 
                 <DisplayNameInput
-                 defaultValue={data.displayName}
+                 defaultValue={settings.displayName}
                  isVisible={inputVisible.displayName}
                  visibleSetter={(value: boolean) => setInputVisible({...inputVisible, ["displayName"]: value})}
-                 outputSetter={(output: string) => setData({...data, ["displayName"]: output})}
+                 outputSetter={(output: string) => {
+                   changeName(output); // Updates the name held in settingStore
+                 }}
                 />
                 <ColorInput
-                    defaultValue={data.profileColor}
+                    defaultValue={settings.profileColor}
                     isVisible={inputVisible.profileColor}
                     visibleSetter={(value: boolean) => setInputVisible({...inputVisible, ["profileColor"]: value})}
-                    outputSetter={(output: string) => setData({...data, ["profileColor"]: output})}
+                    outputSetter={(output: string) => {
+                      changeProfileColor(output);
+                    }}
                 />
 
                 {/* User Settings */}
@@ -177,8 +171,10 @@ const SettingsScreen: React.FC = () => {
                     <FlatList data={icons}
                               numColumns={6}
                               renderItem={icon => (
-                                  <Pressable onPress={() => setData({ ...data, ["profilePicIndex"]: icon.index })}>
-                                    <Image style={[iconStyle, icon.index === data.profilePicIndex ? styles.selected:{margin: 5}]}
+                                  <Pressable onPress={() => {
+                                    changeProfileIndex(icon.index);
+                                  }}>
+                                    <Image style={[iconStyle, icon.index === settings.profilePicIndex ? styles.selected:{margin: 5}]}
                                            source={icon.item}/>
                                   </Pressable>
                               )}>
@@ -197,7 +193,7 @@ const SettingsScreen: React.FC = () => {
           <Pressable onPress={() => setProfileVisible(true)}>
             <Image
                 style={iconStyle}
-                source={icons[data.profilePicIndex]}
+                source={icons[settings.profilePicIndex]}
             />
           </Pressable>
         </View>

client/app/services/SettingsStore.ts

@@ -2,14 +2,38 @@ import { Store } from "pullstate";
 
 interface SettingsInterface {
   isDarkMode: boolean;
+  displayName: string,
+  profilePicIndex: number,
+  profileColor: string,
 }
 
 export const SettingStore = new Store<SettingsInterface>({
-  isDarkMode: false,
+  isDarkMode: false, // TODO: isDarkMode not implemented, part of different issue from other three variables
+  displayName: "Display Name",
+  profilePicIndex: 0,
+  profileColor: "#1199ff",
 });
 
 export const toggleTheme = async () => {
   SettingStore.update((store) => {
     store.isDarkMode = !store.isDarkMode;
   });
 };
+
+export const changeName = async (name: string) => {
+  SettingStore.update((store) => {
+    store.displayName = name;
+  });
+};
+
+export const changeProfileIndex = async (index: number) => {
+  SettingStore.update((store) => {
+    store.profilePicIndex = index;
+  });
+};
+
+export const changeProfileColor = async (color: string) => {
+  SettingStore.update((store) => {
+    store.profileColor = color;
+  });
+};

client/app/styles/icons.ts

@@ -0,0 +1,11 @@
+// Container for all icons in application, externalized for easier access
+export const icons = [
+    require("../../assets/icons/user/face_01.png"),
+    require("../../assets/icons/user/face_02.png"),
+    require("../../assets/icons/user/face_03.png"),
+    require("../../assets/icons/user/face_04.png"),
+    require("../../assets/icons/user/face_05.png"),
+    require("../../assets/icons/user/face_06.png"),
+    require("../../assets/icons/user/face_07.png"),
+    require("../../assets/icons/user/fake_pfp.jpg"),
+];

client/app/types/Message.ts

@@ -2,6 +2,8 @@ export interface Message {
   author: {
     uid: string;
     displayName: string;
+    profilePicIndex: number;
+    profileColor: string;
   };
   msgId: string;
   msgContent: string;

client/app/types/Props.ts

@@ -22,6 +22,8 @@ export type ChatInputProps = {
 export type MessageProps = {
   messageContent: string;
   time: number;
+  profilePicIndex: number;
+  profileColor: string;
   author: string;
 };