diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index da0c788..74cab77 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -72,7 +72,7 @@ export default function App() { } /> diff --git a/frontend/src/config/routes.ts b/frontend/src/config/routes.ts index 612fc5d..f698b48 100644 --- a/frontend/src/config/routes.ts +++ b/frontend/src/config/routes.ts @@ -5,6 +5,7 @@ export const ROUTES = { ACTIVATE: "/activate/:uidb64/:token", LOGIN: "/login", DRAWER: "/drawer", - WRITE: "/quill", + WRITE: (public_id?: string) => + `/quill/${public_id ? public_id : ":public_id?"}`, READ: "/read", }; diff --git a/frontend/src/pages/Editor.tsx b/frontend/src/pages/Editor.tsx index 6a2f29e..e3668e6 100644 --- a/frontend/src/pages/Editor.tsx +++ b/frontend/src/pages/Editor.tsx @@ -6,6 +6,7 @@ import { } from "@phosphor-icons/react"; import type { FabricObject } from "fabric"; import { useRef, useState } from "react"; +import { useNavigate, useParams } from "react-router-dom"; import { api } from "../api/apiClient"; import { type CanvasTools, @@ -13,11 +14,14 @@ import { } from "../components/ui/ComposeCanvas"; import DateDisplay from "../components/ui/DateDisplay"; import { endpoints } from "../config/endpoints"; +import { ROUTES } from "../config/routes"; import { useKeyStore } from "../store/useKeyStore"; import { CryptoUtils } from "../utils/crypto"; export default function Editor() { - const [_letterId] = useState(() => crypto.randomUUID()); + const { public_id } = useParams(); + const letterIdRef = useRef(public_id ?? null); + const navigate = useNavigate(); const [isSealing, setIsSealing] = useState(false); const [isSaveSuccess, setIsSaveSuccess] = useState(false); @@ -35,6 +39,10 @@ export default function Editor() { }; async function handleSeal(): Promise { + if (!public_id) { + letterIdRef.current = crypto.randomUUID(); + navigate(ROUTES.WRITE(letterIdRef.current), { replace: true }); + } if (isSealing) return; setIsSealing(true); const cryptoUtils = new CryptoUtils(); @@ -85,7 +93,7 @@ export default function Editor() { } */ const formData = new FormData(); - formData.append("public_id", _letterId); + formData.append("public_id", letterIdRef.current); formData.append("type", "SENT"); formData.append("status", "SEALED"); formData.append("encrypted_content", encrypted_letter.encrypted_content); @@ -96,7 +104,7 @@ export default function Editor() { }); try { - await api.post(endpoints.LETTERS, formData); + await api.put(`${endpoints.LETTERS}${letterIdRef.current}/`, formData); setIsSaveSuccess(true); setTimeout(() => { setIsSaveSuccess(false); @@ -111,13 +119,13 @@ export default function Editor() { return (
{isSaveSuccess && ( -
-
+
+
-

Letter saved successfully!

+

Your letter is sealed!

-
+ {/*
-
+
*/}
)}