feat: implement jargons editor (dashboard) (#41)

babblebey · web-flow · commit d3c738c45077 · 2024-04-16T21:46:38.000+01:00
This Pull request implement the Jargons Editor (dashboard); This dashboard currently welcomes a user, presents them with a link to adding new word to dictionary and displays the current user's contributions stats (currently stats for contributions made via the jargons editor) with insights into their "total words contributed", "pending word contribution", "new word type contribution", and "edited word type contribution"; it does this by performing a search of pull request authored by the current user using a mix labels and pr states. ### Changes Made - Implemented and integrated the `doContributionStats` action on `/editor` page; this action runs on server-side before the `/editor` renders; it fetches all the contribution stats of the current user and returns the insights as required; it uses the GitHub Search API mixing a combination of the stated labels and search qualifiers in the search queries to get stated stats... - **Pending Word Contribution Stats** - it uses the following search qualifiers `repo:[our_repo] is:pull-request type:pr author:@me label:":computer: via word-editor is:unmerged is:open"`, which searches for opened pull requests on our repo stated repository that is authored by current user, with the labels `💻 via word-editor` - **New Word Type Contribution Stats** - it uses the following search qualifiers `repo:[our_repo] is:pull-request type:pr author:@me label:":computer: via word-editor label:":book: new word" is:merged is:closed"`, which searches for merged pull requests on our repo stated repository that is authored by current user, with the labels `💻 via word-editor` and `📖 new word` - **Edited Word Type Contribution Stats** - it uses the following search qualifiers `repo:[our_repo] is:pull-request type:pr author:@me label:":computer: via word-editor label:":book: edit word" is:merged is:closed"`, which searches for merged pull requests on our repo stated repository that is authored by current user, with the labels `💻 via word-editor` and `📖 edit word` - Implemented the `buildStatsUrl` to compute url to searching the particular stats on the main repo using the respective qualifiers; this means on click the built url a user is directed to github pull request search on stated repo with search result displayed specific to stats (powered by search filter) - Implemented 3 sections on the `/editor` i.e. the Jargon Editor (Dashboard) - User Profile Section - Display a welcome message with the current user's name and avatar with data retrieved from authentication data - Contribution CTA Section - Displays a static message and a link to `/editor/new` page to add new word to dictionary - Contribution Stats Section - Displays the users contribution stats; with an extra "Word Contributed" stats field with value manually calculated from the summation of "New Word Type Contribution Stats" and "Edited Word Type Contribution Stats" - Made Some Changes that are not so related - Implemented customization to `Navbar` component back navigation link using props with default value - Fixed overflowing height of the `WordEditor` component island - Added `maintainers_can_modify` to pr creation request in `submit-word` script ### Screencast/Screenshot ![image](https://github.com/babblebey/jargons.dev/assets/25631971/64477aa1-0c53-4a85-9273-8bc4f0ed58a0) [screencast-bpconcjcammlapcogcnnelfmaeghhagj-2024.04.16-21_30_22.webm](https://github.com/babblebey/jargons.dev/assets/25631971/dda9875f-3c43-436b-a3b2-220af938cc30)
diff --git a/src/components/islands/word-editor.jsx b/src/components/islands/word-editor.jsx
@@ -80,7 +80,7 @@ function Editor({ eTitle, eContent, eMetadata, className, submitHandler, action,
         onChange={(e) => setTitle(e.target.value)}
       />
       <textarea 
-        className="w-full grow resize-none appearance-none border-none focus:outline-none scrollbar"
+        className="w-full h-1 grow resize-none appearance-none border-none focus:outline-none scrollbar"
         value={content}
         onChange={(e) => setContent(e.target.value)}
       />
@@ -96,7 +96,7 @@ function Preview({ className, ...props }) {
       className={`${className} select-none`}
       {...props}  
     >
-      <div className="grow overflow-auto space-y-6 rounded-lg border p-5 shadow-lg">
+      <div className="h-1 grow overflow-auto space-y-6 rounded-lg border p-5 shadow-lg scrollbar">
         <DummyPreviewNavbar />
 
         <div className="max-w-4xl space-y-8 mx-auto">
@@ -132,7 +132,7 @@ const DummyPreviewNavbar = () => (
       </span>
 
       <div>
-        <div className="relative w-56 text-sm hidden @md:flex items-center justify-between border pl-2.5 p-1 space-x-2 border-gray-400 rounded-lg cursor-text">
+        <div className="relative w-56 text-sm hidden @md:flex items-center justify-between border pl-2.5 p-1 space-x-2 border-gray-400 rounded-lg">
           <div className="flex items-center text-gray-400 space-x-2">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-5 h-5">
               <path strokeLinecap="round" strokeLinejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
diff --git a/src/components/navbar.astro b/src/components/navbar.astro
@@ -1,10 +1,14 @@
+---
+const { returnNav = { label: "Back", location: "../" } } = Astro.props;
+---
+
 <nav class="flex items-center justify-between px-5 md:px-6 py-4">
-  <a href="../" class="flex items-center">
+  <a href={ returnNav.location } class="flex items-center">
     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
       <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
     </svg> 
     <span>
-      Back
+      { returnNav.label }
     </span>       
   </a>
   <slot />
diff --git a/src/lib/actions/do-contribution-stats.js b/src/lib/actions/do-contribution-stats.js
@@ -0,0 +1,60 @@
+import app from "../octokit/app.js";
+import { decrypt } from "../utils/crypto.js";
+import { PROJECT_REPO_DETAILS } from "../../../constants.js";
+
+/**
+ * Get some jargons contribution stats for current user on the Jargons Editor
+ * @param {import("astro").AstroGlobal} astroGlobal 
+ */
+export default async function doContributionStats(astroGlobal) {
+  const { cookies } = astroGlobal;
+  const { repoFullname, repoMainBranchRef } = PROJECT_REPO_DETAILS; 
+
+  const accessToken = cookies.get("jargons.dev:token", { decode: value => decrypt(value) });
+  const userOctokit = app.getUserOctokit({ token: accessToken.value });
+
+  /**
+   * @todo Implement narrowed search to project's main branch 
+   */
+  const baseQuery = `repo:${repoFullname} is:pull-request type:pr author:@me label:":computer: via word-editor"`;
+  const baseStatsUrlQuery = `is:pr author:@me label:":computer: via word-editor"`;
+
+  /**
+   * @todo [thoughts]: would be nice to have all these requests in one, and use a filter to separate by labels
+   * [potential bottleneck]: no wat to know whether a PR is "merged" considering that "closed" doesn't mean merged
+   */
+  const { data: newType } = await userOctokit.request("GET /search/issues", {
+    q: `${baseQuery} label:":book: new word" is:merged is:closed`
+  });
+  const { data: editType } = await userOctokit.request("GET /search/issues", {
+    q: `${baseQuery} label:":book: edit word" is:merged is:closed`
+  });
+  const { data: pendingType } = await userOctokit.request("GET /search/issues", {
+    q: `${baseQuery} is:unmerged is:open`
+  });
+
+  return {
+    newWords: {
+      count: newType.total_count,
+      url: buildStatsUrl(repoFullname, `${baseStatsUrlQuery} is:merged is:closed label:":book: new word"`)
+    },
+    editedWords: {
+      count: editType.total_count,
+      url: buildStatsUrl(repoFullname, `${baseStatsUrlQuery} is:merged is:closed label:":book: edit word"`)
+    },
+    pendingWords: {
+      count: pendingType.total_count,
+      url: buildStatsUrl(repoFullname, `${baseStatsUrlQuery} is:unmerged is:open`)
+    }
+  }
+}
+
+/**
+ * Build URL to the Pull Request list on the project's Repo
+ * @param {string} repoFullname 
+ * @param {string} queryString 
+ * @returns {string}
+ */
+function buildStatsUrl(repoFullname, queryString) {
+  return `https://github.com/${repoFullname}/pulls?q=${encodeURIComponent(queryString)}`;
+}
diff --git a/src/lib/submit-word.js b/src/lib/submit-word.js
@@ -35,7 +35,8 @@ export async function submitWord(devJargonsOctokit, userOctokit, action, project
     head: `${forkedRepoOwner}:${headBranch}`,
     base: baseBranch,
     title,
-    body
+    body,
+    maintainers_can_modify: true
   });
 
   // DevJargons (bot) App adds related labels to PR
diff --git a/src/pages/editor/index.astro b/src/pages/editor/index.astro
@@ -1,30 +1,181 @@
 ---
-import doAuth from "../../lib/actions/do-auth";
+import { Image } from "astro:assets";
+import doAuth from "../../lib/actions/do-auth.js";
 import BaseLayout from "../../layouts/base.astro";
-import Navbar from "../../components/navbar.astro";
-import { $userData } from "../../lib/stores/user.js";
+import { PROJECT_REPO_DETAILS } from "../../../constants.js";
+import doContributionStats from "../../lib/actions/do-contribution-stats.js";
 
 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 { newWords, editedWords, pendingWords } = await doContributionStats(Astro);
+const totalWords = {
+  count: newWords.count + editedWords.count,
+  url: `https://github.com/${PROJECT_REPO_DETAILS.repoFullname}/pulls?q=${encodeURIComponent(`is:pr is:closed is:merged author:@me label:":computer: via word-editor"`)}`
+};
 ---
 
 <BaseLayout 
-  pageTitle="Dictionry"
-  class="flex flex-col w-full min-h-screen overflow-hidden"
+  pageTitle="Jargons Editor"
+  class="flex flex-col w-full min-h-screen"
 >
-  <Navbar>
-    
-  </Navbar>
-
-  <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 class="w-full max-w-screen-lg mx-auto flex flex-col grow p-5 space-y-3">
+    <!-- Profile Section -->
+    <section class="mt-10 flex w-full items-center justify-between md:px-6">
+      <div class="flex flex-col space-y-6 justify-center h-full py-6">
+        <span class="relative flex shrink-0 overflow-hidden rounded-full w-20 h-20 border">
+          <!-- src="https://images.unsplash.com/profile-1606728664311-4bcc76a40e98image?bg=fff&crop=faces&dpr=2&h=150&w=150&auto=format&fit=crop&q=60&ixlib=rb-4.0.3"  -->
+          <Image 
+            src={ userData.avatar_url }
+            alt={ (userData.name || userData.login) ?? "User avatar" }
+            width={100}
+            height={100} 
+            loading="eager"
+          />
+        </span>
+        <div class="space-y-2">
+          <h3 class="text-2xl tracking-tight font-semibold">Hey, { userData.login }👋</h3>
+          <p class="text-base text-gray-500">Welcome to the Jargons Editor, we're super excited to see you here.</p>
+        </div>  
+      </div>
+    </section>
+
+    <!-- Contribution CTA -->
+    <section class="rounded-lg border shadow-sm">
+      <div class="space-y-1.5 p-3 md:p-6 flex flex-col lg:flex-row lg:items-center justify-between gap-4">
+        <div class="space-y-1">
+          <h3 class="font-semibold tracking-tight text-2xl">Contribute Words</h3>
+          <p class="text-sm">
+            You can contribute new words to the jargons.dev dictionary.
+          </p>
+        </div>
+        <a
+          class="flex items-center w-fit justify-center no-underline px-4 py-2 rounded-md border border-gray-200 bg-white hover:bg-gray-100 text-sm shadow-sm hover:shadow transition-colors"
+          href="/editor/new"
+        >
+          <span>Start Now</span>
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width={1.5} stroke="currentColor" class="w-4 h-4">
+            <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" />
+          </svg> 
+        </a>
+      </div>
+    </section>
+
+    <!-- Contribution Stats -->
+    <section class="">
+      <div class="flex-col space-y-1 p-6 flex">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
+          <path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
+        </svg>
+        <div class="">
+          <h3 class="text-2xl font-semibold tracking-tight">Contribution Stats</h3>
+          <p class="text-sm">Your Words contributed to jargons.dev so far...</p>
+        </div>
+      </div>
+
+      <div class="grid md:grid-cols-2 gap-2">
+        <!-- Total Words -->
+        <div class="p-6 space-y-2 rounded-lg border shadow-sm">
+          <div class="w-full flex justify-between">
+            <div class="text-3xl font-bold tracking-tighter">
+              { totalWords.count }
+            </div>
+            {!!totalWords.count && (
+              <a class="text-sm" href={totalWords.url}>
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width={1.5} stroke="currentColor" class="w-4 h-4">
+                  <title>See all Words Contributed</title>
+                  <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" />
+                </svg> 
+              </a>
+            )}
+          </div>
+          <div class="flex items-center gap-2 text-sm">
+            <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.5 11.5 11 14l4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
+            </svg>            
+            <span class="text-gray-500 dark:text-gray-400">
+              Contributed Words
+            </span>
+          </div>
+        </div>
+
+        <!-- Pending Words -->
+        <div class="p-6 space-y-2 rounded-lg border shadow-sm">
+          <div class="w-full flex justify-between">
+            <div class="text-3xl font-bold tracking-tighter">
+              { pendingWords.count }
+            </div>
+            {!!pendingWords.count && (
+              <a class="text-sm" href={pendingWords.url}>
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width={1.5} stroke="currentColor" class="w-4 h-4">
+                  <title>See all Pending Word Contribution</title>
+                  <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" />
+                </svg> 
+              </a>
+            )}
+          </div>
+          <div class="flex items-center gap-2 text-sm">
+            <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
+            </svg>            
+            <span class="text-gray-500 dark:text-gray-400">
+              Pending Words
+            </span>
+          </div>
+        </div>
+
+        <!-- New Words -->
+        <div class="p-6 space-y-2 rounded-lg border shadow-sm">
+          <div class="w-full flex justify-between">
+            <div class="text-3xl font-bold tracking-tighter">
+              { newWords.count }
+            </div>
+            {!!newWords.count && (
+              <a class="text-sm" href={newWords.url}>
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width={1.5} stroke="currentColor" class="w-4 h-4">
+                  <title>See all New Words Contributed</title>
+                  <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" />
+                </svg> 
+              </a>
+            )}
+          </div>
+          <div class="flex items-center gap-2 text-sm">
+            <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 21a9 9 0 1 1 0-18c1.052 0 2.062.18 3 .512M7 9.577l3.923 3.923 8.5-8.5M17 14v6m-3-3h6"/>
+            </svg>            
+            <span class="text-gray-500 dark:text-gray-400">
+              New Words Contributed
+            </span>
+          </div>
+        </div>
+
+        <!-- Edited Word -->
+        <div class="p-6 space-y-2 rounded-lg border shadow-sm">
+          <div class="w-full flex justify-between">
+            <div class="text-3xl font-bold tracking-tighter">
+              { editedWords.count }
+            </div>
+            {!!editedWords.count && (
+              <a class="text-sm" href={editedWords.url}>
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width={1.5} stroke="currentColor" class="w-4 h-4">
+                  <title>See all Edited Word Contributed</title>
+                  <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" />
+                </svg> 
+              </a>
+            )}
+          </div>
+          <div class="flex items-center gap-2 text-sm">
+            <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m14.304 4.844 2.852 2.852M7 7H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-4.5m2.409-9.91a2.017 2.017 0 0 1 0 2.853l-6.844 6.844L8 14l.713-3.565 6.844-6.844a2.015 2.015 0 0 1 2.852 0Z"/>
+            </svg>            
+            <span class="text-gray-500 dark:text-gray-400">
+              Edited Words Contribution
+            </span>
+          </div>
+        </div>
+      </div>
+    </section>
   </main>
 </BaseLayout>
diff --git a/src/pages/editor/new/index.astro b/src/pages/editor/new/index.astro
@@ -22,7 +22,12 @@ const action = resolveEditorActionFromPathname(pathname);
   pageTitle="Dictionry"
   class="flex flex-col w-full min-h-screen overflow-hidden"
 >
-  <Navbar>
+  <Navbar
+    returnNav={{
+      label: "Back to Jargons Editor",
+      location: "/editor"
+    }}
+  >
     <WordEditorSubmitButton client:load />
   </Navbar>
 
