#83 Improve components structure by introducing grouping

apps/web/src/app/applications/[address]/error.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import type { FC } from "react";
-import PageError from "../../../components/pageError";
+import PageError from "../../../components/layout/pageError";
 
 interface PageErrorProps {
     reset: () => void;

apps/web/src/app/applications/[address]/loading.tsx

@@ -1,4 +1,4 @@
-import PageLoader from "../../../components/pageLoader";
+import PageLoader from "../../../components/layout/pageLoader";
 
 export default function Loading() {
     return <PageLoader />;

apps/web/src/app/applications/[address]/page.tsx

@@ -3,8 +3,8 @@ import { Metadata } from "next";
 import { FC } from "react";
 import { TbInbox } from "react-icons/tb";
 import Address from "../../../components/address";
+import Inputs from "../../../components/inputs/inputs";
 import Breadcrumbs from "../../../components/breadcrumbs";
-import Inputs from "../../../components/inputs";
 
 export type ApplicationPageProps = {
     params: { address: string };

apps/web/src/app/applications/error.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import type { FC } from "react";
-import PageError from "../../components/pageError";
+import PageError from "../../components/layout/pageError";
 
 interface PageErrorProps {
     reset: () => void;

apps/web/src/app/applications/loading.tsx

@@ -1,4 +1,4 @@
-import PageLoader from "../../components/pageLoader";
+import PageLoader from "../../components/layout/pageLoader";
 
 export default function Loading() {
     return <PageLoader />;

apps/web/src/app/applications/page.tsx

@@ -1,7 +1,7 @@
 import { Group, Stack, Title } from "@mantine/core";
 import { Metadata } from "next";
 import { TbApps } from "react-icons/tb";
-import Applications from "../../components/applications";
+import Applications from "../../components/applications/applications";
 import Breadcrumbs from "../../components/breadcrumbs";
 
 export const metadata: Metadata = {

apps/web/src/app/error.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import type { FC } from "react";
-import PageError from "../components/pageError";
+import PageError from "../components/layout/pageError";
 
 interface PageErrorProps {
     reset: () => void;

apps/web/src/app/inputs/error.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import type { FC } from "react";
-import PageError from "../../components/pageError";
+import PageError from "../../components/layout/pageError";
 
 interface PageErrorProps {
     reset: () => void;

apps/web/src/app/inputs/loading.tsx

@@ -1,4 +1,4 @@
-import PageLoader from "../../components/pageLoader";
+import PageLoader from "../../components/layout/pageLoader";
 
 export default function Loading() {
     return <PageLoader />;

apps/web/src/app/inputs/page.tsx

@@ -1,7 +1,7 @@
 import { Group, Stack, Title } from "@mantine/core";
 import { TbInbox } from "react-icons/tb";
 import { Metadata } from "next";
-import Inputs from "../../components/inputs";
+import Inputs from "../../components/inputs/inputs";
 import Breadcrumbs from "../../components/breadcrumbs";
 
 export const metadata: Metadata = {

apps/web/src/app/layout.tsx

@@ -4,7 +4,7 @@ import type { FC, ReactNode } from "react";
 import { Metadata } from "next";
 import { ColorSchemeScript } from "@mantine/core";
 import { Providers } from "../providers/providers";
-import Shell from "../components/shell";
+import Shell from "../components/layout/shell";
 
 export const metadata: Metadata = {
     title: {

apps/web/src/app/loading.tsx

@@ -1,4 +1,4 @@
-import PageLoader from "../components/pageLoader";
+import PageLoader from "../components/layout/pageLoader";
 
 export default function Loading() {
     return <PageLoader />;

apps/web/src/components/applicationRow.tsx → apps/web/src/components/applications/applicationRow.tsx

@@ -1,10 +1,10 @@
 import React, { FC } from "react";
 import { ActionIcon, Table, Tooltip } from "@mantine/core";
-import Address from "./address";
+import Address from "../address";
 import Link from "next/link";
 import { TbInbox, TbPlugConnected, TbPlugConnectedX } from "react-icons/tb";
-import { Application } from "../graphql";
-import { useConnectionConfig } from "../providers/connectionConfig/hooks";
+import { Application } from "../../graphql";
+import { useConnectionConfig } from "../../providers/connectionConfig/hooks";
 
 export interface ApplicationRowProps {
     application: Omit<Application, "inputs">;

apps/web/src/components/applications.tsx → apps/web/src/components/applications/applications.tsx

@@ -1,24 +1,18 @@
 "use client";
 
-import {
-    Group,
-    Loader,
-    Pagination,
-    Select,
-    Stack,
-    Table,
-    Text,
-} from "@mantine/core";
+import { Group, Pagination, Select, Stack, Text } from "@mantine/core";
 import { useScrollIntoView } from "@mantine/hooks";
 import { pathOr } from "ramda";
 import { FC, useEffect, useState } from "react";
 import {
-    Application,
     ApplicationOrderByInput,
     useApplicationsConnectionQuery,
-} from "../graphql";
-import { limitBounds, usePaginationParams } from "../hooks/usePaginationParams";
-import ApplicationRow from "../components/applicationRow";
+} from "../../graphql";
+import {
+    limitBounds,
+    usePaginationParams,
+} from "../../hooks/usePaginationParams";
+import ApplicationsTable from "./applicationsTable";
 
 const Applications: FC = () => {
     const [{ limit, page }, updateParams] = usePaginationParams();
@@ -31,7 +25,8 @@ const Applications: FC = () => {
     const [activePage, setActivePage] = useState(
         page > totalPages ? totalPages : page,
     );
-
+    const applications =
+        query.data?.applicationsConnection.edges.map((edge) => edge.node) ?? [];
     const { scrollIntoView } = useScrollIntoView<HTMLDivElement>({
         duration: 700,
         offset: 150,
@@ -60,41 +55,12 @@ const Applications: FC = () => {
                     updateParams(pageN, limit);
                 }}
             />
-            <Table>
-                <Table.Thead>
-                    <Table.Tr>
-                        <Table.Th>Id</Table.Th>
-                        <Table.Th>Owner</Table.Th>
-                        <Table.Th>URL</Table.Th>
-                    </Table.Tr>
-                </Table.Thead>
-                <Table.Tbody>
-                    {query.fetching && (
-                        <Table.Tr>
-                            <Table.Td align="center" colSpan={3}>
-                                <Loader />
-                            </Table.Td>
-                        </Table.Tr>
-                    )}
-                    {query.data?.applicationsConnection.totalCount === 0 && (
-                        <Table.Tr>
-                            <Table.Td colSpan={3} align="center">
-                                No applications
-                            </Table.Td>
-                        </Table.Tr>
-                    )}
-                    {query.data?.applicationsConnection.edges.map(
-                        ({ node }) => (
-                            <ApplicationRow
-                                key={node.id}
-                                application={
-                                    node as Omit<Application, "inputs">
-                                }
-                            />
-                        ),
-                    )}
-                </Table.Tbody>
-            </Table>
+
+            <ApplicationsTable
+                applications={applications}
+                fetching={query.fetching}
+                totalCount={query.data?.applicationsConnection.totalCount ?? 0}
+            />
 
             <Group justify="space-between" align="center">
                 <Group>

apps/web/src/components/applications/applicationsTable.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { Loader, Table } from "@mantine/core";
+import { FC } from "react";
+import ApplicationRow from "./applicationRow";
+import type { ApplicationItemFragment } from "../../graphql";
+import { Application } from "../../graphql";
+
+export interface ApplicationsTableProps {
+    applications: ApplicationItemFragment[];
+    fetching: boolean;
+    totalCount: number;
+}
+
+const ApplicationsTable: FC<ApplicationsTableProps> = (props) => {
+    const { applications, fetching, totalCount } = props;
+
+    return (
+        <Table>
+            <Table.Thead>
+                <Table.Tr>
+                    <Table.Th>Id</Table.Th>
+                    <Table.Th>Owner</Table.Th>
+                    <Table.Th>URL</Table.Th>
+                </Table.Tr>
+            </Table.Thead>
+            <Table.Tbody>
+                {fetching ? (
+                    <Table.Tr>
+                        <Table.Td align="center" colSpan={3}>
+                            <Loader />
+                        </Table.Td>
+                    </Table.Tr>
+                ) : (
+                    totalCount === 0 && (
+                        <Table.Tr>
+                            <Table.Td colSpan={3} align="center">
+                                No applications
+                            </Table.Td>
+                        </Table.Tr>
+                    )
+                )}
+                {applications.map((application) => (
+                    <ApplicationRow
+                        key={application.id}
+                        application={application as Omit<Application, "inputs">}
+                    />
+                ))}
+            </Table.Tbody>
+        </Table>
+    );
+};
+
+export default ApplicationsTable;

apps/web/src/components/connectionForm.tsx → apps/web/src/components/connection/connectionForm.tsx

@@ -27,13 +27,13 @@ import {
     ApplicationsDocument,
     ApplicationsQuery,
     ApplicationsQueryVariables,
-} from "../graphql";
+} from "../../graphql";
 import {
     CheckStatusDocument,
     CheckStatusQuery,
     CheckStatusQueryVariables,
-} from "../graphql/rollups/operations";
-import { useConnectionConfig } from "../providers/connectionConfig/hooks";
+} from "../../graphql/rollups/operations";
+import { useConnectionConfig } from "../../providers/connectionConfig/hooks";
 
 interface AppConnectionFormProps {
     application?: Address;

apps/web/src/components/connectionInfo.tsx → apps/web/src/components/connection/connectionInfo.tsx

@@ -9,9 +9,9 @@ import {
 } from "@mantine/core";
 import { FC } from "react";
 import { TbNetwork, TbTrash } from "react-icons/tb";
-import { useConnectionConfig } from "../providers/connectionConfig/hooks";
-import { Connection } from "../providers/connectionConfig/types";
-import Address from "./address";
+import { useConnectionConfig } from "../../providers/connectionConfig/hooks";
+import { Connection } from "../../providers/connectionConfig/types";
+import Address from "../address";
 
 interface ConnectionInfoProps {
     connection: Connection;

apps/web/src/components/connectionView.tsx → apps/web/src/components/connection/connectionView.tsx

@@ -11,7 +11,7 @@ import {
 } from "@mantine/core";
 import { useDisclosure, useViewportSize } from "@mantine/hooks";
 import { TbChevronDown, TbChevronUp, TbPlus } from "react-icons/tb";
-import { useConnectionConfig } from "../providers/connectionConfig/hooks";
+import { useConnectionConfig } from "../../providers/connectionConfig/hooks";
 import ConnectionInfo from "./connectionInfo";
 
 const ConnectionView = () => {

apps/web/src/components/inputCard.tsx → apps/web/src/components/inputs/inputCard.tsx

@@ -2,8 +2,7 @@ import { Group, Paper, Stack, Text } from "@mantine/core";
 import { FC } from "react";
 import prettyMilliseconds from "pretty-ms";
 import Jazzicon, { jsNumberForAddress } from "react-jazzicon";
-
-import { InputItemFragment } from "../graphql";
+import { InputItemFragment } from "../../graphql";
 
 export type InputCardProps = {
     input: InputItemFragment;

apps/web/src/components/inputDetailsView.tsx → apps/web/src/components/inputs/inputDetailsView.tsx

@@ -5,13 +5,13 @@ import { omit, pathOr } from "ramda";
 import { FC, useEffect, useState } from "react";
 import { useQuery } from "urql";
 import { Address } from "viem";
-import { InputItemFragment } from "../graphql";
+import { InputItemFragment } from "../../graphql";
 import {
     InputDetailsDocument,
     InputDetailsQuery,
     InputDetailsQueryVariables,
-} from "../graphql/rollups/operations";
-import { useConnectionConfig } from "../providers/connectionConfig/hooks";
+} from "../../graphql/rollups/operations";
+import { useConnectionConfig } from "../../providers/connectionConfig/hooks";
 
 interface ApplicationInputDataProps {
     input: InputItemFragment;

apps/web/src/components/inputRow.tsx → apps/web/src/components/inputs/inputRow.tsx

@@ -15,8 +15,8 @@ import prettyMilliseconds from "pretty-ms";
 import { FC } from "react";
 import { TbArrowRight, TbFileText, TbX } from "react-icons/tb";
 import { Address as AddressType, formatUnits, getAddress } from "viem";
-import { InputItemFragment } from "../graphql";
-import Address from "./address";
+import { InputItemFragment } from "../../graphql";
+import Address from "../address";
 import InputDetailsView from "./inputDetailsView";
 
 export type InputRowProps = {

apps/web/src/components/inputs.tsx → apps/web/src/components/inputs/inputs.tsx

@@ -4,9 +4,12 @@ import { Group, Pagination, Select, Stack, Text } from "@mantine/core";
 import { useScrollIntoView } from "@mantine/hooks";
 import { pathOr } from "ramda";
 import { FC, useEffect, useState } from "react";
-import { InputOrderByInput, useInputsQuery } from "../graphql";
-import { limitBounds, usePaginationParams } from "../hooks/usePaginationParams";
-import InputsTable from "../components/inputsTable";
+import { InputOrderByInput, useInputsQuery } from "../../graphql";
+import {
+    limitBounds,
+    usePaginationParams,
+} from "../../hooks/usePaginationParams";
+import InputsTable from "./inputsTable";
 
 export type InputsProps = {
     orderBy?: InputOrderByInput;

apps/web/src/components/inputsTable.tsx → apps/web/src/components/inputs/inputsTable.tsx

@@ -8,10 +8,10 @@ import {
     useMantineTheme,
 } from "@mantine/core";
 import { FC, useCallback, useRef, useState } from "react";
-import InputRow from "../components/inputRow";
-import type { InputItemFragment } from "../graphql";
-import { useElementVisibility } from "../hooks/useElementVisibility";
-import { TableResponsiveWrapper } from "./tableResponsiveWrapper";
+import InputRow from "./inputRow";
+import type { InputItemFragment } from "../../graphql";
+import { useElementVisibility } from "../../hooks/useElementVisibility";
+import { TableResponsiveWrapper } from "../tableResponsiveWrapper";
 
 export interface InputsTableProps {
     inputs: InputItemFragment[];

apps/web/src/components/footer.tsx → apps/web/src/components/layout/footer.tsx

@@ -16,7 +16,7 @@ import {
     TbBug,
     TbMessage2Code,
 } from "react-icons/tb";
-import CartesiLogo from "./cartesiLogo";
+import CartesiLogo from "../cartesiLogo";
 
 interface FooterLinkProps {
     children: ReactNode;

apps/web/src/components/shell.tsx → apps/web/src/components/layout/shell.tsx

@@ -25,10 +25,10 @@ import {
     TbSun,
 } from "react-icons/tb";
 import { useAccount } from "wagmi";
-import CartesiLogo from "../components/cartesiLogo";
-import ConnectionView from "../components/connectionView";
-import Footer from "../components/footer";
-import SendTransaction from "../components/sendTransaction";
+import CartesiLogo from "../../components/cartesiLogo";
+import ConnectionView from "../../components/connection/connectionView";
+import Footer from "../../components/layout/footer";
+import SendTransaction from "../../components/sendTransaction";
 
 const Shell: FC<{ children: ReactNode }> = ({ children }) => {
     const [opened, { toggle }] = useDisclosure();
@@ -45,7 +45,6 @@ const Shell: FC<{ children: ReactNode }> = ({ children }) => {
     const isSmallDevice = useMediaQuery(`(max-width:${theme.breakpoints.sm})`);
     const { isConnected } = useAccount();
     const { colorScheme, toggleColorScheme } = useMantineColorScheme();
-
     const themeDefaultProps = theme.components?.AppShell?.defaultProps ?? {};
 
     return (