From e8d447d7ab9e6a334e2e7e2ae18060e1a5511795 Mon Sep 17 00:00:00 2001
From: toledo <kurtzidanetoledo@gmail.com>
Date: Sat, 8 Apr 2023 22:39:18 +0800
Subject: [PATCH] Integrated Api for New Notes

---
 App.tsx                                       |  32 +++--
 .../CustomDrawerContent.tsx                   |   4 +-
 src/Routes/Home/Home.tsx                      |   2 +-
 .../AddNote.tsx => NewNote/NewNote.tsx}       | 136 +++++++++++-------
 4 files changed, 102 insertions(+), 72 deletions(-)
 rename src/Routes/{AddNote/AddNote.tsx => NewNote/NewNote.tsx} (54%)

diff --git a/App.tsx b/App.tsx
index 81e4850..1cb5142 100644
--- a/App.tsx
+++ b/App.tsx
@@ -7,7 +7,7 @@ import DrawerScreenSettings from "./src/Components/Drawer/DrawerScreenSettings/D
 
 import Home from "./src/Routes/Home/Home";
 import UserInfo from "./src/Routes/UserInfo/UserInfo";
-import AddNote from "./src/Routes/AddNote/AddNote";
+import NewNote from "./src/Routes/NewNote/NewNote";
 import Login from "./src/Routes/Login/Login";
 import Register from "./src/Routes/Register/Register";
 import { Provider } from "react-redux";
@@ -16,25 +16,27 @@ import { QueryClient, QueryClientProvider } from "react-query";
 
 
 const Drawer = createDrawerNavigator();
-
+const queryClient = new QueryClient();
 
 export default function App() {
   return (
   <Provider store={Store}>
-    <NavigationContainer>
-      <Drawer.Navigator
-        initialRouteName="Home"
-        drawerContent={CustomDrawerContent}
-        screenOptions={DrawerScreenSettings}
-      >
-        <Drawer.Screen name="Home" component={Home} />
-        <Drawer.Screen name="Add Note" component={AddNote} />
-        <Drawer.Screen name="User Info" component={UserInfo} />
-        <Drawer.Screen name="Login" component={Login} />
-        <Drawer.Screen name="Register" component={Register} />
+    <QueryClientProvider client={queryClient}>
+      <NavigationContainer>
+        <Drawer.Navigator
+          initialRouteName="Home"
+          drawerContent={CustomDrawerContent}
+          screenOptions={DrawerScreenSettings}
+        >
+         <Drawer.Screen name="Home" component={Home} />
+         <Drawer.Screen name="New Note" component={NewNote} />
+         <Drawer.Screen name="User Info" component={UserInfo} />
+         <Drawer.Screen name="Login" component={Login} />
+         <Drawer.Screen name="Register" component={Register} />
         
-      </Drawer.Navigator>
-    </NavigationContainer>
+        </Drawer.Navigator>
+      </NavigationContainer>
+    </QueryClientProvider>
   </Provider>
   );
 }
