From fe9ce486d4a49362c39f3a465d89b9a5d751dc2e Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Wed, 1 Nov 2023 21:27:06 -0300 Subject: [PATCH] Modularized Card Wrap and fixed name of pages --- .../components/cardsWrapComponent/index.tsx | 76 +++++++++ .../index.tsx | 51 ++---- .../MainPage/components/components/index.tsx | 144 +++++------------ .../pages/MainPage/components/flows/index.tsx | 145 +++++------------- src/frontend/src/pages/MainPage/index.tsx | 54 +------ .../StorePage/components/market-card.tsx | 2 +- src/frontend/src/routes.tsx | 6 +- 7 files changed, 173 insertions(+), 305 deletions(-) create mode 100644 src/frontend/src/components/cardsWrapComponent/index.tsx rename src/frontend/src/pages/MainPage/components/{saved-components => added-components}/index.tsx (55%) diff --git a/src/frontend/src/components/cardsWrapComponent/index.tsx b/src/frontend/src/components/cardsWrapComponent/index.tsx new file mode 100644 index 000000000..298f91cd3 --- /dev/null +++ b/src/frontend/src/components/cardsWrapComponent/index.tsx @@ -0,0 +1,76 @@ +import { useState } from "react"; +import IconComponent from "../../components/genericIconComponent"; +import { SkeletonCardComponent } from "../skeletonCardComponent"; + +export default function CardsWrapComponent({ + onFileDrop, + children, + isLoading, + dragMessage, +}: { + onFileDrop?: (e: any) => void; + children: JSX.Element | JSX.Element[]; + isLoading: boolean; + dragMessage?: string; +}) { + const [isDragging, setIsDragging] = useState(false); + + const dragOver = (e) => { + e.preventDefault(); + if (e.dataTransfer.types.some((types) => types === "Files") && onFileDrop) { + setIsDragging(true); + } + }; + + const dragEnter = (e) => { + if (e.dataTransfer.types.some((types) => types === "Files") && onFileDrop) { + setIsDragging(true); + } + e.preventDefault(); + }; + + const dragLeave = (e) => { + e.preventDefault(); + if (onFileDrop) setIsDragging(false); + }; + + const onDrop = (e) => { + e.preventDefault(); + if (onFileDrop) onFileDrop(e); + setIsDragging(false); + }; + + return ( +
+ {isDragging ? ( + <> + + {dragMessage ? dragMessage : "Drop your file here"} + + ) : ( +
+ {isLoading ? ( + <> + + + + + ) : ( + children + )} +
+ )} +
+ ); +} diff --git a/src/frontend/src/pages/MainPage/components/saved-components/index.tsx b/src/frontend/src/pages/MainPage/components/added-components/index.tsx similarity index 55% rename from src/frontend/src/pages/MainPage/components/saved-components/index.tsx rename to src/frontend/src/pages/MainPage/components/added-components/index.tsx index f81ea939a..0b144d37d 100644 --- a/src/frontend/src/pages/MainPage/components/saved-components/index.tsx +++ b/src/frontend/src/pages/MainPage/components/added-components/index.tsx @@ -1,9 +1,6 @@ import { useContext, useEffect, useState } from "react"; - -import { SkeletonCardComponent } from "../../../../components/skeletonCardComponent"; +import CardsWrapComponent from "../../../../components/cardsWrapComponent"; import { alertContext } from "../../../../contexts/alertContext"; -import { AuthContext } from "../../../../contexts/authContext"; -import { TabsContext } from "../../../../contexts/tabsContext"; import { getStoreComponents, getStoreSavedComponents, @@ -11,15 +8,7 @@ import { import { storeComponent } from "../../../../types/store"; import { MarketCardComponent } from "../../../StorePage/components/market-card"; -export default function SavedComponents(): JSX.Element { - const { setTabId } = useContext(TabsContext); - - const { setApiKey, apiKey } = useContext(AuthContext); - - // set null id - useEffect(() => { - setTabId(""); - }, []); +export default function AddedComponents(): JSX.Element { const [data, setData] = useState([]); const [loading, setLoading] = useState(false); const [filteredCategories, setFilteredCategories] = useState(new Set()); @@ -62,30 +51,16 @@ export default function SavedComponents(): JSX.Element { } return ( - <> - {loading ? ( - <> -
- - - -
- - ) : ( -
-
- {data - .filter( - (f) => - Array.from(filteredCategories).length === 0 || - filteredCategories.has(f.is_component) - ) - .map((item, idx) => ( - - ))} -
-
- )} - + + {data + .filter( + (f) => + Array.from(filteredCategories).length === 0 || + filteredCategories.has(f.is_component) + ) + .map((item, idx) => ( + + ))} + ); } diff --git a/src/frontend/src/pages/MainPage/components/components/index.tsx b/src/frontend/src/pages/MainPage/components/components/index.tsx index 1819e7460..306ba4ba3 100644 --- a/src/frontend/src/pages/MainPage/components/components/index.tsx +++ b/src/frontend/src/pages/MainPage/components/components/index.tsx @@ -1,64 +1,18 @@ -import { useContext, useEffect, useState } from "react"; -import { Link, useNavigate } from "react-router-dom"; +import { useContext } from "react"; +import { Link } from "react-router-dom"; import { CardComponent } from "../../../../components/cardComponent"; +import CardsWrapComponent from "../../../../components/cardsWrapComponent"; import IconComponent from "../../../../components/genericIconComponent"; -import { SkeletonCardComponent } from "../../../../components/skeletonCardComponent"; import { Button } from "../../../../components/ui/button"; import { alertContext } from "../../../../contexts/alertContext"; import { TabsContext } from "../../../../contexts/tabsContext"; export default function ComponentsComponent() { - const { - flows, - setTabId, - downloadFlows, - uploadFlows, - addFlow, - removeFlow, - uploadFlow, - isLoading, - } = useContext(TabsContext); + const { flows, removeFlow, uploadFlow, isLoading } = useContext(TabsContext); const { setErrorData } = useContext(alertContext); - const dropdownOptions = [ - { - name: "Import from JSON", - onBtnClick: () => - uploadFlow(true).then((id) => { - navigate("/flow/" + id); - }), - }, - ]; - - // Set a null id - useEffect(() => { - setTabId(""); - }, []); - const navigate = useNavigate(); - - const [isDragging, setIsDragging] = useState(false); - - const dragOver = (e) => { + const onFileDrop = (e) => { e.preventDefault(); - if (e.dataTransfer.types.some((types) => types === "Files")) { - setIsDragging(true); - } - }; - - const dragEnter = (e) => { - if (e.dataTransfer.types.some((types) => types === "Files")) { - setIsDragging(true); - } - e.preventDefault(); - }; - - const dragLeave = () => { - setIsDragging(false); - }; - - const fileDrop = (e) => { - e.preventDefault(); - setIsDragging(false); if (e.dataTransfer.types.some((types) => types === "Files")) { if (e.dataTransfer.files.item(0).type === "application/json") { uploadFlow(true, e.dataTransfer.files.item(0)!); @@ -72,62 +26,38 @@ export default function ComponentsComponent() { }; return ( -
- {isDragging ? ( - <> - - Drop your flow here - - ) : ( -
- {isLoading && flows.length == 0 ? ( - <> - - - - - ) : ( - flows - .filter((flow) => flow.is_component) - .map((flow, idx) => ( - - - - } - onDelete={() => { - removeFlow(flow.id); - }} - /> - )) - )} -
- )} -
+ {flows + .filter((flow) => flow.is_component) + .map((flow, idx) => ( + + + + } + onDelete={() => { + removeFlow(flow.id); + }} + /> + ))} + ); } diff --git a/src/frontend/src/pages/MainPage/components/flows/index.tsx b/src/frontend/src/pages/MainPage/components/flows/index.tsx index 38a7f9efc..94891cde7 100644 --- a/src/frontend/src/pages/MainPage/components/flows/index.tsx +++ b/src/frontend/src/pages/MainPage/components/flows/index.tsx @@ -1,63 +1,18 @@ -import { useContext, useEffect, useState } from "react"; -import { Link, useNavigate } from "react-router-dom"; +import { useContext } from "react"; +import { Link } from "react-router-dom"; import { CardComponent } from "../../../../components/cardComponent"; +import CardsWrapComponent from "../../../../components/cardsWrapComponent"; import IconComponent from "../../../../components/genericIconComponent"; -import { SkeletonCardComponent } from "../../../../components/skeletonCardComponent"; import { Button } from "../../../../components/ui/button"; import { alertContext } from "../../../../contexts/alertContext"; import { TabsContext } from "../../../../contexts/tabsContext"; export default function FlowsComponent() { - const { - flows, - setTabId, - downloadFlows, - uploadFlows, - addFlow, - removeFlow, - uploadFlow, - isLoading, - } = useContext(TabsContext); + const { uploadFlow, removeFlow, flows, isLoading } = useContext(TabsContext); const { setErrorData } = useContext(alertContext); - const dropdownOptions = [ - { - name: "Import from JSON", - onBtnClick: () => - uploadFlow(true).then((id) => { - navigate("/flow/" + id); - }), - }, - ]; - // Set a null id - useEffect(() => { - setTabId(""); - }, []); - const navigate = useNavigate(); - - const [isDragging, setIsDragging] = useState(false); - - const dragOver = (e) => { + const onFileDrop = (e) => { e.preventDefault(); - if (e.dataTransfer.types.some((types) => types === "Files")) { - setIsDragging(true); - } - }; - - const dragEnter = (e) => { - if (e.dataTransfer.types.some((types) => types === "Files")) { - setIsDragging(true); - } - e.preventDefault(); - }; - - const dragLeave = () => { - setIsDragging(false); - }; - - const fileDrop = (e) => { - e.preventDefault(); - setIsDragging(false); if (e.dataTransfer.types.some((types) => types === "Files")) { if (e.dataTransfer.files.item(0).type === "application/json") { uploadFlow(true, e.dataTransfer.files.item(0)!); @@ -70,63 +25,39 @@ export default function FlowsComponent() { } }; return ( -
- {isDragging ? ( - <> - - Drop your flow here - - ) : ( -
- {isLoading && flows.length == 0 ? ( - <> - - - - - ) : ( - flows - .filter((flow) => !flow.is_component) - .map((flow, idx) => ( - - - - } - onDelete={() => { - removeFlow(flow.id); - }} - /> - )) - )} -
- )} -
+ {flows + .filter((flow) => !flow.is_component) + .map((flow, idx) => ( + + + + } + onDelete={() => { + removeFlow(flow.id); + }} + /> + ))} + ); } diff --git a/src/frontend/src/pages/MainPage/index.tsx b/src/frontend/src/pages/MainPage/index.tsx index c8193f522..01d582c0d 100644 --- a/src/frontend/src/pages/MainPage/index.tsx +++ b/src/frontend/src/pages/MainPage/index.tsx @@ -1,4 +1,4 @@ -import { useContext, useEffect, useState } from "react"; +import { useContext, useEffect } from "react"; import { Outlet, useNavigate } from "react-router-dom"; import DropdownButton from "../../components/DropdownButtonComponent"; import IconComponent from "../../components/genericIconComponent"; @@ -7,20 +7,11 @@ import SidebarNav from "../../components/sidebarComponent"; import { Button } from "../../components/ui/button"; import { Separator } from "../../components/ui/separator"; import { USER_PROJECTS_HEADER } from "../../constants/constants"; -import { alertContext } from "../../contexts/alertContext"; import { StoreContext } from "../../contexts/storeContext"; import { TabsContext } from "../../contexts/tabsContext"; export default function HomePage(): JSX.Element { - const { - flows, - setTabId, - downloadFlows, - uploadFlows, - addFlow, - uploadFlow, - isLoading, - } = useContext(TabsContext); - const { setErrorData } = useContext(alertContext); + const { setTabId, downloadFlows, uploadFlows, addFlow, uploadFlow } = + useContext(TabsContext); const { hasStore } = useContext(StoreContext); const dropdownOptions = [ { @@ -44,8 +35,8 @@ export default function HomePage(): JSX.Element { if (hasStore) { sidebarNavItems.push({ - title: "Saved Components", - href: "/saved-components", + title: "Added Components", + href: "/added-components", }); } @@ -55,41 +46,6 @@ export default function HomePage(): JSX.Element { }, []); const navigate = useNavigate(); - const [isDragging, setIsDragging] = useState(false); - - const dragOver = (e) => { - e.preventDefault(); - if (e.dataTransfer.types.some((types) => types === "Files")) { - setIsDragging(true); - } - }; - - const dragEnter = (e) => { - if (e.dataTransfer.types.some((types) => types === "Files")) { - setIsDragging(true); - } - e.preventDefault(); - }; - - const dragLeave = () => { - setIsDragging(false); - }; - - const fileDrop = (e) => { - e.preventDefault(); - setIsDragging(false); - if (e.dataTransfer.types.some((types) => types === "Files")) { - if (e.dataTransfer.files.item(0).type === "application/json") { - uploadFlow(true, e.dataTransfer.files.item(0)!); - } else { - setErrorData({ - title: "Invalid file type", - list: ["Please upload a JSON file"], - }); - } - } - }; - // Personal flows display return ( <> diff --git a/src/frontend/src/pages/StorePage/components/market-card.tsx b/src/frontend/src/pages/StorePage/components/market-card.tsx index f4fa855b6..1bca8e4c9 100644 --- a/src/frontend/src/pages/StorePage/components/market-card.tsx +++ b/src/frontend/src/pages/StorePage/components/market-card.tsx @@ -234,7 +234,7 @@ export const MarketCardComponent = ({ data }: { data: storeComponent }) => { "main-page-nav-button" + (loading ? " animate-spin" : "") } /> - {added ? "Install Locally" : "Add to Account"} + {added ? "Use Template" : "Add to Account"} diff --git a/src/frontend/src/routes.tsx b/src/frontend/src/routes.tsx index a8b9610dc..ff45d8e6c 100644 --- a/src/frontend/src/routes.tsx +++ b/src/frontend/src/routes.tsx @@ -10,9 +10,9 @@ import ApiKeysPage from "./pages/ApiKeysPage"; import CommunityPage from "./pages/CommunityPage"; import FlowPage from "./pages/FlowPage"; import HomePage from "./pages/MainPage"; +import AddedComponents from "./pages/MainPage/components/added-components"; import ComponentsComponent from "./pages/MainPage/components/components"; import FlowsComponent from "./pages/MainPage/components/flows"; -import SavedComponents from "./pages/MainPage/components/saved-components"; import ProfileSettingsPage from "./pages/ProfileSettingsPage"; import StorePage from "./pages/StorePage"; import ViewPage from "./pages/ViewPage"; @@ -41,10 +41,10 @@ const Router = () => { } /> } /> - + } />