Added logic to support adding and editing of public notes

This commit is contained in:
keannu125 2023-03-29 19:37:17 +08:00
parent 9bd19b2baf
commit 906063a2a2
5 changed files with 37 additions and 8 deletions

View file

@ -13,6 +13,7 @@ export default function Note(props: NoteProps) {
mutationFn: DeleteNote, mutationFn: DeleteNote,
onSuccess: () => { onSuccess: () => {
queryClient.invalidateQueries("notes"); queryClient.invalidateQueries("notes");
queryClient.invalidateQueries("public_notes");
}, },
}); });
return ( return (
@ -30,6 +31,7 @@ export default function Note(props: NoteProps) {
<p style={styles.text_medium}> <p style={styles.text_medium}>
Timestamp: {String(props.date_created)} Timestamp: {String(props.date_created)}
</p> </p>
<p style={styles.text_medium}>Public: {props.public ? "Yes" : "No"}</p>
<div style={styles.flex_row}> <div style={styles.flex_row}>
<Button <Button
style={styles.button_red} style={styles.button_red}

View file

@ -16,9 +16,7 @@ export default function Notes() {
isLoading, isLoading,
error, error,
} = useQuery("notes", GetNotes, { retry: 0 }); } = useQuery("notes", GetNotes, { retry: 0 });
const logged_in = useSelector( const logged_in = useSelector((state: RootState) => state.logged_in.value);
(state: RootState) => state.logged_in.value
);
if (isLoading) { if (isLoading) {
return ( return (
<div style={styles.note}> <div style={styles.note}>
@ -65,6 +63,7 @@ export default function Notes() {
content={note.content} content={note.content}
date_created={note.date_created} date_created={note.date_created}
owner={note.owner} owner={note.owner}
public={note.public}
/> />
); );
})} })}

View file

@ -6,6 +6,7 @@ export interface NoteProps {
id: number; id: number;
date_created: Date; date_created: Date;
owner: string; owner: string;
public: boolean;
} }
export interface IconProps { export interface IconProps {
@ -34,10 +35,12 @@ export interface ActivationParams {
export interface AddNoteParams { export interface AddNoteParams {
title: string; title: string;
content: string; content: string;
public: boolean;
} }
export interface UpdateNoteParams { export interface UpdateNoteParams {
id: number; id: number;
title: string; title: string;
content: string; content: string;
public: boolean;
} }

View file

@ -1,5 +1,5 @@
import styles from "../../styles"; import styles from "../../styles";
import { Button } from "@mui/material"; import { Button, Checkbox } from "@mui/material";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { useState } from "react"; import { useState } from "react";
import Header from "../../Components/Header/Header"; import Header from "../../Components/Header/Header";
@ -14,12 +14,14 @@ export default function NewNote() {
const [note, setNote] = useState({ const [note, setNote] = useState({
title: "", title: "",
content: "", content: "",
public: false,
}); });
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const mutation = useMutation({ const mutation = useMutation({
mutationFn: AddNote, mutationFn: AddNote,
onSuccess: () => { onSuccess: () => {
queryClient.invalidateQueries("notes"); queryClient.invalidateQueries("notes");
queryClient.invalidateQueries("public_notes");
}, },
}); });
@ -47,6 +49,15 @@ export default function NewNote() {
}} }}
/> />
</div> </div>
<div style={styles.flex_row}>
<p style={styles.text_small}>Public Note?</p>
<input
type="checkbox"
onClick={() => {
setNote({ ...note, public: !note.public });
}}
/>
</div>
<Button <Button
style={styles.button_green} style={styles.button_green}
variant="contained" variant="contained"
@ -55,6 +66,7 @@ export default function NewNote() {
await mutation.mutate({ await mutation.mutate({
title: note.title, title: note.title,
content: note.content, content: note.content,
public: note.public,
}); });
navigate("/"); navigate("/");
} catch (error) {} } catch (error) {}

View file

@ -1,5 +1,5 @@
import styles from "../../styles"; import styles from "../../styles";
import { Button } from "@mui/material"; import { Button, Checkbox } from "@mui/material";
import { useNavigate, useParams } from "react-router-dom"; import { useNavigate, useParams } from "react-router-dom";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import Header from "../../Components/Header/Header"; import Header from "../../Components/Header/Header";
@ -17,11 +17,13 @@ export default function ViewNote() {
mutationFn: UpdateNote, mutationFn: UpdateNote,
onSuccess: () => { onSuccess: () => {
queryClient.invalidateQueries("notes"); queryClient.invalidateQueries("notes");
queryClient.invalidateQueries("public_notes");
}, },
}); });
const [note, setNote] = useState({ const [note, setNote] = useState({
title: "test", title: "",
content: "test", content: "",
public: true,
}); });
async function retrieve() { async function retrieve() {
let a = await GetNote(Number(id)); let a = await GetNote(Number(id));
@ -53,7 +55,7 @@ export default function ViewNote() {
</div> </div>
); );
} }
if (data) { if (data && note) {
return ( return (
<div style={styles.background}> <div style={styles.background}>
<Header /> <Header />
@ -80,6 +82,16 @@ export default function ViewNote() {
}} }}
/> />
</div> </div>
<div style={styles.flex_row}>
<p style={styles.text_small}>Public Note?</p>
<input
type="checkbox"
defaultChecked={note.public}
onClick={() => {
setNote({ ...note, public: !note.public });
}}
/>
</div>
<Button <Button
style={styles.button_green} style={styles.button_green}
variant="contained" variant="contained"
@ -89,6 +101,7 @@ export default function ViewNote() {
id: Number(id), id: Number(id),
title: note.title, title: note.title,
content: note.content, content: note.content,
public: note.public,
}); });
navigate("/"); navigate("/");
} catch (error) {} } catch (error) {}