Style static data

calblueprint · Nov 29, 2023 · c343de3 · c343de3
1 parent 0e62caf
commit c343de3
Show file tree

Hide file tree

Showing 6 changed files with 177 additions and 60 deletions.
diff --git a/src/app/settings.tsx b/src/app/settings.tsx
@@ -2,20 +2,24 @@ import DateTimePicker from '@react-native-community/datetimepicker';
 import { Redirect, router } from 'expo-router';
 import { useEffect, useState } from 'react';
 import { Text, StyleSheet, View, Alert, Platform } from 'react-native';
-import { Button, Input } from 'react-native-elements';
+import { Button } from 'react-native-elements';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
 import StyledButton from '../components/StyledButton/StyledButton';
 import UserStringInput from '../components/UserStringInput/UserStringInput';
 import globalStyles from '../styles/globalStyles';
+import color from '../styles/colors';
 import { useSession } from '../utils/AuthContext';
 import supabase from '../utils/supabase';
+import AccountDataDisplay from '../components/AccountDataDisplay/AccountDataDisplay';
 
 function SettingsScreen() {
   const { session, signOut } = useSession();
   const [loading, setLoading] = useState(true);
   const [firstName, setFirstName] = useState('');
+  const [username, setUsername] = useState('');
   const [lastName, setLastName] = useState('');
+  const [pronouns, setPronouns] = useState('');
   const [birthday, setBirthday] = useState(new Date());
   const [gender, setGender] = useState('');
   const [raceEthnicity, setRaceEthnicity] = useState('');
@@ -28,7 +32,9 @@ function SettingsScreen() {
 
       const { data, error, status } = await supabase
         .from('profiles')
-        .select(`first_name, last_name, birthday, gender, race_ethnicity`)
+        .select(
+          `first_name, last_name, username, birthday, gender, race_ethnicity`,
+        )
         .eq('user_id', session?.user.id)
         .single();
 
@@ -39,7 +45,15 @@ function SettingsScreen() {
       if (data) {
         setFirstName(data.first_name || firstName);
         setLastName(data.last_name || lastName);
-        setBirthday(new Date(data.birthday) || birthday);
+        setUsername(data.username || username);
+
+        if (data.birthday) {
+          setBirthday(new Date(data.birthday));
+          setShowDatePicker(false);
+        } else {
+          setShowDatePicker(true);
+        }
+
         setGender(data.gender || gender);
         setRaceEthnicity(data.race_ethnicity || raceEthnicity);
       }
@@ -119,70 +133,124 @@ function SettingsScreen() {
 
   return (
     <SafeAreaView style={globalStyles.container}>
-      <Text style={globalStyles.h1}>Settings</Text>
-      <UserStringInput
-        placeholder="Email"
-        value={session?.user?.email ?? ''}
-        attributes={{
-          editable: false,
-        }}
-      />
-      <UserStringInput
-        placeholder="First Name"
-        value={firstName}
-        onChange={setFirstName}
-      />
-      <UserStringInput
-        placeholder="Last Name"
-        value={lastName}
-        onChange={setLastName}
-      />
-      <UserStringInput
-        placeholder="Gender"
-        value={gender}
-        onChange={setGender}
-      />
-      <UserStringInput
-        placeholder="Race/Ethnicity"
-        value={raceEthnicity}
-        onChange={setRaceEthnicity}
-      />
-
-      {Platform.OS !== 'ios' && (
-        <Button
-          title="Change Birthday"
-          onPress={() => setShowDatePicker(true)}
-        />
-      )}
-      {showDatePicker && (
-        <DateTimePicker
-          testID="dateTimePicker"
-          value={birthday}
-          mode="date"
-          onChange={date => {
-            setShowDatePicker(Platform.OS === 'ios');
-            if (date.nativeEvent.timestamp) {
-              setBirthday(new Date(date.nativeEvent.timestamp));
-            }
-          }}
-        />
-      )}
-      <StyledButton
-        text={loading ? 'Loading ...' : 'Update profile'}
-        onPress={updateProfile}
-        disabled={loading}
-      />
-      <StyledButton text="Sign Out" onPress={signOut} disabled={false} />
+      <Text style={styles.back}>{'<Back'}</Text>
+      <View style={styles.main}>
+        <View>
+          <Text style={styles.heading}>Settings</Text>
+          <Text style={styles.subheading}>Account</Text>
+
+          <View style={styles.data}>
+            <AccountDataDisplay label="First Name" value={firstName} />
+            <AccountDataDisplay label="Last Name" value={lastName} />
+            <AccountDataDisplay label="Username" value={username} />
+            <AccountDataDisplay
+              label="Birthday"
+              value={
+                showDatePicker ? (
+                  <View>
+                    <DateTimePicker
+                      testID="dateTimePicker"
+                      value={birthday}
+                      mode="date"
+                      onChange={date => {
+                        setShowDatePicker(Platform.OS === 'ios');
+                        if (date.nativeEvent.timestamp) {
+                          setBirthday(new Date(date.nativeEvent.timestamp));
+                        }
+                      }}
+                    />
+                    {Platform.OS !== 'ios' && (
+                      <Button
+                        title="Change Birthday"
+                        onPress={() => setShowDatePicker(true)}
+                      />
+                    )}
+                  </View>
+                ) : (
+                  birthday.toLocaleDateString().toString()
+                )
+              }
+            ></AccountDataDisplay>
+          </View>
+
+          <UserStringInput
+            labelColor={color.textGrey}
+            placeholder="Gender"
+            label="Gender"
+            value={gender}
+            onChange={setGender}
+          />
+          <UserStringInput
+            labelColor={color.textGrey}
+            placeholder="Pronouns"
+            label="Pronouns"
+            value={pronouns}
+            onChange={setPronouns}
+          />
+          <UserStringInput
+            labelColor={color.textGrey}
+            placeholder="Race/Ethnicity"
+            label="Race/Ethnicity"
+            value={raceEthnicity}
+            onChange={setRaceEthnicity}
+          />
+        </View>
+        <View style={styles.button}>
+          <StyledButton text="Sign Out" onPress={signOut} disabled={false} />
+        </View>
+      </View>
     </SafeAreaView>
   );
 }
 
 const styles = StyleSheet.create({
+  button: {
+    marginBottom: 32,
+  },
+  main: {
+    flex: 1,
+    width: '100%',
+    paddingLeft: 12,
+    justifyContent: 'space-between',
+  },
   verticallySpaced: {
     paddingTop: 4,
     paddingBottom: 4,
     alignSelf: 'stretch',
   },
+  subheading: {
+    fontFamily: 'Manrope',
+    fontSize: 18,
+    fontStyle: 'normal',
+    fontWeight: '700',
+    paddingBottom: 16,
+  },
+  heading: {
+    paddingBottom: 24,
+    fontFamily: 'Manrope',
+    fontSize: 24,
+    fontStyle: 'normal',
+    fontWeight: '700',
+  },
+  back: {
+    paddingTop: 30,
+    paddingBottom: 16,
+    color: '#797979',
+    fontSize: 12,
+    fontWeight: '400',
+  },
+  data: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'flex-start',
+    marginBottom: -10,
+  },
+  label: {
+    fontSize: 12,
+    fontFamily: 'Manrope',
+    fontStyle: 'normal',
+    fontWeight: '400',
+  },
 });
 
 export default SettingsScreen;
diff --git a/src/components/AccountDataDisplay/AccountDataDisplay.tsx b/src/components/AccountDataDisplay/AccountDataDisplay.tsx
@@ -0,0 +1,22 @@
+import { View, Text } from 'react-native';
+import styles from './styles';
+
+type AccountDataDisplayProps = {
+  label: string;
+  value: string | React.ReactNode;
+};
+
+function AccountDataDisplay({ label, value }: AccountDataDisplayProps) {
+  return (
+    <View style={styles.view}>
+      <Text style={styles.label}>{label}</Text>
+      {typeof value === 'string' ? (
+        <Text style={styles.value}>{value}</Text>
+      ) : (
+        value
+      )}
+    </View>
+  );
+}
+
+export default AccountDataDisplay;
diff --git a/src/components/AccountDataDisplay/styles.tsx b/src/components/AccountDataDisplay/styles.tsx
@@ -0,0 +1,23 @@
+import { StyleSheet } from 'react-native';
+import colors from '../../styles/colors';
+
+export default StyleSheet.create({
+  view: {
+    width: '50%',
+    marginBottom: 26,
+  },
+  label: {
+    fontSize: 12,
+    fontFamily: 'Manrope',
+    fontStyle: 'normal',
+    fontWeight: '400',
+    color: colors.textGrey,
+  },
+  value: {
+    paddingTop: 18,
+    fontSize: 14,
+    fontFamily: 'Manrope',
+    fontStyle: 'normal',
+    fontWeight: '400',
+  },
+});
diff --git a/src/components/UserStringInput/UserStringInput.tsx b/src/components/UserStringInput/UserStringInput.tsx
@@ -9,6 +9,7 @@ type UserStringInputProps = {
   attributes?: TextInput['props'] | null;
   children?: ReactNode;
   label?: string;
+  labelColor?: string;
   onChange?: (text: string) => any;
 };
 
@@ -18,11 +19,14 @@ export default function UserStringInput({
   attributes = {},
   label,
   children,
+  labelColor = '#000',
   onChange = _ => {},
 }: UserStringInputProps) {
   return (
     <View style={styles.mt16}>
-      {label && <Text style={styles.label}>{label}</Text>}
+      {label && (
+        <Text style={{ color: labelColor, ...styles.label }}>{label}</Text>
+      )}
       <View style={[styles.container, styles.verticallySpaced]}>
         <TextInput
           onChange={e => onChange(e.nativeEvent.text)}

diff --git a/src/components/UserStringInput/styles.tsx b/src/components/UserStringInput/styles.tsx
@@ -3,6 +3,7 @@ import { StyleSheet } from 'react-native';
 export default StyleSheet.create({
   mt16: {
     marginTop: 16,
+    width: '100%',
   },
   label: {
     fontSize: 12,

diff --git a/src/styles/globalStyles.ts b/src/styles/globalStyles.ts
@@ -6,8 +6,7 @@ export default StyleSheet.create({
     backgroundColor: 'white',
     alignItems: 'flex-start',
     justifyContent: 'flex-start',
-    paddingLeft: 24,
-    paddingRight: 24,
+    paddingHorizontal: 24,
   },
   authContainer: {
     marginHorizontal: 38,