chore: refactored project alert component (#163)

* fix: remove usage on repo list page title * chore: reordered session and flagsmith * chore: refactor of alert component * fix: missing mock test data
EddieHubCommunity · Aug 13, 2024 · e3765b0 · e3765b0
1 parent 00146be
commit e3765b0
Show file tree

Hide file tree

Showing 11 changed files with 161 additions and 24 deletions.
diff --git a/src/app/account/repo/add/form.js b/src/app/account/repo/add/form.js
@@ -13,8 +13,9 @@ const initialState = {
   errors: undefined,
 };
 
-export default function Form({ disabled = false }) {
+export default function Form({ usage }) {
   const [state, formAction] = useFormState(getRepo, initialState);
+  const disabled = usage >= process.env.NEXT_PUBLIC_REPO_LIMIT ? true : false;
 
   return (
     <form action={formAction}>
@@ -74,7 +75,7 @@ export default function Form({ disabled = false }) {
       </fieldset>
 
       <div className="mt-6 flex items-center justify-end gap-x-6">
-        <SubmitButton text="SAVE" />
+        <SubmitButton text="SAVE" disabled={disabled} />
       </div>
     </form>
   );

diff --git a/src/app/account/repo/add/page.js b/src/app/account/repo/add/page.js
@@ -24,16 +24,11 @@ export default async function Page() {
   return (
     <div>
       <Title text="Add your GitHub repo" />
-      <Alert
-        text={`You have (${user.repositories.length}/${process.env.NEXT_PUBLIC_REPO_LIMIT}) repos remaining`}
-      />
-      <Form
-        disabled={
-          user.repositories.length >= process.env.NEXT_PUBLIC_REPO_LIMIT
-            ? true
-            : false
-        }
-      />
+      <Alert>
+        You have ({user.repositories.length}/
+        {process.env.NEXT_PUBLIC_REPO_LIMIT}) repos remaining
+      </Alert>
+      <Form usage={user.repositories.length} />
     </div>
   );
 }
diff --git a/src/app/account/repo/checks/[id]/page.js b/src/app/account/repo/checks/[id]/page.js
@@ -128,7 +128,9 @@ export default async function Page({ params }) {
           </Card>
         </div>
       ) : (
-        <Alert text="You do not have permission to see the analytics for this repo" />
+        <Alert>
+          You do not have permission to see the analytics for this repo
+        </Alert>
       )}
 
       <ActionPanel>

diff --git a/src/app/account/repo/list/page.js b/src/app/account/repo/list/page.js
@@ -40,9 +40,7 @@ export default async function Page() {
 
   return (
     <>
-      <Title
-        text={`Repo list (${user.repositories.length}/${process.env.NEXT_PUBLIC_REPO_LIMIT})`}
-      />
+      <Title text="Repo list" />
       <Stats
         data={[
           {

diff --git a/src/app/layout.js b/src/app/layout.js
@@ -18,8 +18,8 @@ export const metadata = {
 };
 
 export default async function RootLayout({ children }) {
-  const flagsmithServerState = await flagsmith();
   const session = await getServerSession(authOptions);
+  const flagsmithServerState = await flagsmith();
 
   return (
     <html lang="en">

diff --git a/src/app/repo/report/[id]/page.js b/src/app/repo/report/[id]/page.js
@@ -61,9 +61,7 @@ export default async function Page({ params }) {
         ]}
       />
       {check.repository.ignoreChecks?.length ? (
-        <Alert
-          text={`There are ${check.ignoreChecks?.length} check(s) hidden`}
-        />
+        <Alert>There are {check.ignoreChecks?.length} check(s) hidden</Alert>
       ) : null}
       <Stats
         data={[

diff --git a/src/components/Alert.js b/src/components/Alert.js
@@ -1,4 +1,4 @@
-export default function Alert({ text }) {
+export default function Alert({ children }) {
   return (
     <div
       className="flex items-center p-4 my-4 text-sm text-blue-800 border border-blue-300 rounded-lg bg-blue-50 dark:bg-gray-800 dark:text-blue-400 dark:border-blue-800"
@@ -14,7 +14,7 @@ export default function Alert({ text }) {
         <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
       </svg>
       <span className="sr-only">Info</span>
-      <div>{text}</div>
+      <div>{children}</div>
     </div>
   );
 }
diff --git a/src/components/forms/SubmitButton.js b/src/components/forms/SubmitButton.js
@@ -2,14 +2,14 @@ import { useFormStatus } from "react-dom";
 
 import classNames from "@/utils/classNames";
 
-export function SubmitButton({ text, formAction }) {
+export function SubmitButton({ text, formAction, disabled }) {
   const { pending } = useFormStatus();
 
   return (
     <button
       formAction={formAction}
       type="submit"
-      disabled={pending}
+      disabled={pending || disabled}
       className={classNames(
         "inline-flex items-center rounded-md px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm  focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:bg-gray-600 bg-indigo-600 hover:bg-indigo-500",
       )}

diff --git a/tests/data/github/referrers.json b/tests/data/github/referrers.json
@@ -0,0 +1,52 @@
+[
+  {
+    "count": 194,
+    "uniques": 36,
+    "referrer": "github.com"
+  },
+  {
+    "count": 44,
+    "uniques": 5,
+    "referrer": "youtube.com"
+  },
+  {
+    "count": 30,
+    "uniques": 9,
+    "referrer": "t.co"
+  },
+  {
+    "count": 10,
+    "uniques": 3,
+    "referrer": "Google"
+  },
+  {
+    "count": 5,
+    "uniques": 1,
+    "referrer": "freecodecamp.org"
+  },
+  {
+    "count": 4,
+    "uniques": 1,
+    "referrer": "search.brave.com"
+  },
+  {
+    "count": 4,
+    "uniques": 1,
+    "referrer": "m.youtube.com"
+  },
+  {
+    "count": 4,
+    "uniques": 1,
+    "referrer": "eddiejaoude.substack.com"
+  },
+  {
+    "count": 3,
+    "uniques": 1,
+    "referrer": "repo-rater.eddiehub.org"
+  },
+  {
+    "count": 2,
+    "uniques": 2,
+    "referrer": "eddiehub.org"
+  }
+]
diff --git a/tests/data/github/views.json b/tests/data/github/views.json
@@ -0,0 +1,81 @@
+{
+  "count": 1090,
+  "views": [
+    {
+      "count": 100,
+      "uniques": 15,
+      "timestamp": "2024-07-28T00:00:00Z"
+    },
+    {
+      "count": 201,
+      "uniques": 18,
+      "timestamp": "2024-07-29T00:00:00Z"
+    },
+    {
+      "count": 69,
+      "uniques": 7,
+      "timestamp": "2024-07-30T00:00:00Z"
+    },
+    {
+      "count": 69,
+      "uniques": 10,
+      "timestamp": "2024-07-31T00:00:00Z"
+    },
+    {
+      "count": 97,
+      "uniques": 12,
+      "timestamp": "2024-08-01T00:00:00Z"
+    },
+    {
+      "count": 65,
+      "uniques": 14,
+      "timestamp": "2024-08-02T00:00:00Z"
+    },
+    {
+      "count": 97,
+      "uniques": 13,
+      "timestamp": "2024-08-03T00:00:00Z"
+    },
+    {
+      "count": 21,
+      "uniques": 7,
+      "timestamp": "2024-08-04T00:00:00Z"
+    },
+    {
+      "count": 73,
+      "uniques": 10,
+      "timestamp": "2024-08-05T00:00:00Z"
+    },
+    {
+      "count": 80,
+      "uniques": 17,
+      "timestamp": "2024-08-06T00:00:00Z"
+    },
+    {
+      "count": 122,
+      "uniques": 12,
+      "timestamp": "2024-08-07T00:00:00Z"
+    },
+    {
+      "count": 42,
+      "uniques": 4,
+      "timestamp": "2024-08-08T00:00:00Z"
+    },
+    {
+      "count": 7,
+      "uniques": 3,
+      "timestamp": "2024-08-09T00:00:00Z"
+    },
+    {
+      "count": 32,
+      "uniques": 5,
+      "timestamp": "2024-08-10T00:00:00Z"
+    },
+    {
+      "count": 15,
+      "uniques": 2,
+      "timestamp": "2024-08-11T00:00:00Z"
+    }
+  ],
+  "uniques": 105
+}
diff --git a/tests/setup/mocks/handlers.js b/tests/setup/mocks/handlers.js
@@ -7,6 +7,8 @@ import release from "../../data/github/release.json";
 import community from "../../data/github/community.json";
 import labels from "../../data/github/labels.json";
 import projects from "../../data/github/projects.json";
+import referrers from "../../data/github/referrers.json";
+import views from "../../data/github/views.json";
 
 export const handlers = [
   http.get("https://api.github.com/repos/EddieHubCommunity/HealthCheck", () =>
@@ -36,4 +38,12 @@ export const handlers = [
     "https://api.github.com/repos/EddieHubCommunity/HealthCheck/projects",
     () => HttpResponse.json(projects),
   ),
+  http.get(
+    "https://api.github.com/repos/EddieHubCommunity/HealthCheck/traffic/popular/referrers",
+    () => HttpResponse.json(referrers),
+  ),
+  http.get(
+    "https://api.github.com/repos/EddieHubCommunity/HealthCheck/traffic/views",
+    () => HttpResponse.json(views),
+  ),
 ];
-Original file line number
+Diff line change
@@ Expand Up / @@ -40,9 +40,7 @@ export default async function Page() { @@
       return (
         <>
-          <Title
-            text={`Repo list (${user.repositories.length}/${process.env.NEXT_PUBLIC_REPO_LIMIT})`}
-          />
+          <Title text="Repo list" />
           <Stats
             data={[
               {
@@ Expand Down @@