From 25f675fe32325bf0a0556b0db5bca6cae4cfce88 Mon Sep 17 00:00:00 2001 From: Bart Date: Sat, 2 Sep 2023 15:55:16 +0200 Subject: [PATCH 01/11] remove direct usages of useNavigation hook, minor restructuring --- frontend/src/App.tsx | 30 +++++++++++-------- frontend/src/config/common.ts | 2 +- frontend/src/pages/accounts/Accounts.tsx | 16 ---------- .../src/pages/accounts/AccountsRouter.tsx | 14 +++++++++ .../{main/Main.tsx => AccountsTable.tsx} | 25 +++++----------- .../src/pages/accounts/details/Details.tsx | 21 ++----------- frontend/src/pages/blocks/Blocks.tsx | 16 ---------- frontend/src/pages/blocks/BlocksRouter.tsx | 14 +++++++++ .../BlocksTable.module.scss} | 0 .../Main.tsx => BlocksTable/BlocksTable.tsx} | 14 ++------- frontend/src/pages/blocks/details/Details.tsx | 18 ++--------- frontend/src/pages/contracts/Contracts.tsx | 16 ---------- .../src/pages/contracts/ContractsRouter.tsx | 24 +++++++++++++++ .../contracts/{main => }/ContractsTable.tsx | 10 +++---- .../{Details.tsx => ContractDetails.tsx} | 20 ++----------- frontend/src/pages/contracts/main/Main.tsx | 17 ----------- frontend/src/pages/events/Events.tsx | 17 ----------- frontend/src/pages/events/EventsRouter.tsx | 9 ++++++ .../{ => EventsTable}/EventsTable.module.scss | 0 .../events/{ => EventsTable}/EventsTable.tsx | 22 +++++++------- .../templates/InteractionTemplates.tsx | 1 - .../ProjectListPage.module.scss} | 0 .../ProjectListPage.tsx} | 8 ++--- .../start/{Start.tsx => StartRouter.tsx} | 8 ++--- .../src/pages/transactions/Transactions.tsx | 19 ------------ .../pages/transactions/TransactionsRouter.tsx | 24 +++++++++++++++ .../{Details.tsx => TransactionDetails.tsx} | 22 ++------------ frontend/src/pages/transactions/main/Main.tsx | 17 ----------- 28 files changed, 148 insertions(+), 256 deletions(-) delete mode 100644 frontend/src/pages/accounts/Accounts.tsx create mode 100644 frontend/src/pages/accounts/AccountsRouter.tsx rename frontend/src/pages/accounts/{main/Main.tsx => AccountsTable.tsx} (69%) delete mode 100644 frontend/src/pages/blocks/Blocks.tsx create mode 100644 frontend/src/pages/blocks/BlocksRouter.tsx rename frontend/src/pages/blocks/{main/Main.module.scss => BlocksTable/BlocksTable.module.scss} (100%) rename frontend/src/pages/blocks/{main/Main.tsx => BlocksTable/BlocksTable.tsx} (85%) delete mode 100644 frontend/src/pages/contracts/Contracts.tsx create mode 100644 frontend/src/pages/contracts/ContractsRouter.tsx rename frontend/src/pages/contracts/{main => }/ContractsTable.tsx (83%) rename frontend/src/pages/contracts/details/{Details.tsx => ContractDetails.tsx} (73%) delete mode 100644 frontend/src/pages/contracts/main/Main.tsx delete mode 100644 frontend/src/pages/events/Events.tsx create mode 100644 frontend/src/pages/events/EventsRouter.tsx rename frontend/src/pages/events/{ => EventsTable}/EventsTable.module.scss (100%) rename frontend/src/pages/events/{ => EventsTable}/EventsTable.tsx (88%) rename frontend/src/pages/start/{main/Main.module.scss => ProjectListPage/ProjectListPage.module.scss} (100%) rename frontend/src/pages/start/{main/Main.tsx => ProjectListPage/ProjectListPage.tsx} (97%) rename frontend/src/pages/start/{Start.tsx => StartRouter.tsx} (76%) delete mode 100644 frontend/src/pages/transactions/Transactions.tsx create mode 100644 frontend/src/pages/transactions/TransactionsRouter.tsx rename frontend/src/pages/transactions/details/{Details.tsx => TransactionDetails.tsx} (78%) delete mode 100644 frontend/src/pages/transactions/main/Main.tsx diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 116d99db..6942c8ae 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -15,12 +15,12 @@ import "./App.scss"; import { toastOptions } from "./config/toast"; // pages -import Start from "./pages/start/Start"; -import Accounts from "./pages/accounts/Accounts"; -import Blocks from "./pages/blocks/Blocks"; -import Transactions from "./pages/transactions/Transactions"; -import Contracts from "./pages/contracts/Contracts"; -import Events from "./pages/events/Events"; +import { StartRouter } from "./pages/start/StartRouter"; +import { AccountsRouter } from "./pages/accounts/AccountsRouter"; +import { BlocksRouter } from "./pages/blocks/BlocksRouter"; +import { TransactionsRouter } from "./pages/transactions/TransactionsRouter"; +import { ContractsRouter } from "./pages/contracts/ContractsRouter"; +import { EventsRouter } from "./pages/events/EventsRouter"; import { ProjectProvider } from "./contexts/project.context"; import { ConfirmDialogProvider } from "./contexts/confirm-dialog.context"; import { QueryClientProvider } from "react-query"; @@ -101,15 +101,21 @@ export const FlowserRoutes = (): ReactElement => { - - - + + + + - - + { - return ( - - - - - - ); -}; - -export default Accounts; diff --git a/frontend/src/pages/accounts/AccountsRouter.tsx b/frontend/src/pages/accounts/AccountsRouter.tsx new file mode 100644 index 00000000..79ee527e --- /dev/null +++ b/frontend/src/pages/accounts/AccountsRouter.tsx @@ -0,0 +1,14 @@ +import React, { FC } from "react"; +import { Redirect, Route, Switch } from "react-router-dom"; +import { AccountsTable } from "./AccountsTable"; +import { AccountDetails } from "./details/Details"; + +export const AccountsRouter: FC = () => { + return ( + + + + + + ); +}; diff --git a/frontend/src/pages/accounts/main/Main.tsx b/frontend/src/pages/accounts/AccountsTable.tsx similarity index 69% rename from frontend/src/pages/accounts/main/Main.tsx rename to frontend/src/pages/accounts/AccountsTable.tsx index a991a796..9edae007 100644 --- a/frontend/src/pages/accounts/main/Main.tsx +++ b/frontend/src/pages/accounts/AccountsTable.tsx @@ -1,19 +1,17 @@ -import React, { FunctionComponent, useEffect } from "react"; -import Label from "../../../components/label/Label"; -import Value from "../../../components/value/Value"; -import { useNavigation } from "../../../hooks/use-navigation"; -import { useGetPollingAccounts } from "../../../hooks/use-api"; -import Table from "../../../components/table/Table"; +import React, { FunctionComponent } from "react"; +import Label from "../../components/label/Label"; +import Value from "../../components/value/Value"; +import { useGetPollingAccounts } from "../../hooks/use-api"; +import Table from "../../components/table/Table"; import { createColumnHelper } from "@tanstack/react-table"; import { Account } from "@flowser/shared"; -import { TextUtils } from "../../../utils/text-utils"; +import { TextUtils } from "../../utils/text-utils"; import ReactTimeago from "react-timeago"; import { DecoratedPollingEntity } from "contexts/timeout-polling.context"; -import { AccountLink } from "../../../components/account/link/AccountLink"; +import { AccountLink } from "../../components/account/link/AccountLink"; const columnHelper = createColumnHelper>(); -// ACCOUNTS TABLE const columns = [ columnHelper.accessor("address", { header: () => , @@ -47,14 +45,9 @@ const columns = [ }), ]; -const Main: FunctionComponent = () => { - const { showNavigationDrawer } = useNavigation(); +export const AccountsTable: FunctionComponent = () => { const { data: accounts, firstFetch, error } = useGetPollingAccounts(); - useEffect(() => { - showNavigationDrawer(false); - }, []); - return ( > isInitialLoading={firstFetch} @@ -64,5 +57,3 @@ const Main: FunctionComponent = () => { /> ); }; - -export default Main; diff --git a/frontend/src/pages/accounts/details/Details.tsx b/frontend/src/pages/accounts/details/Details.tsx index 0fe03b8a..9666dea2 100644 --- a/frontend/src/pages/accounts/details/Details.tsx +++ b/frontend/src/pages/accounts/details/Details.tsx @@ -1,5 +1,4 @@ -import React, { FunctionComponent, useEffect } from "react"; -import { Breadcrumb, useNavigation } from "../../../hooks/use-navigation"; +import React, { FunctionComponent } from "react"; import classes from "./Details.module.scss"; import { useParams } from "react-router-dom"; import FullScreenLoading from "../../../components/fullscreen-loading/FullScreenLoading"; @@ -20,7 +19,7 @@ import { AccountName } from "../../../components/account/name/AccountName"; import { StyledTabs } from "../../../components/tabs/StyledTabs"; import { AccountStorage } from "./storage/AccountStorage"; import { TransactionsTable } from "../../transactions/main/TransactionsTable"; -import { ContractsTable } from "../../contracts/main/ContractsTable"; +import { ContractsTable } from "../../contracts/ContractsTable"; import { KeysTable } from "./KeysTable"; import { CadenceEditor } from "../../../components/cadence-editor/CadenceEditor"; @@ -28,26 +27,14 @@ export type AccountDetailsRouteParams = { accountId: string; }; -const Details: FunctionComponent = () => { +export const AccountDetails: FunctionComponent = () => { const { accountId } = useParams(); - const { setBreadcrumbs } = useNavigation(); - const { showNavigationDrawer } = useNavigation(); const { data, isLoading } = useGetAccount(accountId); const { data: transactions } = useGetPollingTransactionsByAccount(accountId); const { data: contracts } = useGetPollingContractsByAccount(accountId); const { data: keys } = useGetPollingKeysByAccount(accountId); const { account } = data ?? {}; - const breadcrumbs: Breadcrumb[] = [ - { to: "/accounts", label: "Accounts" }, - { label: "Details" }, - ]; - - useEffect(() => { - showNavigationDrawer(true); - setBreadcrumbs(breadcrumbs); - }, []); - if (isLoading || !account) { return ; } @@ -118,5 +105,3 @@ const Details: FunctionComponent = () => { ); }; - -export default Details; diff --git a/frontend/src/pages/blocks/Blocks.tsx b/frontend/src/pages/blocks/Blocks.tsx deleted file mode 100644 index ac3dadaa..00000000 --- a/frontend/src/pages/blocks/Blocks.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from "react"; -import { Redirect, Route, Switch } from "react-router-dom"; -import Main from "./main/Main"; -import Details from "./details/Details"; - -const Blocks = () => { - return ( - - - - - - ); -}; - -export default Blocks; diff --git a/frontend/src/pages/blocks/BlocksRouter.tsx b/frontend/src/pages/blocks/BlocksRouter.tsx new file mode 100644 index 00000000..136918c8 --- /dev/null +++ b/frontend/src/pages/blocks/BlocksRouter.tsx @@ -0,0 +1,14 @@ +import React from "react"; +import { Redirect, Route, Switch } from "react-router-dom"; +import { BlocksTable } from "./BlocksTable/BlocksTable"; +import { BlockDetails } from "./details/Details"; + +export const BlocksRouter = () => { + return ( + + + + + + ); +}; diff --git a/frontend/src/pages/blocks/main/Main.module.scss b/frontend/src/pages/blocks/BlocksTable/BlocksTable.module.scss similarity index 100% rename from frontend/src/pages/blocks/main/Main.module.scss rename to frontend/src/pages/blocks/BlocksTable/BlocksTable.module.scss diff --git a/frontend/src/pages/blocks/main/Main.tsx b/frontend/src/pages/blocks/BlocksTable/BlocksTable.tsx similarity index 85% rename from frontend/src/pages/blocks/main/Main.tsx rename to frontend/src/pages/blocks/BlocksTable/BlocksTable.tsx index a5447c54..5bc7bb30 100644 --- a/frontend/src/pages/blocks/main/Main.tsx +++ b/frontend/src/pages/blocks/BlocksTable/BlocksTable.tsx @@ -1,10 +1,9 @@ -import React, { FunctionComponent, useEffect, useMemo } from "react"; +import React, { FunctionComponent, useMemo } from "react"; import { NavLink } from "react-router-dom"; import Label from "../../../components/label/Label"; import Value from "../../../components/value/Value"; -import classes from "./Main.module.scss"; +import classes from "./BlocksTable.module.scss"; import MiddleEllipsis from "../../../components/ellipsis/MiddleEllipsis"; -import { useNavigation } from "../../../hooks/use-navigation"; import { createColumnHelper } from "@tanstack/table-core"; import Table from "../../../components/table/Table"; import { Block } from "@flowser/shared"; @@ -14,14 +13,9 @@ import { DecoratedPollingEntity } from "contexts/timeout-polling.context"; const columnHelper = createColumnHelper>(); -const Main: FunctionComponent = () => { - const { showNavigationDrawer } = useNavigation(); +export const BlocksTable: FunctionComponent = () => { const { data: blocks, firstFetch, error } = useGetPollingBlocks(); - useEffect(() => { - showNavigationDrawer(false); - }, []); - const columns = useMemo( () => [ columnHelper.accessor("id", { @@ -72,5 +66,3 @@ const Main: FunctionComponent = () => { /> ); }; - -export default Main; diff --git a/frontend/src/pages/blocks/details/Details.tsx b/frontend/src/pages/blocks/details/Details.tsx index d42b0e7f..257adfc7 100644 --- a/frontend/src/pages/blocks/details/Details.tsx +++ b/frontend/src/pages/blocks/details/Details.tsx @@ -1,6 +1,5 @@ -import React, { FunctionComponent, useEffect } from "react"; +import React, { FunctionComponent } from "react"; import { NavLink, useParams } from "react-router-dom"; -import { Breadcrumb, useNavigation } from "../../../hooks/use-navigation"; import classes from "./Details.module.scss"; import FullScreenLoading from "../../../components/fullscreen-loading/FullScreenLoading"; import { useGetBlock, useGetTransactionsByBlock } from "../../../hooks/use-api"; @@ -18,24 +17,13 @@ type RouteParams = { blockId: string; }; -const Details: FunctionComponent = () => { +export const BlockDetails: FunctionComponent = () => { const { blockId } = useParams(); - const { setBreadcrumbs } = useNavigation(); - const { showNavigationDrawer } = useNavigation(); - const breadcrumbs: Breadcrumb[] = [ - { to: "/blocks", label: "Blocks" }, - { label: "Details" }, - ]; const { isLoading, data } = useGetBlock(blockId); const { block } = data ?? {}; const { data: transactions } = useGetTransactionsByBlock(blockId); - useEffect(() => { - showNavigationDrawer(true); - setBreadcrumbs(breadcrumbs); - }, []); - if (isLoading || !block) { return ; } @@ -87,5 +75,3 @@ const Details: FunctionComponent = () => { ); }; - -export default Details; diff --git a/frontend/src/pages/contracts/Contracts.tsx b/frontend/src/pages/contracts/Contracts.tsx deleted file mode 100644 index 31073f35..00000000 --- a/frontend/src/pages/contracts/Contracts.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from "react"; -import { Redirect, Route, Switch } from "react-router-dom"; -import Main from "./main/Main"; -import Details from "./details/Details"; - -const Contracts = () => { - return ( - - - - - - ); -}; - -export default Contracts; diff --git a/frontend/src/pages/contracts/ContractsRouter.tsx b/frontend/src/pages/contracts/ContractsRouter.tsx new file mode 100644 index 00000000..72e4d521 --- /dev/null +++ b/frontend/src/pages/contracts/ContractsRouter.tsx @@ -0,0 +1,24 @@ +import React from "react"; +import { Redirect, Route, Switch } from "react-router-dom"; +import { ContractDetails } from "./details/ContractDetails"; +import { useGetPollingContracts } from "../../hooks/use-api"; +import { ContractsTable } from "./ContractsTable"; + +export const ContractsRouter = () => { + return ( + + + + + + ); +}; + +function ContractsTablePage() { + const { data } = useGetPollingContracts(); + + return ; +} diff --git a/frontend/src/pages/contracts/main/ContractsTable.tsx b/frontend/src/pages/contracts/ContractsTable.tsx similarity index 83% rename from frontend/src/pages/contracts/main/ContractsTable.tsx rename to frontend/src/pages/contracts/ContractsTable.tsx index 95415431..2b80e66e 100644 --- a/frontend/src/pages/contracts/main/ContractsTable.tsx +++ b/frontend/src/pages/contracts/ContractsTable.tsx @@ -1,13 +1,13 @@ import { createColumnHelper } from "@tanstack/table-core"; -import { DecoratedPollingEntity } from "../../../contexts/timeout-polling.context"; +import { DecoratedPollingEntity } from "../../contexts/timeout-polling.context"; import { AccountContract } from "@flowser/shared"; -import Label from "../../../components/label/Label"; -import Value from "../../../components/value/Value"; +import Label from "../../components/label/Label"; +import Value from "../../components/value/Value"; import { NavLink } from "react-router-dom"; -import { AccountLink } from "../../../components/account/link/AccountLink"; +import { AccountLink } from "../../components/account/link/AccountLink"; import ReactTimeago from "react-timeago"; import React, { ReactElement } from "react"; -import Table from "../../../components/table/Table"; +import Table from "../../components/table/Table"; const columnHelper = createColumnHelper>(); diff --git a/frontend/src/pages/contracts/details/Details.tsx b/frontend/src/pages/contracts/details/ContractDetails.tsx similarity index 73% rename from frontend/src/pages/contracts/details/Details.tsx rename to frontend/src/pages/contracts/details/ContractDetails.tsx index 842d7765..bf6ee3b4 100644 --- a/frontend/src/pages/contracts/details/Details.tsx +++ b/frontend/src/pages/contracts/details/ContractDetails.tsx @@ -1,6 +1,5 @@ -import React, { FunctionComponent, useEffect } from "react"; +import React, { FunctionComponent } from "react"; import { NavLink, useParams } from "react-router-dom"; -import { Breadcrumb, useNavigation } from "../../../hooks/use-navigation"; import FullScreenLoading from "../../../components/fullscreen-loading/FullScreenLoading"; import { useGetContract } from "../../../hooks/use-api"; import classes from "./Details.module.scss"; @@ -16,24 +15,11 @@ type RouteParams = { contractId: string; }; -const Details: FunctionComponent = () => { +export const ContractDetails: FunctionComponent = () => { const { contractId } = useParams(); - const { setBreadcrumbs, showSearchBar } = useNavigation(); - const { showNavigationDrawer } = useNavigation(); const { isLoading, data } = useGetContract(contractId); const { contract } = data ?? {}; - const breadcrumbs: Breadcrumb[] = [ - { to: "/contracts", label: "Contracts" }, - { label: "Details" }, - ]; - - useEffect(() => { - showNavigationDrawer(true); - setBreadcrumbs(breadcrumbs); - showSearchBar(false); - }, []); - if (isLoading || !contract) { return ; } @@ -71,5 +57,3 @@ const Details: FunctionComponent = () => { ); }; - -export default Details; diff --git a/frontend/src/pages/contracts/main/Main.tsx b/frontend/src/pages/contracts/main/Main.tsx deleted file mode 100644 index e8c10c2d..00000000 --- a/frontend/src/pages/contracts/main/Main.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React, { FunctionComponent, useEffect } from "react"; -import { useNavigation } from "../../../hooks/use-navigation"; -import { useGetPollingContracts } from "../../../hooks/use-api"; -import { ContractsTable } from "./ContractsTable"; - -const Main: FunctionComponent = () => { - const { showNavigationDrawer } = useNavigation(); - const { data } = useGetPollingContracts(); - - useEffect(() => { - showNavigationDrawer(false); - }, []); - - return ; -}; - -export default Main; diff --git a/frontend/src/pages/events/Events.tsx b/frontend/src/pages/events/Events.tsx deleted file mode 100644 index 968c0a30..00000000 --- a/frontend/src/pages/events/Events.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React, { FunctionComponent, useEffect } from "react"; -import { useGetPollingEvents } from "../../hooks/use-api"; -import { useNavigation } from "../../hooks/use-navigation"; -import { EventsTable } from "./EventsTable"; - -const Events: FunctionComponent = () => { - const { showNavigationDrawer } = useNavigation(); - const { data, firstFetch, error } = useGetPollingEvents(); - - useEffect(() => { - showNavigationDrawer(false); - }, []); - - return ; -}; - -export default Events; diff --git a/frontend/src/pages/events/EventsRouter.tsx b/frontend/src/pages/events/EventsRouter.tsx new file mode 100644 index 00000000..33c5f245 --- /dev/null +++ b/frontend/src/pages/events/EventsRouter.tsx @@ -0,0 +1,9 @@ +import React, { FunctionComponent } from "react"; +import { useGetPollingEvents } from "../../hooks/use-api"; +import { EventsTable } from "./EventsTable/EventsTable"; + +export const EventsRouter: FunctionComponent = () => { + const { data } = useGetPollingEvents(); + + return ; +}; diff --git a/frontend/src/pages/events/EventsTable.module.scss b/frontend/src/pages/events/EventsTable/EventsTable.module.scss similarity index 100% rename from frontend/src/pages/events/EventsTable.module.scss rename to frontend/src/pages/events/EventsTable/EventsTable.module.scss diff --git a/frontend/src/pages/events/EventsTable.tsx b/frontend/src/pages/events/EventsTable/EventsTable.tsx similarity index 88% rename from frontend/src/pages/events/EventsTable.tsx rename to frontend/src/pages/events/EventsTable/EventsTable.tsx index 52841199..04bf9e0a 100644 --- a/frontend/src/pages/events/EventsTable.tsx +++ b/frontend/src/pages/events/EventsTable/EventsTable.tsx @@ -1,22 +1,22 @@ -import React, { useEffect, useState, useMemo, ReactElement } from "react"; +import React, { useState, useMemo, ReactElement } from "react"; import classes from "./EventsTable.module.scss"; -import tableClasses from "../../components/table/Table.module.scss"; -import Card from "../../components/card/Card"; -import Label from "../../components/label/Label"; -import Value from "../../components/value/Value"; +import tableClasses from "../../../components/table/Table.module.scss"; +import Card from "../../../components/card/Card"; +import Label from "../../../components/label/Label"; +import Value from "../../../components/value/Value"; import { NavLink } from "react-router-dom"; -import MiddleEllipsis from "../../components/ellipsis/MiddleEllipsis"; -import CaretIcon from "../../components/caret-icon/CaretIcon"; +import MiddleEllipsis from "../../../components/ellipsis/MiddleEllipsis"; +import CaretIcon from "../../../components/caret-icon/CaretIcon"; import { createColumnHelper } from "@tanstack/table-core"; import { Event } from "@flowser/shared"; -import { ComputedEventData, EventUtils } from "../../utils/event-utils"; -import CopyButton from "../../components/buttons/copy-button/CopyButton"; -import Table from "../../components/table/Table"; +import { ComputedEventData, EventUtils } from "../../../utils/event-utils"; +import CopyButton from "../../../components/buttons/copy-button/CopyButton"; +import Table from "../../../components/table/Table"; import { flexRender } from "@tanstack/react-table"; import ReactTimeago from "react-timeago"; import classNames from "classnames"; import { DecoratedPollingEntity } from "contexts/timeout-polling.context"; -import { Ellipsis } from "../../components/ellipsis/Ellipsis"; +import { Ellipsis } from "../../../components/ellipsis/Ellipsis"; const subTableColumnHelper = createColumnHelper(); const subTableColumns = [ diff --git a/frontend/src/pages/interactions/components/templates/InteractionTemplates.tsx b/frontend/src/pages/interactions/components/templates/InteractionTemplates.tsx index 1e8720a4..e9998fd5 100644 --- a/frontend/src/pages/interactions/components/templates/InteractionTemplates.tsx +++ b/frontend/src/pages/interactions/components/templates/InteractionTemplates.tsx @@ -8,7 +8,6 @@ import { SearchInput } from "../../../../components/inputs/search-input/SearchIn import { useConfirmDialog } from "../../../../contexts/confirm-dialog.context"; import classNames from "classnames"; import { InteractionLabel } from "../interaction-label/InteractionLabel"; -import { SizedBox } from "../../../../components/sized-box/SizedBox"; export function InteractionTemplates(): ReactElement { return ( diff --git a/frontend/src/pages/start/main/Main.module.scss b/frontend/src/pages/start/ProjectListPage/ProjectListPage.module.scss similarity index 100% rename from frontend/src/pages/start/main/Main.module.scss rename to frontend/src/pages/start/ProjectListPage/ProjectListPage.module.scss diff --git a/frontend/src/pages/start/main/Main.tsx b/frontend/src/pages/start/ProjectListPage/ProjectListPage.tsx similarity index 97% rename from frontend/src/pages/start/main/Main.tsx rename to frontend/src/pages/start/ProjectListPage/ProjectListPage.tsx index f11a5fb7..e7221141 100644 --- a/frontend/src/pages/start/main/Main.tsx +++ b/frontend/src/pages/start/ProjectListPage/ProjectListPage.tsx @@ -10,7 +10,7 @@ import IconButton from "../../../components/buttons/icon-button/IconButton"; import longLogo from "../../../assets/images/long_logo.png"; import trash from "../../../assets/icons/trash.svg"; import newProject from "../../../assets/icons/new_project.svg"; -import classes from "./Main.module.scss"; +import classes from "./ProjectListPage.module.scss"; import { useGetAllProjects } from "../../../hooks/use-api"; import { Project } from "@flowser/shared"; import classNames from "classnames"; @@ -45,7 +45,9 @@ const tabs: ProjectTab[] = [ }, ]; -const Main: FunctionComponent = (props) => { +export const ProjectListPage: FunctionComponent = ( + props +) => { const history = useHistory(); const providedTabId = props.location.hash?.replace("#", ""); @@ -199,5 +201,3 @@ function AboutContent() { ); } - -export default Main; diff --git a/frontend/src/pages/start/Start.tsx b/frontend/src/pages/start/StartRouter.tsx similarity index 76% rename from frontend/src/pages/start/Start.tsx rename to frontend/src/pages/start/StartRouter.tsx index f0407775..452bd9c6 100644 --- a/frontend/src/pages/start/Start.tsx +++ b/frontend/src/pages/start/StartRouter.tsx @@ -1,14 +1,14 @@ import React, { FunctionComponent } from "react"; import { Redirect, Route, Switch } from "react-router-dom"; -import Main from "./main/Main"; +import { ProjectListPage } from "./ProjectListPage/ProjectListPage"; import { Configuration } from "./configuration/Configuration"; import { RouteWithBackButton } from "components/layout/Layout"; import { routes } from "../../constants/routes"; -const Start: FunctionComponent = () => { +export const StartRouter: FunctionComponent = () => { return ( - + { ); }; - -export default Start; diff --git a/frontend/src/pages/transactions/Transactions.tsx b/frontend/src/pages/transactions/Transactions.tsx deleted file mode 100644 index 53d6e2c7..00000000 --- a/frontend/src/pages/transactions/Transactions.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from "react"; -import { Redirect, Route, Switch } from "react-router-dom"; -import Main from "./main/Main"; -import Details from "./details/Details"; - -const Transactions = () => { - return ( - - - - - - ); -}; - -export default Transactions; diff --git a/frontend/src/pages/transactions/TransactionsRouter.tsx b/frontend/src/pages/transactions/TransactionsRouter.tsx new file mode 100644 index 00000000..8d0501ac --- /dev/null +++ b/frontend/src/pages/transactions/TransactionsRouter.tsx @@ -0,0 +1,24 @@ +import React, { FunctionComponent } from "react"; +import { Redirect, Route, Switch } from "react-router-dom"; +import { TransactionDetails } from "./details/TransactionDetails"; +import { useGetPollingTransactions } from "../../hooks/use-api"; +import { TransactionsTable } from "./main/TransactionsTable"; + +export const TransactionsRouter = () => { + return ( + + + + + + ); +}; + +const TransactionsTablePage: FunctionComponent = () => { + const { data } = useGetPollingTransactions(); + + return ; +}; diff --git a/frontend/src/pages/transactions/details/Details.tsx b/frontend/src/pages/transactions/details/TransactionDetails.tsx similarity index 78% rename from frontend/src/pages/transactions/details/Details.tsx rename to frontend/src/pages/transactions/details/TransactionDetails.tsx index d01593c1..a3bbb1f4 100644 --- a/frontend/src/pages/transactions/details/Details.tsx +++ b/frontend/src/pages/transactions/details/TransactionDetails.tsx @@ -1,8 +1,7 @@ -import React, { FunctionComponent, useEffect } from "react"; +import React, { FunctionComponent } from "react"; import { useParams } from "react-router-dom"; import classes from "./Details.module.scss"; import { TransactionSource } from "./source/TransactionSource"; -import { Breadcrumb, useNavigation } from "../../../hooks/use-navigation"; import FullScreenLoading from "../../../components/fullscreen-loading/FullScreenLoading"; import { useGetPollingEventsByTransaction, @@ -13,32 +12,19 @@ import { TransactionOverview } from "./TransactionOverview"; import { SizedBox } from "../../../components/sized-box/SizedBox"; import { StyledTabs } from "../../../components/tabs/StyledTabs"; import { TabItem } from "../../../components/tabs/Tabs"; -import { EventsTable } from "../../events/EventsTable"; +import { EventsTable } from "../../events/EventsTable/EventsTable"; import { SignaturesTable } from "./SignaturesTable"; type RouteParams = { transactionId: string; }; -const Details: FunctionComponent = () => { +export const TransactionDetails: FunctionComponent = () => { const { transactionId } = useParams(); - const { setBreadcrumbs, showSearchBar } = useNavigation(); - const { showNavigationDrawer } = useNavigation(); const { data, isLoading } = useGetTransaction(transactionId); const { data: events } = useGetPollingEventsByTransaction(transactionId); const { transaction } = data ?? {}; - const breadcrumbs: Breadcrumb[] = [ - { to: "/transactions", label: "Transactions" }, - { label: "Details" }, - ]; - - useEffect(() => { - showNavigationDrawer(true); - setBreadcrumbs(breadcrumbs); - showSearchBar(false); - }, []); - if (isLoading || !transaction) { return ; } @@ -95,5 +81,3 @@ const Details: FunctionComponent = () => { ); }; - -export default Details; diff --git a/frontend/src/pages/transactions/main/Main.tsx b/frontend/src/pages/transactions/main/Main.tsx deleted file mode 100644 index ead2ceb9..00000000 --- a/frontend/src/pages/transactions/main/Main.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React, { FunctionComponent, useEffect } from "react"; -import { useNavigation } from "../../../hooks/use-navigation"; -import { useGetPollingTransactions } from "../../../hooks/use-api"; -import { TransactionsTable } from "./TransactionsTable"; - -const Main: FunctionComponent = () => { - const { showNavigationDrawer } = useNavigation(); - const { data } = useGetPollingTransactions(); - - useEffect(() => { - showNavigationDrawer(false); - }, []); - - return ; -}; - -export default Main; From 652061e368a8571aff5ece583b13ced5f8a008ea Mon Sep 17 00:00:00 2001 From: Bart Date: Sun, 3 Sep 2023 13:36:21 +0200 Subject: [PATCH 02/11] migrate to react-router v6, start routes restructure, rename some folders,... --- frontend/.eslintrc.js | 2 +- frontend/package.json | 4 +- frontend/src/App.tsx | 221 ++++++++++++------ .../components/breadcrumbs/Breadcrumbs.tsx | 12 +- .../src/components/buttons/button/Button.tsx | 4 +- .../src/components/json-view/JsonView.tsx | 1 + frontend/src/components/layout/Layout.tsx | 24 +- .../side-navigation/SideNavigation.tsx | 8 +- frontend/src/constants/routes.ts | 6 +- frontend/src/contexts/project.context.tsx | 12 +- .../accounts/AccountsTable.tsx | 11 +- .../accounts/details/AccountDetails.tsx} | 11 +- .../accounts/details/Details.module.scss | 0 .../accounts/details/KeysTable.tsx | 0 .../storage/AccountStorage.module.scss | 0 .../details/storage/AccountStorage.tsx | 0 .../details/storage/StorageBadge.module.scss | 0 .../details/storage/StorageDomainBadge.tsx | 0 .../storage/cards/BaseStorageCard.module.scss | 0 .../storage/cards/InternalStorageCard.tsx | 0 .../PublicPrivateStorageCard.module.scss | 0 .../cards/PublicPrivateStorageCard.tsx | 0 .../BlocksTable/BlocksTable.module.scss | 0 .../blocks/BlocksTable/BlocksTable.tsx | 11 +- .../blocks/details/Details.module.scss | 0 .../blocks/details/Details.tsx | 14 +- .../contracts/ContractsTable.tsx | 0 .../contracts/details/ContractDetails.tsx | 8 +- .../contracts/details/Details.module.scss | 0 .../EventsTable/EventsTable.module.scss | 0 .../events/EventsTable/EventsTable.tsx | 0 .../interactions/InteractionsPage.module.scss | 0 .../interactions/InteractionsPage.tsx | 0 .../execution/ExecutionSettings.module.scss | 0 .../execution/ExecutionSettings.tsx | 0 .../history/InteractionHistory.module.scss | 0 .../components/history/InteractionHistory.tsx | 0 .../InteractionIcon.module.scss | 0 .../interaction-icon/InteractionIcon.tsx | 0 .../InteractionLabel.module.scss | 0 .../interaction-label/InteractionLabel.tsx | 0 .../outcome/InteractionOutcome.module.scss | 0 .../components/outcome/InteractionOutcome.tsx | 2 +- .../ParamBuilder/ParamBuilder.module.scss | 0 .../parameters/ParamBuilder/ParamBuilder.tsx | 0 .../AddressBuilder/AddressBuilder.module.scss | 0 .../AddressBuilder/AddressBuilder.tsx | 0 .../ArrayBuilder/ArrayBuilder.module.scss | 0 .../ArrayBuilder/ArrayBuilder.tsx | 0 .../ValueBuilder/BoolBuilder/BoolBuilder.tsx | 0 .../DictionaryBuilder.module.scss | 0 .../DictionaryBuilder/DictionaryBuilder.tsx | 0 .../FixedPointNumberBuilder.tsx | 0 .../IntegerNumberBuilder.tsx | 0 .../PathBuilder/PathBuilder.module.scss | 0 .../ValueBuilder/PathBuilder/PathBuilder.tsx | 0 .../TextualBuilder/TextualBuilder.tsx | 0 .../parameters/ValueBuilder/ValueBuilder.tsx | 0 .../parameters/ValueBuilder/interface.ts | 0 .../InteractionTemplates.module.scss | 0 .../templates/InteractionTemplates.tsx | 0 .../contexts/definition.context.tsx | 0 .../contexts/interaction-registry.context.tsx | 0 .../interactions/contexts/outcome.context.tsx | 0 .../hooks/use-transaction-name.ts | 0 .../{pages => modules}/logs/Logs.module.scss | 0 frontend/src/{pages => modules}/logs/Logs.tsx | 0 .../ProjectListPage.module.scss | 0 .../ProjectListPage/ProjectListPage.tsx | 21 +- .../settings}/Configuration.module.scss | 0 .../ConfigurationSection.module.scss | 0 .../settings}/ConfigurationSection.tsx | 0 .../projects/settings}/FormFields.module.scss | 0 .../projects/settings}/FormFields.tsx | 0 .../projects/settings/ProjectSettings.tsx} | 32 ++- .../TransactionsTable.module.scss | 0 .../TransactionsTable}/TransactionsTable.tsx | 0 .../transactions/details/Details.module.scss | 0 .../transactions/details/SignaturesTable.tsx | 0 .../details/TransactionDetails.tsx | 8 +- .../details/TransactionOverview.tsx | 0 .../source/TransactionSource.module.scss | 0 .../details/source/TransactionSource.tsx | 0 .../src/pages/accounts/AccountsRouter.tsx | 14 -- frontend/src/pages/blocks/BlocksRouter.tsx | 14 -- .../src/pages/contracts/ContractsRouter.tsx | 24 -- frontend/src/pages/events/EventsRouter.tsx | 9 - frontend/src/pages/start/StartRouter.tsx | 24 -- .../pages/transactions/TransactionsRouter.tsx | 24 -- frontend/src/targets/electron/index.tsx | 2 +- frontend/src/targets/electron/preload.ts | 2 +- .../electron/services/app-update.service.ts | 2 +- frontend/src/targets/web/index.tsx | 2 +- yarn.lock | 128 ++-------- 94 files changed, 283 insertions(+), 374 deletions(-) rename frontend/src/{pages => modules}/accounts/AccountsTable.tsx (86%) rename frontend/src/{pages/accounts/details/Details.tsx => modules/accounts/details/AccountDetails.tsx} (91%) rename frontend/src/{pages => modules}/accounts/details/Details.module.scss (100%) rename frontend/src/{pages => modules}/accounts/details/KeysTable.tsx (100%) rename frontend/src/{pages => modules}/accounts/details/storage/AccountStorage.module.scss (100%) rename frontend/src/{pages => modules}/accounts/details/storage/AccountStorage.tsx (100%) rename frontend/src/{pages => modules}/accounts/details/storage/StorageBadge.module.scss (100%) rename frontend/src/{pages => modules}/accounts/details/storage/StorageDomainBadge.tsx (100%) rename frontend/src/{pages => modules}/accounts/details/storage/cards/BaseStorageCard.module.scss (100%) rename frontend/src/{pages => modules}/accounts/details/storage/cards/InternalStorageCard.tsx (100%) rename frontend/src/{pages => modules}/accounts/details/storage/cards/PublicPrivateStorageCard.module.scss (100%) rename frontend/src/{pages => modules}/accounts/details/storage/cards/PublicPrivateStorageCard.tsx (100%) rename frontend/src/{pages => modules}/blocks/BlocksTable/BlocksTable.module.scss (100%) rename frontend/src/{pages => modules}/blocks/BlocksTable/BlocksTable.tsx (88%) rename frontend/src/{pages => modules}/blocks/details/Details.module.scss (100%) rename frontend/src/{pages => modules}/blocks/details/Details.tsx (82%) rename frontend/src/{pages => modules}/contracts/ContractsTable.tsx (100%) rename frontend/src/{pages => modules}/contracts/details/ContractDetails.tsx (91%) rename frontend/src/{pages => modules}/contracts/details/Details.module.scss (100%) rename frontend/src/{pages => modules}/events/EventsTable/EventsTable.module.scss (100%) rename frontend/src/{pages => modules}/events/EventsTable/EventsTable.tsx (100%) rename frontend/src/{pages => modules}/interactions/InteractionsPage.module.scss (100%) rename frontend/src/{pages => modules}/interactions/InteractionsPage.tsx (100%) rename frontend/src/{pages => modules}/interactions/components/execution/ExecutionSettings.module.scss (100%) rename frontend/src/{pages => modules}/interactions/components/execution/ExecutionSettings.tsx (100%) rename frontend/src/{pages => modules}/interactions/components/history/InteractionHistory.module.scss (100%) rename frontend/src/{pages => modules}/interactions/components/history/InteractionHistory.tsx (100%) rename frontend/src/{pages => modules}/interactions/components/interaction-icon/InteractionIcon.module.scss (100%) rename frontend/src/{pages => modules}/interactions/components/interaction-icon/InteractionIcon.tsx (100%) rename frontend/src/{pages => modules}/interactions/components/interaction-label/InteractionLabel.module.scss (100%) rename frontend/src/{pages => modules}/interactions/components/interaction-label/InteractionLabel.tsx (100%) rename frontend/src/{pages => modules}/interactions/components/outcome/InteractionOutcome.module.scss (100%) rename frontend/src/{pages => modules}/interactions/components/outcome/InteractionOutcome.tsx (98%) rename frontend/src/{pages => modules}/interactions/components/parameters/ParamBuilder/ParamBuilder.module.scss (100%) rename frontend/src/{pages => modules}/interactions/components/parameters/ParamBuilder/ParamBuilder.tsx (100%) rename frontend/src/{pages => modules}/interactions/components/parameters/ValueBuilder/AddressBuilder/AddressBuilder.module.scss (100%) rename frontend/src/{pages => modules}/interactions/components/parameters/ValueBuilder/AddressBuilder/AddressBuilder.tsx (100%) rename frontend/src/{pages => modules}/interactions/components/parameters/ValueBuilder/ArrayBuilder/ArrayBuilder.module.scss (100%) rename frontend/src/{pages => modules}/interactions/components/parameters/ValueBuilder/ArrayBuilder/ArrayBuilder.tsx (100%) rename frontend/src/{pages => modules}/interactions/components/parameters/ValueBuilder/BoolBuilder/BoolBuilder.tsx (100%) rename frontend/src/{pages => modules}/interactions/components/parameters/ValueBuilder/DictionaryBuilder/DictionaryBuilder.module.scss (100%) rename frontend/src/{pages => modules}/interactions/components/parameters/ValueBuilder/DictionaryBuilder/DictionaryBuilder.tsx (100%) rename frontend/src/{pages => modules}/interactions/components/parameters/ValueBuilder/FixedPointNumberBuilder/FixedPointNumberBuilder.tsx (100%) rename frontend/src/{pages => modules}/interactions/components/parameters/ValueBuilder/IntegerNumberBuilder/IntegerNumberBuilder.tsx (100%) rename frontend/src/{pages => modules}/interactions/components/parameters/ValueBuilder/PathBuilder/PathBuilder.module.scss (100%) rename frontend/src/{pages => modules}/interactions/components/parameters/ValueBuilder/PathBuilder/PathBuilder.tsx (100%) rename frontend/src/{pages => modules}/interactions/components/parameters/ValueBuilder/TextualBuilder/TextualBuilder.tsx (100%) rename frontend/src/{pages => modules}/interactions/components/parameters/ValueBuilder/ValueBuilder.tsx (100%) rename frontend/src/{pages => modules}/interactions/components/parameters/ValueBuilder/interface.ts (100%) rename frontend/src/{pages => modules}/interactions/components/templates/InteractionTemplates.module.scss (100%) rename frontend/src/{pages => modules}/interactions/components/templates/InteractionTemplates.tsx (100%) rename frontend/src/{pages => modules}/interactions/contexts/definition.context.tsx (100%) rename frontend/src/{pages => modules}/interactions/contexts/interaction-registry.context.tsx (100%) rename frontend/src/{pages => modules}/interactions/contexts/outcome.context.tsx (100%) rename frontend/src/{pages => modules}/interactions/hooks/use-transaction-name.ts (100%) rename frontend/src/{pages => modules}/logs/Logs.module.scss (100%) rename frontend/src/{pages => modules}/logs/Logs.tsx (100%) rename frontend/src/{pages/start => modules/projects}/ProjectListPage/ProjectListPage.module.scss (100%) rename frontend/src/{pages/start => modules/projects}/ProjectListPage/ProjectListPage.tsx (92%) rename frontend/src/{pages/start/configuration => modules/projects/settings}/Configuration.module.scss (100%) rename frontend/src/{pages/start/configuration => modules/projects/settings}/ConfigurationSection.module.scss (100%) rename frontend/src/{pages/start/configuration => modules/projects/settings}/ConfigurationSection.tsx (100%) rename frontend/src/{pages/start/configuration => modules/projects/settings}/FormFields.module.scss (100%) rename frontend/src/{pages/start/configuration => modules/projects/settings}/FormFields.tsx (100%) rename frontend/src/{pages/start/configuration/Configuration.tsx => modules/projects/settings/ProjectSettings.tsx} (95%) rename frontend/src/{pages/transactions/main => modules/transactions/TransactionsTable}/TransactionsTable.module.scss (100%) rename frontend/src/{pages/transactions/main => modules/transactions/TransactionsTable}/TransactionsTable.tsx (100%) rename frontend/src/{pages => modules}/transactions/details/Details.module.scss (100%) rename frontend/src/{pages => modules}/transactions/details/SignaturesTable.tsx (100%) rename frontend/src/{pages => modules}/transactions/details/TransactionDetails.tsx (93%) rename frontend/src/{pages => modules}/transactions/details/TransactionOverview.tsx (100%) rename frontend/src/{pages => modules}/transactions/details/source/TransactionSource.module.scss (100%) rename frontend/src/{pages => modules}/transactions/details/source/TransactionSource.tsx (100%) delete mode 100644 frontend/src/pages/accounts/AccountsRouter.tsx delete mode 100644 frontend/src/pages/blocks/BlocksRouter.tsx delete mode 100644 frontend/src/pages/contracts/ContractsRouter.tsx delete mode 100644 frontend/src/pages/events/EventsRouter.tsx delete mode 100644 frontend/src/pages/start/StartRouter.tsx delete mode 100644 frontend/src/pages/transactions/TransactionsRouter.tsx diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js index c272f056..1d7c3492 100644 --- a/frontend/.eslintrc.js +++ b/frontend/.eslintrc.js @@ -15,7 +15,7 @@ module.exports = { extends: [ "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react "plugin:@typescript-eslint/recommended", // Uses the recommended rules from @typescript-eslint/eslint-plugin - "plugin:prettier/recommended", // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array. + "plugin:prettier/recommended", // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last settings in the extends array. ], rules: { "@typescript-eslint/ban-ts-ignore": "off", diff --git a/frontend/package.json b/frontend/package.json index 967ecef8..73facdd0 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -28,7 +28,6 @@ "@types/node": "^12.20.27", "@types/react": "^17.0.24", "@types/react-dom": "^17.0.9", - "@types/react-router-dom": "^5.3.0", "@types/react-timeago": "^4.1.3", "@uiw/codemirror-extensions-basic-setup": "^4.12.4", "@uiw/codemirror-theme-github": "^4.12.4", @@ -53,11 +52,10 @@ "react-dom": "^17.0.2", "react-hot-toast": "^2.1.1", "react-json-view": "^1.21.3", - "react-loader-spinner": "^4.0.0", "react-modern-drawer": "^1.1.2", "react-pro-sidebar": "^0.7.1", "react-query": "^3.24.4", - "react-router-dom": "^5.3.0", + "react-router-dom": "6.15.0", "react-scripts": "5.0.0", "react-timeago": "^6.2.1", "sqlite3": "^5.0.11", diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 6942c8ae..afdf010a 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,26 +1,17 @@ -import React, { ReactElement, useEffect } from "react"; +import React, { FunctionComponent, ReactElement, useEffect } from "react"; import { BrowserRouter, - Redirect, Route, - RouteComponentProps, - Switch, - withRouter, + Routes, + useLocation, + useParams, } from "react-router-dom"; import { Toaster } from "react-hot-toast"; -import { RouteWithProjectLayout } from "./components/layout/Layout"; -import { routes } from "./constants/routes"; +import { BackButtonLayout, ProjectLayout } from "./components/layout/Layout"; import { UiStateContextProvider } from "./contexts/ui-state.context"; import "./App.scss"; import { toastOptions } from "./config/toast"; -// pages -import { StartRouter } from "./pages/start/StartRouter"; -import { AccountsRouter } from "./pages/accounts/AccountsRouter"; -import { BlocksRouter } from "./pages/blocks/BlocksRouter"; -import { TransactionsRouter } from "./pages/transactions/TransactionsRouter"; -import { ContractsRouter } from "./pages/contracts/ContractsRouter"; -import { EventsRouter } from "./pages/events/EventsRouter"; import { ProjectProvider } from "./contexts/project.context"; import { ConfirmDialogProvider } from "./contexts/confirm-dialog.context"; import { QueryClientProvider } from "react-query"; @@ -35,35 +26,46 @@ import { ConsentDialog } from "./components/dialogs/consent/ConsentDialog"; import { useAnalyticsConsent } from "./hooks/use-analytics-consent"; import { ServiceRegistry } from "./services/service-registry"; import { AnalyticEvent } from "./services/analytics.service"; -import { InteractionsPage } from "./pages/interactions/InteractionsPage"; -import { InteractionRegistryProvider } from "pages/interactions/contexts/interaction-registry.context"; -import { Configuration } from "./pages/start/configuration/Configuration"; - -const BrowserRouterEvents = withRouter( - ({ - children, - history, - location, - }: RouteComponentProps & { children: ReactElement[] }) => { - const { analyticsService } = ServiceRegistry.getInstance(); - - useEffect(() => { - history.listen((location, action) => { - analyticsService.track(AnalyticEvent.PAGE_VIEW, { - location, - action, - }); - }); - }, []); - - useEffect(() => { - // scroll to the top on every route change - window.scrollTo(0, 0); - }, [location]); - - return <>{children}; - } -); +import { InteractionsPage } from "./modules/interactions/InteractionsPage"; +import { InteractionRegistryProvider } from "modules/interactions/contexts/interaction-registry.context"; +import { ProjectSettings } from "./modules/projects/settings/ProjectSettings"; +import { + useGetPollingAccounts, + useGetPollingBlocks, + useGetPollingContracts, + useGetPollingEvents, + useGetPollingTransactions, +} from "./hooks/use-api"; +import { TransactionsTable } from "./modules/transactions/TransactionsTable/TransactionsTable"; +import { TransactionDetails } from "./modules/transactions/details/TransactionDetails"; +import { BlockDetails } from "./modules/blocks/details/Details"; +import { BlocksTable } from "./modules/blocks/BlocksTable/BlocksTable"; +import { AccountDetails } from "./modules/accounts/details/AccountDetails"; +import { AccountsTable } from "./modules/accounts/AccountsTable"; +import { ProjectListPage } from "./modules/projects/ProjectListPage/ProjectListPage"; +import { ContractsTable } from "./modules/contracts/ContractsTable"; +import { ContractDetails } from "./modules/contracts/details/ContractDetails"; +import { EventsTable } from "./modules/events/EventsTable/EventsTable"; + +const BrowserRouterEvents = (props: { + children: ReactElement[]; +}): ReactElement => { + const location = useLocation(); + const { analyticsService } = ServiceRegistry.getInstance(); + + useEffect(() => { + analyticsService.track(AnalyticEvent.PAGE_VIEW, { + location, + }); + }, [location]); + + useEffect(() => { + // scroll to the top on every route change + window.scrollTo(0, 0); + }, [location]); + + return <>{props.children}; +}; export type FlowserClientAppProps = { platformAdapter: PlatformAdapterState; @@ -100,32 +102,59 @@ export const FlowserRoutes = (): ReactElement => { - - - - - + + } /> + + + + } + /> + + + } /> + } /> + + + } /> + } /> + + + } /> + } /> + + + } /> + } /> + + + + + } /> - + + + } /> - - + + + } /> - - - + ; } + +function ProjectSettingsPage() { + const { projectId } = useParams(); + + return ; +} + +const TransactionsTablePage: FunctionComponent = () => { + const { data } = useGetPollingTransactions(); + + return ; +}; + +function TransactionDetailsPage() { + const { transactionId } = useParams(); + + return ; +} + +function BlocksTablePage() { + const { data } = useGetPollingBlocks(); + + return ; +} + +function BlockDetailsPage() { + const { blockId } = useParams(); + + return ; +} + +function AccountsTablePage() { + const { data } = useGetPollingAccounts(); + + return ; +} + +function AccountDetailsPage() { + const { accountId } = useParams(); + + return ; +} + +function ContractsTablePage() { + const { data } = useGetPollingContracts(); + + return ; +} + +function ContractDetailsPage() { + const { contractId } = useParams(); + + return ; +} + +export const EventsTablePage: FunctionComponent = () => { + const { data } = useGetPollingEvents(); + + return ; +}; diff --git a/frontend/src/components/breadcrumbs/Breadcrumbs.tsx b/frontend/src/components/breadcrumbs/Breadcrumbs.tsx index 4a819e3d..567cda8d 100644 --- a/frontend/src/components/breadcrumbs/Breadcrumbs.tsx +++ b/frontend/src/components/breadcrumbs/Breadcrumbs.tsx @@ -1,5 +1,5 @@ -import React, { ReactElement, useCallback } from "react"; -import { NavLink, useHistory } from "react-router-dom"; +import React, { ReactElement } from "react"; +import { NavLink, useNavigate } from "react-router-dom"; import { useNavigation } from "../../hooks/use-navigation"; import classes from "./Breadcrumbs.module.scss"; import { ReactComponent as IconBackButton } from "../../assets/icons/back-button.svg"; @@ -12,13 +12,9 @@ type BreadcrumbsProps = { export function Breadcrumbs(props: BreadcrumbsProps): ReactElement | null { const { isShowBackButtonVisible, isBreadcrumbsVisible, breadcrumbs } = useNavigation(); - const history = useHistory(); + const navigate = useNavigate(); const currentUrl = window.location.pathname; - const onBack = useCallback(() => { - history.goBack(); - }, []); - if (!isBreadcrumbsVisible) { return null; } @@ -26,7 +22,7 @@ export function Breadcrumbs(props: BreadcrumbsProps): ReactElement | null { return (
{isShowBackButtonVisible && ( -
+
navigate(-1)}>
)} diff --git a/frontend/src/components/buttons/button/Button.tsx b/frontend/src/components/buttons/button/Button.tsx index 81b03c22..4e8064ba 100644 --- a/frontend/src/components/buttons/button/Button.tsx +++ b/frontend/src/components/buttons/button/Button.tsx @@ -1,7 +1,7 @@ import React, { FunctionComponent, HTMLAttributes } from "react"; import classes from "./Button.module.scss"; -import Loader from "react-loader-spinner"; import classNames from "classnames"; +import { Spinner } from "../../spinner/Spinner"; export type ButtonProps = React.DetailedHTMLProps< React.ButtonHTMLAttributes, @@ -41,7 +41,7 @@ const Button: FunctionComponent = ({ > {loading && (
- +
)}
+ {/* @ts-ignore */} = (props) => { - const history = useHistory(); +export const BackButtonLayout: FC<{ children: ReactNode }> = (props) => { + const navigate = useNavigate(); return (
{ - history.goBack(); - }} + onClick={() => navigate(-1)} className={classes.backButton} />
- + {props.children}
); }; -export const RouteWithProjectLayout: FC = (props) => ( - - - -); - -const ProjectLayout: FunctionComponent = ({ children }) => { +export const ProjectLayout: FunctionComponent = ({ children }) => { const location = useLocation(); const showMargin = !location.pathname.startsWith(routes.interactions); diff --git a/frontend/src/components/side-navigation/SideNavigation.tsx b/frontend/src/components/side-navigation/SideNavigation.tsx index 96b23b40..54a40ca8 100644 --- a/frontend/src/components/side-navigation/SideNavigation.tsx +++ b/frontend/src/components/side-navigation/SideNavigation.tsx @@ -1,7 +1,7 @@ import React, { ReactElement } from "react"; import classes from "./SideNavigation.module.scss"; import { routes } from "../../constants/routes"; -import { NavLink } from "react-router-dom"; +import { NavLink, useLocation } from "react-router-dom"; import { FlowserIcon } from "components/icons/Icons"; import { SizedBox } from "../sized-box/SizedBox"; import classNames from "classnames"; @@ -54,13 +54,15 @@ function ProjectLink(props: { icon: React.FunctionComponent>; onClick?: () => void; }) { + const location = useLocation(); const Icon = props.icon; const iconSize = 20; return ( diff --git a/frontend/src/constants/routes.ts b/frontend/src/constants/routes.ts index 0a98034c..280342ff 100644 --- a/frontend/src/constants/routes.ts +++ b/frontend/src/constants/routes.ts @@ -1,7 +1,7 @@ export const routes = { - start: "/start", - configure: "/start/configure", - configureExisting: "/start/configure/:id", + start: "/projects", + configure: "/projects/configure", + configureExisting: "/projects/configure/:id", configureCurrent: "/configure/:id", accounts: "/accounts", blocks: "/blocks", diff --git a/frontend/src/contexts/project.context.tsx b/frontend/src/contexts/project.context.tsx index 8bb20609..3fa5d031 100644 --- a/frontend/src/contexts/project.context.tsx +++ b/frontend/src/contexts/project.context.tsx @@ -8,7 +8,6 @@ import React, { useEffect, } from "react"; import { routes } from "../constants/routes"; -import { useHistory } from "react-router-dom"; import toast from "react-hot-toast"; import { Block, EmulatorSnapshot, Project } from "@flowser/shared"; import { useConfirmDialog } from "./confirm-dialog.context"; @@ -26,6 +25,7 @@ import { AnalyticEvent } from "../services/analytics.service"; import { FlowUtils } from "../utils/flow-utils"; import * as fcl from "@onflow/fcl"; import { SnapshotDialog } from "components/dialogs/snapshot/SnapshotDialog"; +import { useNavigate } from "react-router-dom"; export type ProjectActionsContextState = { switchProject: () => Promise; @@ -53,7 +53,7 @@ export function ProjectProvider({ const { track } = useAnalytics(); const queryClient = useQueryClient(); - const history = useHistory(); + const navigate = useNavigate(); const { handleError } = useErrorHandler(ProjectProvider.name); const { showDialog, hideDialog } = useConfirmDialog(); const { data: currentProject, refetch: refetchCurrentProject } = @@ -96,7 +96,9 @@ export function ProjectProvider({ error: `Failed to delete project "${project.name}"`, success: `Project "${project.name}" deleted!`, }); - history.replace(routes.start); + navigate(routes.start, { + replace: true, + }); } catch (e) { toast.error("Something went wrong: can not delete custom emulator"); } finally { @@ -126,7 +128,9 @@ export function ProjectProvider({ // Clear the entire cache, // so that previous data isn't there when using another project queryClient.clear(); - history.replace(routes.start); + navigate(routes.start, { + replace: true, + }); }; await toast.promise(execute(), { loading: "Closing project...", diff --git a/frontend/src/pages/accounts/AccountsTable.tsx b/frontend/src/modules/accounts/AccountsTable.tsx similarity index 86% rename from frontend/src/pages/accounts/AccountsTable.tsx rename to frontend/src/modules/accounts/AccountsTable.tsx index 9edae007..e46bb7a9 100644 --- a/frontend/src/pages/accounts/AccountsTable.tsx +++ b/frontend/src/modules/accounts/AccountsTable.tsx @@ -1,7 +1,6 @@ import React, { FunctionComponent } from "react"; import Label from "../../components/label/Label"; import Value from "../../components/value/Value"; -import { useGetPollingAccounts } from "../../hooks/use-api"; import Table from "../../components/table/Table"; import { createColumnHelper } from "@tanstack/react-table"; import { Account } from "@flowser/shared"; @@ -45,15 +44,15 @@ const columns = [ }), ]; -export const AccountsTable: FunctionComponent = () => { - const { data: accounts, firstFetch, error } = useGetPollingAccounts(); +type AccountsTableProps = { + accounts: DecoratedPollingEntity[]; +}; +export const AccountsTable: FunctionComponent = (props) => { return ( > - isInitialLoading={firstFetch} - error={error} columns={columns} - data={accounts} + data={props.accounts} /> ); }; diff --git a/frontend/src/pages/accounts/details/Details.tsx b/frontend/src/modules/accounts/details/AccountDetails.tsx similarity index 91% rename from frontend/src/pages/accounts/details/Details.tsx rename to frontend/src/modules/accounts/details/AccountDetails.tsx index 9666dea2..5c5b988d 100644 --- a/frontend/src/pages/accounts/details/Details.tsx +++ b/frontend/src/modules/accounts/details/AccountDetails.tsx @@ -1,6 +1,5 @@ import React, { FunctionComponent } from "react"; import classes from "./Details.module.scss"; -import { useParams } from "react-router-dom"; import FullScreenLoading from "../../../components/fullscreen-loading/FullScreenLoading"; import { useGetAccount, @@ -18,17 +17,19 @@ import { AccountAvatar } from "../../../components/account/avatar/AccountAvatar" import { AccountName } from "../../../components/account/name/AccountName"; import { StyledTabs } from "../../../components/tabs/StyledTabs"; import { AccountStorage } from "./storage/AccountStorage"; -import { TransactionsTable } from "../../transactions/main/TransactionsTable"; +import { TransactionsTable } from "../../transactions/TransactionsTable/TransactionsTable"; import { ContractsTable } from "../../contracts/ContractsTable"; import { KeysTable } from "./KeysTable"; import { CadenceEditor } from "../../../components/cadence-editor/CadenceEditor"; -export type AccountDetailsRouteParams = { +type AccountDetailsProps = { accountId: string; }; -export const AccountDetails: FunctionComponent = () => { - const { accountId } = useParams(); +export const AccountDetails: FunctionComponent = ( + props +) => { + const { accountId } = props; const { data, isLoading } = useGetAccount(accountId); const { data: transactions } = useGetPollingTransactionsByAccount(accountId); const { data: contracts } = useGetPollingContractsByAccount(accountId); diff --git a/frontend/src/pages/accounts/details/Details.module.scss b/frontend/src/modules/accounts/details/Details.module.scss similarity index 100% rename from frontend/src/pages/accounts/details/Details.module.scss rename to frontend/src/modules/accounts/details/Details.module.scss diff --git a/frontend/src/pages/accounts/details/KeysTable.tsx b/frontend/src/modules/accounts/details/KeysTable.tsx similarity index 100% rename from frontend/src/pages/accounts/details/KeysTable.tsx rename to frontend/src/modules/accounts/details/KeysTable.tsx diff --git a/frontend/src/pages/accounts/details/storage/AccountStorage.module.scss b/frontend/src/modules/accounts/details/storage/AccountStorage.module.scss similarity index 100% rename from frontend/src/pages/accounts/details/storage/AccountStorage.module.scss rename to frontend/src/modules/accounts/details/storage/AccountStorage.module.scss diff --git a/frontend/src/pages/accounts/details/storage/AccountStorage.tsx b/frontend/src/modules/accounts/details/storage/AccountStorage.tsx similarity index 100% rename from frontend/src/pages/accounts/details/storage/AccountStorage.tsx rename to frontend/src/modules/accounts/details/storage/AccountStorage.tsx diff --git a/frontend/src/pages/accounts/details/storage/StorageBadge.module.scss b/frontend/src/modules/accounts/details/storage/StorageBadge.module.scss similarity index 100% rename from frontend/src/pages/accounts/details/storage/StorageBadge.module.scss rename to frontend/src/modules/accounts/details/storage/StorageBadge.module.scss diff --git a/frontend/src/pages/accounts/details/storage/StorageDomainBadge.tsx b/frontend/src/modules/accounts/details/storage/StorageDomainBadge.tsx similarity index 100% rename from frontend/src/pages/accounts/details/storage/StorageDomainBadge.tsx rename to frontend/src/modules/accounts/details/storage/StorageDomainBadge.tsx diff --git a/frontend/src/pages/accounts/details/storage/cards/BaseStorageCard.module.scss b/frontend/src/modules/accounts/details/storage/cards/BaseStorageCard.module.scss similarity index 100% rename from frontend/src/pages/accounts/details/storage/cards/BaseStorageCard.module.scss rename to frontend/src/modules/accounts/details/storage/cards/BaseStorageCard.module.scss diff --git a/frontend/src/pages/accounts/details/storage/cards/InternalStorageCard.tsx b/frontend/src/modules/accounts/details/storage/cards/InternalStorageCard.tsx similarity index 100% rename from frontend/src/pages/accounts/details/storage/cards/InternalStorageCard.tsx rename to frontend/src/modules/accounts/details/storage/cards/InternalStorageCard.tsx diff --git a/frontend/src/pages/accounts/details/storage/cards/PublicPrivateStorageCard.module.scss b/frontend/src/modules/accounts/details/storage/cards/PublicPrivateStorageCard.module.scss similarity index 100% rename from frontend/src/pages/accounts/details/storage/cards/PublicPrivateStorageCard.module.scss rename to frontend/src/modules/accounts/details/storage/cards/PublicPrivateStorageCard.module.scss diff --git a/frontend/src/pages/accounts/details/storage/cards/PublicPrivateStorageCard.tsx b/frontend/src/modules/accounts/details/storage/cards/PublicPrivateStorageCard.tsx similarity index 100% rename from frontend/src/pages/accounts/details/storage/cards/PublicPrivateStorageCard.tsx rename to frontend/src/modules/accounts/details/storage/cards/PublicPrivateStorageCard.tsx diff --git a/frontend/src/pages/blocks/BlocksTable/BlocksTable.module.scss b/frontend/src/modules/blocks/BlocksTable/BlocksTable.module.scss similarity index 100% rename from frontend/src/pages/blocks/BlocksTable/BlocksTable.module.scss rename to frontend/src/modules/blocks/BlocksTable/BlocksTable.module.scss diff --git a/frontend/src/pages/blocks/BlocksTable/BlocksTable.tsx b/frontend/src/modules/blocks/BlocksTable/BlocksTable.tsx similarity index 88% rename from frontend/src/pages/blocks/BlocksTable/BlocksTable.tsx rename to frontend/src/modules/blocks/BlocksTable/BlocksTable.tsx index 5bc7bb30..4943ac76 100644 --- a/frontend/src/pages/blocks/BlocksTable/BlocksTable.tsx +++ b/frontend/src/modules/blocks/BlocksTable/BlocksTable.tsx @@ -7,14 +7,17 @@ import MiddleEllipsis from "../../../components/ellipsis/MiddleEllipsis"; import { createColumnHelper } from "@tanstack/table-core"; import Table from "../../../components/table/Table"; import { Block } from "@flowser/shared"; -import { useGetPollingBlocks } from "../../../hooks/use-api"; import ReactTimeago from "react-timeago"; import { DecoratedPollingEntity } from "contexts/timeout-polling.context"; const columnHelper = createColumnHelper>(); -export const BlocksTable: FunctionComponent = () => { - const { data: blocks, firstFetch, error } = useGetPollingBlocks(); +type BlocksTableProps = { + blocks: DecoratedPollingEntity[]; +}; + +export const BlocksTable: FunctionComponent = (props) => { + const { blocks } = props; const columns = useMemo( () => [ @@ -57,8 +60,6 @@ export const BlocksTable: FunctionComponent = () => { return ( > - isInitialLoading={firstFetch} - error={error} data={blocks} columns={columns} headerRowClass={classes.tableRow} diff --git a/frontend/src/pages/blocks/details/Details.module.scss b/frontend/src/modules/blocks/details/Details.module.scss similarity index 100% rename from frontend/src/pages/blocks/details/Details.module.scss rename to frontend/src/modules/blocks/details/Details.module.scss diff --git a/frontend/src/pages/blocks/details/Details.tsx b/frontend/src/modules/blocks/details/Details.tsx similarity index 82% rename from frontend/src/pages/blocks/details/Details.tsx rename to frontend/src/modules/blocks/details/Details.tsx index 257adfc7..b0dc6de1 100644 --- a/frontend/src/pages/blocks/details/Details.tsx +++ b/frontend/src/modules/blocks/details/Details.tsx @@ -1,5 +1,5 @@ import React, { FunctionComponent } from "react"; -import { NavLink, useParams } from "react-router-dom"; +import { NavLink } from "react-router-dom"; import classes from "./Details.module.scss"; import FullScreenLoading from "../../../components/fullscreen-loading/FullScreenLoading"; import { useGetBlock, useGetTransactionsByBlock } from "../../../hooks/use-api"; @@ -11,18 +11,16 @@ import { import { TextUtils } from "../../../utils/text-utils"; import { SizedBox } from "../../../components/sized-box/SizedBox"; import { StyledTabs } from "../../../components/tabs/StyledTabs"; -import { TransactionsTable } from "../../transactions/main/TransactionsTable"; +import { TransactionsTable } from "../../transactions/TransactionsTable/TransactionsTable"; -type RouteParams = { +type BlockDetailsProps = { blockId: string; }; -export const BlockDetails: FunctionComponent = () => { - const { blockId } = useParams(); - - const { isLoading, data } = useGetBlock(blockId); +export const BlockDetails: FunctionComponent = (props) => { + const { isLoading, data } = useGetBlock(props.blockId); const { block } = data ?? {}; - const { data: transactions } = useGetTransactionsByBlock(blockId); + const { data: transactions } = useGetTransactionsByBlock(props.blockId); if (isLoading || !block) { return ; diff --git a/frontend/src/pages/contracts/ContractsTable.tsx b/frontend/src/modules/contracts/ContractsTable.tsx similarity index 100% rename from frontend/src/pages/contracts/ContractsTable.tsx rename to frontend/src/modules/contracts/ContractsTable.tsx diff --git a/frontend/src/pages/contracts/details/ContractDetails.tsx b/frontend/src/modules/contracts/details/ContractDetails.tsx similarity index 91% rename from frontend/src/pages/contracts/details/ContractDetails.tsx rename to frontend/src/modules/contracts/details/ContractDetails.tsx index bf6ee3b4..f7a13b14 100644 --- a/frontend/src/pages/contracts/details/ContractDetails.tsx +++ b/frontend/src/modules/contracts/details/ContractDetails.tsx @@ -11,12 +11,14 @@ import { TextUtils } from "../../../utils/text-utils"; import { SizedBox } from "../../../components/sized-box/SizedBox"; import { CadenceEditor } from "../../../components/cadence-editor/CadenceEditor"; -type RouteParams = { +type ContractDetailsProps = { contractId: string; }; -export const ContractDetails: FunctionComponent = () => { - const { contractId } = useParams(); +export const ContractDetails: FunctionComponent = ( + props +) => { + const { contractId } = props; const { isLoading, data } = useGetContract(contractId); const { contract } = data ?? {}; diff --git a/frontend/src/pages/contracts/details/Details.module.scss b/frontend/src/modules/contracts/details/Details.module.scss similarity index 100% rename from frontend/src/pages/contracts/details/Details.module.scss rename to frontend/src/modules/contracts/details/Details.module.scss diff --git a/frontend/src/pages/events/EventsTable/EventsTable.module.scss b/frontend/src/modules/events/EventsTable/EventsTable.module.scss similarity index 100% rename from frontend/src/pages/events/EventsTable/EventsTable.module.scss rename to frontend/src/modules/events/EventsTable/EventsTable.module.scss diff --git a/frontend/src/pages/events/EventsTable/EventsTable.tsx b/frontend/src/modules/events/EventsTable/EventsTable.tsx similarity index 100% rename from frontend/src/pages/events/EventsTable/EventsTable.tsx rename to frontend/src/modules/events/EventsTable/EventsTable.tsx diff --git a/frontend/src/pages/interactions/InteractionsPage.module.scss b/frontend/src/modules/interactions/InteractionsPage.module.scss similarity index 100% rename from frontend/src/pages/interactions/InteractionsPage.module.scss rename to frontend/src/modules/interactions/InteractionsPage.module.scss diff --git a/frontend/src/pages/interactions/InteractionsPage.tsx b/frontend/src/modules/interactions/InteractionsPage.tsx similarity index 100% rename from frontend/src/pages/interactions/InteractionsPage.tsx rename to frontend/src/modules/interactions/InteractionsPage.tsx diff --git a/frontend/src/pages/interactions/components/execution/ExecutionSettings.module.scss b/frontend/src/modules/interactions/components/execution/ExecutionSettings.module.scss similarity index 100% rename from frontend/src/pages/interactions/components/execution/ExecutionSettings.module.scss rename to frontend/src/modules/interactions/components/execution/ExecutionSettings.module.scss diff --git a/frontend/src/pages/interactions/components/execution/ExecutionSettings.tsx b/frontend/src/modules/interactions/components/execution/ExecutionSettings.tsx similarity index 100% rename from frontend/src/pages/interactions/components/execution/ExecutionSettings.tsx rename to frontend/src/modules/interactions/components/execution/ExecutionSettings.tsx diff --git a/frontend/src/pages/interactions/components/history/InteractionHistory.module.scss b/frontend/src/modules/interactions/components/history/InteractionHistory.module.scss similarity index 100% rename from frontend/src/pages/interactions/components/history/InteractionHistory.module.scss rename to frontend/src/modules/interactions/components/history/InteractionHistory.module.scss diff --git a/frontend/src/pages/interactions/components/history/InteractionHistory.tsx b/frontend/src/modules/interactions/components/history/InteractionHistory.tsx similarity index 100% rename from frontend/src/pages/interactions/components/history/InteractionHistory.tsx rename to frontend/src/modules/interactions/components/history/InteractionHistory.tsx diff --git a/frontend/src/pages/interactions/components/interaction-icon/InteractionIcon.module.scss b/frontend/src/modules/interactions/components/interaction-icon/InteractionIcon.module.scss similarity index 100% rename from frontend/src/pages/interactions/components/interaction-icon/InteractionIcon.module.scss rename to frontend/src/modules/interactions/components/interaction-icon/InteractionIcon.module.scss diff --git a/frontend/src/pages/interactions/components/interaction-icon/InteractionIcon.tsx b/frontend/src/modules/interactions/components/interaction-icon/InteractionIcon.tsx similarity index 100% rename from frontend/src/pages/interactions/components/interaction-icon/InteractionIcon.tsx rename to frontend/src/modules/interactions/components/interaction-icon/InteractionIcon.tsx diff --git a/frontend/src/pages/interactions/components/interaction-label/InteractionLabel.module.scss b/frontend/src/modules/interactions/components/interaction-label/InteractionLabel.module.scss similarity index 100% rename from frontend/src/pages/interactions/components/interaction-label/InteractionLabel.module.scss rename to frontend/src/modules/interactions/components/interaction-label/InteractionLabel.module.scss diff --git a/frontend/src/pages/interactions/components/interaction-label/InteractionLabel.tsx b/frontend/src/modules/interactions/components/interaction-label/InteractionLabel.tsx similarity index 100% rename from frontend/src/pages/interactions/components/interaction-label/InteractionLabel.tsx rename to frontend/src/modules/interactions/components/interaction-label/InteractionLabel.tsx diff --git a/frontend/src/pages/interactions/components/outcome/InteractionOutcome.module.scss b/frontend/src/modules/interactions/components/outcome/InteractionOutcome.module.scss similarity index 100% rename from frontend/src/pages/interactions/components/outcome/InteractionOutcome.module.scss rename to frontend/src/modules/interactions/components/outcome/InteractionOutcome.module.scss diff --git a/frontend/src/pages/interactions/components/outcome/InteractionOutcome.tsx b/frontend/src/modules/interactions/components/outcome/InteractionOutcome.tsx similarity index 98% rename from frontend/src/pages/interactions/components/outcome/InteractionOutcome.tsx rename to frontend/src/modules/interactions/components/outcome/InteractionOutcome.tsx index 4442698a..f6ea05a9 100644 --- a/frontend/src/pages/interactions/components/outcome/InteractionOutcome.tsx +++ b/frontend/src/modules/interactions/components/outcome/InteractionOutcome.tsx @@ -11,7 +11,7 @@ import classes from "./InteractionOutcome.module.scss"; import { FlowScriptOutcome, FlowTransactionOutcome, -} from "pages/interactions/contexts/interaction-registry.context"; +} from "modules/interactions/contexts/interaction-registry.context"; import { TabItem } from "../../../../components/tabs/Tabs"; import { Callout } from "../../../../components/callout/Callout"; import { useInteractionDefinitionManager } from "../../contexts/definition.context"; diff --git a/frontend/src/pages/interactions/components/parameters/ParamBuilder/ParamBuilder.module.scss b/frontend/src/modules/interactions/components/parameters/ParamBuilder/ParamBuilder.module.scss similarity index 100% rename from frontend/src/pages/interactions/components/parameters/ParamBuilder/ParamBuilder.module.scss rename to frontend/src/modules/interactions/components/parameters/ParamBuilder/ParamBuilder.module.scss diff --git a/frontend/src/pages/interactions/components/parameters/ParamBuilder/ParamBuilder.tsx b/frontend/src/modules/interactions/components/parameters/ParamBuilder/ParamBuilder.tsx similarity index 100% rename from frontend/src/pages/interactions/components/parameters/ParamBuilder/ParamBuilder.tsx rename to frontend/src/modules/interactions/components/parameters/ParamBuilder/ParamBuilder.tsx diff --git a/frontend/src/pages/interactions/components/parameters/ValueBuilder/AddressBuilder/AddressBuilder.module.scss b/frontend/src/modules/interactions/components/parameters/ValueBuilder/AddressBuilder/AddressBuilder.module.scss similarity index 100% rename from frontend/src/pages/interactions/components/parameters/ValueBuilder/AddressBuilder/AddressBuilder.module.scss rename to frontend/src/modules/interactions/components/parameters/ValueBuilder/AddressBuilder/AddressBuilder.module.scss diff --git a/frontend/src/pages/interactions/components/parameters/ValueBuilder/AddressBuilder/AddressBuilder.tsx b/frontend/src/modules/interactions/components/parameters/ValueBuilder/AddressBuilder/AddressBuilder.tsx similarity index 100% rename from frontend/src/pages/interactions/components/parameters/ValueBuilder/AddressBuilder/AddressBuilder.tsx rename to frontend/src/modules/interactions/components/parameters/ValueBuilder/AddressBuilder/AddressBuilder.tsx diff --git a/frontend/src/pages/interactions/components/parameters/ValueBuilder/ArrayBuilder/ArrayBuilder.module.scss b/frontend/src/modules/interactions/components/parameters/ValueBuilder/ArrayBuilder/ArrayBuilder.module.scss similarity index 100% rename from frontend/src/pages/interactions/components/parameters/ValueBuilder/ArrayBuilder/ArrayBuilder.module.scss rename to frontend/src/modules/interactions/components/parameters/ValueBuilder/ArrayBuilder/ArrayBuilder.module.scss diff --git a/frontend/src/pages/interactions/components/parameters/ValueBuilder/ArrayBuilder/ArrayBuilder.tsx b/frontend/src/modules/interactions/components/parameters/ValueBuilder/ArrayBuilder/ArrayBuilder.tsx similarity index 100% rename from frontend/src/pages/interactions/components/parameters/ValueBuilder/ArrayBuilder/ArrayBuilder.tsx rename to frontend/src/modules/interactions/components/parameters/ValueBuilder/ArrayBuilder/ArrayBuilder.tsx diff --git a/frontend/src/pages/interactions/components/parameters/ValueBuilder/BoolBuilder/BoolBuilder.tsx b/frontend/src/modules/interactions/components/parameters/ValueBuilder/BoolBuilder/BoolBuilder.tsx similarity index 100% rename from frontend/src/pages/interactions/components/parameters/ValueBuilder/BoolBuilder/BoolBuilder.tsx rename to frontend/src/modules/interactions/components/parameters/ValueBuilder/BoolBuilder/BoolBuilder.tsx diff --git a/frontend/src/pages/interactions/components/parameters/ValueBuilder/DictionaryBuilder/DictionaryBuilder.module.scss b/frontend/src/modules/interactions/components/parameters/ValueBuilder/DictionaryBuilder/DictionaryBuilder.module.scss similarity index 100% rename from frontend/src/pages/interactions/components/parameters/ValueBuilder/DictionaryBuilder/DictionaryBuilder.module.scss rename to frontend/src/modules/interactions/components/parameters/ValueBuilder/DictionaryBuilder/DictionaryBuilder.module.scss diff --git a/frontend/src/pages/interactions/components/parameters/ValueBuilder/DictionaryBuilder/DictionaryBuilder.tsx b/frontend/src/modules/interactions/components/parameters/ValueBuilder/DictionaryBuilder/DictionaryBuilder.tsx similarity index 100% rename from frontend/src/pages/interactions/components/parameters/ValueBuilder/DictionaryBuilder/DictionaryBuilder.tsx rename to frontend/src/modules/interactions/components/parameters/ValueBuilder/DictionaryBuilder/DictionaryBuilder.tsx diff --git a/frontend/src/pages/interactions/components/parameters/ValueBuilder/FixedPointNumberBuilder/FixedPointNumberBuilder.tsx b/frontend/src/modules/interactions/components/parameters/ValueBuilder/FixedPointNumberBuilder/FixedPointNumberBuilder.tsx similarity index 100% rename from frontend/src/pages/interactions/components/parameters/ValueBuilder/FixedPointNumberBuilder/FixedPointNumberBuilder.tsx rename to frontend/src/modules/interactions/components/parameters/ValueBuilder/FixedPointNumberBuilder/FixedPointNumberBuilder.tsx diff --git a/frontend/src/pages/interactions/components/parameters/ValueBuilder/IntegerNumberBuilder/IntegerNumberBuilder.tsx b/frontend/src/modules/interactions/components/parameters/ValueBuilder/IntegerNumberBuilder/IntegerNumberBuilder.tsx similarity index 100% rename from frontend/src/pages/interactions/components/parameters/ValueBuilder/IntegerNumberBuilder/IntegerNumberBuilder.tsx rename to frontend/src/modules/interactions/components/parameters/ValueBuilder/IntegerNumberBuilder/IntegerNumberBuilder.tsx diff --git a/frontend/src/pages/interactions/components/parameters/ValueBuilder/PathBuilder/PathBuilder.module.scss b/frontend/src/modules/interactions/components/parameters/ValueBuilder/PathBuilder/PathBuilder.module.scss similarity index 100% rename from frontend/src/pages/interactions/components/parameters/ValueBuilder/PathBuilder/PathBuilder.module.scss rename to frontend/src/modules/interactions/components/parameters/ValueBuilder/PathBuilder/PathBuilder.module.scss diff --git a/frontend/src/pages/interactions/components/parameters/ValueBuilder/PathBuilder/PathBuilder.tsx b/frontend/src/modules/interactions/components/parameters/ValueBuilder/PathBuilder/PathBuilder.tsx similarity index 100% rename from frontend/src/pages/interactions/components/parameters/ValueBuilder/PathBuilder/PathBuilder.tsx rename to frontend/src/modules/interactions/components/parameters/ValueBuilder/PathBuilder/PathBuilder.tsx diff --git a/frontend/src/pages/interactions/components/parameters/ValueBuilder/TextualBuilder/TextualBuilder.tsx b/frontend/src/modules/interactions/components/parameters/ValueBuilder/TextualBuilder/TextualBuilder.tsx similarity index 100% rename from frontend/src/pages/interactions/components/parameters/ValueBuilder/TextualBuilder/TextualBuilder.tsx rename to frontend/src/modules/interactions/components/parameters/ValueBuilder/TextualBuilder/TextualBuilder.tsx diff --git a/frontend/src/pages/interactions/components/parameters/ValueBuilder/ValueBuilder.tsx b/frontend/src/modules/interactions/components/parameters/ValueBuilder/ValueBuilder.tsx similarity index 100% rename from frontend/src/pages/interactions/components/parameters/ValueBuilder/ValueBuilder.tsx rename to frontend/src/modules/interactions/components/parameters/ValueBuilder/ValueBuilder.tsx diff --git a/frontend/src/pages/interactions/components/parameters/ValueBuilder/interface.ts b/frontend/src/modules/interactions/components/parameters/ValueBuilder/interface.ts similarity index 100% rename from frontend/src/pages/interactions/components/parameters/ValueBuilder/interface.ts rename to frontend/src/modules/interactions/components/parameters/ValueBuilder/interface.ts diff --git a/frontend/src/pages/interactions/components/templates/InteractionTemplates.module.scss b/frontend/src/modules/interactions/components/templates/InteractionTemplates.module.scss similarity index 100% rename from frontend/src/pages/interactions/components/templates/InteractionTemplates.module.scss rename to frontend/src/modules/interactions/components/templates/InteractionTemplates.module.scss diff --git a/frontend/src/pages/interactions/components/templates/InteractionTemplates.tsx b/frontend/src/modules/interactions/components/templates/InteractionTemplates.tsx similarity index 100% rename from frontend/src/pages/interactions/components/templates/InteractionTemplates.tsx rename to frontend/src/modules/interactions/components/templates/InteractionTemplates.tsx diff --git a/frontend/src/pages/interactions/contexts/definition.context.tsx b/frontend/src/modules/interactions/contexts/definition.context.tsx similarity index 100% rename from frontend/src/pages/interactions/contexts/definition.context.tsx rename to frontend/src/modules/interactions/contexts/definition.context.tsx diff --git a/frontend/src/pages/interactions/contexts/interaction-registry.context.tsx b/frontend/src/modules/interactions/contexts/interaction-registry.context.tsx similarity index 100% rename from frontend/src/pages/interactions/contexts/interaction-registry.context.tsx rename to frontend/src/modules/interactions/contexts/interaction-registry.context.tsx diff --git a/frontend/src/pages/interactions/contexts/outcome.context.tsx b/frontend/src/modules/interactions/contexts/outcome.context.tsx similarity index 100% rename from frontend/src/pages/interactions/contexts/outcome.context.tsx rename to frontend/src/modules/interactions/contexts/outcome.context.tsx diff --git a/frontend/src/pages/interactions/hooks/use-transaction-name.ts b/frontend/src/modules/interactions/hooks/use-transaction-name.ts similarity index 100% rename from frontend/src/pages/interactions/hooks/use-transaction-name.ts rename to frontend/src/modules/interactions/hooks/use-transaction-name.ts diff --git a/frontend/src/pages/logs/Logs.module.scss b/frontend/src/modules/logs/Logs.module.scss similarity index 100% rename from frontend/src/pages/logs/Logs.module.scss rename to frontend/src/modules/logs/Logs.module.scss diff --git a/frontend/src/pages/logs/Logs.tsx b/frontend/src/modules/logs/Logs.tsx similarity index 100% rename from frontend/src/pages/logs/Logs.tsx rename to frontend/src/modules/logs/Logs.tsx diff --git a/frontend/src/pages/start/ProjectListPage/ProjectListPage.module.scss b/frontend/src/modules/projects/ProjectListPage/ProjectListPage.module.scss similarity index 100% rename from frontend/src/pages/start/ProjectListPage/ProjectListPage.module.scss rename to frontend/src/modules/projects/ProjectListPage/ProjectListPage.module.scss diff --git a/frontend/src/pages/start/ProjectListPage/ProjectListPage.tsx b/frontend/src/modules/projects/ProjectListPage/ProjectListPage.tsx similarity index 92% rename from frontend/src/pages/start/ProjectListPage/ProjectListPage.tsx rename to frontend/src/modules/projects/ProjectListPage/ProjectListPage.tsx index e7221141..601d0c7c 100644 --- a/frontend/src/pages/start/ProjectListPage/ProjectListPage.tsx +++ b/frontend/src/modules/projects/ProjectListPage/ProjectListPage.tsx @@ -4,7 +4,7 @@ import React, { useCallback, useState, } from "react"; -import { Link, RouteChildrenProps, useHistory } from "react-router-dom"; +import { Link, useNavigate, useLocation } from "react-router-dom"; import { routes } from "../../../constants/routes"; import IconButton from "../../../components/buttons/icon-button/IconButton"; import longLogo from "../../../assets/images/long_logo.png"; @@ -45,19 +45,18 @@ const tabs: ProjectTab[] = [ }, ]; -export const ProjectListPage: FunctionComponent = ( - props -) => { - const history = useHistory(); +export const ProjectListPage: FunctionComponent = () => { + const navigate = useNavigate(); + const location = useLocation(); - const providedTabId = props.location.hash?.replace("#", ""); + const providedTabId = location.hash?.replace("#", ""); const providedTab = tabs.find((tab) => tab.id === providedTabId); const defaultTab = tabs.find((tab) => tab.isDefault); const fallbackTab = tabs[0]; const activeTab = providedTab ?? defaultTab ?? fallbackTab; const onConfigure = useCallback(() => { - history.push(routes.configure); + navigate(routes.configure); }, []); return ( @@ -103,7 +102,7 @@ function ProjectsListContent() { const { data: projects } = useGetAllProjects(); const { removeProject } = useProjectActions(); const { handleError } = useErrorHandler(ProjectsListContent.name); - const history = useHistory(); + const navigate = useNavigate(); const { track } = useAnalytics(); const projectService = ServiceRegistry.getInstance().projectsService; const showProjectList = projects && projects.length > 0; @@ -112,10 +111,12 @@ function ProjectsListContent() { try { await projectService.useProject(project.id); track(AnalyticEvent.PROJECT_STARTED); - history.push(routes.firstRouteAfterStart); + navigate(routes.firstRouteAfterStart); } catch (e: unknown) { handleError(e); - history.replace(`/start/configure/${project.id}`); + navigate(`/start/configure/${project.id}`, { + replace: true, + }); } }; diff --git a/frontend/src/pages/start/configuration/Configuration.module.scss b/frontend/src/modules/projects/settings/Configuration.module.scss similarity index 100% rename from frontend/src/pages/start/configuration/Configuration.module.scss rename to frontend/src/modules/projects/settings/Configuration.module.scss diff --git a/frontend/src/pages/start/configuration/ConfigurationSection.module.scss b/frontend/src/modules/projects/settings/ConfigurationSection.module.scss similarity index 100% rename from frontend/src/pages/start/configuration/ConfigurationSection.module.scss rename to frontend/src/modules/projects/settings/ConfigurationSection.module.scss diff --git a/frontend/src/pages/start/configuration/ConfigurationSection.tsx b/frontend/src/modules/projects/settings/ConfigurationSection.tsx similarity index 100% rename from frontend/src/pages/start/configuration/ConfigurationSection.tsx rename to frontend/src/modules/projects/settings/ConfigurationSection.tsx diff --git a/frontend/src/pages/start/configuration/FormFields.module.scss b/frontend/src/modules/projects/settings/FormFields.module.scss similarity index 100% rename from frontend/src/pages/start/configuration/FormFields.module.scss rename to frontend/src/modules/projects/settings/FormFields.module.scss diff --git a/frontend/src/pages/start/configuration/FormFields.tsx b/frontend/src/modules/projects/settings/FormFields.tsx similarity index 100% rename from frontend/src/pages/start/configuration/FormFields.tsx rename to frontend/src/modules/projects/settings/FormFields.tsx diff --git a/frontend/src/pages/start/configuration/Configuration.tsx b/frontend/src/modules/projects/settings/ProjectSettings.tsx similarity index 95% rename from frontend/src/pages/start/configuration/Configuration.tsx rename to frontend/src/modules/projects/settings/ProjectSettings.tsx index ace88691..a07f84c2 100644 --- a/frontend/src/pages/start/configuration/Configuration.tsx +++ b/frontend/src/modules/projects/settings/ProjectSettings.tsx @@ -1,5 +1,5 @@ import React, { FunctionComponent, useEffect, useState } from "react"; -import { useHistory, useParams } from "react-router-dom"; +import { useParams, useNavigate } from "react-router-dom"; import { useFormik } from "formik"; import classes from "./Configuration.module.scss"; import Card from "../../../components/card/Card"; @@ -38,7 +38,14 @@ const projectSchema = yup.object().shape({ filesystemPath: yup.string().required("Required"), }); -export const Configuration: FunctionComponent = () => { +type ProjectSettingsProps = { + projectId: string; +}; + +export const ProjectSettings: FunctionComponent = ( + props +) => { + const { projectId } = props; const projectService = ServiceRegistry.getInstance().projectsService; const [isLoading, setIsLoading] = useState(true); @@ -46,10 +53,9 @@ export const Configuration: FunctionComponent = () => { const { onPickProjectPath } = usePlatformAdapter(); const { removeProject } = useProjectActions(); const { data: flowCliInfo } = useGetFlowCliInfo(); - const { handleError } = useErrorHandler(Configuration.name); - const history = useHistory(); - const { id } = useParams<{ id: string }>(); - const isExistingProject = Boolean(id); + const { handleError } = useErrorHandler(ProjectSettings.name); + const navigate = useNavigate(); + const isExistingProject = Boolean(projectId); const formik = useFormik({ validationSchema: projectSchema, @@ -63,7 +69,7 @@ export const Configuration: FunctionComponent = () => { toast.promise(runProject(), { loading: "Running project", success: "Project started", - error: "Failed to start project", + error: "Failed to projects project", }); }, }); @@ -90,9 +96,13 @@ export const Configuration: FunctionComponent = () => { } try { await projectService.useProject(project.id); - history.replace(routes.firstRouteAfterStart); + navigate(routes.firstRouteAfterStart, { + replace: true, + }); } catch (e) { - history.replace(`/start/configure/${project.id}`); + navigate(`/start/configure/${project.id}`, { + replace: true, + }); handleError(e); throw e; } @@ -111,7 +121,7 @@ export const Configuration: FunctionComponent = () => { useEffect(() => { setIsLoading(true); (isExistingProject - ? loadExistingProject(id) + ? loadExistingProject(projectId) : loadDefaultProject() ).finally(() => { setIsLoading(false); @@ -342,7 +352,7 @@ export const Configuration: FunctionComponent = () => { onClick={() => removeProject(formik.values)} variant="middle" outlined={true} - disabled={!id} + disabled={!projectId} > DELETE diff --git a/frontend/src/pages/transactions/main/TransactionsTable.module.scss b/frontend/src/modules/transactions/TransactionsTable/TransactionsTable.module.scss similarity index 100% rename from frontend/src/pages/transactions/main/TransactionsTable.module.scss rename to frontend/src/modules/transactions/TransactionsTable/TransactionsTable.module.scss diff --git a/frontend/src/pages/transactions/main/TransactionsTable.tsx b/frontend/src/modules/transactions/TransactionsTable/TransactionsTable.tsx similarity index 100% rename from frontend/src/pages/transactions/main/TransactionsTable.tsx rename to frontend/src/modules/transactions/TransactionsTable/TransactionsTable.tsx diff --git a/frontend/src/pages/transactions/details/Details.module.scss b/frontend/src/modules/transactions/details/Details.module.scss similarity index 100% rename from frontend/src/pages/transactions/details/Details.module.scss rename to frontend/src/modules/transactions/details/Details.module.scss diff --git a/frontend/src/pages/transactions/details/SignaturesTable.tsx b/frontend/src/modules/transactions/details/SignaturesTable.tsx similarity index 100% rename from frontend/src/pages/transactions/details/SignaturesTable.tsx rename to frontend/src/modules/transactions/details/SignaturesTable.tsx diff --git a/frontend/src/pages/transactions/details/TransactionDetails.tsx b/frontend/src/modules/transactions/details/TransactionDetails.tsx similarity index 93% rename from frontend/src/pages/transactions/details/TransactionDetails.tsx rename to frontend/src/modules/transactions/details/TransactionDetails.tsx index a3bbb1f4..39fd9527 100644 --- a/frontend/src/pages/transactions/details/TransactionDetails.tsx +++ b/frontend/src/modules/transactions/details/TransactionDetails.tsx @@ -15,12 +15,14 @@ import { TabItem } from "../../../components/tabs/Tabs"; import { EventsTable } from "../../events/EventsTable/EventsTable"; import { SignaturesTable } from "./SignaturesTable"; -type RouteParams = { +type TransactionDetailsProps = { transactionId: string; }; -export const TransactionDetails: FunctionComponent = () => { - const { transactionId } = useParams(); +export const TransactionDetails: FunctionComponent = ( + props +) => { + const { transactionId } = props; const { data, isLoading } = useGetTransaction(transactionId); const { data: events } = useGetPollingEventsByTransaction(transactionId); const { transaction } = data ?? {}; diff --git a/frontend/src/pages/transactions/details/TransactionOverview.tsx b/frontend/src/modules/transactions/details/TransactionOverview.tsx similarity index 100% rename from frontend/src/pages/transactions/details/TransactionOverview.tsx rename to frontend/src/modules/transactions/details/TransactionOverview.tsx diff --git a/frontend/src/pages/transactions/details/source/TransactionSource.module.scss b/frontend/src/modules/transactions/details/source/TransactionSource.module.scss similarity index 100% rename from frontend/src/pages/transactions/details/source/TransactionSource.module.scss rename to frontend/src/modules/transactions/details/source/TransactionSource.module.scss diff --git a/frontend/src/pages/transactions/details/source/TransactionSource.tsx b/frontend/src/modules/transactions/details/source/TransactionSource.tsx similarity index 100% rename from frontend/src/pages/transactions/details/source/TransactionSource.tsx rename to frontend/src/modules/transactions/details/source/TransactionSource.tsx diff --git a/frontend/src/pages/accounts/AccountsRouter.tsx b/frontend/src/pages/accounts/AccountsRouter.tsx deleted file mode 100644 index 79ee527e..00000000 --- a/frontend/src/pages/accounts/AccountsRouter.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React, { FC } from "react"; -import { Redirect, Route, Switch } from "react-router-dom"; -import { AccountsTable } from "./AccountsTable"; -import { AccountDetails } from "./details/Details"; - -export const AccountsRouter: FC = () => { - return ( - - - - - - ); -}; diff --git a/frontend/src/pages/blocks/BlocksRouter.tsx b/frontend/src/pages/blocks/BlocksRouter.tsx deleted file mode 100644 index 136918c8..00000000 --- a/frontend/src/pages/blocks/BlocksRouter.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from "react"; -import { Redirect, Route, Switch } from "react-router-dom"; -import { BlocksTable } from "./BlocksTable/BlocksTable"; -import { BlockDetails } from "./details/Details"; - -export const BlocksRouter = () => { - return ( - - - - - - ); -}; diff --git a/frontend/src/pages/contracts/ContractsRouter.tsx b/frontend/src/pages/contracts/ContractsRouter.tsx deleted file mode 100644 index 72e4d521..00000000 --- a/frontend/src/pages/contracts/ContractsRouter.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from "react"; -import { Redirect, Route, Switch } from "react-router-dom"; -import { ContractDetails } from "./details/ContractDetails"; -import { useGetPollingContracts } from "../../hooks/use-api"; -import { ContractsTable } from "./ContractsTable"; - -export const ContractsRouter = () => { - return ( - - - - - - ); -}; - -function ContractsTablePage() { - const { data } = useGetPollingContracts(); - - return ; -} diff --git a/frontend/src/pages/events/EventsRouter.tsx b/frontend/src/pages/events/EventsRouter.tsx deleted file mode 100644 index 33c5f245..00000000 --- a/frontend/src/pages/events/EventsRouter.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React, { FunctionComponent } from "react"; -import { useGetPollingEvents } from "../../hooks/use-api"; -import { EventsTable } from "./EventsTable/EventsTable"; - -export const EventsRouter: FunctionComponent = () => { - const { data } = useGetPollingEvents(); - - return ; -}; diff --git a/frontend/src/pages/start/StartRouter.tsx b/frontend/src/pages/start/StartRouter.tsx deleted file mode 100644 index 452bd9c6..00000000 --- a/frontend/src/pages/start/StartRouter.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React, { FunctionComponent } from "react"; -import { Redirect, Route, Switch } from "react-router-dom"; -import { ProjectListPage } from "./ProjectListPage/ProjectListPage"; -import { Configuration } from "./configuration/Configuration"; -import { RouteWithBackButton } from "components/layout/Layout"; -import { routes } from "../../constants/routes"; - -export const StartRouter: FunctionComponent = () => { - return ( - - - - - - - ); -}; diff --git a/frontend/src/pages/transactions/TransactionsRouter.tsx b/frontend/src/pages/transactions/TransactionsRouter.tsx deleted file mode 100644 index 8d0501ac..00000000 --- a/frontend/src/pages/transactions/TransactionsRouter.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React, { FunctionComponent } from "react"; -import { Redirect, Route, Switch } from "react-router-dom"; -import { TransactionDetails } from "./details/TransactionDetails"; -import { useGetPollingTransactions } from "../../hooks/use-api"; -import { TransactionsTable } from "./main/TransactionsTable"; - -export const TransactionsRouter = () => { - return ( - - - - - - ); -}; - -const TransactionsTablePage: FunctionComponent = () => { - const { data } = useGetPollingTransactions(); - - return ; -}; diff --git a/frontend/src/targets/electron/index.tsx b/frontend/src/targets/electron/index.tsx index b0aee938..9ee06cd9 100644 --- a/frontend/src/targets/electron/index.tsx +++ b/frontend/src/targets/electron/index.tsx @@ -73,7 +73,7 @@ ReactDOM.render( document.getElementById("root") ); -// If you want to start measuring performance in your app, pass a function +// If you want to projects measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals(); diff --git a/frontend/src/targets/electron/preload.ts b/frontend/src/targets/electron/preload.ts index d8399da8..5b2f5772 100644 --- a/frontend/src/targets/electron/preload.ts +++ b/frontend/src/targets/electron/preload.ts @@ -4,7 +4,7 @@ contextBridge.exposeInMainWorld("platformAdapter", { showDirectoryPicker: () => ipcRenderer.invoke("showDirectoryPicker"), handleExit: (callback: () => void) => ipcRenderer.on("exit", callback), handleUpdateDownloadStart: (callback: () => void) => - ipcRenderer.on("update-download-start", callback), + ipcRenderer.on("update-download-projects", callback), handleUpdateDownloadEnd: (callback: () => void) => ipcRenderer.on("update-download-end", callback), handleUpdateDownloadProgress: (callback: (percentage: number) => void) => diff --git a/frontend/src/targets/electron/services/app-update.service.ts b/frontend/src/targets/electron/services/app-update.service.ts index d04e14bf..3b731a8c 100644 --- a/frontend/src/targets/electron/services/app-update.service.ts +++ b/frontend/src/targets/electron/services/app-update.service.ts @@ -40,7 +40,7 @@ export class AppUpdateService { }) .then((buttonIndex) => { if (buttonIndex.response === 0) { - webContents?.send("update-download-start"); + webContents?.send("update-download-projects"); autoUpdater.downloadUpdate(); } }); diff --git a/frontend/src/targets/web/index.tsx b/frontend/src/targets/web/index.tsx index 8ed161fe..2d2f57e5 100644 --- a/frontend/src/targets/web/index.tsx +++ b/frontend/src/targets/web/index.tsx @@ -13,7 +13,7 @@ async function renderApp() { ); } -// If you want to start measuring performance in your app, pass a function +// If you want to projects measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals(); diff --git a/yarn.lock b/yarn.lock index 7aa3c70c..e22a89d5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1917,7 +1917,7 @@ core-js-pure "^3.20.2" regenerator-runtime "^0.13.4" -"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.6", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2": +"@babel/runtime@^7.10.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.6", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2": version "7.18.9" resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.9.tgz" integrity sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw== @@ -4666,6 +4666,11 @@ resolved "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz" integrity sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw== +"@remix-run/router@1.8.0": + version "1.8.0" + resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.8.0.tgz#e848d2f669f601544df15ce2a313955e4bf0bafc" + integrity sha512-mrfKqIHnSZRyIzBcanNJmVQELTnX+qagEDlcKO90RgRBVOZGSGvZKeDihTRfWcqoDn5N/NkUcwWTccnpN18Tfg== + "@rollup/plugin-babel@^5.2.0": version "5.3.1" resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz#04bc0608f4aa4b2e4b1aebf284344d0f68fda283" @@ -5242,11 +5247,6 @@ dependencies: "@types/node" "*" -"@types/history@^4.7.11": - version "4.7.11" - resolved "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz" - integrity sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA== - "@types/html-minifier-terser@^6.0.0": version "6.1.0" resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#4fc33a00c1d0c16987b1a20cf92d20614c55ac35" @@ -5444,23 +5444,6 @@ dependencies: "@types/react" "^17" -"@types/react-router-dom@^5.3.0": - version "5.3.3" - resolved "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz" - integrity sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw== - dependencies: - "@types/history" "^4.7.11" - "@types/react" "*" - "@types/react-router" "*" - -"@types/react-router@*": - version "5.1.18" - resolved "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.18.tgz" - integrity sha512-YYknwy0D0iOwKQgz9v8nOzt2J6l4gouBmDnWqUUznltOTaon+r8US8ky8HvN0tXvc38U9m6z/t2RsVsnd1zM0g== - dependencies: - "@types/history" "^4.7.11" - "@types/react" "*" - "@types/react-timeago@^4.1.3": version "4.1.3" resolved "https://registry.npmjs.org/@types/react-timeago/-/react-timeago-4.1.3.tgz" @@ -10947,18 +10930,6 @@ highlight.js@^10.7.1: resolved "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz" integrity sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A== -history@^4.9.0: - version "4.10.1" - resolved "https://registry.npmjs.org/history/-/history-4.10.1.tgz" - integrity sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew== - dependencies: - "@babel/runtime" "^7.1.2" - loose-envify "^1.2.0" - resolve-pathname "^3.0.0" - tiny-invariant "^1.0.2" - tiny-warning "^1.0.0" - value-equal "^1.0.1" - hmac-drbg@^1.0.1: version "1.0.1" resolved "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz" @@ -10968,7 +10939,7 @@ hmac-drbg@^1.0.1: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" -hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0: +hoist-non-react-statics@^3.3.0: version "3.3.2" resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== @@ -11826,11 +11797,6 @@ is-yarn-global@^0.3.0: resolved "https://registry.npmjs.org/is-yarn-global/-/is-yarn-global-0.3.0.tgz" integrity sha512-VjSeb/lHmkoyd8ryPVIKvOCn4D1koMqY+vqyjjUfc3xyKtP4dYOxM44sZrnqQSzSds3xyOrUTLTC9LVCVgLngw== -isarray@0.0.1: - version "0.0.1" - resolved "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz" - integrity sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ== - isarray@^2.0.5: version "2.0.5" resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723" @@ -13126,7 +13092,7 @@ long@^5.0.0: resolved "https://registry.npmjs.org/long/-/long-5.2.0.tgz" integrity sha512-9RTUNjK60eJbx3uz+TEGF7fUr29ZDxR5QzXcyDpeSfeH28S9ycINflOgOlppit5U+4kNTe83KQnMEerw7GmE8w== -loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0: +loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0: version "1.4.0" resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz" integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== @@ -13441,14 +13407,6 @@ min-indent@^1.0.0: resolved "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz" integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg== -mini-create-react-context@^0.4.0: - version "0.4.1" - resolved "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz" - integrity sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ== - dependencies: - "@babel/runtime" "^7.12.1" - tiny-warning "^1.0.3" - mini-css-extract-plugin@^2.4.5: version "2.7.6" resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.7.6.tgz#282a3d38863fddcd2e0c220aaed5b90bc156564d" @@ -14713,13 +14671,6 @@ path-to-regexp@3.2.0: resolved "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-3.2.0.tgz" integrity sha512-jczvQbCUS7XmS7o+y1aEO9OBVFeZBQ1MDSEqmO7xSoPgOPoowY/SxLpZ6Vh97/8qHZOteiCKb7gkG9gA2ZUxJA== -path-to-regexp@^1.7.0: - version "1.8.0" - resolved "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz" - integrity sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA== - dependencies: - isarray "0.0.1" - path-type@^3.0.0: version "3.0.0" resolved "https://registry.npmjs.org/path-type/-/path-type-3.0.0.tgz" @@ -15558,7 +15509,7 @@ promzard@^0.3.0: dependencies: read "1" -prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1: +prop-types@^15.7.2, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -15845,7 +15796,7 @@ react-hot-toast@^2.1.1: dependencies: goober "^2.1.10" -react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0: +react-is@^16.13.1, react-is@^16.7.0: version "16.13.1" resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== @@ -15916,34 +15867,20 @@ react-refresh@^0.9.0: resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.9.0.tgz" integrity sha512-Gvzk7OZpiqKSkxsQvO/mbTN1poglhmAV7gR/DdIrRrSMXraRQQlfikRJOr3Nb9GTMPC5kof948Zy6jJZIFtDvQ== -react-router-dom@^5.3.0: - version "5.3.3" - resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.3.tgz" - integrity sha512-Ov0tGPMBgqmbu5CDmN++tv2HQ9HlWDuWIIqn4b88gjlAN5IHI+4ZUZRcpz9Hl0azFIwihbLDYw1OiHGRo7ZIng== - dependencies: - "@babel/runtime" "^7.12.13" - history "^4.9.0" - loose-envify "^1.3.1" - prop-types "^15.6.2" - react-router "5.3.3" - tiny-invariant "^1.0.2" - tiny-warning "^1.0.0" - -react-router@5.3.3: - version "5.3.3" - resolved "https://registry.npmjs.org/react-router/-/react-router-5.3.3.tgz" - integrity sha512-mzQGUvS3bM84TnbtMYR8ZjKnuPJ71IjSzR+DE6UkUqvN4czWIqEs17yLL8xkAycv4ev0AiN+IGrWu88vJs/p2w== - dependencies: - "@babel/runtime" "^7.12.13" - history "^4.9.0" - hoist-non-react-statics "^3.1.0" - loose-envify "^1.3.1" - mini-create-react-context "^0.4.0" - path-to-regexp "^1.7.0" - prop-types "^15.6.2" - react-is "^16.6.0" - tiny-invariant "^1.0.2" - tiny-warning "^1.0.0" +react-router-dom@6.15.0: + version "6.15.0" + resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.15.0.tgz#6da7db61e56797266fbbef0d5e324d6ac443ee40" + integrity sha512-aR42t0fs7brintwBGAv2+mGlCtgtFQeOzK0BM1/OiqEzRejOZtpMZepvgkscpMUnKb8YO84G7s3LsHnnDNonbQ== + dependencies: + "@remix-run/router" "1.8.0" + react-router "6.15.0" + +react-router@6.15.0: + version "6.15.0" + resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.15.0.tgz#bf2cb5a4a7ed57f074d4ea88db0d95033f39cac8" + integrity sha512-NIytlzvzLwJkCQj2HLefmeakxxWHWAP+02EGqWEZy+DgfHHKQMUoBBjUQLOtFInBMhWtb3hiUy6MfFgwLjXhqg== + dependencies: + "@remix-run/router" "1.8.0" react-scripts@5.0.0: version "5.0.0" @@ -16442,11 +16379,6 @@ resolve-from@^5.0.0: resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz" integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw== -resolve-pathname@^3.0.0: - version "3.0.0" - resolved "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz" - integrity sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng== - resolve-url-loader@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/resolve-url-loader/-/resolve-url-loader-4.0.0.tgz#d50d4ddc746bb10468443167acf800dcd6c3ad57" @@ -17961,12 +17893,7 @@ timsort@^0.3.0: resolved "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz" integrity sha512-qsdtZH+vMoCARQtyod4imc2nIJwg9Cc7lPRrw9CzF8ZKR0khdr8+2nX80PBhET3tcyTtJDxAffGh2rXH4tyU8A== -tiny-invariant@^1.0.2: - version "1.2.0" - resolved "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.2.0.tgz" - integrity sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg== - -tiny-warning@^1.0.0, tiny-warning@^1.0.2, tiny-warning@^1.0.3: +tiny-warning@^1.0.2: version "1.0.3" resolved "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz" integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA== @@ -18686,11 +18613,6 @@ validator@^13.7.0: resolved "https://registry.npmjs.org/validator/-/validator-13.7.0.tgz" integrity sha512-nYXQLCBkpJ8X6ltALua9dRrZDHVYxjJ1wgskNt1lH9fzGjs3tgojGSCBjmEPwkWS1y29+DrizMTW19Pr9uB2nw== -value-equal@^1.0.1: - version "1.0.1" - resolved "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz" - integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw== - vary@^1, vary@~1.1.2: version "1.1.2" resolved "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz" From 01459824e73601b307d6bd4b5579b81efe1e2ec3 Mon Sep 17 00:00:00 2001 From: Bart Date: Sun, 3 Sep 2023 13:50:17 +0200 Subject: [PATCH 03/11] restructure project routes --- frontend/src/App.tsx | 72 +++++++++---------- frontend/src/components/layout/Layout.tsx | 3 +- .../side-navigation/SideNavigation.tsx | 27 +++---- frontend/src/constants/routes.ts | 15 ---- frontend/src/contexts/project.context.tsx | 5 +- .../ProjectListPage/ProjectListPage.tsx | 18 ++--- .../projects/settings/ProjectSettings.tsx | 7 +- 7 files changed, 51 insertions(+), 96 deletions(-) delete mode 100644 frontend/src/constants/routes.ts diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index afdf010a..fc462000 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,6 +1,7 @@ import React, { FunctionComponent, ReactElement, useEffect } from "react"; import { BrowserRouter, + Outlet, Route, Routes, useLocation, @@ -113,47 +114,38 @@ export const FlowserRoutes = (): ReactElement => { } /> + + + + } + > + } /> + + } /> + } /> + + + } /> + } /> + + + } /> + } + /> + + + } /> + } /> + + } /> + } /> + - - } /> - } /> - - - } /> - } /> - - - } /> - } /> - - - } /> - } /> - - - - - } - /> - - - - } - /> - - - - } - /> = (props) => { const navigate = useNavigate(); @@ -25,7 +24,7 @@ export const BackButtonLayout: FC<{ children: ReactNode }> = (props) => { export const ProjectLayout: FunctionComponent = ({ children }) => { const location = useLocation(); - const showMargin = !location.pathname.startsWith(routes.interactions); + const showMargin = !location.pathname.endsWith("interactions"); return (
diff --git a/frontend/src/components/side-navigation/SideNavigation.tsx b/frontend/src/components/side-navigation/SideNavigation.tsx index 54a40ca8..48a4f8f2 100644 --- a/frontend/src/components/side-navigation/SideNavigation.tsx +++ b/frontend/src/components/side-navigation/SideNavigation.tsx @@ -1,11 +1,9 @@ import React, { ReactElement } from "react"; import classes from "./SideNavigation.module.scss"; -import { routes } from "../../constants/routes"; import { NavLink, useLocation } from "react-router-dom"; import { FlowserIcon } from "components/icons/Icons"; import { SizedBox } from "../sized-box/SizedBox"; import classNames from "classnames"; -import { useGetCurrentProject } from "../../hooks/use-api"; import { useProjectActions } from "../../contexts/project.context"; type SideNavigationProps = { @@ -14,29 +12,22 @@ type SideNavigationProps = { export function SideNavigation(props: SideNavigationProps): ReactElement { const { switchProject } = useProjectActions(); - const { data: currentProjectData } = useGetCurrentProject(); - const { project: currentProject } = currentProjectData ?? {}; return (
- - - - - - - {currentProject && ( - - )} + + + + + + +
@@ -61,7 +52,7 @@ function ProjectLink(props: { diff --git a/frontend/src/constants/routes.ts b/frontend/src/constants/routes.ts deleted file mode 100644 index 280342ff..00000000 --- a/frontend/src/constants/routes.ts +++ /dev/null @@ -1,15 +0,0 @@ -export const routes = { - start: "/projects", - configure: "/projects/configure", - configureExisting: "/projects/configure/:id", - configureCurrent: "/configure/:id", - accounts: "/accounts", - blocks: "/blocks", - transactions: "/transactions", - contracts: "/contracts", - events: "/events", - interactions: "/interactions", - logs: "/logs", - firstRouteAfterStart: "/accounts", - project: "/project", -}; diff --git a/frontend/src/contexts/project.context.tsx b/frontend/src/contexts/project.context.tsx index 3fa5d031..761dfc98 100644 --- a/frontend/src/contexts/project.context.tsx +++ b/frontend/src/contexts/project.context.tsx @@ -7,7 +7,6 @@ import React, { useMemo, useEffect, } from "react"; -import { routes } from "../constants/routes"; import toast from "react-hot-toast"; import { Block, EmulatorSnapshot, Project } from "@flowser/shared"; import { useConfirmDialog } from "./confirm-dialog.context"; @@ -96,7 +95,7 @@ export function ProjectProvider({ error: `Failed to delete project "${project.name}"`, success: `Project "${project.name}" deleted!`, }); - navigate(routes.start, { + navigate("/projects", { replace: true, }); } catch (e) { @@ -128,7 +127,7 @@ export function ProjectProvider({ // Clear the entire cache, // so that previous data isn't there when using another project queryClient.clear(); - navigate(routes.start, { + navigate("/projects", { replace: true, }); }; diff --git a/frontend/src/modules/projects/ProjectListPage/ProjectListPage.tsx b/frontend/src/modules/projects/ProjectListPage/ProjectListPage.tsx index 601d0c7c..dfa9b049 100644 --- a/frontend/src/modules/projects/ProjectListPage/ProjectListPage.tsx +++ b/frontend/src/modules/projects/ProjectListPage/ProjectListPage.tsx @@ -1,11 +1,5 @@ -import React, { - FunctionComponent, - ReactElement, - useCallback, - useState, -} from "react"; +import React, { FunctionComponent, ReactElement, useState } from "react"; import { Link, useNavigate, useLocation } from "react-router-dom"; -import { routes } from "../../../constants/routes"; import IconButton from "../../../components/buttons/icon-button/IconButton"; import longLogo from "../../../assets/images/long_logo.png"; import trash from "../../../assets/icons/trash.svg"; @@ -55,10 +49,6 @@ export const ProjectListPage: FunctionComponent = () => { const fallbackTab = tabs[0]; const activeTab = providedTab ?? defaultTab ?? fallbackTab; - const onConfigure = useCallback(() => { - navigate(routes.configure); - }, []); - return (