working on the app cards

khill-fbmc · Oct 15, 2024 · cadc8ac · cadc8ac
1 parent 21d9bbb
commit cadc8ac
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 62 deletions.
diff --git a/src/hooks/useStore.ts b/src/hooks/useStore.ts
@@ -1,6 +1,7 @@
 import { create } from "zustand";
 import { createJSONStorage, persist } from "zustand/middleware";
 
+import ChromeStateStorage from "@/lib/ChromeStateStorage";
 import { DEMO_APPS, INSPECTOR_APP } from "@/lib/EmbeddableApps";
 
 import type { RetoolApp } from "@/types/extension";
@@ -32,7 +33,7 @@ export type Actions = {
 export const STORAGE_KEY = "app-embedder-for-retool2";
 
 const initialState: State = {
-  domain: "",
+  domain: "fortunabmc",
   isEditing: false,
   activeAppName: INSPECTOR_APP["name"],
   workflow: {
@@ -43,41 +44,41 @@ const initialState: State = {
 };
 
 export const useStore = create<State & Actions>()(
-  // persist(
-  (set, get) => ({
-    ...initialState,
-    reset: () => useStore.setState(initialState),
-    setDomain: (domain) => set(() => ({ domain })),
-    setEditMode: (isEditing) => set(() => ({ isEditing })),
-    setActiveApp: (activeAppName) => set(() => ({ activeAppName })),
-    addApp: (app) => set((state) => ({ apps: [...state.apps, app] })),
-    updateApp: (name, props) => {
-      set((state) => ({
-        apps: state.apps.map((app) => {
-          return app.name === name ? { ...app, ...props } : app;
-        }),
-      }));
-    },
-    updateActiveApp: (props) => {
-      const name = get().activeAppName;
-      if (name) {
-        get().updateApp(name, props);
-      }
-    },
-    updateWorkflow: (props) => {
-      set((state) => ({
-        ...state,
-        workflow: { ...state.workflow, ...props },
-      }));
-    },
-    getActiveApp: () => {
-      const activeAppName = get().activeAppName;
-      return get().apps.find((app) => app.name === activeAppName);
-    },
-  })
-  //   {
-  //     name: STORAGE_KEY,
-  //     storage: createJSONStorage(() => ChromeStateStorage),
-  //   }
-  // )
+  persist(
+    (set, get) => ({
+      ...initialState,
+      reset: () => set(initialState),
+      setDomain: (domain) => set(() => ({ domain })),
+      setEditMode: (isEditing) => set(() => ({ isEditing })),
+      setActiveApp: (activeAppName) => set(() => ({ activeAppName })),
+      addApp: (app) => set((state) => ({ apps: [...state.apps, app] })),
+      updateApp: (name, props) => {
+        set((state) => ({
+          apps: state.apps.map((app) => {
+            return app.name === name ? { ...app, ...props } : app;
+          }),
+        }));
+      },
+      updateActiveApp: (props) => {
+        const name = get().activeAppName;
+        if (name) {
+          get().updateApp(name, props);
+        }
+      },
+      updateWorkflow: (props) => {
+        set((state) => ({
+          ...state,
+          workflow: { ...state.workflow, ...props },
+        }));
+      },
+      getActiveApp: () => {
+        const activeAppName = get().activeAppName;
+        return get().apps.find((app) => app.name === activeAppName);
+      },
+    }),
+    {
+      name: STORAGE_KEY,
+      storage: createJSONStorage(() => ChromeStateStorage),
+    }
+  )
 );
diff --git a/src/pages/Options/Tabs/ConfigTab.tsx b/src/pages/Options/Tabs/ConfigTab.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import { Col, Container, Row } from "react-bootstrap";
 import { FormProvider, useForm } from "react-hook-form";
 
@@ -28,9 +28,9 @@ function ConfigTab() {
           {!isEditing ? (
             <Container className="pt-2">
               <AppCard
-                isActive={false}
+                isActive
                 editable
-                app={app!}
+                app={app}
                 onEdit={() => startEditMode()}
               />
             </Container>

diff --git a/src/pages/Options/components/AppCard.tsx b/src/pages/Options/components/AppCard.tsx
@@ -8,10 +8,12 @@ import { useEditMode } from "@/hooks/useEditMode";
 import { useRetoolAppUrl } from "@/hooks/useRetoolAppUrl";
 import { useStore } from "@/hooks/useStore";
 
+import AppVisibilityBadge from "./AppVisibilityBadge";
+
 import type { RetoolApp, UrlParam } from "@/types/extension";
 
 type BaseProps = {
-  app: RetoolApp;
+  app?: RetoolApp;
   isActive: boolean;
 };
 
@@ -41,40 +43,30 @@ function AppCard({ app, isActive, ...props }: Props) {
       <Card.Header
         className={clsx(
           "d-flex justify-content-between align-items-center",
-          isActive && `bg-${app.env}`
+          isActive && `bg-${app?.env}`,
+          isActive && app?.env === "production" && "text-white",
+          isActive && app?.env === "development" && "text-white"
         )}
       >
-        <div className="d-flex gap-2 align-items-center">
-          {app.name}
-          <Badge pill bg="secondary">
-            {app.version[0] === "l" ? app.version : `v${app.version}`}
-          </Badge>
-        </div>
-
-        {/* {isActive && <span className="ml-auto">⭐️</span>} */}
-        <span className={clsx("badge", `bg-${app.env}`)}>{app.env}</span>
+        {app?.name}
+        <span className={clsx("badge", `bg-${app?.env}`)}>{app?.env}</span>
       </Card.Header>
       <Card.Body>
-        <Card.Text>
-          Public App:{" "}
-          <span className="text-muted">{app.public ? "Yes" : "No"}</span>
-        </Card.Text>
         <Row>
-          {app.query.length > 0 && (
+          {app?.query && (
             <Col>
               <h5>Query Params</h5>
               <Parameters type="query" params={app.query} />
             </Col>
           )}
-          {app.hash.length > 0 && (
+          {app?.hash && (
             <Col>
               <h5>Hash Params</h5>
               <Parameters type="hash" params={app.hash} />
             </Col>
           )}
         </Row>
-        <br />
-        <div className="d-flex justify-space-between">
+        <div className="d-flex my-2 justify-content-center">
           <a
             target="_blank"
             rel="noreferrer"
@@ -83,14 +75,25 @@ function AppCard({ app, isActive, ...props }: Props) {
           >
             <i className="bi bi-box-arrow-up-right"></i>Open in Retool
           </a>
+        </div>
+      </Card.Body>
+      <Card.Footer>
+        <div className="d-flex justify-space-between">
+          <div className="d-flex gap-2 align-items-center">
+            <AppVisibilityBadge isPublic={app?.public} />
+            <Badge pill bg="secondary">
+              {app?.version[0] === "l" ? app?.version : `v${app?.version}`}
+            </Badge>
+          </div>
+
           <Button
             className="btn-sm ms-auto"
             onClick={() => {
               if (props.editable) {
                 props.onEdit();
               } else {
                 endEditMode();
-                setActiveApp(app.name);
+                setActiveApp(app?.name);
               }
             }}
             variant={
@@ -104,7 +107,7 @@ function AppCard({ app, isActive, ...props }: Props) {
             {props.editable ? "Edit" : isActive ? "⭐️ Active" : "Activate"}
           </Button>
         </div>
-      </Card.Body>
+      </Card.Footer>
     </Card>
   );
 }

diff --git a/src/pages/Options/components/AppVisibilityBadge.tsx b/src/pages/Options/components/AppVisibilityBadge.tsx
@@ -0,0 +1,28 @@
+import "./AppCard.css";
+
+import React from "react";
+import { Badge } from "react-bootstrap";
+
+type Props = {
+  isPublic?: boolean;
+};
+
+function AppVisibilityBadge({ isPublic }: Props) {
+  return (
+    <Badge pill bg="secondary">
+      {isPublic ? (
+        <span className="d-inline-flex gap-1">
+          <i className="bi bi-share-fill"></i>
+          public
+        </span>
+      ) : (
+        <span className="d-inline-flex gap-1">
+          <i className="bi bi-shield-shaded"></i>
+          private
+        </span>
+      )}
+    </Badge>
+  );
+}
+
+export default AppVisibilityBadge;