feat(word-editor): implement edit word action (#32)

This Pull Request implements the edit functionality for word on the word
editor. The edit operation takes the current change made to a word on
submit, perform a submit operation through the `handleSubmitWord`
handler and routes to the `/editor` page after successful edit
operation.

### Changes Made

- Added the dynamic word edit route at
`src/pages/editor/edit/[word].astro`; this route dynamically take the
word found on the route `word` param and operates with it
- Implemented the `doEditWord` action; which retrieves the current edit
word's `word` param and fetches an existing word (record) in dictionary
for the word using the `getExistingWord` function from the `word-editor`
script, and returns an object of the word

    ```js
    /**
* Edit Word action - meant to be executed on `editor/edit/[word]` route
     * @param {import("astro").AstroGlobal} astroGlobal 
     */
    export default async function doEditWord(astroGlobal) {
      const { cookies, params: { word } } = astroGlobal;
    
const accessToken = cookies.get("jargons.dev:token", { decode: value =>
decrypt(value) });
const userOctokit = app.getUserOctokit({ token: accessToken.value });
    
const response = await getExistingWord(userOctokit,
PROJECT_REPO_DETAILS, word);
    
      return response;
    }
    ```

- Added a new props `action` to the `WordEditor` component,...
  - `action` - this prop accepts either `new` or `edit` as value
- `metadata` - props to hold other words data from github api response
- `octokitAuths` props that hold authToken for current authenticated
user and jargons.dev app
- Added `gray-matter` to deps, used for parsing the content of the
`word.content_decoded` property allowing separation of the `title` and
`content` from the property which will then be passed as existing value
to the `WordEditor` component (from the `word-editor` island)
- Implemented the `resolveEditorActionFromPathname` utils function which
is used to compute the current word editor action from the current url
pathname which is `/editor/edit/[word]` for word edit and will be
`/editor/new` for new word addition
- Replace the `Editor` component (on `word-editor` island) wrapper `div`
with a `form` element
- Added a new `SubmitButton` component within the `word-editor`;
exported to be integrated as a separate island that is linked to the
word editor `form`; this component integrates a button that acts as the
submit button for the word editor `form`; on click this button, the
editor form submits
- Added a new boolean `$isWordSubmitLoading` state to `dictionary` store
for tracking when a word submission is in action
- Integrated the `SubmitButton` into the `Navbar` component with a
`client:load` directive in order to enable interactivity for submission
loading state
- Implemented the `handleSubmitWord` handler function; this function
currently handle the word `edit` operation (should handle `new` word
addition next); it takes the required `octokitAuth` tokens(this is the
user's authToken and the jargons.dev app authToken - it uses this to
create an octokit instance for the user and app respectively for
consumption in all other function execution that requires them as
param), `action` and `word` data; and handles all the process of
contribution by doing the following....
  - Creates a fork on the current users' account
  - Creates a new branch to commit change to
  - Commits the changes to the new branch
  - Create a PR to merge this branch to the main project repo
- Implemented the `doOctokitAuth` action which compute and avails the
authToken for currently authenticated user and the jargons.dev app;
which are consumed by the `handleSubmitWord` handler
- Extracted the `devJargonsOctokit` integration in the `submit-word`
script; replacing it with a param ensuring that the script's
`submitWord` function accepts the `devJargonsOctokit` as param; this
improves on the implementation at
https://github.com/babblebey/jargons.dev/pull/25
- Added a new `option` object param to the `updateExistingWord` and
`writeNewWord` with `env` property that accepts either `node` or
`browser`; this option is used to determine which encoding function/api
is used to encode the `content` for file write operation, i.e. `Buffer`
in node and `btoa` in browser or client-side

### Screencast

https://github.com/babblebey/jargons.dev/assets/25631971/4352565a-a38d-4e79-b93b-001263ff2456

Author: babblebey

.env.example

@@ -8,5 +8,5 @@ GITHUB_OAUTH_APP_CLIENT_SECRET=""
 
 CRYPTO_SECRET_KEY="secret"
 
-PROJECT_REPO="babblebey/jargons.dev"
-PROJECT_REPO_BRANCH_REF="refs/heads/main"
+PUBLIC_PROJECT_REPO="babblebey/jargons.dev"
+PUBLIC_PROJECT_REPO_BRANCH_REF="refs/heads/main"

constants.js

@@ -0,0 +1,4 @@
+export const PROJECT_REPO_DETAILS = {
+  repoFullname: import.meta.env.PUBLIC_PROJECT_REPO,
+  repoMainBranchRef: import.meta.env.PUBLIC_PROJECT_REPO_BRANCH_REF
+}

package-lock.json

@@ -21,12 +21,14 @@
     "@fontsource/ibm-plex-mono": "^5.0.12",
     "@fontsource/inter": "^5.0.17",
     "@nanostores/react": "^0.7.2",
+    "@octokit-next/core": "^2.8.0",
     "@octokit/auth-oauth-app": "^8.1.0",
     "@octokit/oauth-authorization-url": "^7.1.0",
     "@types/react": "^18.2.69",
     "@types/react-dom": "^18.2.22",
     "astro": "^4.5.9",
     "flexsearch": "^0.7.43",
+    "gray-matter": "^4.0.3",
     "nanostores": "^0.10.0",
     "octokit": "^3.1.2",
     "react": "^18.2.0",

package.json

@@ -1,46 +1,89 @@
 import { useEffect } from "react";
 import Markdown from "react-markdown";
+import { useStore } from "@nanostores/react";
+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";
 
-export default function WordEditor({ title = "", content = "" }) {
+export default function WordEditor({ title = "", content = "", metadata = {}, action, octokitAuths }) {
   return (
     <div className="w-full flex border rounded-lg">
-      <Editor 
+      <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" />
     </div>
   );
 }
 
-function Editor({ eTitle, eContent, className, ...props }) {
+export function SubmitButton({ children = "Submit" }) {
+  const isSubmitLoading = useStore($isWordSubmitLoading);
+  
+  return (
+    <button className="flex items-center justify-center no-underline text-white bg-gray-900 hover:bg-gray-700 focus:ring-0 font-medium rounded-lg text-base px-5 py-2.5 text-center ml-1 sm:ml-3"
+      type="submit"
+      form="jargons.dev:word_editor"
+      disabled={isSubmitLoading}
+    >
+      { isSubmitLoading ? (
+        <div className="flex-none h-4 w-4 md:w-6 md:h-6 rounded-full border-2 border-gray-400 border-b-gray-200 border-r-gray-200 animate-spin" />
+      ) : (
+        children
+      ) }
+    </button>
+  );
+}
+
+function Editor({ eTitle, eContent, eMetadata, className, submitHandler, action, octokitAuths, ...props }) {
+  const router = useRouter();
   const { title, setTitle, content, setContent } = useWordEditor();
 
   useEffect(() => {
     setTitle(eTitle);
     setContent(eContent);
   }, []);
 
+  async function handleOnSubmit() {
+    $isWordSubmitLoading.set(true);
+    await submitHandler(octokitAuths, action, { 
+      title, 
+      content, 
+      metadata: eMetadata 
+    });
+    router.push("/editor");
+  }
+
   return (
-    <div 
+    <form 
       className={`${className} relative`}
+      onSubmit={(e) => {
+        e.preventDefault();
+        handleOnSubmit();
+      }}
+      id="jargons.dev:word_editor"
       {...props}
     >
       <input 
-        className="block w-full pb-2 mb-3 text-gray-900 border-b text-lg font-bold focus:outline-none"
+        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`}
         type="text"
         placeholder="New Word"
         value={title}
+        readOnly={action === "edit"}
         onChange={(e) => setTitle(e.target.value)}
       />
       <textarea 
         className="w-full grow resize-none appearance-none border-none focus:outline-none scrollbar"
         value={content}
         onChange={(e) => setContent(e.target.value)}
       />
-    </div>
+    </form>
   );
 }
 

src/components/islands/word-editor.jsx

@@ -25,7 +25,7 @@ export default async function doAuth(astroGlobal) {
     if (!isStateEmpty(state)){
       if (state.path) parsedState += `path:${state.path}`;
       const otherStates = String(Object.keys(state)
-        .filter(key => key !== "path" && key !== "redirect")
+        .filter(key => key !== "path")
         .map(key => key + ":" + state[key]).join("|"));
       if (otherStates.length > 0) parsedState += `|${otherStates}`;
     }
@@ -38,7 +38,7 @@ export default async function doAuth(astroGlobal) {
   }
 
   try {
-    if (!accessToken && code) {
+    if (code) {
       const response = await getAuthorization(astroGlobal);
       const auth = await response.json();
 

src/lib/actions/do-auth.js

@@ -0,0 +1,18 @@
+import app from "../octokit/app.js";
+import { getExistingWord } from "../word-editor.js";
+import { PROJECT_REPO_DETAILS } from "../../../constants.js";
+
+/**
+ * Edit Word action - meant to be executed on `editor/edit/[word]` route
+ * @param {import("astro").AstroGlobal} astroGlobal 
+ */
+export default async function doEditWord(astroGlobal) {
+  const { cookies, params: { word } } = astroGlobal;
+
+  const accessToken = cookies.get("jargons.dev:token", { decode: value => decrypt(value) });
+  const userOctokit = app.getUserOctokit({ token: accessToken.value });
+
+  const response = await getExistingWord(userOctokit, PROJECT_REPO_DETAILS, word);
+
+  return response;
+}

src/lib/actions/do-edit-word.js

@@ -0,0 +1,21 @@
+import app from "../octokit/app.js";
+import { decrypt } from "../utils/crypto.js";
+
+/**
+ * Resolve octokit Auth tokens for current user and devJargons App
+ * @param {import("astro").AstroGlobal} astroGlobal 
+ * 
+ * @todo ideally: encrypt the `tokens` for later decryption on client-side
+ * @todo i.e. remove `decode` operation from the `userAuthToken` cookie data fetch
+ * @see all todos can be resolved here: https://github.com/babblebey/jargons.dev/issues/37 
+ */
+export default function doOctokitAuth({ cookies }) {
+  const userAuthToken = cookies.get("jargons.dev:token", { 
+    decode: value => decrypt(value) 
+  });
+
+  return {
+    user: userAuthToken.value,
+    devJargons: app.devJargonsAppAuth
+  }
+}

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

@@ -5,7 +5,7 @@ import { getRepoParts } from "./utils/index.js";
  * Fork the project (specified) Repo to user account
  * @param {import("octokit").Octokit} userOctokit 
  * @param {{ repoFullname: string, repoMainBranchRef: string }} projectRepoDetails 
- * @returns {string} fullname of forked repo - [userlogin]/jargons.dev
+ * @returns {Promise<string>} fullname of forked repo - [userlogin]/jargons.dev
  */
 export async function forkRepository(userOctokit, projectRepoDetails) {
   const { repoFullname, repoMainBranchRef } = projectRepoDetails;