passes user to app, and file cleaning

TaskRatchet · Dec 1, 2023 · 4a3eb9b · 4a3eb9b
1 parent 3cc4bc8
commit 4a3eb9b
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 47 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -4,34 +4,42 @@ import {Colors} from 'react-native/Libraries/NewAppScreen';
 import * as React from 'react';
 import {NavigationContainer} from '@react-navigation/native';
 import {createStackNavigator} from '@react-navigation/stack';
+import {useState} from 'react';
 
 // local imports:
 import isLightMode from './utils/checkDarkMode';
 import LoginScreen from './screens/LoginScreen';
 import HomeScreen from './screens/HomeScreen';
 import ProfileScreen from './screens/ProfileScreen';
 import {enableScreens} from 'react-native-screens';
+import User from './utils/currentUser';
 
 enableScreens();
 
 const Stack = createStackNavigator();
 
+export const UserContext = React.createContext({
+  currentUser: null,
+  setCurrentUser: (value: string | null) => {},
+});
+
 function App(): JSX.Element {
+  const [currentUser, setCurrentUser] = useState(null);
+
   const backgroundStyle = {
     backgroundColor: isLightMode() ? Colors.darker : Colors.lighter,
   };
 
   return (
-    <NavigationContainer>
-      <Stack.Navigator initialRouteName="LoginScreen">
-        <Stack.Screen name="LoginScreen" component={LoginScreen} />
-        <Stack.Screen name="HomeScreen" component={HomeScreen} />
-        <Stack.Screen name="ProfileScreen" component={ProfileScreen} />
-      </Stack.Navigator>
-    </NavigationContainer>
-    // <LoginScreen />
-    // <HomeScreen />
-    // <SafeAreaView style={backgroundStyle}></SafeAreaView>
+    <UserContext.Provider value={{currentUser, setCurrentUser}}>
+      <NavigationContainer>
+        <Stack.Navigator initialRouteName="LoginScreen">
+          <Stack.Screen name="LoginScreen" component={LoginScreen} />
+          <Stack.Screen name="HomeScreen" component={HomeScreen} />
+          <Stack.Screen name="ProfileScreen" component={ProfileScreen} />
+        </Stack.Navigator>
+      </NavigationContainer>
+    </UserContext.Provider>
   );
 }
 

diff --git a/src/components/task.tsx b/src/components/task.tsx
@@ -1,21 +1,25 @@
+//react imports
 import {View, Text, StyleSheet} from 'react-native';
+import React from 'react';
 
 //local imports
 import themeProvider from './providers/themeProvider';
 import tasks from '../utils/currentTasks';
+import {Task, Tasks} from './types';
 
-const tasksArray = Object.values(tasks);
+const tasksArray = Object.values(tasks) as Task[];
 
