username input on home screen

squarenotsquare/src/realm/migrations/MigrateV1.js

@@ -7,7 +7,7 @@ export function migratev1(oldRealm, newRealm) {
     newRealm.create(SystemEntity.name, {
       id: uuidv4(),
       key: 'username',
-      value: 'changeme'
+      value: 'noname'
     });
   }
 }

squarenotsquare/src/redux/actions/SystemActions.js

@@ -5,7 +5,8 @@ import { squareNav } from "../../navigation/SquareNav";
 export function appInit() {
   return async (dispatch) => {
     await DbAPI.initDB();
-    dispatch(onInit());
+    let lastUsername = DbAPI.getSystemValue('username').value;
+    dispatch(onInit(lastUsername));
     squareNav('Home');
   }
 }
@@ -28,11 +29,13 @@ export function goToScores() {
   }
 }
 
-function onInit() {
-  return (dispatch) => {
+function onInit(lastUsername) {
+  return (dispatch, getState) => {
+    let currentUser = {...getState().user};
+    currentUser.username = lastUsername;
     dispatch({
-      type: APP_INIT
-      //system: system
+      type: APP_INIT,
+      user: currentUser
     });
   }
 }

squarenotsquare/src/redux/actions/UserActions.js

@@ -3,17 +3,22 @@ import { ADDITION_FINISHED, ADDITION_START, SQUARE_FINISHED, SQUARE_START } from
 import { calculateSquareScore } from "../../libs/CalculateScore";
 import DbAPI from "../../realm/DbAPI";
 
-export function squareStartPressed(mode) {
-  return (dispatch) => {
+export function squareStartPressed(mode, username) {
+  return (dispatch, getState) => {
+    DbAPI.createSystemValue('username', username);
+    let userState = {...getState().user};
+    userState.username = username;
     if (mode === 'square') {
       squareNav('Game');
       dispatch({
-        type: SQUARE_START
+        type: SQUARE_START,
+        user: userState
       });
     } else if (mode === 'addition') {
       squareNav('AdditionGame');
       dispatch({
-        type: ADDITION_START
+        type: ADDITION_START,
+        user: userState
       })
     }
   }

squarenotsquare/src/redux/reducers/UserReducer.js

@@ -2,7 +2,8 @@ import { APP_INIT } from "../types/SystemTypes";
 import {
   SQUARE_START,
   SQUARE_FINISHED,
-  ADDITION_FINISHED
+  ADDITION_FINISHED,
+  ADDITION_START
 } from '../types/UserTypes';
 
 const initialUserState = {
@@ -14,7 +15,9 @@ const initialUserState = {
 
 function usr(state = initialUserState, action) {
   switch (action.type) {
+    case APP_INIT:
     case SQUARE_START:
+    case ADDITION_START:
     case SQUARE_FINISHED:
     case ADDITION_FINISHED:
       return {...state, ...action.user};

squarenotsquare/src/screens/Home.js

@@ -1,12 +1,12 @@
 import React, { useEffect, useState } from "react";
-import { BackHandler, SafeAreaView, Text, TouchableOpacity, View } from "react-native";
+import { BackHandler, SafeAreaView, Text, TextInput, TouchableOpacity, View } from "react-native";
 import { styles } from './styles/AppStyles';
 import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 import Icons from '../themes/Icons';
 import Colors from "../themes/Colors";
 import Metrics from "../themes/Metrics";
 import Slider from "../components/Slider";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import {squareStartPressed} from '../redux/actions/UserActions';
 import { goToScores } from "../redux/actions/SystemActions";
 import ModePicker from '../components/ScrollingPicker';
@@ -14,13 +14,15 @@ import ModePicker from '../components/ScrollingPicker';
 function Home(){
   const dispatch = useDispatch();
   const [mode, setMode] = useState('square');
+  const userRedux = useSelector((state) => state.user);
+  const [username, setUsername] = useState(() => {return userRedux.username})
 
   useEffect(() => {
     BackHandler.addEventListener('hardwareBackPress', () => {return true});
   }, [])
 
   function onPressStart(){
-    dispatch(squareStartPressed(mode));
+    dispatch(squareStartPressed(mode, username));
   }
 
   function onPressHighScores(){
@@ -76,6 +78,19 @@ function Home(){
           </TouchableOpacity>
         </Slider>
       </View>
+      <View style={[styles.flexRow, styles.centeredJustify, styles.centeredItems]}>
+        <MaterialIcon
+          name={Icons.squareIcons.edit}
+          color={Colors.material.grey400}
+          size={Metrics.icons.inputIcon}
+        />
+        <TextInput
+          style={[styles.darkText, styles.headerTitleFont, styles.usernameInput]}
+          placeholder={'username'}
+          value={username}
+          onChangeText={(updated) => setUsername(updated)}
+        />
+      </View>
       <View style={[styles.footer, styles.centeredJustify]}>
         <Text style={[styles.greyText, styles.tinyFont, styles.centeredText]}>
           0.0.1a    Atonal Software    Aug 9 2022

squarenotsquare/src/screens/styles/AppStyles.js

@@ -109,6 +109,11 @@ export const styles = StyleSheet.create({
     height: Metrics.buttons.answerButton.height
   },
 
+  usernameInput: {
+    borderBottomWidth: Metrics.borders.width,
+    borderBottomColor: Colors.material.grey400
+  },
+
   addQuestionHeight: {
     height: Metrics.screenSections.addQuestionHeight
   },

squarenotsquare/src/themes/Icons.js

@@ -5,7 +5,8 @@ class AppIcons {
     toggleOn: 'toggle-switch-on',
     toggleOff: 'toggle-switch-off',
     check: 'check',
-    plus: 'plus'
+    plus: 'plus',
+    edit: 'pencil'
   };
 
   wrongShapes = {

squarenotsquare/src/themes/Metrics.js

@@ -25,7 +25,8 @@ class AppMetrics {
   
     this.icons = {
       splashIcon: this.normalize(100),
-      buttonIcon: this.normalize(20)
+      buttonIcon: this.normalize(20),
+      inputIcon: this.normalize(15)
     }
 
     this.images = {