\ No newline at end of file
diff --git a/src/Components/Drawer/DrawerScreenSettings/CustomDrawerContent/CustomDrawerContent.tsx b/src/Components/Drawer/DrawerScreenSettings/CustomDrawerContent/CustomDrawerContent.tsx
index b104bc9..201ddc4 100644
--- a/src/Components/Drawer/DrawerScreenSettings/CustomDrawerContent/CustomDrawerContent.tsx
+++ b/src/Components/Drawer/DrawerScreenSettings/CustomDrawerContent/CustomDrawerContent.tsx
@@ -44,12 +44,12 @@ export default function CustomDrawerContent(props: {}) {
         color="Green"
         width={width}
         onPress={() => {
-          navigation.navigate("Add Note");
+          navigation.navigate("New Note");
         }}
       >
         <AddIcon size={32} color="white" />
         <Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>
-          Add Note
+          New Note
         </Text>
       </ButtonAlignLeft>
       <ButtonAlignLeft
diff --git a/src/Routes/Home/Home.tsx b/src/Routes/Home/Home.tsx
index e8c3f99..5851b61 100644
--- a/src/Routes/Home/Home.tsx
+++ b/src/Routes/Home/Home.tsx
@@ -27,7 +27,7 @@ export default function Home() {
         <View style={styles.homecont}>
           <TouchableOpacity
             onPress={() => {
-              navigation.navigate("Add Note");
+              navigation.navigate("New Note");
             }}
           >
             <Text style={styles.newnote}>+</Text>
diff --git a/src/Routes/AddNote/AddNote.tsx b/src/Routes/NewNote/NewNote.tsx
similarity index 54%
rename from src/Routes/AddNote/AddNote.tsx
rename to src/Routes/NewNote/NewNote.tsx
index 66a7e83..e10b50c 100644
--- a/src/Routes/AddNote/AddNote.tsx
+++ b/src/Routes/NewNote/NewNote.tsx
@@ -1,54 +1,82 @@
-import * as React from 'react';
-import {View, Text, TextInput} from 'react-native';
-import styles from '../../styles';
-import Background from '../../Components/Background/Background';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import { useState } from "react";
-import {TouchableOpacity,} from "react-native";
-import { RootDrawerParamList } from "../../Interfaces/Interfaces";
-import { useNavigation } from "@react-navigation/native";
-
-export default function AddNote() {
-  const [addnote, setNote] = useState("");
-  const [addtitle, setTitle] = useState("");
-  
-  const navigation = useNavigation<RootDrawerParamList>();
-
-  return (
-    <Background>
-      <Text style={{...styles.text_white, ...{fontSize: 32}}}>Add Note</Text>
-      <SafeAreaView>  
-      <View style={styles.addnotecont}> 
-      <View style={styles.tle}>
-      <TextInput 
-            style={styles.title}
-            placeholder="Title"
-            placeholderTextColor="white"
-            onChangeText={setTitle} 
-            value={addtitle}
-          />
-        </View>   
-        <View style={styles.typehere}> 
-        <TextInput 
-            style={styles.typeinput}
-            placeholder="Type here...."
-            placeholderTextColor="white"
-            onChangeText={setNote} 
-            value={addnote} 
-          /> 
-       </View>
-      <TouchableOpacity style={styles.savebtn}>
-      <Text style={styles.savenote}>SAVE</Text>
-      </TouchableOpacity>
-      <TouchableOpacity style={styles.cancelbtn}
-       onPress={() => {
-        navigation.navigate("Home");  
-      }}>
-      <Text style={styles.cancel}>CANCEL</Text>
-      </TouchableOpacity>
-      </View>
-      
-      </SafeAreaView>
-    </Background>
-  );
-}
+import * as React from 'react';
+import {View, Text, TextInput} from 'react-native';
+import styles from '../../styles';
+import Background from '../../Components/Background/Background';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useState } from "react";
+import {TouchableOpacity,} from "react-native";
+import { RootDrawerParamList } from "../../Interfaces/Interfaces";
+import { useNavigation } from "@react-navigation/native";
+import { useMutation, useQueryClient } from "react-query";
+import { AddNote } from "../../Components/Api/Api";
+
+export default function NewNote() {
+  const [note, setNote] = useState({
+    title: "",
+    content: "",
+  });
+
+  const navigation = useNavigation<RootDrawerParamList>();
+ 
+  const queryClient = useQueryClient();
+  const mutation = useMutation({
+    mutationFn: AddNote,
+    onSuccess: () => {
+      queryClient.invalidateQueries("notes");
+    },
+  });
+
+  return (
+    <Background>
+      <Text style={{...styles.text_white, ...{fontSize: 32}}}>New Note</Text>
+      <SafeAreaView>  
+      <View style={styles.addnotecont}> 
+      <View style={styles.tle}>
+      <TextInput 
+            style={styles.title}
+            placeholder="Title"
+            placeholderTextColor="white"
+            value={note.title}
+            onChangeText={(text) => {
+              setNote({ ...note, title: text });
+            }}
+            maxLength={20}
+          />
+        </View>   
+        <View style={styles.typehere}> 
+        <TextInput 
+            style={styles.typeinput}
+            placeholder="Type here...."
+            placeholderTextColor="white"
+            value={note.content} 
+            onChangeText={async (text) => {
+              await setNote({ ...note, content: text });
+            }}
+          /> 
+       </View>
+      <TouchableOpacity style={styles.savebtn}
+        onPress={async () => {
+          try {
+            await mutation.mutate({
+              title: note.title,
+              content: note.content,
+            });
+            navigation.navigate("Home");
+          } catch (error) {}
+          console.log(note.content)
+        }}>
+        
+      <Text style={styles.savenote}>SAVE</Text>
+      </TouchableOpacity>
+      <TouchableOpacity style={styles.cancelbtn}
+       onPress={() => {
+        navigation.navigate("Home");  
+      }}>
+      <Text style={styles.cancel}>CANCEL</Text>
+      </TouchableOpacity>
+      </View>
+      
+      </SafeAreaView>
+    </Background>
+  );
+}