Made notes editable

App.tsx

@@ -13,7 +13,7 @@ import Register from "./src/Routes/Register/Register";
 import { Provider } from "react-redux";
 import Store from "./src/Features/Redux/Store/Store";
 import { QueryClient, QueryClientProvider } from "react-query";
-
+import EditNote from "./src/Routes/EditNote/EditNote";
 
 const Drawer = createDrawerNavigator();
 const queryClient = new QueryClient();
@@ -34,7 +34,7 @@ export default function App() {
             <Drawer.Screen name="Login" component={Login} />
             <Drawer.Screen name="Register" component={Register} />
             <Drawer.Screen name="LogOut" component={Register} />
-        
+            <Drawer.Screen name="EditNote" component={EditNote} />
           </Drawer.Navigator>
         </NavigationContainer>
       </QueryClientProvider>

src/Components/Note/Note.tsx

@@ -1,12 +1,14 @@
 import * as React from "react";
 import { View, Text, TextInput, ScrollView } from "react-native";
 import styles from "../../styles";
-import { NoteProps } from "../../Interfaces/Interfaces";
+import { NoteProps, RootDrawerParamList } from "../../Interfaces/Interfaces";
 import ButtonCentered from "../Buttons/ButtonCentered/ButtonCentered";
 import { useQueryClient, useMutation } from "react-query";
 import { DeleteNote } from "../Api/Api";
+import { useNavigation } from "@react-navigation/native";
 
 export default function Note(props: NoteProps) {
+  const navigation = useNavigation<RootDrawerParamList>();
   const queryClient = useQueryClient();
   const mutation = useMutation({
     mutationFn: DeleteNote,
@@ -45,7 +47,10 @@ export default function Note(props: NoteProps) {
         </ButtonCentered>
         <ButtonCentered
           color={"Yellow"}
-          onPress={() => console.log("Edited note id " + props.id)}
+          onPress={() => {
+            navigation.navigate("EditNote", { noteId: props.id });
+            console.log("Editing note id " + props.id);
+          }}
           width={64}
         >
           <Text style={{ ...styles.text_white, ...{ fontSize: 16 } }}>

src/Routes/EditNote/EditNote.tsx

@@ -0,0 +1,119 @@
+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 { useEffect, useState } from "react";
+import { TouchableOpacity } from "react-native";
+import { RootDrawerParamList } from "../../Interfaces/Interfaces";
+import { useNavigation } from "@react-navigation/native";
+import { useMutation, useQuery, useQueryClient } from "react-query";
+import { AddNote, GetNote, UpdateNote } from "../../Components/Api/Api";
+
+export default function EditNote({ navigation, route }: any) {
+  const { noteId } = route.params;
+  const [note, setNote] = useState({
+    title: "",
+    content: "",
+    public: true,
+  });
+  async function retrieve() {
+    let a = await GetNote(noteId);
+    setNote(a);
+    return a;
+  }
+  const { data, isLoading, error } = useQuery("note", retrieve, {
+    retry: 0,
+  });
+  useEffect(() => {
+    setNote(data);
+  }, [data]);
+
+  const queryClient = useQueryClient();
+  const mutation = useMutation({
+    mutationFn: UpdateNote,
+    onSuccess: () => {
+      queryClient.invalidateQueries("notes");
+      queryClient.invalidateQueries("public_notes");
+    },
+  });
+  if (error) {
+    return (
+      <Background>
+        <Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>
+          Error retrieving specific note
+        </Text>
+      </Background>
+    );
+  }
+  if (isLoading) {
+    return (
+      <Background>
+        <Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>
+          Loading note...
+        </Text>
+      </Background>
+    );
+  }
+  if (data && note) {
+    return (
+      <Background>
+        <Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>
+          Edit 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}
+                multiline={true}
+                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,
+                    id: noteId,
+                  });
+                  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>
+    );
+  }
+}

src/Routes/Note/Note.tsx

@@ -1,10 +0,0 @@
-import * as React from "react";
-import { View, Text } from "react-native";
-
-export default function Note(id: number) {
-  return (
-    <View>
-      <Text>Note</Text>
-    </View>
-  );
-}

src/styles.tsx

@@ -158,9 +158,10 @@ const styles = StyleSheet.create({
   },
   typeinput: {
     color: "white",
-    flex: 1,
-    paddingBottom: 250,
+    marginBottom: 16,
     marginLeft: 5,
+    minHeight: 128,
+    maxHeight: 768,
   },
   title: {
     color: "white",