mirror of
https://github.com/lemeow125/React-NotesApp.git
synced 2024-11-16 22:19:27 +08:00
Added logic to support adding and editing of public notes
This commit is contained in:
parent
9bd19b2baf
commit
906063a2a2
5 changed files with 37 additions and 8 deletions
|
@ -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}
|
||||||
|
|
|
@ -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}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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) {}
|
||||||
|
|
|
@ -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) {}
|
||||||
|
|
Loading…
Reference in a new issue