feat(word-editor): implement new word action (#39)

This Pull Request implements the `add` functionality for word on the
word editor. The `add` operation takes the current input entered into
the editor on submit, perform a submit operation with the `"add"` action
through the `handleSubmitWord` handler and routes to the `/editor` page
after successful word addition operation.

### Changes Made

- Removed `WordEditor` component integration in `/editor` route;
prepping it as the jargons editor (a dashboard 😉)
- Added the "add new word" route for adding new word to dictionary at
`/editor/new`
- Integrated `WordEditor` and it `SubmitButton` component to the add new
word route
- Integrated the `writeNewWord` function into the `handleSubmitWord`
handler with logic to execute it only when word-editor `action` is
`"new"`

    ```js
    if (action === "new") {
const newWord = await writeNewWord(userOctokit, forkedRepoDetails, {
        title, 
        content
      }, {
        env: "browser"
      });
      console.log("New word added: ", newWord);
    }
    ```
- Modified the `handleSubmitWord` handler to move the
`updateExistingWord` function integration to the conditions of executing
only when `action` is `"edit"` in contrast to the `"new"`
- Added a new utils function `captilizeText` (quick one from chatGPT 😉);
which is used to capitalize the title text incases where the entered
word title is in lowercase


![image](https://github.com/babblebey/jargons.dev/assets/25631971/b042ab7c-9250-408a-ad84-fe61ba74d03b)

- Used the `trim()`method on the entered word `title` to remove
whitespaces from input

### Screencast


https://github.com/babblebey/jargons.dev/assets/25631971/0f6d00a8-c239-4da0-85cb-08cd9e688c76

Author: babblebey

src/components/islands/word-editor.jsx

@@ -5,6 +5,7 @@ import useRouter from "../../lib/hooks/use-router.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 }) {
   return (
@@ -53,7 +54,7 @@ function Editor({ eTitle, eContent, eMetadata, className, submitHandler, action,
   async function handleOnSubmit() {
     $isWordSubmitLoading.set(true);
     await submitHandler(octokitAuths, action, { 
-      title, 
+      title: capitalizeText(title.trim()), 
       content, 
       metadata: eMetadata 
     });
@@ -102,7 +103,7 @@ function Preview({ className, ...props }) {
           <div className="w-full">
             {title && (
               <h1 className="text-4xl font-black">
-                { title }
+                { capitalizeText(title.trim()) }
               </h1>
             )}
           </div>

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

@@ -3,8 +3,8 @@ import { forkRepository } from "../fork.js";
 import { createBranch } from "../branch.js";
 import { submitWord } from "../submit-word.js";
 import { normalizeAsUrl } from "../utils/index.js";
-import { updateExistingWord } from "../word-editor.js";
 import { PROJECT_REPO_DETAILS } from "../../../constants.js";
+import { updateExistingWord, writeNewWord } from "../word-editor.js";
 
 /**
  * Submit Handler for word editor, handles submit function based on action
@@ -40,16 +40,29 @@ export default async function handleSubmitWord(octokitAuths, action, { title, co
     repoChangeBranchRef: branch.ref
   }
 
-  // update existing word
-  const word = await updateExistingWord(userOctokit, forkedRepoDetails, {
-    title,
-    content,
-    path: metadata.path,
-    sha: metadata.sha
-  }, {
-    env: "browser"
-  });
-  console.log("Word updated: ", word);
+  // 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: "browser"
+    });
+    console.log("Word updated: ", updatedWord);
+  }
+
+  // add new word - if action is "new"
+  if (action === "new") {
+    const newWord = await writeNewWord(userOctokit, forkedRepoDetails, {
+      title, 
+      content
+    }, {
+      env: "browser"
+    });
+    console.log("New word added: ", newWord);
+  }
 
   // submit the edit in new pr
   const wordSubmission = await submitWord(

src/lib/utils/index.js

@@ -48,4 +48,13 @@ export function isObjectEmpty(object) {
  */
 export function resolveEditorActionFromPathname(pathname) {
   return pathname.slice(1).split("/")[1].toLowerCase();
+}
+
+/**
+ * Capitalize text
+ * @param {string} text 
+ * @returns {string}
+ */
+export function capitalizeText(text) {
+  return text.split(" ").map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
 }

src/pages/editor/index.astro

@@ -1,9 +1,8 @@
 ---
 import doAuth from "../../lib/actions/do-auth";
-import { $userData } from "../../lib/stores/user.js";
 import BaseLayout from "../../layouts/base.astro";
 import Navbar from "../../components/navbar.astro";
-import WordEditor from "../../components/islands/word-editor.jsx";
+import { $userData } from "../../lib/stores/user.js";
 
 const { url: { pathname }, redirect } = Astro;
 
@@ -18,12 +17,14 @@ $userData.set(userData);
   class="flex flex-col w-full min-h-screen overflow-hidden"
 >
   <Navbar>
-    <a class="no-underline text-white bg-gray-900 hover:bg-gray-700 focus:ring-4 focus:ring-gray-600 font-medium rounded-lg text-base px-5 py-2.5 text-center ml-1 sm:ml-3">
-      Publish
-    </a>
+    
   </Navbar>
 
-  <main class="flex grow px-5 md:px-6 pb-4">
-    <WordEditor client:load />
+  <main class="flex flex-col grow px-5 md:px-6 pb-4">
+    <h1>
+      The Jargons Editor - Your Dashboard
+    </h1>
+    
+    <a href="/editor/new">Add New Word</a>
   </main>
 </BaseLayout>

src/pages/editor/new/index.astro

@@ -0,0 +1,36 @@
+---
+import BaseLayout from "../../../layouts/base.astro";
+import doAuth from "../../../lib/actions/do-auth.js";
+import Navbar from "../../../components/navbar.astro";
+import { $userData } from "../../../lib/stores/user.js";
+import doOctokitAuth from "../../../lib/actions/do-octokit-auth";
+import { resolveEditorActionFromPathname } from "../../../lib/utils/index.js";
+import WordEditor, { SubmitButton as WordEditorSubmitButton } from "../../../components/islands/word-editor.jsx";
+
+const { url: { pathname }, redirect } = Astro;
+
+const { isAuthed, authedData: userData } = await doAuth(Astro);
+if (!isAuthed) return redirect(`/login?return_to=${encodeURIComponent(pathname)}`);
+// @ts-expect-error
+$userData.set(userData);
+
+const octokitAuths = doOctokitAuth(Astro);
+const action = resolveEditorActionFromPathname(pathname);
+---
+
+<BaseLayout 
+  pageTitle="Dictionry"
+  class="flex flex-col w-full min-h-screen overflow-hidden"
+>
+  <Navbar>
+    <WordEditorSubmitButton client:load />
+  </Navbar>
+
+  <main class="flex grow px-5 md:px-6 pb-4">
+    <WordEditor
+      action={action}
+      octokitAuths={octokitAuths}
+      client:load
+    />
+  </main>
+</BaseLayout>