From f7903043fed7971ff1f3e5a86a5d6474c552a5c0 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Thu, 16 Nov 2023 18:49:08 -0300 Subject: [PATCH] Fixed errors on code and made MarketCard default --- .../src/components/cardComponent/index.tsx | 330 +++++++++++++++--- src/frontend/src/contexts/flowsContext.tsx | 8 +- .../MainPage/components/components/index.tsx | 4 +- .../pages/MainPage/components/flows/index.tsx | 4 +- .../StorePage/components/market-card.tsx | 286 --------------- src/frontend/src/pages/StorePage/index.tsx | 4 +- src/frontend/src/style/applies.css | 28 -- src/frontend/src/types/flow/index.ts | 2 +- src/frontend/src/types/store/index.ts | 8 +- src/frontend/src/utils/reactflowUtils.ts | 2 + 10 files changed, 308 insertions(+), 368 deletions(-) delete mode 100644 src/frontend/src/pages/StorePage/components/market-card.tsx diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx index 5ef61f716..95a5a5c98 100644 --- a/src/frontend/src/components/cardComponent/index.tsx +++ b/src/frontend/src/components/cardComponent/index.tsx @@ -1,6 +1,17 @@ -import { cardComponentPropsType } from "../../types/components"; +import { useContext, useState } from "react"; +import { useNavigate } from "react-router-dom"; +import { alertContext } from "../../contexts/alertContext"; +import { FlowsContext } from "../../contexts/flowsContext"; +import { StoreContext } from "../../contexts/storeContext"; +import { getComponent, postLikeComponent } from "../../controllers/API"; +import { storeComponent } from "../../types/store"; +import cloneFLowWithParent from "../../utils/storeUtils"; import { gradients } from "../../utils/styleUtils"; +import { classNames } from "../../utils/utils"; +import ShadTooltip from "../ShadTooltipComponent"; import IconComponent from "../genericIconComponent"; +import { Badge } from "../ui/badge"; +import { Button } from "../ui/button"; import { Card, CardDescription, @@ -9,47 +20,288 @@ import { CardTitle, } from "../ui/card"; -export const CardComponent = ({ +export default function CollectionCardComponent({ data, - onDelete, + authorized = true, + disabled = false, button, -}: cardComponentPropsType): JSX.Element => { - return ( - - - - - {data.name} - {onDelete && ( - - )} - - -
- {data.description} - {/* {flow.description} */} -
- - + onDelete, +}: { + data: storeComponent; + authorized?: boolean; + disabled?: boolean; + button?: JSX.Element; + onDelete?: () => void; +}) { + const [loading, setLoading] = useState(false); + const { addFlow } = useContext(FlowsContext); + const [loadingLike, setLoadingLike] = useState(false); + const { setSuccessData, setErrorData } = useContext(alertContext); + const { setValidApiKey } = useContext(StoreContext); + const [liked_by_user, setLiked_by_user] = useState(data.liked_by_user); + const [likes_count, setLikes_count] = useState(data.liked_by_count ?? 0); - {button && ( - -
-
- {button} -
- + const name = data.is_component ? "Component" : "Flow"; + + const navigate = useNavigate(); + + function handleInstall() { + setLoading(true); + getComponent(data.id).then((res) => { + const newFlow = cloneFLowWithParent(res, res.id, data.is_component); + addFlow(true, newFlow).then((id) => { + setSuccessData({ title: `${name} Installed` }); + setLoading(false); + if (!data.is_component) navigate("/flow/" + id); + }); + }); + } + + function handleLike() { + setLoadingLike(true); + if (liked_by_user !== undefined || liked_by_user !== null) { + const temp = liked_by_user; + const tempNum = likes_count; + setLiked_by_user((prev) => !prev); + if (!temp) { + setLikes_count((prev) => prev + 1); + } else { + setLikes_count((prev) => prev - 1); + } + console.log(data.id); + postLikeComponent(data.id) + .then((response) => { + setLoadingLike(false); + setLikes_count(response.likes_count); + setLiked_by_user(response.liked_by_user); + }) + .catch((error) => { + setLoadingLike(false); + setLikes_count(tempNum); + setLiked_by_user(temp); + if (error.response.status === 403 || error.response.status === 401) { + setValidApiKey(false); + } else { + console.error(error); + setErrorData({ + title: `Error liking ${name}.`, + list: [error["response"]["data"]["detail"]], + }); + } + }); + } + } + + const totalComponentsMetadata = () => { + return data?.metadata ? data.metadata["total"] : 0; + }; + + return ( + +
+ +
+ +
+
+ {data.is_component ? ( + + + + + + + + + + ) : ( + + )} +
+
+ +
{data.name}
+ + {data?.metadata && ( +
+ {!data.is_component && ( + + + + {totalComponentsMetadata()} + + + )} + + + + {likes_count ?? 0} + + + + + + {data.downloads_count} + + +
+ )} + + {onDelete && ( + + )} + +
+ {data.user_created && data.user_created.username && ( + + by {data.user_created.username} + + )} + + +
{data.description}
+ + +
+ + +
+
+
+ {data.tags && + data.tags.length > 0 && + data.tags.map((tag, index) => ( + + {tag.name} + + ))} +
+ {data.liked_by_count && ( +
+ + + + + + +
+ )} + {button && button} +
+
+ ); -}; +} diff --git a/src/frontend/src/contexts/flowsContext.tsx b/src/frontend/src/contexts/flowsContext.tsx index 1ff47edcd..d147c41ba 100644 --- a/src/frontend/src/contexts/flowsContext.tsx +++ b/src/frontend/src/contexts/flowsContext.tsx @@ -29,7 +29,7 @@ import { sourceHandleType, targetHandleType, } from "../types/flow"; -import { FlowsContextType, TabsState } from "../types/tabs"; +import { FlowsContextType, FlowsState } from "../types/tabs"; import { addVersionToDuplicates, checkOldEdgesHandles, @@ -73,7 +73,7 @@ const FlowsContextInitialValue: FlowsContextType = { lastCopiedSelection: null, setLastCopiedSelection: (selection: any) => {}, tabsState: {}, - setTabsState: (state: TabsState) => {}, + setTabsState: (state: FlowsState) => {}, getNodeId: (nodeType: string) => "", setTweak: (tweak: any) => {}, getTweak: [], @@ -107,7 +107,7 @@ export function FlowsProvider({ children }: { children: ReactNode }) { nodes: any; edges: any; } | null>(null); - const [tabsState, setTabsState] = useState({}); + const [tabsState, setTabsState] = useState({}); const [getTweak, setTweak] = useState([]); useEffect(() => { @@ -698,7 +698,7 @@ export function FlowsProvider({ children }: { children: ReactNode }) { ` (${increment})`; } } - return addFlow(true, createFlowComponent(component)); + return addFlow(true, createFlowComponent(component, version)); } function deleteComponent(id: string, key: string) { diff --git a/src/frontend/src/pages/MainPage/components/components/index.tsx b/src/frontend/src/pages/MainPage/components/components/index.tsx index c793fa469..9c17378c1 100644 --- a/src/frontend/src/pages/MainPage/components/components/index.tsx +++ b/src/frontend/src/pages/MainPage/components/components/index.tsx @@ -1,5 +1,5 @@ import { useContext } from "react"; -import { CardComponent } from "../../../../components/cardComponent"; +import CollectionCardComponent from "../../../../components/cardComponent"; import CardsWrapComponent from "../../../../components/cardsWrapComponent"; import { alertContext } from "../../../../contexts/alertContext"; import { FlowsContext } from "../../../../contexts/flowsContext"; @@ -31,7 +31,7 @@ export default function ComponentsComponent() { {flows .filter((flow) => flow.is_component) .map((flow, idx) => ( - { diff --git a/src/frontend/src/pages/MainPage/components/flows/index.tsx b/src/frontend/src/pages/MainPage/components/flows/index.tsx index ec139bee9..e915712ea 100644 --- a/src/frontend/src/pages/MainPage/components/flows/index.tsx +++ b/src/frontend/src/pages/MainPage/components/flows/index.tsx @@ -1,6 +1,6 @@ import { useContext } from "react"; import { Link } from "react-router-dom"; -import { CardComponent } from "../../../../components/cardComponent"; +import CollectionCardComponent from "../../../../components/cardComponent"; import CardsWrapComponent from "../../../../components/cardsWrapComponent"; import IconComponent from "../../../../components/genericIconComponent"; import { Button } from "../../../../components/ui/button"; @@ -34,7 +34,7 @@ export default function FlowsComponent() { .filter((flow) => !flow.is_component) .reverse() .map((flow, idx) => ( - { - const [loading, setLoading] = useState(false); - const { addFlow } = useContext(FlowsContext); - const [loadingLike, setLoadingLike] = useState(false); - const { setSuccessData, setErrorData } = useContext(alertContext); - const { setValidApiKey } = useContext(StoreContext); - const [liked_by_user, setLiked_by_user] = useState(data.liked_by_user); - const [likes_count, setLikes_count] = useState(data.liked_by_count ?? 0); - - const name = data.is_component ? "Component" : "Flow"; - - const navigate = useNavigate(); - - function handleInstall() { - setLoading(true); - getComponent(data.id).then((res) => { - const newFlow = cloneFLowWithParent(res, res.id, data.is_component); - addFlow(true, newFlow).then((id) => { - setSuccessData({ title: `${name} Installed` }); - setLoading(false); - if (!data.is_component) navigate("/flow/" + id); - }); - }); - } - - function handleLike() { - setLoadingLike(true); - if (liked_by_user !== undefined || liked_by_user !== null) { - const temp = liked_by_user; - const tempNum = likes_count; - setLiked_by_user((prev) => !prev); - if (!temp) { - setLikes_count((prev) => prev + 1); - } else { - setLikes_count((prev) => prev - 1); - } - console.log(data.id); - postLikeComponent(data.id) - .then((response) => { - setLoadingLike(false); - setLikes_count(response.likes_count); - setLiked_by_user(response.liked_by_user); - }) - .catch((error) => { - setLoadingLike(false); - setLikes_count(tempNum); - setLiked_by_user(temp); - if (error.response.status === 403 || error.response.status === 401) { - setValidApiKey(false); - } else { - console.error(error); - setErrorData({ - title: `Error liking ${name}.`, - list: [error["response"]["data"]["detail"]], - }); - } - }); - } - } - - const totalComponentsMetadata = () => { - return data?.metadata ? data.metadata["total"] : 0; - }; - - return ( - -
- -
- -
-
- {data.is_component ? ( - - - - - - - - - - ) : ( - - )} -
-
- -
{data.name}
- -
- {!data.is_component && ( - - - - {totalComponentsMetadata()} - - - )} - - - - {likes_count ?? 0} - - - - - - {data.downloads_count} - - -
- -
- {data.user_created.username && ( - - by {data.user_created.username} - - )} - - -
{data.description}
- - -
- - -
-
-
- {data.tags.length > 0 && - data.tags.map((tag, index) => ( - - {tag.name} - - ))} -
-
- - - - - - -
-
-
- - - ); -}; diff --git a/src/frontend/src/pages/StorePage/index.tsx b/src/frontend/src/pages/StorePage/index.tsx index d7cfe3cc2..6b4421553 100644 --- a/src/frontend/src/pages/StorePage/index.tsx +++ b/src/frontend/src/pages/StorePage/index.tsx @@ -1,6 +1,7 @@ import { useContext, useEffect, useState } from "react"; import PaginatorComponent from "../../components/PaginatorComponent"; import ShadTooltip from "../../components/ShadTooltipComponent"; +import CollectionCardComponent from "../../components/cardComponent"; import IconComponent from "../../components/genericIconComponent"; import Header from "../../components/headerComponent"; import { SkeletonCardComponent } from "../../components/skeletonCardComponent"; @@ -21,7 +22,6 @@ import { getStoreComponents, getStoreTags } from "../../controllers/API"; import StoreApiKeyModal from "../../modals/StoreApiKeyModal"; import { storeComponent } from "../../types/store"; import { cn } from "../../utils/utils"; -import { MarketCardComponent } from "./components/market-card"; export default function StorePage(): JSX.Element { const { validApiKey, setValidApiKey, hasApiKey, loadingApiKey } = useContext(StoreContext); @@ -326,7 +326,7 @@ export default function StorePage(): JSX.Element { searchData.map((item) => { return ( <> -