added option to allow users to edit the username

%ProgramData%/Microsoft/Windows/UUS/State/_active.uusver

@@ -0,0 +1 @@
+1023.710.2152.0

components/analytics/mood month/MoodMonth.jsx

@@ -10,7 +10,8 @@ import { COLORS } from "../../../constants";
 function MoodMonth({ analysis, loadingAnalysis, graph, loadingGraph }) {
 
     const generateData = (arr) => {
-        return arr.map((_, index) => ({ date: new Date(index), value: _ }))
+        let data = arr.map((_, index) => ({ date: new Date(index), value: _ }))
+        return data
     }
 
     return(

components/common/cards/analytics card/AnalyticsCard.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { View, Text, Pressable } from 'react-native'
+import { Text, Pressable } from 'react-native'
 
 import styles from './analyticscard.style.'
 import { COLORS } from '../../../../constants'

components/common/header/DateDisplay.jsx

@@ -1,16 +1,16 @@
 import { View, Text } from "react-native";
+import { useEffect, useState } from "react";
 
 import moment from "moment/moment";
 
 import styles from "./date.style";
-import { useEffect, useState } from "react";
 
 function DateDisplay() {
 
     const [date, setDate] = useState(moment())
-    // useEffect(() => {
-    //     setInterval(() => setDate(moment()))
-    // }, [])
+    useEffect(() => {
+        setInterval(() => setDate(moment()), 1000)
+    }, [])
 
     return (
         <View style={styles.container}>

components/common/header/date.style.js

@@ -9,17 +9,20 @@ const styles = StyleSheet.create({
         justifyContent: 'center',
         alignItems: 'center',
         flexDirection: 'row',
-        marginRight: SIZES.large * 1.3
+        marginRight: SIZES.large * 1.3,
+        gap: 2
     },
     month: {
         fontSize: SIZES.xLarge * 0.9,
         fontFamily: FONT.bold,
-        color: COLORS.gray
+        color: COLORS.gray,
+        letterSpacing: 1
     },
     day: {
         fontSize: SIZES.xLarge * 0.9,
         fontFamily: FONT.bold,
-        color: COLORS.primary
+        color: COLORS.primary,
+        letterSpacing: 1
     },
     slash: {
         fontSize: SIZES.xLarge * 0.9,

components/home/scale/Scale.jsx

@@ -5,31 +5,29 @@ import Slider from '@react-native-community/slider'
 import { LinearGradient } from 'expo-linear-gradient'
 
 import styles from './scale.style'
-import { COLORS, SIZES, icons, images } from '../../../constants'
+import { COLORS, icons } from '../../../constants'
 
 import { getData, storeData } from '../../../functions/Storage'
-import AsyncStorage from '@react-native-async-storage/async-storage'
 
 function Scale({ refetch }) {
 
     useEffect(() => {
 
         const getMoodData = async () => {
-            // storeData('27072023', 3.2, 3, moment().subtract(1, 'day'))
-            // storeData('26072023', 4.7, 5, moment().subtract(2, 'day'))  
-            // storeData('25072023', 2.3, 2, moment().subtract(3, 'day'))
-            // storeData('24072023', 1.2, 1, moment().subtract(4, 'day'))
-            // storeData('23072023', 3, 3, moment().subtract(5, 'day'))  
-            // storeData('22072023', 4.2, 4, moment().subtract(6, 'day'))
-            // storeData('21072023', 1.6, 2, moment().subtract(7, 'day'))
-            // storeData('20072023', 1.9, 2, moment().subtract(8, 'day'))  
-            // storeData('19072023', 2.1, 2, moment().subtract(9, 'day'))
-            // storeData('18072023', 2.5789, 3, moment().subtract(10, 'day'))
-            // storeData('17072023', 4.4, 5, moment().subtract(11, 'day'))  
-            // storeData('15072023', 5, 5, moment().subtract(13, 'day'))
-            // storeData('14072023', 3, 3, moment().subtract(14, 'day'))
-            // storeData('1372023', 3.1, 3, moment().subtract(15, 'day'))  
-            // storeData('10072023', 2.6, 3, moment().subtract(18, 'day'))
+            // storeData('26122023', 4.7, 5, moment().subtract(2, 'day'))  
+            // storeData('25122023', 2.3, 2, moment().subtract(3, 'day'))
+            // storeData('24122023', 1.2, 1, moment().subtract(4, 'day'))
+            // storeData('23122023', 3, 3, moment().subtract(5, 'day'))  
+            // storeData('22122023', 4.2, 4, moment().subtract(6, 'day'))
+            // storeData('21122023', 1.6, 2, moment().subtract(7, 'day'))
+            // storeData('20122023', 1.9, 2, moment().subtract(8, 'day'))  
+            // storeData('19122023', 2.1, 2, moment().subtract(9, 'day'))
+            // storeData('18122023', 2.5789, 3, moment().subtract(10, 'day'))
+            // storeData('17122023', 4.4, 5, moment().subtract(11, 'day'))  
+            // storeData('15122023', 5, 5, moment().subtract(13, 'day'))
+            // storeData('14122023', 3, 3, moment().subtract(14, 'day'))
+            // storeData('13122023', 3.1, 3, moment().subtract(15, 'day'))  
+            // storeData('10122023', 2.6, 3, moment().subtract(18, 'day'))
             let _ = await getData(moment().format('DDMMYYYY'))
             setValue((_ && Object.keys(_)?.length === 3) ? _.value : 3)
             setSubmitted((_ && Object.keys(_)?.length === 3) ? true : false)
@@ -51,7 +49,7 @@ function Scale({ refetch }) {
                     end={{ x: 1, y: 1 }}
                 >
                     <Slider
-                        style={{ width: '110%' }}
+                        style={{ width: '105%' }}
                         minimumValue={1}
                         maximumValue={5}
                         step={0}
@@ -61,12 +59,12 @@ function Scale({ refetch }) {
                         }}
                         minimumTrackTintColor='transparent'
                         maximumTrackTintColor='transparent'
-                        thumbImage={images.thumb}
+                        thumbTintColor={submitted ? COLORS.primary : "#b87cf4"}
                         disabled={submitted}
                     />
                 </LinearGradient>
                 <View style={styles.numberLine}>
-                    {[1,2,3,4,5].map(number => ( <Text key={number} style={styles.numberLineText} >{number}</Text> ))}
+                    {[1,2,3,4,5].map(number => ( <Text key={number} style={styles.numberLineText}>{number}</Text> ))}
                 </View>
 
                 {!submitted ? (
@@ -84,9 +82,9 @@ function Scale({ refetch }) {
                     </Pressable>
                 ) : (
                     <Pressable
-                    style={styles.editBtn}
-                    android_ripple={{ color: COLORS.white, radius: 5 }}
-                    onPress={() => setSubmitted(false)}
+                        style={styles.editBtn}
+                        android_ripple={{ color: COLORS.white, radius: 5 }}
+                        onPress={() => setSubmitted(false)}
                     >
                         <Image
                             style={styles.editBtnImage}

components/home/scale/scale.style.js

@@ -22,17 +22,17 @@ const styles = StyleSheet.create({
         alignItems: 'center',
         alignSelf: 'center',
         height: 8,
-        borderRadius: SIZES.small,
+        borderRadius: SIZES.small
     },
     numberLine: {
         flex: 1,
         flexDirection: 'row',
         justifyContent: 'space-between',
-        marginTop: SIZES.xSmall * .95,
+        marginTop: SIZES.xSmall * .95
     },
     numberLineText: {
         color: COLORS.gray,
-        fontFamily: FONT.bold,
+        fontFamily: FONT.bold
     },
     scaleBtn: {
         alignSelf: 'flex-end',

components/home/welcome/Welcome.jsx

@@ -1,22 +1,65 @@
-import React, { useState } from 'react'
-import { View, Text } from 'react-native'
-import { useRouter } from 'expo-router'
+import React, { useEffect, useState } from 'react'
+import { View, Text, TextInput, Pressable, Image } from 'react-native'
 
 import styles from './welcome.style'
-// import { COLORS, icons, SIZES } from '../../../constants'
+import { getUsername, storeUsername } from '../../../functions/Storage';
+import { COLORS, icons } from '../../../constants'
 
 function Welcome({ time }) {
-  const router = useRouter()
 
-  const user = 'Risu'
+  const [username, setUsername] = useState(undefined)
+  const [editing, setEditing] = useState(false)
+  const [text, onChangeText] = useState('User')
+
+  const whitespaceRegex = /^(\s+|\0+)$/gmi
+
+  const handlePress = (e) => {
+    if (editing) {
+      if (text === '' || whitespaceRegex.test(text)) return
+
+      storeUsername(text)
+      setUsername(text)
+      setEditing(false)
+    } else setEditing(true)
+  }
+
+  const getUsernameData = async () => {
+    let value = await getUsername()
+    setUsername(value)
+    onChangeText(value ? value : 'User')
+  }
+
+  useEffect(() => {
+    getUsernameData()
+  }, [username])
 
   return (
     <View style={{ flex: 1 }}>
       <View style={styles.container}>
-        <Text style={styles.userName}>{`${time === 'night' ? '' : 'Hello '}${user}`}</Text>
+        <View style={styles.userNameContainer}>
+          <Text style={styles.userNameText}>{time === 'night' ? '' : 'Hello'}</Text>
+          <View style={styles.userNameEditContainer}>
+            <TextInput
+              style={styles.userName(username, editing)}
+              value={text}
+              onChangeText={onChangeText}
+              editable={editing}
+            />
+            <Pressable
+              style={styles.editBtn(editing)}
+              android_ripple={{ color: COLORS.gray, radius: 5 }}
+              onPress={handlePress}
+            >
+              <Image
+                style={styles.editBtnImage}
+                source={editing ? icons.check : icons.edit}
+                resizeMode='contain'
+              />
+            </Pressable>
+          </View>
+        </View>
         <Text style={styles.welcomeMessage}>{`How ${time === 'night' ? 'was' : 'is'} your mood today?`}</Text>
       </View>
-
     </View>
   )
 }

components/home/welcome/welcome.style.js

@@ -6,10 +6,45 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
-  userName: {
+  userNameContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
     fontFamily: FONT.regular,
     fontSize: SIZES.large,
     color: COLORS.secondary,
+    gap: 5
+  },
+  userNameText: {
+    fontFamily: FONT.regular,
+    fontSize: SIZES.large,
+    color: COLORS.secondary,
+  },
+  userNameEditContainer: {
+    gap: 4,
+    flexDirection: 'row'
+  },
+  userName: (username = false, editing = false) => ({
+    fontFamily: FONT.regular,
+    fontSize: SIZES.large,
+    color: COLORS.secondary,
+    borderBottomWidth: (!username || !editing) ? 1 : 0,
+    borderStyle: 'dashed',
+    padding: 0
+  }),
+  editBtn: (editing = false) => ({
+    overflow: 'hidden',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 26,
+    aspectRatio: 1,
+    alignSelf: 'flex-end',
+    marginBottom: editing ? 0 : SIZES.xSmall * .2,
+    padding: SIZES.xLarge * .1
+  }),
+  editBtnImage: {
+    width: '100%',
+    height: '100%',
+    tintColor: COLORS.gray
   },
   welcomeMessage: {
     fontFamily: FONT.bold,
@@ -20,18 +55,7 @@ const styles = StyleSheet.create({
   tabsContainer: {
     width: "100%",
     marginTop: SIZES.medium,
-  },
-  tab: (activeJobType, item) => ({
-    paddingVertical: SIZES.small / 2,
-    paddingHorizontal: SIZES.small,
-    borderRadius: SIZES.medium,
-    borderWidth: 1,
-    borderColor: activeJobType === item ? COLORS.secondary : COLORS.gray2,
-  }),
-  tabText: (activeJobType, item) => ({
-    fontFamily: FONT.medium,
-    color: activeJobType === item ? COLORS.secondary : COLORS.gray2,
-  }),
+  }
 });
 
 export default styles;

constants/icons.js

@@ -14,10 +14,12 @@ import cameraSwitch from '../assets/icons/camera-switch.png'
 import home from '../assets/icons/home.png'
 import analytics from '../assets/icons/analytics.png'
 import edit from '../assets/icons/pencil.png'
+import check from '../assets/icons/check2.png'
 
 export default {
   home,
   edit,
+  check,
   analytics,
   heart,
   menu,

functions/Storage/getData.js

@@ -1,5 +1,4 @@
 import AsyncStorage from '@react-native-async-storage/async-storage'
-import moment from 'moment'
 
 const getData = async (key) => {
     try {

functions/Storage/getUsername.js

@@ -0,0 +1,17 @@
+import AsyncStorage from '@react-native-async-storage/async-storage'
+
+const getUsername = async () => {
+    try {
+
+        const username = await AsyncStorage.getItem('username')
+
+        if (!username) return  undefined
+        else return username
+
+    } catch (err) {
+        console.log(err)
+        return undefined
+    }
+}
+
+export default getUsername

functions/Storage/index.js

@@ -1,7 +1,11 @@
 import getData from "./getData";
 import storeData from "./storeData";
+import getUsername from "./getUsername";
+import storeUsername from "./storeUsername"
 
 export {
     getData,
-    storeData
+    storeData,
+    getUsername,
+    storeUsername
 }

functions/Storage/storeUsername.js

@@ -0,0 +1,21 @@
+import AsyncStorage from '@react-native-async-storage/async-storage'
+
+const storeUsername = async (value) => {
+
+    if (!value || typeof value !== "string") throw Error
+
+    try {
+
+        const username = await AsyncStorage.getItem('username')
+        if (!username) await AsyncStorage.setItem('username', value)
+
+        AsyncStorage.setItem('username', value).then(() => console.log("successful")).catch(e => console.error(e))
+
+    } catch (err) {
+        console.error(err)
+        throw err
+    }
+
+}
+
+export default storeUsername