Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
wants to merge 2 commits into from
Closed

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9fa21f7
Render current-user profile picture/display name in chat screen (290)
Nqnt41 Oct 29, 2024
17f2dfb
Merge branch 'main' into Profile_Updated
Nqnt41 Nov 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 13 additions & 7 deletions client/app/components/chat/ChatMessage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) => {
const settings = useSettings();
// Import textSettings from useSettings
const textSettings = useSettings();
// Import current settings from SettingStore container
const profileSettings = SettingStore.useState();

const currDay = new Date(Date.now()).toLocaleDateString([], {
weekday: "long",
})
Expand All @@ -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: profileSettings.profileColor }]}
source={icons[profileSettings.profilePicIndex]}
/>
</View>
<View style={styles.contentContainer}>
<View style={styles.messageHeader}>
<Text style={authorStyleProps}>{author}</Text>
<Text style={authorStyleProps}>{profileSettings.displayName}</Text>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you change this prop to point to the display name, then every message will just show that it was written by you, rather than the person that actually sent the message. Just leave it as "author"

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Understood! I'll work on these changes now.

<Text
style={{
color: settings && settings.theme !== "light" ? "white" : "black",
color: textSettings && textSettings.theme !== "light" ? "white" : "black",
fontSize: 12,
}}>
{[weekday, " at ", timestamp]}
Expand All @@ -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>
Expand Down
48 changes: 22 additions & 26 deletions client/app/screens/settings/SettingsScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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,
});
Expand All @@ -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);

Expand Down Expand Up @@ -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 */}
Expand All @@ -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>
)}>
Expand All @@ -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>
Expand Down
26 changes: 25 additions & 1 deletion client/app/services/SettingsStore.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
});
};
11 changes: 11 additions & 0 deletions client/app/styles/icons.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"),
];