feat: settings screen

yale-swe · Apr 26, 2024 · 34cda5a · 34cda5a
1 parent 68553a9
commit 34cda5a
Show file tree

Hide file tree

Showing 2 changed files with 132 additions and 9 deletions.
diff --git a/client/src/screens/settings.js b/client/src/screens/settings.js
@@ -1,14 +1,45 @@
 import React, { useState, useCallback } from "react";
 import { useFocusEffect } from "@react-navigation/native";
-import { StyleSheet, View, Text, Image } from "react-native";
-import { Typography, Colors } from "../styles";
+import { StyleSheet, View, ScrollView,Text, TouchableOpacity, TouchableWithoutFeedback} from "react-native";
+import { Typography, Colors, Buttons } from "../styles";
 import BackButton from "../components/backButton";
 import { getTotalHabits } from "../services/habitService";
+import { CASLogout } from "../services/authenticationUtil";
+import  {
+  LoginWithActiveSession,
+} from "../services/authenticationUtil";
+import { useAuth } from "../components/authContext";
+
 
 // eslint-disable-next-line
 const Settings = (props) => {
 
   const [totalHabits, setTotalHabits] = useState("-");
+  const [userName, setUserName] = useState('Handsome Pal');
+
+  const fetchName = async () => {
+    try {
+      const user = await LoginWithActiveSession();
+      if (user) {
+        var userData = await user.data;
+        userData = decodeURIComponent(JSON.stringify(userData.user));
+      } else {
+        console.error("No user data found");
+      }
+
+      const stringUser = decodeURIComponent(JSON.stringify(userData));
+      const StringUserObject = JSON.parse(stringUser);
+      const userObject = StringUserObject.slice(1, -1);
+      const parsedUserObject = JSON.parse(userObject);
+      const name = parsedUserObject.first_name.toLowerCase();
+
+      setUserName(name);
+
+    } catch (error) {
+      console.error("Error fetching or parsing user data:", error);
+      return;
+    }
+  };
 
   useFocusEffect(
     useCallback(() => {
@@ -18,11 +49,25 @@ const Settings = (props) => {
       };
 
       fetchHabits();
+      fetchName();
     }, [])
   );
 
+  const { setIsAuthenticated } = useAuth();
+
+
+  const handleLogout = async () => {
+    CASLogout();
+    setIsAuthenticated(false);
+    props.navigation.navigate("Login");
+
+  };
+
+
+
   return (
     <View style={styles.container}>
+
         <View style={styles.upperBox}>
             <View style={styles.backButtonContainer}>
                 <BackButton onPress={() => props.navigation.navigate("Home")} />
@@ -32,13 +77,44 @@ const Settings = (props) => {
                 <Text style={Typography.trackedHabitText}> total habits tracked</Text>
             </View>
         </View>
+        <ScrollView>
         <View style={styles.lowerBox}>
-            <Text style={Typography.header3}> Page under construction..</Text>
-                <Image
-                source={require("../assets/images/under_construction.png")}
-                style={styles.construction}
-                >
-            </Image>
+        <TouchableWithoutFeedback onPress={() => {}}>
+            <View style={styles.menuItem}>
+              <Text style={Typography.settingMenuName}>Name</Text>
+              <View style={styles.nameContainer}>
+              <Text style={Typography.defaultFont }>{userName}</Text>
+              </View>
+            </View>
+          </TouchableWithoutFeedback>
+          <TouchableOpacity onPress={() => {}}>
+            <View style={styles.menuItem}>
+              <Text style={Typography.settingMenuItem}>My Habit Goals</Text>
+              <Text style={Typography.settingMenuArrow }>{">"}</Text>
+            </View>
+          </TouchableOpacity>
+          <TouchableOpacity onPress={() => {}}>
+            <View style={styles.menuItem}>
+              <Text style={Typography.settingMenuItem}>Help & Support</Text>
+              <Text style={Typography.settingMenuArrow }>{">"}</Text>
+            </View>
+          </TouchableOpacity>
+          <TouchableOpacity onPress={() => {}}>
+            <View style={styles.menuItem}>
+              <Text style={Typography.settingMenuItem}>About Handsome Habits</Text>
+              <Text style={Typography.settingMenuArrow }>{">"}</Text>
+            </View>
+          </TouchableOpacity>
+        </View>
+        </ScrollView>
+        <View style={styles.lowerBox}>
+          <TouchableOpacity
+            onPress={() => handleLogout()
+            }
+            style={styles.logButton}
+            >
+            <Text style={styles.logButtonText}>Log out</Text>
+          </TouchableOpacity>
         </View>
 
     </View>
@@ -84,13 +160,40 @@ const styles = StyleSheet.create({
     flexDirection: "column",
     alignItems: "center",
     backgroundColor: Colors.Colors.lightBeige,
-    padding: 18,
+    padding: 12,
   },
   construction: {
     margin: 15,
     width: 255,
     height: 230,
   },
+  menuItem: {
+    padding: 20,
+    paddingLeft: 0,
+    borderBottomWidth: 1,
+    borderBottomColor: '#ddd', 
+    width: 350,
+    flexDirection: "row",
+    justifyContent: 'space-between',
+  },
+  logButtonText: {
+    color: "white",
+    ...Typography.header4,
+  },
+  logButtonContainer: {
+    alignItems: "center",
+  },
+  logButton: {
+    backgroundColor: Colors.Colors.navy,
+    ...Buttons.logButton,
+  },
+  nameContainer:
+  {
+    width: "auto",
+    padding: 7,
+    backgroundColor: Colors.Colors.lightBeige,
+    borderRadius: 7,
+  }
 });
 
 export default Settings;
diff --git a/client/src/styles/typography.js b/client/src/styles/typography.js
@@ -89,3 +89,23 @@ export const trackedHabitText = {
   textAlign: "center",
   ...defaultFont,
 };
+
+export const settingMenuItem = {
+  fontSize: 16,
+  textAlign: "left",
+  ...boldFont,
+}
+
+export const settingMenuName = {
+  fontSize: 16,
+  textAlign: "left",
+  padding: 7,
+  paddingLeft: 0,
+  ...boldFont,
+}
+
+export const settingMenuArrow = {
+  fontSize: 20,
+  textAlign: "right",
+  ...boldFont,
+}