typescript nav error corrected

Holat · Jul 24, 2023 · 1233a1e · 1233a1e
1 parent 182cc9e
commit 1233a1e
Show file tree

Hide file tree

Showing 8 changed files with 228 additions and 31 deletions.
diff --git a/app/_layout.tsx b/app/_layout.tsx
@@ -51,6 +51,7 @@ function RootLayoutNav() {
     <>
       <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
         <Stack>
+          <Stack.Screen name="loginScreen" options={{ headerShown: false }} />
           <Stack.Screen name="index" options={{ headerShown: false }} />
           <Stack.Screen name="modal" options={{ title: "History" }} />
         </Stack>

diff --git a/app/index.tsx b/app/index.tsx
@@ -6,25 +6,38 @@ import {
   Pressable,
   useColorScheme,
 } from "react-native";
-import React, { useState } from "react";
-import { FontAwesome5, Ionicons } from "@expo/vector-icons";
+import React, { useState, useEffect } from "react";
+import { FontAwesome5 } from "@expo/vector-icons";
 import { Link } from "expo-router";
-import { useNavigation } from "expo-router";
+import AsyncStorage from "@react-native-async-storage/async-storage";
 
 import Header from "../components/Header";
 import CreateScrn from "../components/CreateScrn";
 import List from "../components/List";
 import FONT from "../constants/FONT";
-import { listProp, showCreateProp } from "../types/type";
+import { listProp, HomeScreenProps } from "../types/type";
 import { light, dark } from "../constants/Colors";
 import Head from "../components/Head";
 
-const Home = () => {
-  const navigation = useNavigation();
+const Home: React.FC<HomeScreenProps> = ({ navigation }) => {
   const [create, showCreate] = useState(false);
+  const [username, setUser] = useState<string>("");
   const [taskItem, setTaskItem] = useState<listProp[]>([]);
   const DarkMode = useColorScheme() === "dark";
 
+  useEffect(() => {
+    checkUsername();
+  }, []);
+
+  const checkUsername = async () => {
+    const username = await AsyncStorage.getItem("username");
+    if (!username) {
+      navigation.navigate("loginScreen");
+    } else {
+      setUser(username);
+    }
+  };
+
   return (
     <View
       style={[styles.cont, DarkMode && { backgroundColor: dark.background2 }]}
@@ -34,7 +47,7 @@ const Home = () => {
           <FontAwesome5 name="history" size={24} color="lightgray" />
         </Pressable>
       </Link>
-      <Header />
+      <Header user={username} />
       <View
         style={[
           styles.todoCont,

diff --git a/app/loginScreen.tsx b/app/loginScreen.tsx
@@ -1,14 +1,101 @@
-import { StyleSheet, Text, View } from "react-native";
-import React from "react";
+import {
+  StyleSheet,
+  View,
+  TextInput,
+  Image,
+  Pressable,
+  Alert,
+} from "react-native";
+import React, { useState } from "react";
+import { Ionicons } from "@expo/vector-icons";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { useNavigation } from "@react-navigation/native";
+
+import { light } from "../constants/Colors";
+import FONT from "../constants/FONT";
+import { LoginScreenProps } from "../types/type";
+
+const LoginScreen: React.FC<LoginScreenProps> = ({ navigation }) => {
+  // const navigation = useNavigation();
+  const [username, setUser] = useState<string>("");
+
+  const saveUser = async () => {
+    if (username.trim().length === 0) {
+      Alert.alert("Enter a username");
+      return;
+    }
+
+    await AsyncStorage.setItem("username", username);
+    navigation.navigate("index");
+  };
 
-const LoginScreen = () => {
   return (
-    <View>
-      <Text>LoginScreen</Text>
+    <View style={styles.cont}>
+      <View style={styles.logCont}>
+        <Image
+          source={require("../assets/images/icon.png")}
+          style={styles.img}
+          resizeMode="cover"
+        />
+        <View style={styles.inCont}>
+          <TextInput
+            placeholder="Enter a username"
+            style={styles.txtInput}
+            onChangeText={(text) => setUser(text)}
+          />
+          <Pressable onPress={saveUser}>
+            <Ionicons name="chevron-forward-circle" size={50} color="#004080" />
+          </Pressable>
+        </View>
+      </View>
     </View>
   );
 };
 
 export default LoginScreen;
 
-const styles = StyleSheet.create({});
+const styles = StyleSheet.create({
+  cont: {
+    flex: 1,
+    backgroundColor: "#004080",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  img: {
+    width: 160,
+    height: 160,
+  },
+  logCont: {
+    backgroundColor: light.background1,
+    padding: 20,
+    borderRadius: 15,
+    alignItems: "center",
+    width: "80%",
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 1,
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 1.41,
+
+    elevation: 2,
+  },
+  inCont: {
+    width: "100%",
+    padding: 0,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginTop: 50,
+  },
+  txtInput: {
+    backgroundColor: light.background3,
+    padding: 10,
+    borderRadius: 5,
+    fontFamily: FONT.JSemibold,
+    width: "80%",
+    textAlign: "center",
+    fontSize: 16,
+  },
+});
diff --git a/app/modal.tsx b/app/modal.tsx
@@ -6,17 +6,20 @@ import {
   Text,
   FlatList,
 } from "react-native";
-import { dark } from "../constants/Colors";
+import { dark, light } from "../constants/Colors";
 import React, { useEffect, useState } from "react";
 import { FontAwesome5, Ionicons } from "@expo/vector-icons";
 
 import { listProp } from "../types/type";
 import { fetchTaskItems } from "../constants/FUNT";
 import FONT from "../constants/FONT";
 import HistoryCard from "../components/historyCard";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { ModalScreenProps } from "../types/type";
 
-export default function ModalScreen() {
+const ModalScreen: React.FC<ModalScreenProps> = () => {
   const [history, setHistory] = useState<listProp[]>([]);
+  const DarkMode = useColorScheme() === "dark";
 
   useEffect(() => {
     const fetchData = async () => {
@@ -30,25 +33,47 @@ export default function ModalScreen() {
     fetchData();
   }, []);
 
-  const DarkMode = useColorScheme() === "dark";
-
+  const deleteAll = async () => {
+    setHistory([]);
+    await AsyncStorage.removeItem("history");
+  };
   return (
     <View
       style={[
         styles.container,
         DarkMode && { backgroundColor: dark.background1 },
       ]}
     >
-      <FlatList
-        data={history}
-        keyExtractor={(item) => item.key}
-        renderItem={({ item }) => (
-          <HistoryCard DarkMode={DarkMode} item={item} />
-        )}
-      />
+      {history.length > 0 ? (
+        <>
+          <Pressable
+            style={[
+              styles.bin,
+              DarkMode && { backgroundColor: dark.background2 },
+            ]}
+            onPress={deleteAll}
+          >
+            <Ionicons name="ios-trash-outline" size={30} color="white" />
+          </Pressable>
+          <FlatList
+            data={history}
+            keyExtractor={(item) => item.key}
+            renderItem={({ item }) => (
+              <HistoryCard DarkMode={DarkMode} item={item} />
+            )}
+          />
+        </>
+      ) : (
+        <View style={styles.emptyCont}>
+          <Text style={styles.emptyTxt}>No Completed Task</Text>
+          <Text style={[styles.emptyTxt, { fontFamily: FONT.JRegular }]}>
+            Tasks that are marked will show here
+          </Text>
+        </View>
+      )}
     </View>
   );
-}
+};
 
 const styles = StyleSheet.create({
   container: {
@@ -57,4 +82,34 @@ const styles = StyleSheet.create({
     paddingVertical: 10,
     backgroundColor: "white",
   },
+  bin: {
+    zIndex: 100,
+    backgroundColor: light.background2,
+    borderRadius: 50,
+    width: 60,
+    aspectRatio: 1,
+    position: "absolute",
+    bottom: 30,
+    right: 20,
+    alignItems: "center",
+    justifyContent: "center",
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+
+    elevation: 5,
+  },
+  emptyCont: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  emptyTxt: {
+    color: light.text3,
+    fontFamily: FONT.JSemibold,
+  },
 });
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -4,7 +4,7 @@ import { Ionicons } from "@expo/vector-icons";
 
 import FONT from "../constants/FONT";
 
-const Header = () => {
+const Header = ({ user }: { user: string }) => {
   const date = new Date();
   const hour = date.getHours();
   const month = Intl.DateTimeFormat("en", { month: "short" }).format(date);
@@ -28,7 +28,7 @@ const Header = () => {
     <View style={styles.Cont}>
       <View>
         <Text style={styles.gText}>Good {timeOfDay}</Text>
-        <Text style={styles.gText1}>Holat</Text>
+        <Text style={styles.gText1}>{user}</Text>
         <View style={styles.gText23}>
           <Text style={styles.gText2}>TASK TO DO</Text>
           <Text style={styles.gText3}>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,7 +14,8 @@
   "dependencies": {
     "@expo/vector-icons": "^13.0.0",
     "@react-native-async-storage/async-storage": "1.17.11",
-    "@react-navigation/native": "^6.0.2",
+    "@react-navigation/native": "^6.1.7",
+    "@react-navigation/stack": "^6.3.17",
     "expo": "~48.0.18",
     "expo-font": "~11.1.1",
     "expo-linking": "~4.0.1",

diff --git a/types/type.tsx b/types/type.tsx
@@ -1,4 +1,4 @@
-import { GestureResponderEvent } from "react-native";
+import { StackNavigationProp } from "@react-navigation/stack";
 
 type listProp = {
   key: string;
@@ -42,13 +42,34 @@ type historyCardProp = {
   DarkMode: boolean;
   item: listProp;
 };
+
+type RootStackParamList = {
+  loginScreen: undefined;
+  index: undefined;
+  modal: undefined;
+};
+
+type LoginScreenProps = {
+  navigation: StackNavigationProp<RootStackParamList, "loginScreen">;
+};
+
+type HomeScreenProps = {
+  navigation: StackNavigationProp<RootStackParamList, "index">;
+};
+
+type ModalScreenProps = {
+  navigation: StackNavigationProp<RootStackParamList, "modal">;
+};
+
 export {
   listProp,
   todoCardProp,
   showCreateProp,
   createScreenProp,
   ListProp,
-  // DataItems,
   DataProp,
   historyCardProp,
+  LoginScreenProps,
+  HomeScreenProps,
+  ModalScreenProps,
 };