-export default function task({item}: {item: number}): JSX.Element {
+export default function task({item}: {item: string}): JSX.Element {
+  const {title, deadline, stakes} = tasksArray[Number(item)];
   return (
     <View style={styles.taskBlock}>
       <View>
-        <Text style={styles.taskTitle}>{tasksArray[item].title}</Text>
-        <Text style={styles.taskDeadline}>{tasksArray[item].deadline}</Text>
+        <Text style={styles.taskTitle}>{title}</Text>
+        <Text style={styles.taskDeadline}>{deadline}</Text>
       </View>
 
       <View style={styles.taskSideRight}>
-        <Text style={styles.taskStakes}>{tasksArray[item].stakes}</Text>
+        <Text style={styles.taskStakes}>{stakes}</Text>
       </View>
     </View>
   );

diff --git a/src/components/types.tsx b/src/components/types.tsx
@@ -0,0 +1,13 @@
+// types.ts
+export type Task = {
+  id: number;
+  title: string;
+  description: string;
+  completed: boolean;
+  deadline: string;
+  stakes: string;
+};
+
+export type Tasks = {
+  [key: string]: Task;
+};
diff --git a/src/screens/HomeScreen.tsx b/src/screens/HomeScreen.tsx
@@ -1,5 +1,5 @@
 //dependencie imports
-import React from 'react';
+import React, {useContext} from 'react';
 import {
   SafeAreaView,
   StatusBar,
@@ -22,6 +22,7 @@ import NavBar from '../components/navBar';
 import user from '../utils/currentUser';
 import Task from '../components/task';
 import tasks from '../utils/currentTasks';
+import {UserContext} from '../App';
 
 export default function HomeScreen(): JSX.Element {
   const backgroundStyle = {
@@ -30,36 +31,39 @@ export default function HomeScreen(): JSX.Element {
       : themeProvider.colorsLight.background,
   };
 
+  const handleUserProfilePress = () => {
+    console.log('user profile pressed');
+  };
+
+  const {currentUser} = useContext(UserContext);
+
   return (
     <View style={[backgroundStyle, styles.background]}>
-      <ScrollView style={styles.scroll}>
+      <ScrollView>
         <View style={styles.userProfile}>
           <Pressable
             style={styles.userProfile}
-            onPress={() => {
-              console.log('user profile pressed');
-            }}>
-            <Text style={styles.name}>{user.name}</Text>
+            onPress={handleUserProfilePress}>
+            <Text style={styles.name}>{currentUser}</Text>
             <Image source={{uri: user.avatar}} style={styles.avatar} />
           </Pressable>
         </View>
         <View style={styles.taskList}>
           {Object.keys(tasks).map(key => {
-            console.log(key);
-            return <Task key={key} item={Number(key)} />;
+            return <Task key={key} item={key} />;
           })}
         </View>
       </ScrollView>
 
-      <View style={styles.scroll}></View>
-      <View style={styles.navBar}>
-        <NavBar />
-      </View>
+      <View style={styles.navBar}></View>
     </View>
   );
 }
 
 const styles = StyleSheet.create({
+  background: {
+    flex: 1,
+  },
   taskList: {},
   avatar: {
     width: 50,
@@ -76,11 +80,5 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  scroll: {
-    flex: 0,
-  },
   navBar: {},
-  background: {
-    height: '100%',
-  },
 });
diff --git a/src/screens/LoginScreen.tsx b/src/screens/LoginScreen.tsx
@@ -2,22 +2,19 @@
 import React, {useState} from 'react';
 import {
   SafeAreaView,
-  StatusBar,
   StyleSheet,
   Text,
   View,
   TextInput,
   Image,
-  Button,
   Pressable,
-  TouchableOpacity,
 } from 'react-native';
-import {Colors} from 'react-native/Libraries/NewAppScreen';
 
 //local imports
 import checkCredentials from '../utils/checkCredentials';
 import useIsDarkMode from '../utils/checkDarkMode';
 import themeProvider from '../components/providers/themeProvider';
+import {UserContext} from '../App';
 
 export default function LoginScreen({navigation}): JSX.Element {
   const backgroundStyle = {
@@ -37,6 +34,8 @@ export default function LoginScreen({navigation}): JSX.Element {
   const [passInput, setPassInput] = React.useState('');
   const [outputStatus, setOutputStatus] = React.useState('');
 
+  const {setCurrentUser} = React.useContext(UserContext);
+
   return (
     // this is the background \/
     <View style={[backgroundStyle, styles.screen]}>
@@ -91,9 +90,16 @@ export default function LoginScreen({navigation}): JSX.Element {
           onPress={() => {
             console.log('Username', userInput);
             console.log('Password', passInput);
-            checkCredentials(userInput, passInput)
-              ? navigation.navigate('HomeScreen')
-              : setOutputStatus('Login Failed, try again!');
+            const credentialsCheckResult = checkCredentials(
+              userInput,
+              passInput,
+            );
+            if (credentialsCheckResult !== null) {
+              setCurrentUser(credentialsCheckResult);
+              navigation.navigate('HomeScreen');
+            } else {
+              setOutputStatus('Login Failed, try again!');
+            }
           }}>
           <Text style={styles.loginText}>Login</Text>
         </Pressable>
@@ -124,7 +130,7 @@ const styles = StyleSheet.create({
     height: '100%',
   },
   container: {
-    marginTop: '50%',
+    marginTop: '30%',
     padding: 24,
     fontSize: 50,
     alignItems: 'center',

diff --git a/src/utils/checkCredentials.tsx b/src/utils/checkCredentials.tsx
@@ -1,11 +1,27 @@
-const users: {[key: string]: string} = {
-  John: '123456',
+const users = {
+  User1: {
+    username: 'John',
+    password: '123456',
+    email: '[email protected]',
+  },
+  User2: {
+    username: 'Jane',
+    password: 'Janejane',
+    email: '[email protected]',
+  },
 };
 
 export default function checkCredentials(username: string, password: string) {
-  if (users.hasOwnProperty(username) && password === users[username]) {
-    return true;
+  const lowerCaseUsername = username.toLowerCase();
+  const matchingUser = Object.values(users).find(
+    user =>
+      user.username.toLowerCase() === lowerCaseUsername ||
+      user.email.toLowerCase() === lowerCaseUsername,
+  );
+
+  if (matchingUser && password === matchingUser.password) {
+    return matchingUser.username;
   } else {
-    return false;
+    return null;
   }
 }
diff --git a/src/utils/currentTasks.tsx b/src/utils/currentTasks.tsx
@@ -1,4 +1,7 @@
-const tasks = {
+// mockData.ts
+import {Task, Tasks} from '../components/types';
+
+const tasks: Tasks = {
   0o0: {
     id: 0o0,
     title: 'Finish React project',