diff --git a/App.tsx b/App.tsx index 62b43f4..e08a156 100644 --- a/App.tsx +++ b/App.tsx @@ -13,31 +13,31 @@ 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(); export default function App() { return ( - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + ); -} \ No newline at end of file +} diff --git a/src/Components/Note/Note.tsx b/src/Components/Note/Note.tsx index 19657c0..e56b355 100644 --- a/src/Components/Note/Note.tsx +++ b/src/Components/Note/Note.tsx @@ -1,9 +1,22 @@ 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(); + const queryClient = useQueryClient(); + const mutation = useMutation({ + mutationFn: DeleteNote, + onSuccess: () => { + queryClient.invalidateQueries("notes"); + queryClient.invalidateQueries("public_notes"); + }, + }); return ( @@ -19,6 +32,32 @@ export default function Note(props: NoteProps) { {props.content} + + { + console.log("Deleted note id " + props.id); + mutation.mutate(props.id); + }} + width={64} + > + + Delete Note + + + { + navigation.navigate("EditNote", { noteId: props.id }); + console.log("Editing note id " + props.id); + }} + width={64} + > + + Edit Note + + + ); } diff --git a/src/Components/PublicNote/PublicNote.tsx b/src/Components/PublicNote/PublicNote.tsx new file mode 100644 index 0000000..87e313e --- /dev/null +++ b/src/Components/PublicNote/PublicNote.tsx @@ -0,0 +1,24 @@ +import * as React from "react"; +import { View, Text, TextInput, ScrollView } from "react-native"; +import styles from "../../styles"; +import { NoteProps } from "../../Interfaces/Interfaces"; + +export default function PublicNote(props: NoteProps) { + return ( + + + + + + + {props.content} + + + + ); +} diff --git a/src/Components/PublicNotes/Notes.tsx b/src/Components/PublicNotes/Notes.tsx index efc4850..82ab0c1 100644 --- a/src/Components/PublicNotes/Notes.tsx +++ b/src/Components/PublicNotes/Notes.tsx @@ -8,6 +8,7 @@ import { RootState } from "../../Features/Redux/Store/Store"; import { NoteProps, RootDrawerParamList } from "../../Interfaces/Interfaces"; import { useNavigation } from "@react-navigation/native"; import Note from "../Note/Note"; +import PublicNote from "../PublicNote/PublicNote"; export default function PublicNotes() { const navigation = useNavigation(); @@ -39,7 +40,7 @@ export default function PublicNotes() { {notes.map((note: NoteProps, index: number) => { return ( - { + setNote(data); + }, [data]); + + const queryClient = useQueryClient(); + const mutation = useMutation({ + mutationFn: UpdateNote, + onSuccess: () => { + queryClient.invalidateQueries("notes"); + queryClient.invalidateQueries("public_notes"); + }, + }); + if (error) { + return ( + + + Error retrieving specific note + + + ); + } + if (isLoading) { + return ( + + + Loading note... + + + ); + } + if (data && note) { + return ( + + + Edit Note + + + + { + setNote({ ...note, title: text }); + }} + maxLength={20} + /> + + + { + await setNote({ ...note, content: text }); + }} + /> + + + setNote({ ...note, public: !note.public })} + value={note.public} + /> + + Public? + + + { + try { + await mutation.mutate({ + title: note.title, + content: note.content, + public: note.public, + id: noteId, + }); + navigation.navigate("Home"); + } catch (error) {} + console.log(note.content); + }} + > + SAVE + + { + navigation.navigate("Home"); + }} + > + CANCEL + + + + ); + } +} diff --git a/src/Routes/NewNote/NewNote.tsx b/src/Routes/NewNote/NewNote.tsx index e10b50c..54a0fef 100644 --- a/src/Routes/NewNote/NewNote.tsx +++ b/src/Routes/NewNote/NewNote.tsx @@ -1,10 +1,10 @@ -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 * as React from "react"; +import { View, Text, TextInput, Switch } 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 { TouchableOpacity } from "react-native"; import { RootDrawerParamList } from "../../Interfaces/Interfaces"; import { useNavigation } from "@react-navigation/native"; import { useMutation, useQueryClient } from "react-query"; @@ -14,10 +14,11 @@ export default function NewNote() { const [note, setNote] = useState({ title: "", content: "", + public: false, }); const navigation = useNavigation(); - + const queryClient = useQueryClient(); const mutation = useMutation({ mutationFn: AddNote, @@ -28,54 +29,77 @@ export default function NewNote() { return ( - New Note - - - - { - setNote({ ...note, title: text }); + + New Note + + + + + { + setNote({ ...note, title: text }); + }} + maxLength={20} + /> + + + { + await setNote({ ...note, content: text }); + }} + /> + + - - - { - await setNote({ ...note, content: text }); + > + setNote({ ...note, public: !note.public })} + value={note.public} + /> + + Public? + + + { + try { + await mutation.mutate({ + title: note.title, + content: note.content, + public: note.public, + }); + navigation.navigate("Home"); + } catch (error) {} + console.log(note.content); }} - /> - - { - try { - await mutation.mutate({ - title: note.title, - content: note.content, - }); - navigation.navigate("Home"); - } catch (error) {} - console.log(note.content) - }}> - - SAVE - - { - navigation.navigate("Home"); - }}> - CANCEL - - - + > + SAVE + + { + navigation.navigate("Home"); + }} + > + CANCEL + + ); diff --git a/src/styles.tsx b/src/styles.tsx index 7b212a1..a77b043 100644 --- a/src/styles.tsx +++ b/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", @@ -179,7 +180,8 @@ const styles = StyleSheet.create({ addnotecont: { marginTop: 30, marginLeft: 22, - height: 500, + paddingBottom: 30, + minHeight: 500, width: 350, borderRadius: 25, backgroundColor: "black",