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,11 +16,12 @@ import { QueryClient, QueryClientProvider } from "react-query";
 
 
 const Drawer = createDrawerNavigator();
-
+const queryClient = new QueryClient();
 
 export default function App() {
   return (
   <Provider store={Store}>
+    <QueryClientProvider client={queryClient}>
       <NavigationContainer>
         <Drawer.Navigator
           initialRouteName="Home"
@@ -28,13 +29,14 @@ export default function App() {
           screenOptions={DrawerScreenSettings}
         >
          <Drawer.Screen name="Home" component={Home} />
-        <Drawer.Screen name="Add Note" component={AddNote} />
+         <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>
+    </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

@@ -7,16 +7,28 @@ 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 AddNote() {
-  const [addnote, setNote] = useState("");
-  const [addtitle, setTitle] = useState("");
+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}}}>Add Note</Text>
+      <Text style={{...styles.text_white, ...{fontSize: 32}}}>New Note</Text>
       <SafeAreaView>  
       <View style={styles.addnotecont}> 
       <View style={styles.tle}>
@@ -24,8 +36,11 @@ export default function AddNote() {
             style={styles.title}
             placeholder="Title"
             placeholderTextColor="white"
-            onChangeText={setTitle} 
-            value={addtitle}
+            value={note.title}
+            onChangeText={(text) => {
+              setNote({ ...note, title: text });
+            }}
+            maxLength={20}
           />
         </View>   
         <View style={styles.typehere}> 
@@ -33,11 +48,24 @@ export default function AddNote() {
             style={styles.typeinput}
             placeholder="Type here...."
             placeholderTextColor="white"
-            onChangeText={setNote} 
-            value={addnote} 
+            value={note.content} 
+            onChangeText={async (text) => {
+              await setNote({ ...note, content: text });
+            }}
           /> 
        </View>
-      <TouchableOpacity style={styles.savebtn}>
+      <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}