Integrated Api for New Notes

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>
+    <QueryClientProvider client={queryClient}>
-      <Drawer.Navigator
+      <NavigationContainer>
-        initialRouteName="Home"
+        <Drawer.Navigator
-        drawerContent={CustomDrawerContent}
+          initialRouteName="Home"
-        screenOptions={DrawerScreenSettings}
+          drawerContent={CustomDrawerContent}
-      >
+          screenOptions={DrawerScreenSettings}
-        <Drawer.Screen name="Home" component={Home} />
+        >
-        <Drawer.Screen name="Add Note" component={AddNote} />
+         <Drawer.Screen name="Home" component={Home} />
-        <Drawer.Screen name="User Info" component={UserInfo} />
+         <Drawer.Screen name="New Note" component={NewNote} />
-        <Drawer.Screen name="Login" component={Login} />
+         <Drawer.Screen name="User Info" component={UserInfo} />
-        <Drawer.Screen name="Register" component={Register} />
+         <Drawer.Screen name="Login" component={Login} />
+         <Drawer.Screen name="Register" component={Register} />
         
-      </Drawer.Navigator>
+        </Drawer.Navigator>
-    </NavigationContainer>
+      </NavigationContainer>
+    </QueryClientProvider>
   </Provider>
   );
 }

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

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>

src/Routes/NewNote/NewNote.tsx

@@ -1,54 +1,82 @@
-import * as React from 'react';
+import * as React from 'react';
-import {View, Text, TextInput} from 'react-native';
+import {View, Text, TextInput} from 'react-native';
-import styles from '../../styles';
+import styles from '../../styles';
-import Background from '../../Components/Background/Background';
+import Background from '../../Components/Background/Background';
-import { SafeAreaView } from 'react-native-safe-area-context';
+import { SafeAreaView } from 'react-native-safe-area-context';
-import { useState } from "react";
+import { useState } from "react";
-import {TouchableOpacity,} from "react-native";
+import {TouchableOpacity,} from "react-native";
-import { RootDrawerParamList } from "../../Interfaces/Interfaces";
+import { RootDrawerParamList } from "../../Interfaces/Interfaces";
-import { useNavigation } from "@react-navigation/native";
+import { useNavigation } from "@react-navigation/native";
-
+import { useMutation, useQueryClient } from "react-query";
-export default function AddNote() {
+import { AddNote } from "../../Components/Api/Api";
-  const [addnote, setNote] = useState("");
+
-  const [addtitle, setTitle] = useState("");
+export default function NewNote() {
-  
+  const [note, setNote] = useState({
-  const navigation = useNavigation<RootDrawerParamList>();
+    title: "",
-
+    content: "",
-  return (
+  });
-    <Background>
+
-      <Text style={{...styles.text_white, ...{fontSize: 32}}}>Add Note</Text>
+  const navigation = useNavigation<RootDrawerParamList>();
-      <SafeAreaView>  
+ 
-      <View style={styles.addnotecont}> 
+  const queryClient = useQueryClient();
-      <View style={styles.tle}>
+  const mutation = useMutation({
-      <TextInput 
+    mutationFn: AddNote,
-            style={styles.title}
+    onSuccess: () => {
-            placeholder="Title"
+      queryClient.invalidateQueries("notes");
-            placeholderTextColor="white"
+    },
-            onChangeText={setTitle} 
+  });
-            value={addtitle}
+
-          />
+  return (
-        </View>   
+    <Background>
-        <View style={styles.typehere}> 
+      <Text style={{...styles.text_white, ...{fontSize: 32}}}>New Note</Text>
-        <TextInput 
+      <SafeAreaView>  
-            style={styles.typeinput}
+      <View style={styles.addnotecont}> 
-            placeholder="Type here...."
+      <View style={styles.tle}>
-            placeholderTextColor="white"
+      <TextInput 
-            onChangeText={setNote} 
+            style={styles.title}
-            value={addnote} 
+            placeholder="Title"
-          /> 
+            placeholderTextColor="white"
-       </View>
+            value={note.title}
-      <TouchableOpacity style={styles.savebtn}>
+            onChangeText={(text) => {
-      <Text style={styles.savenote}>SAVE</Text>
+              setNote({ ...note, title: text });
-      </TouchableOpacity>
+            }}
-      <TouchableOpacity style={styles.cancelbtn}
+            maxLength={20}
-       onPress={() => {
+          />
-        navigation.navigate("Home");  
+        </View>   
-      }}>
+        <View style={styles.typehere}> 
-      <Text style={styles.cancel}>CANCEL</Text>
+        <TextInput 
-      </TouchableOpacity>
+            style={styles.typeinput}
-      </View>
+            placeholder="Type here...."
-      
+            placeholderTextColor="white"
-      </SafeAreaView>
+            value={note.content} 
-    </Background>
+            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>
+  );
+}