diff --git a/src/frontend/src/components/cardsWrapComponent/index.tsx b/src/frontend/src/components/cardsWrapComponent/index.tsx index 298f91cd3..f84abbb8b 100644 --- a/src/frontend/src/components/cardsWrapComponent/index.tsx +++ b/src/frontend/src/components/cardsWrapComponent/index.tsx @@ -1,16 +1,13 @@ 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); @@ -59,17 +56,7 @@ export default function CardsWrapComponent({ {dragMessage ? dragMessage : "Drop your file here"} ) : ( -
- {isLoading ? ( - <> - - - - - ) : ( - children - )} -
+ children )} ); diff --git a/src/frontend/src/components/pageLayout/index.tsx b/src/frontend/src/components/pageLayout/index.tsx index 2a22fa8c4..c6bc9de47 100644 --- a/src/frontend/src/components/pageLayout/index.tsx +++ b/src/frontend/src/components/pageLayout/index.tsx @@ -16,7 +16,7 @@ export default function PageLayout({
-
+

{title}

{description}

diff --git a/src/frontend/src/pages/MainPage/components/components/index.tsx b/src/frontend/src/pages/MainPage/components/components/index.tsx index 9c17378c1..d1b21bbd9 100644 --- a/src/frontend/src/pages/MainPage/components/components/index.tsx +++ b/src/frontend/src/pages/MainPage/components/components/index.tsx @@ -1,12 +1,43 @@ -import { useContext } from "react"; +import { useContext, useEffect, useState } from "react"; +import { useNavigate } from "react-router-dom"; +import PaginatorComponent from "../../../../components/PaginatorComponent"; import CollectionCardComponent 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 { FlowsContext } from "../../../../contexts/flowsContext"; +import { FlowType } from "../../../../types/flow"; -export default function ComponentsComponent() { +export default function ComponentsComponent({ + is_component = true, +}: { + is_component?: boolean; +}) { const { flows, removeFlow, uploadFlow, isLoading } = useContext(FlowsContext); const { setErrorData } = useContext(alertContext); + const [pageSize, setPageSize] = useState(10); + const [pageIndex, setPageIndex] = useState(1); + const [allData, setAllData] = useState( + flows.filter((f) => f.is_component === is_component) + ); + + const navigate = useNavigate(); + + useEffect(() => { + setAllData(flows.filter((f) => f.is_component === is_component)); + }, [flows]); + + useEffect(() => { + const start = (pageIndex - 1) * pageSize; + const end = start + pageSize; + setData(allData.slice(start, end)); + }, [pageIndex, pageSize, allData]); + + const [data, setData] = useState([]); + + const name = is_component ? "Component" : "Flow"; const onFileDrop = (e) => { e.preventDefault(); @@ -25,20 +56,74 @@ export default function ComponentsComponent() { return ( - {flows - .filter((flow) => flow.is_component) - .map((flow, idx) => ( - { - removeFlow(flow.id); - }} - /> - ))} +
+
+
+ {!isLoading || data?.length > 0 ? ( + data + ?.sort( + (a, b) => + new Date(b?.date_created!).getTime() - + new Date(a?.date_created!).getTime() + ) + .map((item, idx) => ( + { + removeFlow(item.id); + }} + key={idx} + data={item} + disabled={isLoading} + button={ + !is_component ? ( + + ) : ( + <> + ) + } + /> + )) + ) : !isLoading && data?.length === 0 ? ( + <>You haven't created {name}s yet. + ) : ( + <> + + + + )} +
+
+ {!isLoading && allData.length > 0 && ( +
+ { + setPageIndex(pageIndex); + setPageSize(pageSize); + }} + > +
+ )} +
); } diff --git a/src/frontend/src/pages/MainPage/components/flows/index.tsx b/src/frontend/src/pages/MainPage/components/flows/index.tsx deleted file mode 100644 index e915712ea..000000000 --- a/src/frontend/src/pages/MainPage/components/flows/index.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import { useContext } from "react"; -import { Link } from "react-router-dom"; -import CollectionCardComponent from "../../../../components/cardComponent"; -import CardsWrapComponent from "../../../../components/cardsWrapComponent"; -import IconComponent from "../../../../components/genericIconComponent"; -import { Button } from "../../../../components/ui/button"; -import { alertContext } from "../../../../contexts/alertContext"; -import { FlowsContext } from "../../../../contexts/flowsContext"; - -export default function FlowsComponent() { - const { uploadFlow, removeFlow, flows, isLoading } = useContext(FlowsContext); - const { setErrorData } = useContext(alertContext); - - const onFileDrop = (e) => { - e.preventDefault(); - 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"], - }); - } - } - }; - return ( - - {flows - .filter((flow) => !flow.is_component) - .reverse() - .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 12d160e86..3421f2017 100644 --- a/src/frontend/src/pages/MainPage/index.tsx +++ b/src/frontend/src/pages/MainPage/index.tsx @@ -2,10 +2,9 @@ import { useContext, useEffect } from "react"; import { Outlet, useNavigate } from "react-router-dom"; import DropdownButton from "../../components/DropdownButtonComponent"; import IconComponent from "../../components/genericIconComponent"; -import Header from "../../components/headerComponent"; +import PageLayout from "../../components/pageLayout"; 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 { FlowsContext } from "../../contexts/flowsContext"; @@ -24,10 +23,18 @@ export default function HomePage(): JSX.Element { const dropdownOptions = [ { name: "Import from JSON", - onBtnClick: () => - uploadFlow(true).then((id) => { - navigate("/flow/" + id); - }), + onBtnClick: () => { + try { + uploadFlow(true).then((id) => { + navigate("/flow/" + id); + }); + } catch (error: any) { + setErrorData({ + title: "Invalid file type", + list: [error], + }); + } + }, }, ]; const sidebarNavItems = [ @@ -49,61 +56,49 @@ export default function HomePage(): JSX.Element { // Personal flows display return ( - <> -
-
-
- - - {USER_PROJECTS_HEADER} - -
- - - { - addFlow(true).then((id) => { - navigate("/flow/" + id); - }); - }} - options={dropdownOptions} - /> -
+ + + + { + addFlow(true).then((id) => { + navigate("/flow/" + id); + }); + }} + options={dropdownOptions} + />
- - Manage your personal projects. Download or upload your collection. - - -
- -
- -
+ } + > +
+ +
+
- + ); } diff --git a/src/frontend/src/routes.tsx b/src/frontend/src/routes.tsx index f257d77a9..50e2da164 100644 --- a/src/frontend/src/routes.tsx +++ b/src/frontend/src/routes.tsx @@ -11,7 +11,6 @@ import ApiKeysPage from "./pages/ApiKeysPage"; import FlowPage from "./pages/FlowPage"; import HomePage from "./pages/MainPage"; import ComponentsComponent from "./pages/MainPage/components/components"; -import FlowsComponent from "./pages/MainPage/components/flows"; import ProfileSettingsPage from "./pages/ProfileSettingsPage"; import StorePage from "./pages/StorePage"; import ViewPage from "./pages/ViewPage"; @@ -37,8 +36,14 @@ const Router = () => { } > - } /> - } /> + } + /> + } + />