refactor(word-editor): word submit handling (#53)

This Pull Request refactors the word editor submit handling logic
introduced in #32 and #39 - specifically the `handleSubmitWord` handler;
This logic requires some side operations that trades off security for
the purpose of just running at all. This changes transfers the operation
performed by the handler to a new api route where they can be perform
securely.

### Changes Made

- Implemented the `/api/dictionary` route with a `POST` handler - this
route take all the extracted logic from `handleSubmitWord` handler and
does the following as side operation to perform the required operation
  - Retrieve the user `accessToken` from the HTTP `cookie`
- Verifies the validity of this `accessToken` using the octokit instance
of our OAuth App (finally a good use for the app 😁)
- Retrieve the `title`, `content`, `action` and `metadata` value from
the requests `formData`
- Instantiates the `userOctokit` using the `accessToken` retrieved from
cookies (obviously it's perceived as valid at this point)
  - Gets the jargons.dev app octokit instance as well
- Then runs the old `handleSubmitWord` handler logic with all these
available resource
- Deleted `handleSubmitWord` handler extracting all of it logic to the
`/api/dictionary` route
- Deleted the `doOctokitAuth` action - it used to facilitate getting
accessToken required in the `handleSubmitWord` handler, now we no longer
need it
- Replaced integration of `handleSubmitWord` with `/api/dictionary` API
route in the `word-editor` Island doing the following to fulfil that
  - Added 2 new form fields of input type `hidden`
- `action` - field to carry the current word-editor action which is
either `new` or `edit`
- `metadata` - a field that is only render when `action` is `edit`, it
carries stringified object of required data for an already existing word
that an edit is going to be performed on.
- Implemented a base handler function local to the `Editor` component
which integrates the `/api/dictionary` route
       
     ```js
    async function handleSubmit(e) {
        $isWordSubmitLoading.set(true);
        const formData = new FormData(e.target);
        const response = await fetch("/api/dictionary", {
            method: "POST",
            body: formData,
        });
        response.status === 200 && router.push("/editor");
    }
    ```
- Removed all instance of `octokitAuth` and `submitHandler` props - they
used to be for the removed handler

### Screencast


https://github.com/babblebey/jargons.dev/assets/25631971/e69c14ba-a480-4001-89af-6798821be323

📖

Author: babblebey

src/components/islands/word-editor.jsx

@@ -2,21 +2,18 @@ import { useEffect } from "react";
 import Markdown from "react-markdown";
 import { useStore } from "@nanostores/react";
 import useRouter from "../../lib/hooks/use-router.js";
+import { capitalizeText } from "../../lib/utils/index.js";
 import useWordEditor from "../../lib/hooks/use-word-editor.js";
 import { $isWordSubmitLoading } from "../../lib/stores/dictionary.js";
-import handleSubmitWord from "../../lib/handlers/handle-submit-word.js";
-import { capitalizeText } from "../../lib/utils/index.js";
 
-export default function WordEditor({ title = "", content = "", metadata = {}, action, octokitAuths }) {
+export default function WordEditor({ title = "", content = "", metadata = {}, action }) {
   return (
     <div className="w-full flex border rounded-lg">
       <Editor
         action={action}
         eTitle={title} 
         eContent={content} 
         eMetadata={metadata}
-        octokitAuths={octokitAuths}
-        submitHandler={handleSubmitWord}
         className="w-full h-full flex flex-col p-5 border-r"
       />
       <Preview className="w-full h-full flex flex-col p-5" />
@@ -42,7 +39,7 @@ export function SubmitButton({ children = "Submit" }) {
   );
 }
 
-function Editor({ eTitle, eContent, eMetadata, className, submitHandler, action, octokitAuths, ...props }) {
+function Editor({ eTitle, eContent, eMetadata, className, action, ...props }) {
   const router = useRouter();
   const { title, setTitle, content, setContent } = useWordEditor();
 
@@ -51,39 +48,66 @@ function Editor({ eTitle, eContent, eMetadata, className, submitHandler, action,
     setContent(eContent);
   }, []);
 
-  async function handleOnSubmit() {
+  /**
+   * Word Submit Handler
+   * @param {import("react").FormEvent} e 
+   * 
+   * @todo implement a submitted State that updates after submission for visual cue before routing
+   * @todo handle error for when submission isn't successful
+   */
+  async function handleSubmit(e) {
     $isWordSubmitLoading.set(true);
-    await submitHandler(octokitAuths, action, { 
-      title: capitalizeText(title.trim()), 
-      content, 
-      metadata: eMetadata 
+    const formData = new FormData(e.target);
+    const response = await fetch("/api/dictionary", {
+      method: "POST",
+      body: formData,
     });
-    router.push("/editor");
+    response.status === 200 && router.push("/editor");
   }
 
   return (
     <form 
       className={`${className} relative`}
       onSubmit={(e) => {
         e.preventDefault();
-        handleOnSubmit();
+        handleSubmit(e);
       }}
       id="jargons.dev:word_editor"
       {...props}
     >
       <input 
-        className={`${action === "edit" && "cursor-not-allowed"} block w-full pb-2 mb-3 text-gray-900 border-b text-lg font-bold focus:outline-none`}
+        required
         type="text"
-        placeholder="New Word"
+        id="title"
+        name="title"
         value={title}
+        placeholder="New Word"
         readOnly={action === "edit"}
         onChange={(e) => setTitle(e.target.value)}
+        className={`${action === "edit" && "cursor-not-allowed"} block w-full pb-2 mb-3 text-gray-900 border-b text-lg font-bold focus:outline-none`}
       />
       <textarea 
-        className="w-full h-1 grow resize-none appearance-none border-none focus:outline-none scrollbar"
+        required
+        id="content"
+        name="content"
         value={content}
         onChange={(e) => setContent(e.target.value)}
+        className="w-full h-1 grow resize-none appearance-none border-none focus:outline-none scrollbar"
+      />
+      <input 
+        type="hidden" 
+        id="action" 
+        name="action"
+        value={action}
       />
+      {action === "edit" && (
+        <input 
+          type="hidden" 
+          id="metadata"
+          name="metadata"
+          value={JSON.stringify(eMetadata)}
+        />
+      )}
     </form>
   );
 }

src/lib/actions/do-octokit-auth.js

@@ -57,4 +57,14 @@ export function resolveEditorActionFromPathname(pathname) {
  */
 export function capitalizeText(text) {
   return text.split(" ").map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+}
+
+/**
+ * Generate branch name
+ * @param {string} action 
+ * @param {string} wordTitle 
+ * @returns {string}
+ */
+export function generateBranchName(action, wordTitle) {
+  return `word/${action}/${normalizeAsUrl(wordTitle)}`;
 }

src/lib/handlers/handle-submit-word.js

@@ -0,0 +1,107 @@
+import app from "../../lib/octokit/app.js";
+import { forkRepository } from "../../lib/fork.js";
+import { createBranch } from "../../lib/branch.js";
+import { decrypt } from "../../lib/utils/crypto.js";
+import { submitWord } from "../../lib/submit-word.js";
+import { PROJECT_REPO_DETAILS } from "../../../constants.js";
+import { updateExistingWord, writeNewWord } from "../../lib/word-editor.js";
+import { capitalizeText, generateBranchName } from "../../lib/utils/index.js";
+
+/**
+ * Submit Word (New or Edit) to the Dictionary
+ * @param {import("astro").APIContext} context
+ */
+export async function POST({ request, cookies }) {
+  const data = await request.formData();
+  const accessToken = cookies.get("jargons.dev:token", {
+    decode: value => decrypt(value)
+  });
+
+  // Verify accessToken validity
+  const { data: authData, status: verificationStatus } = await app.octokit.request("POST /applications/{client_id}/token", {
+    client_id: import.meta.env.GITHUB_OAUTH_APP_CLIENT_ID,
+    access_token: accessToken.value
+  });
+
+  if (!accessToken || verificationStatus !== 200) {
+    return new Response(JSON.stringify({ message: "Not Authorised" }), {
+      status: 401,
+      headers: {
+        "Content-type": "application/json"
+      }
+    })
+  }
+
+  const title = capitalizeText(data.get("title").trim());
+  const content = data.get("content");
+  const action = data.get("action");
+  const metadata = JSON.parse(data.get("metadata"));
+
+  const userOctokit = app.getUserOctokit({ token: accessToken.value });
+  const devJargonsOctokit = app.devJargonsOctokit;
+
+  // Fork repo
+  const fork = await forkRepository(userOctokit, PROJECT_REPO_DETAILS);
+  console.log("Project Fork: ", fork);
+
+  // Create a branch for action
+  const branch = await createBranch(
+    userOctokit, 
+    {
+      repoFullname: fork,
+      repoMainBranchRef: PROJECT_REPO_DETAILS.repoMainBranchRef
+    },
+    generateBranchName(action, title)
+  );
+  console.log("Branch Created: ", branch);
+
+  const forkedRepoDetails = {
+    repoFullname: fork,
+    repoChangeBranchRef: branch.ref
+  }
+  
+  // update existing word - if action is "edit"
+  if (action === "edit") {
+    const updatedWord = await updateExistingWord(userOctokit, forkedRepoDetails, {
+      title,
+      content,
+      path: metadata.path,
+      sha: metadata.sha
+    }, {
+      env: "node"
+    });
+    console.log("Word updated: ", updatedWord);
+  }
+
+  // add new word - if action is "new"
+  if (action === "new") {
+    const newWord = await writeNewWord(userOctokit, forkedRepoDetails, {
+      title, 
+      content
+    }, {
+      env: "node"
+    });
+    console.log("New word added: ", newWord);
+  }
+
+  // submit the edit in new pr
+  const wordSubmission = await submitWord(
+    devJargonsOctokit, 
+    userOctokit, 
+    action, 
+    PROJECT_REPO_DETAILS, 
+    forkedRepoDetails, 
+    {
+      title, 
+      content
+    }
+  );
+  console.log("Word submitted: ", wordSubmission);
+
+  return new Response(JSON.stringify(wordSubmission), {
+    status: 200,
+    headers: {
+      "Content-type": "application/json"
+    }
+  });
+}

src/lib/utils/index.js

@@ -4,7 +4,6 @@ import BaseLayout from "../../../layouts/base.astro";
 import Navbar from "../../../components/navbar.astro";
 import doAuth from "../../../lib/actions/do-auth.js";
 import doEditWord from "../../../lib/actions/do-edit-word.js";
-import doOctokitAuth from "../../../lib/actions/do-octokit-auth.js";
 import { resolveEditorActionFromPathname } from "../../../lib/utils/index.js";
 import WordEditor, { SubmitButton as WordEditorSubmitButton } from "../../../components/islands/word-editor.jsx";
 
@@ -13,8 +12,6 @@ const { url: { pathname }, redirect } = Astro;
 const { isAuthed, authedData: userData } = await doAuth(Astro);
 if (!isAuthed) return redirect(`/login?return_to=${encodeURIComponent(pathname)}`);
 
-const octokitAuths = doOctokitAuth(Astro);
-
 const {content_decoded, ...otherWordData} = await doEditWord(Astro);
 const word = matter(content_decoded);
 const action = resolveEditorActionFromPathname(pathname);
@@ -38,7 +35,6 @@ const action = resolveEditorActionFromPathname(pathname);
       title={word.data.title} 
       content={word.content} 
       metadata={otherWordData}
-      octokitAuths={octokitAuths}
       client:load
     />
   </main>