feature: get data from store and display them

Author: Samox

package.json

@@ -51,7 +51,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-github-btn": "^1.3.0",
-    "react-table": "^7.7.0"
+    "react-table": "^7.7.0",
+    "use-http": "^1.0.27"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.5",

src/NavBar/StoreConfig/StoreConfigDialog.tsx

@@ -10,24 +10,21 @@ export const StoreConfigInnerDialog = ({
   accessConfig,
 }: {
   availableStores: { url: string; display: string }[];
-  accessConfig: { type: "public" | "private" };
+  accessConfig: { type: "public" | "private"; sublabel: string };
   storageLimit?: number;
   defaultTargets?: string[];
 }) => {
-  console.log(defaultTargets, accessConfig);
-  const accessConfigSublabel =
-    accessConfig.type === "public" ? "Anyone with the link" : "Only you";
   return (
     <>
       <Heading>
         <h1>Store Config</h1>
       </Heading>
       <div style={{ display: "flex" }}>
-        <DataWell label="Access" subLabel={accessConfigSublabel}>
+        <DataWell label="Access" subLabel={accessConfig.sublabel}>
           {accessConfig.type} {accessConfig.type === "public" ? "⚠️" : null}
         </DataWell>
         {storageLimit && (
-          <DataWell label="Storage Limit">100 webhooks</DataWell>
+          <DataWell label="Storage Limit">{storageLimit}</DataWell>
         )}
         {defaultTargets && (
           <DataWell label="Default Target">

src/NavBar/StoreConfig/StoreConfigNavItem.tsx

@@ -1,16 +1,59 @@
 import { Label } from "@pluralsight/ps-design-system-text";
 import { Below } from "@pluralsight/ps-design-system-position";
 
-import React, { useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import Button from "@pluralsight/ps-design-system-button";
 import { StoreConfigInnerDialog } from "./StoreConfigDialog";
 import Dialog from "@pluralsight/ps-design-system-dialog";
+import useFetch from "use-http";
+import { WebhookStoreUrlContext } from "../WebhookStoreUrl/WebhookStoreUrl.context";
+import { IDENTITY_TOKEN_KEY } from "../../local-storage";
+import { decodeJWT } from "../../utils/decode-jwt";
 
 export const StoreConfigNavItem = () => {
   const [isClicked, setClicked] = useState<boolean>(false);
 
-  const accessConfig = { type: "public" } as const;
-  const availableStores = [{ url: "https://google.com", display: "Google" }];
+  const [authConfig, setAuthConfig] = useState<{ protected: boolean }>({
+    protected: false,
+  });
+
+  const { value: webhookStoreUrl } = useContext(WebhookStoreUrlContext);
+  const { get, response } = useFetch(webhookStoreUrl);
+  const idToken = localStorage.getItem(IDENTITY_TOKEN_KEY);
+  const identityToken =
+    idToken &&
+    decodeJWT<{ name: string; ghOrganisations: string[] }, any>(idToken);
+
+  useEffect(() => {
+    getAuthConfig();
+  }, []);
+
+  async function getAuthConfig() {
+    const initialiseAuthConfig = await get("auth-metadata");
+    if (response.ok) setAuthConfig(initialiseAuthConfig);
+  }
+
+  const accessConfig = {
+    type: authConfig.protected ? "private" : "public",
+    sublabel: authConfig.protected ? "Only you" : "Anyone with the link",
+  } as const;
+  const availableStores = identityToken
+    ? [
+        {
+          url: `https://${identityToken.payload.name}.github-org.webhook.store/?access_token=${idToken}`,
+          display: `${identityToken.payload.name}.github-org.webhook.store`,
+        },
+        ...identityToken.payload.ghOrganisations.map((orgName) => ({
+          url: `https://${orgName}.github-org.webhook.store/?access_token=${idToken}`,
+          display: `${orgName}.github-org.webhook.store`,
+        })),
+      ]
+    : [
+        {
+          url: "https://github.webhook.store",
+          display: "github.webhook.store",
+        },
+      ];
   const defaultTargets = ["https://google.com", "https://google.com"];
   const storageLimit = 100;
 

src/NavBar/WebhookStoreUrl/WebhookStoreUrl.component.tsx

@@ -19,7 +19,7 @@ export function WebhookStoreUrlInput() {
         size={TextInput.sizes.small}
         defaultValue={value}
         onBlur={(event) => {
-          setValue(event.target.value);
+          setValue(new URL(event.target.value).origin);
         }}
       ></TextInput>
     </>

yarn.lock

@@ -11322,6 +11322,25 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+urs@^0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/urs/-/urs-0.0.8.tgz#8a0e0b792073cdb7eec926d08ab1e017ffab3f66"
+  integrity sha512-LaSSPpr91XrVA3vW2zPupw4K6DSQEDKdL4yQZX1mO2fpljIMpB5zctrjRvxLurelWSgKsHsCmfHNCImscryirQ==
+
+use-http@^1.0.27:
+  version "1.0.27"
+  resolved "https://registry.yarnpkg.com/use-http/-/use-http-1.0.27.tgz#f0acdecebf7dd7f9f3218dc83a68239658b5d452"
+  integrity sha512-R2V3dzkx+YfIi3Sm35njGFRBzPEyM1AODMx6VSyHiyYzVVq2iYbA3HEjGK5fyw66D8stK5iaP4zU3X7LDmuiyg==
+  dependencies:
+    urs "^0.0.8"
+    use-ssr "^1.0.24"
+    utility-types "^3.10.0"
+
+use-ssr@^1.0.24:
+  version "1.0.25"
+  resolved "https://registry.yarnpkg.com/use-ssr/-/use-ssr-1.0.25.tgz#c7f54b59d6e52db26749b1d4115a650101a190bd"
+  integrity sha512-VYF8kJKI+X7+U4XgGoUER2BUl0vIr+8OhlIhyldgSGE0KHMoDRXPvWeHUUeUktq7ACEOVLzXGq1+QRxcvtwvyQ==
+
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
@@ -11359,6 +11378,11 @@ utila@~0.4:
   resolved "https://registry.yarnpkg.com/utila/-/utila-0.4.0.tgz#8a16a05d445657a3aea5eecc5b12a4fa5379772c"
   integrity sha512-Z0DbgELS9/L/75wZbro8xAnT50pBVFQZ+hUEueGDU5FN51YSCYM+jdxsfCiHjwNP/4LCDD0i/graKpeBnOXKRA==
 
+utility-types@^3.10.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/utility-types/-/utility-types-3.10.0.tgz#ea4148f9a741015f05ed74fd615e1d20e6bed82b"
+  integrity sha512-O11mqxmi7wMKCo6HKFt5AhO4BwY3VV68YU07tgxfz8zJTIxr4BpsezN49Ffwy9j3ZpwwJp4fkRwjRzq3uWE6Rg==
+
 utils-merge@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"