Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Revamp navigation breadcrumbs #186

Merged
merged 11 commits into from
Sep 3, 2023
Next Next commit
remove direct usages of useNavigation hook, minor restructuring
bartolomej committed Sep 2, 2023
commit 25f675fe32325bf0a0556b0db5bca6cae4cfce88
30 changes: 18 additions & 12 deletions frontend/src/App.tsx
Original file line number Diff line number Diff line change
@@ -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 => {
<ConsentAnalytics />
<ProjectRequirements />
<Switch>
<Route path={routes.start} component={Start} />
<RouteWithProjectLayout path={routes.accounts} component={Accounts} />
<RouteWithProjectLayout path={routes.blocks} component={Blocks} />
<Route path={routes.start} component={StartRouter} />
<RouteWithProjectLayout
path={routes.accounts}
component={AccountsRouter}
/>
<RouteWithProjectLayout path={routes.blocks} component={BlocksRouter} />
<RouteWithProjectLayout
path={routes.transactions}
component={Transactions}
component={TransactionsRouter}
/>
<RouteWithProjectLayout
path={routes.contracts}
component={ContractsRouter}
/>
<RouteWithProjectLayout path={routes.contracts} component={Contracts} />
<RouteWithProjectLayout path={routes.events} component={Events} />
<RouteWithProjectLayout path={routes.events} component={EventsRouter} />
<RouteWithProjectLayout
path={routes.interactions}
component={InteractionsPage}
2 changes: 1 addition & 1 deletion frontend/src/config/common.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// Don't show intro animation,
// because that gets shown every time you visit "Events" tab,
// because that gets shown every time you visit "EventsModule" tab,
// (table is rebuild everytime you visit tab)
// which is kinda disturbing
// TODO: Rework unseen/new logic
16 changes: 0 additions & 16 deletions frontend/src/pages/accounts/Accounts.tsx

This file was deleted.

14 changes: 14 additions & 0 deletions frontend/src/pages/accounts/AccountsRouter.tsx
Original file line number Diff line number Diff line change
@@ -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 (
<Switch>
<Route exact path={`/accounts`} component={AccountsTable} />
<Route path={`/accounts/details/:accountId`} component={AccountDetails} />
<Redirect from="*" to={`/accounts`} />
</Switch>
);
};
Original file line number Diff line number Diff line change
@@ -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<DecoratedPollingEntity<Account>>();

// ACCOUNTS TABLE
const columns = [
columnHelper.accessor("address", {
header: () => <Label variant="medium">ADDRESS</Label>,
@@ -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 (
<Table<DecoratedPollingEntity<Account>>
isInitialLoading={firstFetch}
@@ -64,5 +57,3 @@ const Main: FunctionComponent = () => {
/>
);
};

export default Main;
21 changes: 3 additions & 18 deletions frontend/src/pages/accounts/details/Details.tsx
Original file line number Diff line number Diff line change
@@ -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,34 +19,22 @@ 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";

export type AccountDetailsRouteParams = {
accountId: string;
};

const Details: FunctionComponent = () => {
export const AccountDetails: FunctionComponent = () => {
const { accountId } = useParams<AccountDetailsRouteParams>();
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 <FullScreenLoading />;
}
@@ -118,5 +105,3 @@ const Details: FunctionComponent = () => {
</div>
);
};

export default Details;
16 changes: 0 additions & 16 deletions frontend/src/pages/blocks/Blocks.tsx

This file was deleted.

14 changes: 14 additions & 0 deletions frontend/src/pages/blocks/BlocksRouter.tsx
Original file line number Diff line number Diff line change
@@ -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 (
<Switch>
<Route exact path={`/blocks`} component={BlocksTable} />
<Route path={`/blocks/details/:blockId`} component={BlockDetails} />
<Redirect from="*" to={`/blocks`} />
</Switch>
);
};
Original file line number Diff line number Diff line change
@@ -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<DecoratedPollingEntity<Block>>();

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;
18 changes: 2 additions & 16 deletions frontend/src/pages/blocks/details/Details.tsx
Original file line number Diff line number Diff line change
@@ -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<RouteParams>();
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 <FullScreenLoading />;
}
@@ -87,5 +75,3 @@ const Details: FunctionComponent = () => {
</div>
);
};

export default Details;
16 changes: 0 additions & 16 deletions frontend/src/pages/contracts/Contracts.tsx

This file was deleted.

24 changes: 24 additions & 0 deletions frontend/src/pages/contracts/ContractsRouter.tsx
Original file line number Diff line number Diff line change
@@ -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 (
<Switch>
<Route exact path={`/contracts`} component={ContractsTablePage} />
<Route
path={`/contracts/details/:contractId`}
component={ContractDetails}
/>
<Redirect from="*" to={`/contracts`} />
</Switch>
);
};

function ContractsTablePage() {
const { data } = useGetPollingContracts();

return <ContractsTable contracts={data} />;
}
Original file line number Diff line number Diff line change
@@ -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<DecoratedPollingEntity<AccountContract>>();
Original file line number Diff line number Diff line change
@@ -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<RouteParams>();
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 <FullScreenLoading />;
}
@@ -71,5 +57,3 @@ const Details: FunctionComponent = () => {
</div>
);
};

export default Details;
Loading