From c2e19a725f8a11d2437ab02e2c019df0d2d12793 Mon Sep 17 00:00:00 2001
From: Kavi <kavipatel@ufl.edu>
Date: Wed, 28 Aug 2024 20:11:19 -0400
Subject: [PATCH 1/2] fixed key error

---
 client/app/screens/chat/ChatScreen.tsx         | 7 ++++---
 client/app/screens/settings/SettingsScreen.tsx | 5 +++--
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/client/app/screens/chat/ChatScreen.tsx b/client/app/screens/chat/ChatScreen.tsx
index 8df8f91fd..6885a5c61 100644
--- a/client/app/screens/chat/ChatScreen.tsx
+++ b/client/app/screens/chat/ChatScreen.tsx
@@ -1,5 +1,4 @@
 import * as Crypto from "expo-crypto";
-import React, { useEffect } from "react";
 import {
   KeyboardAvoidingView,
   Platform,
@@ -17,6 +16,7 @@ import { useSettings } from "../../contexts/SettingsContext";
 import { useSocket } from "../../contexts/SocketContext";
 import { AuthStore } from "../../services/AuthStore";
 import { Message } from "../../types/Message";
+import { useState, useEffect } from "react";
 
 const ChatScreen = () => {
   const settings = useSettings();
@@ -28,8 +28,9 @@ const ChatScreen = () => {
   // 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<Message[]>([]);
-  const [messageContent, setMessageContent] = React.useState<string>("");
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [messageContent, setMessageContent] = useState<string>("");
+
 
   useEffect(() => {
     if (socket === null) return; // This line might need to be changed
diff --git a/client/app/screens/settings/SettingsScreen.tsx b/client/app/screens/settings/SettingsScreen.tsx
index b30058790..85eacd08d 100644
--- a/client/app/screens/settings/SettingsScreen.tsx
+++ b/client/app/screens/settings/SettingsScreen.tsx
@@ -8,7 +8,7 @@ import { SettingsItem } from "../../components/settings/SettingsItem";
 // select type: arrow to the right to switch pages
 const Sections = [
   {
-    header: "Notications",
+    header: "Notifcations",
     items: [
       {
         id: "notifiyNewMessage",
@@ -46,13 +46,14 @@ const SettingsScreen: React.FC = () => {
           <Text style={styles.headerText}>Settings</Text>
         </View>
         {Sections.map(({ header, items }) => (
-          <View style={styles.section} key={header}>
+          <View style={styles.section}>
             <View style={styles.sectionHeader}>
               <Text style={styles.sectionHeaderText}>{header}</Text>
             </View>
             <View style={styles.sectionContent}>
               {items.map(({ id, title, type }) => (
                 <SettingsItem
+                  key={id}
                   id={id}
                   title={title}
                   type={type}

From 639c3269ad836fbc9a0014a19308d150befe2460 Mon Sep 17 00:00:00 2001
From: Alexander Wang <98280966+AlexanderWangY@users.noreply.github.com>
Date: Thu, 29 Aug 2024 15:45:35 -0400
Subject: [PATCH 2/2] Update SettingsScreen.tsx

---
 client/app/screens/settings/SettingsScreen.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/app/screens/settings/SettingsScreen.tsx b/client/app/screens/settings/SettingsScreen.tsx
index 85eacd08d..5fd8664af 100644
--- a/client/app/screens/settings/SettingsScreen.tsx
+++ b/client/app/screens/settings/SettingsScreen.tsx
@@ -8,7 +8,7 @@ import { SettingsItem } from "../../components/settings/SettingsItem";
 // select type: arrow to the right to switch pages
 const Sections = [
   {
-    header: "Notifcations",
+    header: "Notifications",
     items: [
       {
         id: "notifiyNewMessage",