fix(store.py): flatten the "tags" field in the list_components response to improve data structure and readability

feat(store.py): add new endpoint to get list of components liked by a user fix(store.py): add "downloads_count" field to the list_components response to display the number of downloads for each component fix(store.py): add "metadata" field to the list_components response to include additional metadata for each component fix(store.py): change the "user_created.name" field to "user_created.first_name" in the list_components response to display the first name of the user who created the component fix(store.py): change the "liked_by_count" field in the component response to be an integer instead of a list of UUIDs fix(store.py): change the "downloads_count" field in the component response to be an integer instead of a list of UUIDs fix(store.py): add "metadata" field to the component response to include additional metadata for each component fix(store.py): add "metadata" field to the store_component_create request schema to allow passing additional metadata for a component fix(store.py): add "metadata" field to the download_component response schema to include additional metadata for a component fix(store.py): add "metadata" field to the download_component response schema to include additional metadata for a component fix(store.py): add "metadata" field to the download_component response schema to include additional metadata for a component fix(store.py): add "metadata" field to the download_component response schema to include additional metadata for a component fix(store.py): add "metadata" field to the download_component response schema to include additional metadata for a component fix(store.py): add "metadata" field to the download_component response schema to include additional metadata for a component fix(store.py): add "metadata" field to the download_component response schema to include additional metadata for a component fix(store.py): add "metadata" field to the download_component response schema to include additional metadata for a component fix(store.py): add "metadata" field to the download_component response schema to include additional metadata for a component fix(store.py): add "metadata" field to the download_component response schema to include additional metadata for a component fix(store.py): add "metadata" field to the download_component response schema to include additional metadata for a component fix(store.py): add "metadata" field to the download_component response schema to include additional metadata for a component
2023-10-26 19:11:16 -03:00 · 2023-10-26 19:11:16 -03:00 · 665dae87e5
commit 665dae87e5
parent 47ecdfb185 43c80da141
9 changed files with 141 additions and 67 deletions
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
@ -3796,9 +3796,9 @@
      "integrity": "sha512-n1yyPsugYNSmHgxDFjicaI2+gCNjsBck8UX9kuofAKlc0h1bL+20oSF72KeNaW2DUlesbEVCFgyV2dPGTiY42g=="
    },
    "node_modules/@types/react": {
-      "version": "18.2.32",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.32.tgz",
-      "integrity": "sha512-F0FVIZQ1x5Gxy/VYJb7XcWvCcHR28Sjwt1dXLspdIatfPq1MVACfnBDwKe6ANLxQ64riIJooXClpUR6oxTiepg==",
+      "version": "18.2.33",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.33.tgz",
+      "integrity": "sha512-v+I7S+hu3PIBoVkKGpSYYpiBT1ijqEzWpzQD62/jm4K74hPpSP7FF9BnKG6+fg2+62weJYkkBWDJlZt5JO/9hg==",
      "dependencies": {
        "@types/prop-types": "*",
        "@types/scheduler": "*",
@ -5237,9 +5237,9 @@
      }
    },
    "node_modules/electron-to-chromium": {
-      "version": "1.4.566",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.566.tgz",
-      "integrity": "sha512-mv+fAy27uOmTVlUULy15U3DVJ+jg+8iyKH1bpwboCRhtDC69GKf1PPTZvEIhCyDr81RFqfxZJYrbgp933a1vtg=="
+      "version": "1.4.567",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.567.tgz",
+      "integrity": "sha512-8KR114CAYQ4/r5EIEsOmOMqQ9j0MRbJZR3aXD/KFA8RuKzyoUB4XrUCg+l8RUGqTVQgKNIgTpjaG8YHRPAbX2w=="
    },
    "node_modules/emoji-regex": {
      "version": "8.0.0",
@ -13755,9 +13755,9 @@
      "integrity": "sha512-n1yyPsugYNSmHgxDFjicaI2+gCNjsBck8UX9kuofAKlc0h1bL+20oSF72KeNaW2DUlesbEVCFgyV2dPGTiY42g=="
    },
    "@types/react": {
-      "version": "18.2.32",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.32.tgz",
-      "integrity": "sha512-F0FVIZQ1x5Gxy/VYJb7XcWvCcHR28Sjwt1dXLspdIatfPq1MVACfnBDwKe6ANLxQ64riIJooXClpUR6oxTiepg==",
+      "version": "18.2.33",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.33.tgz",
+      "integrity": "sha512-v+I7S+hu3PIBoVkKGpSYYpiBT1ijqEzWpzQD62/jm4K74hPpSP7FF9BnKG6+fg2+62weJYkkBWDJlZt5JO/9hg==",
      "requires": {
        "@types/prop-types": "*",
        "@types/scheduler": "*",
@ -14768,9 +14768,9 @@
      }
    },
    "electron-to-chromium": {
-      "version": "1.4.566",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.566.tgz",
-      "integrity": "sha512-mv+fAy27uOmTVlUULy15U3DVJ+jg+8iyKH1bpwboCRhtDC69GKf1PPTZvEIhCyDr81RFqfxZJYrbgp933a1vtg=="
+      "version": "1.4.567",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.567.tgz",
+      "integrity": "sha512-8KR114CAYQ4/r5EIEsOmOMqQ9j0MRbJZR3aXD/KFA8RuKzyoUB4XrUCg+l8RUGqTVQgKNIgTpjaG8YHRPAbX2w=="
    },
    "emoji-regex": {
      "version": "8.0.0",
--- a/src/frontend/src/pages/MainPage/components/saved-components/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/saved-components/index.tsx
@ -6,7 +6,7 @@ import { alertContext } from "../../../../contexts/alertContext";
 import { AuthContext } from "../../../../contexts/authContext";
 import { TabsContext } from "../../../../contexts/tabsContext";
 import { getStoreComponents } from "../../../../controllers/API";
-import { FlowComponent } from "../../../../types/store";
+import { storeComponent } from "../../../../types/store";
 import { MarketCardComponent } from "../../../StorePage/components/market-card";

 export default function SavedComponents(): JSX.Element {
@ -18,7 +18,7 @@ export default function SavedComponents(): JSX.Element {
  useEffect(() => {
    setTabId("");
  }, []);
-  const [data, setData] = useState<FlowComponent[]>([]);
+  const [data, setData] = useState<storeComponent[]>([]);
  const [loading, setLoading] = useState(false);
  const [filteredCategories, setFilteredCategories] = useState(new Set());
  const { setErrorData } = useContext(alertContext);
--- a/src/frontend/src/pages/StorePage/components/market-card.tsx
+++ b/src/frontend/src/pages/StorePage/components/market-card.tsx
@ -1,5 +1,5 @@
-import { Link, ToyBrick } from "lucide-react";
 import { useContext, useEffect, useRef, useState } from "react";
+import ShadTooltip from "../../../components/ShadTooltipComponent";
 import IconComponent from "../../../components/genericIconComponent";
 import { Badge } from "../../../components/ui/badge";
 import { Button } from "../../../components/ui/button";
@ -15,15 +15,15 @@ import { StoreContext } from "../../../contexts/storeContext";
 import { TabsContext } from "../../../contexts/tabsContext";
 import { getComponent, saveFlowStore } from "../../../controllers/API";
 import { FlowType } from "../../../types/flow";
-import { FlowComponent } from "../../../types/store";
+import { storeComponent } from "../../../types/store";
 import cloneFLowWithParent from "../../../utils/storeUtils";

-export const MarketCardComponent = ({ data }: { data: FlowComponent }) => {
+export const MarketCardComponent = ({ data }: { data: storeComponent }) => {
  const { savedFlows } = useContext(StoreContext);
  const [added, setAdded] = useState(savedFlows.has(data.id) ? true : false);
  const [loading, setLoading] = useState(false);
  const { addFlow } = useContext(TabsContext);
-  const { setSuccessData } = useContext(alertContext);
+  const { setSuccessData, setErrorData } = useContext(alertContext);
  const flowData = useRef<FlowType>();

  useEffect(() => {
@ -42,9 +42,14 @@ export const MarketCardComponent = ({ data }: { data: FlowComponent }) => {
          .then(() => {
            setAdded(true);
            setLoading(false);
+            setSuccessData({ title: "Component Added to account" });
          })
          .catch((error) => {
            console.error(error);
+            setErrorData({
+              title: "Error on adding Component",
+              list: [error["response"]["data"]["detail"]],
+            });
          });
      },
      (error) => {
@ -69,28 +74,6 @@ export const MarketCardComponent = ({ data }: { data: FlowComponent }) => {
    }
  }

-  function handleFork(flowId: string, is_component: boolean) {
-    getComponent(flowId).then(
-      (res) => {
-        console.log(res);
-        const newFLow = cloneFLowWithParent(res.data, res.id, is_component);
-        console.log(newFLow);
-        saveFlowStore(newFLow).then(
-          (res) => {
-            console.log(JSON.parse(JSON.stringify(res)));
-            addFlow(true, newFLow);
-          },
-          (error) => {
-            console.error(error);
-          }
-        );
-      },
-      (error) => {
-        console.log(error);
-      }
-    );
-  }
-
  return (
    <Card className="group relative flex cursor-pointer flex-col justify-between overflow-hidden transition-all hover:shadow-md">
      <div>
@ -143,12 +126,29 @@ export const MarketCardComponent = ({ data }: { data: FlowComponent }) => {
            <div className=" flex items-center gap-3">
              <Badge size="md" variant="outline">
                chain
-                <Link className="ml-1.5 w-3 text-green-700" />
+                <IconComponent
+                  name="Link"
+                  className="ml-1.5 w-3 text-green-700"
+                />
              </Badge>
-              <span className="flex items-center gap-1.5 text-xs text-foreground">
-                <ToyBrick className="h-4 w-4" />
-                123
-              </span>
+              <ShadTooltip content="Components">
+                <span className="flex items-center gap-1.5 text-xs text-foreground">
+                  <IconComponent name="ToyBrick" className="h-4 w-4" />
+                  123
+                </span>
+              </ShadTooltip>
+              <ShadTooltip content="Favorites">
+                <span className="flex items-center gap-1.5 text-xs text-foreground">
+                  <IconComponent name="Heart" className="h-4 w-4" />
+                  {data.liked_by_count ?? 0}
+                </span>
+              </ShadTooltip>
+              <ShadTooltip content="Downloads">
+                <span className="flex items-center gap-1.5 text-xs text-foreground">
+                  <IconComponent name="DownloadCloud" className="h-4 w-4" />
+                  {data.downloads_count}
+                </span>
+              </ShadTooltip>
            </div>
            {/* {data.isChat ? (
              <Button size="sm" variant="outline">
--- a/src/frontend/src/pages/StorePage/index.tsx
+++ b/src/frontend/src/pages/StorePage/index.tsx
@ -26,7 +26,7 @@ import {
  searchComponent,
 } from "../../controllers/API";
 import StoreApiKeyModal from "../../modals/StoreApiKeyModal";
-import { FlowComponent } from "../../types/store";
+import { storeComponent } from "../../types/store";
 import { cn } from "../../utils/utils";
 import { MarketCardComponent } from "./components/market-card";
 export default function StorePage(): JSX.Element {
@ -35,7 +35,7 @@ export default function StorePage(): JSX.Element {
  useEffect(() => {
    setTabId("");
  }, []);
-  const [data, setData] = useState<FlowComponent[]>([]);
+  const [data, setData] = useState<storeComponent[]>([]);
  const [loading, setLoading] = useState(false);
  const [search, setSearch] = useState(false);
  const [filteredCategories, setFilteredCategories] = useState(new Set());
@ -45,6 +45,7 @@ export default function StorePage(): JSX.Element {
  const [totalRowsCount, setTotalRowsCount] = useState(0);
  const [size, setPageSize] = useState(10);
  const [index, setPageIndex] = useState(1);
+  const [errorApiKey, setErrorApiKey] = useState(false);
  const { setSavedFlows } = useContext(StoreContext);

  async function getSavedComponents() {
@ -58,10 +59,15 @@ export default function StorePage(): JSX.Element {
  }

  useEffect(() => {
-    getSavedComponents().then((_) => handleGetComponents());
    getNumberOfComponents().then((res) => {
      setTotalRowsCount(Number(res["count"]));
    });
+    getSavedComponents()
+      .finally(() => handleGetComponents())
+      .catch((err) => {
+        setErrorApiKey(true);
+        console.error(err);
+      });
  }, []);

  const handleGetComponents = () => {
@ -138,7 +144,10 @@ export default function StorePage(): JSX.Element {
                handleGetComponents();
              }}
            >
-              <Button variant="primary">
+              <Button
+                className={`${errorApiKey ? "animate-pulse border-error" : ""}`}
+                variant="primary"
+              >
                <IconComponent name="Key" className="main-page-nav-button" />
                API Key
              </Button>
--- a/src/frontend/src/types/store/index.ts
+++ b/src/frontend/src/types/store/index.ts
@ -1,13 +1,10 @@
-export type FlowComponent = {
+export type storeComponent = {
  id: string;
-  status: string;
-  sort: null | any;
-  user_created: string;
-  date_created: string;
-  user_updated: string;
-  date_updated: string;
  is_component: boolean;
+  tags: string[];
+  metadata?: {};
+  downloads_count: number;
  name: string;
  description: string;
-  data: Object;
+  liked_by_count: number;
 };
--- a/src/frontend/src/utils/styleUtils.ts
+++ b/src/frontend/src/utils/styleUtils.ts
@ -38,6 +38,7 @@ import {
  GithubIcon,
  Group,
  Hammer,
+  Heart,
  HelpCircle,
  Home,
  Info,
@ -75,6 +76,7 @@ import {
  Store,
  SunIcon,
  TerminalSquare,
+  ToyBrick,
  Trash2,
  Undo,
  Ungroup,
@ -334,4 +336,7 @@ export const nodeIconsLucide: iconsType = {
  GitBranchPlus,
  Loader2,
  BookmarkPlus,
+  Heart,
+  Link,
+  ToyBrick,
 };