Merge pull request #151 from sinamics/components_folder_structure

Refactored component folder structure for improved readability

src/__tests__/components/inputField.test.tsx

@@ -1,6 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-/* eslint-disable @typescript-eslint/no-unsafe-argument */
-/* eslint-disable @typescript-eslint/no-unsafe-call */
 import React from "react";
 import { render, fireEvent, screen } from "@testing-library/react";
 import InputField from "~/components/elements/inputField";

src/__tests__/components/loginForm.test.tsx

@@ -3,7 +3,7 @@ import { render, screen, fireEvent } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { signIn } from "next-auth/react";
 import { useRouter } from "next/router";
-import LoginForm from "~/components/modules/loginForm";
+import LoginForm from "~/components/auth/loginForm";
 
 jest.mock("next-auth/react", () => ({
 	signIn: jest.fn(),

src/__tests__/components/modal.test.tsx

@@ -1,8 +1,8 @@
 import { render, fireEvent, screen } from "@testing-library/react";
-import Modal from "~/components/elements/modal";
 import { useModalStore } from "~/utils/store";
 import enTranslation from "~/locales/en/common.json";
 import { NextIntlProvider } from "next-intl";
+import Modal from "~/components/shared/modal";
 
 jest.mock("../../utils/store", () => ({
 	useModalStore: jest.fn(),

src/__tests__/components/networkDns.test.tsx

@@ -1,11 +1,11 @@
 import "../__mocks__/networkById";
 import { render, screen, fireEvent, waitFor } from "@testing-library/react";
-import { NetworkDns } from "~/components/modules/networkDns";
 import { NextRouter, useRouter } from "next/router";
 import { api } from "~/utils/api";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { NextIntlProvider } from "next-intl";
 import enTranslation from "~/locales/en/common.json";
+import { NetworkDns } from "~/components/networkByIdPage/networkDns";
 
 // Mocking the next/router module
 jest.mock("next/router", () => ({

src/__tests__/components/networkIpAssignments.test.tsx

@@ -1,11 +1,11 @@
 import "../__mocks__/networkById";
 import { render, screen, fireEvent, waitFor } from "@testing-library/react";
-import { NetworkIpAssignment } from "~/components/modules/networkIpAssignments";
 import { NextRouter, useRouter } from "next/router";
 import { api } from "~/utils/api";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { NextIntlProvider } from "next-intl";
 import enTranslation from "~/locales/en/common.json";
+import { NetworkIpAssignment } from "~/components/networkByIdPage/networkIpAssignments";
 
 // Mocking the next/router module
 jest.mock("next/router", () => ({

src/__tests__/components/networkMulticast.test.tsx

@@ -1,11 +1,11 @@
 import "../__mocks__/networkById";
 import { render, screen, fireEvent, waitFor } from "@testing-library/react";
-import { NetworkMulticast } from "~/components/modules/networkMulticast";
 import { NextRouter, useRouter } from "next/router";
 import { api } from "~/utils/api";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { NextIntlProvider } from "next-intl";
 import enTranslation from "~/locales/en/common.json";
+import { NetworkMulticast } from "~/components/networkByIdPage/networkMulticast";
 
 // Mocking the next/router module
 jest.mock("next/router", () => ({

src/components/modules/accountTable.tsx → src/components/adminPage/users/table/accounts.tsx

@@ -13,12 +13,12 @@ import {
 import { api } from "~/utils/api";
 import { useModalStore } from "~/utils/store";
 import { useTranslations } from "next-intl";
-import { useSkipper } from "../elements/useSkipper";
-import { DebouncedInput } from "../elements/debouncedInput";
-import TableFooter from "./tableFooter";
+import { useSkipper } from "../../../../hooks/useSkipper";
+import { DebouncedInput } from "../../../elements/debouncedInput";
 import { User } from "@prisma/client";
-import UserOptionsModal from "../admin/users/userOptionsModal";
+import UserOptionsModal from "../userOptionsModal";
 import { getLocalStorageItem, setLocalStorageItem } from "~/utils/localstorage";
+import TableFooter from "~/components/shared/tableFooter";
 
 type ExtendedUser = {
 	action?: string;

src/components/layouts/layout.tsx

@@ -2,7 +2,7 @@ import { type ReactNode } from "react";
 import FourOhFour from "~/pages/404";
 import Header from "./header";
 import Sidebar from "./sidebar";
-import Footer from "../modules/footer";
+import Footer from "./footer";
 import { globalSiteTitle } from "~/utils/global";
 import Link from "next/link";
 import { useRouter } from "next/router";

src/components/modules/table/memberHeaderColumns.tsx → src/components/networkByIdPage/table/memberHeaderColumns.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { MemberOptionsModal } from "../memberOptionsModal";
+import { MemberOptionsModal } from "../../networkByIdPage/memberOptionsModal";
 import { api } from "~/utils/api";
 import { useModalStore } from "~/utils/store";
 import toast from "react-hot-toast";

src/components/modules/table/networkMembersTable.tsx → src/components/networkByIdPage/table/networkMembersTable.tsx

@@ -12,13 +12,13 @@ import {
 import { api } from "~/utils/api";
 import { useRouter } from "next/router";
 import { DebouncedInput } from "../../elements/debouncedInput";
-import { useSkipper } from "../../elements/useSkipper";
-import TableFooter from "../tableFooter";
+import { useSkipper } from "../../../hooks/useSkipper";
 import { convertRGBtoRGBA } from "~/utils/randomColor";
 import { useTranslations } from "next-intl";
 import { MemberHeaderColumns } from "./memberHeaderColumns";
 import MemberEditCell from "./memberEditCell";
 import { getLocalStorageItem, setLocalStorageItem } from "~/utils/localstorage";
+import TableFooter from "~/components/shared/tableFooter";
 // import { makeNetworkMemberData } from "~/utils/fakeData";
 
 declare module "@tanstack/react-table" {
@@ -38,7 +38,7 @@ const LOCAL_STORAGE_KEY = "membersTableSorting";
 export const NetworkMembersTable = ({ nwid, central = false }: IProp) => {
 	// Load initial state from localStorage or set to default
 	const initialSortingState = getLocalStorageItem(LOCAL_STORAGE_KEY, [
-		{ id: "nwid", desc: true },
+		{ id: "id", desc: true },
 	]);
 
 	// makeNetworkMemberData
@@ -72,7 +72,6 @@ export const NetworkMembersTable = ({ nwid, central = false }: IProp) => {
 	const [data, setData] = useState(networkById?.members ?? []);
 	const columnsHeader = MemberHeaderColumns({ nwid, central });
 	const defaultColumn = MemberEditCell({ nwid, central });
-
 	const [autoResetPageIndex, skipAutoResetPageIndex] = useSkipper();
 	const table = useReactTable({
 		data,

src/components/modules/ztCentral/centralNetworkTable.tsx → src/components/networkPage/centralNetworkTable.tsx

@@ -11,11 +11,11 @@ import {
 	createColumnHelper,
 	type SortingState,
 } from "@tanstack/react-table";
-import { useSkipper } from "../../elements/useSkipper";
-import TableFooter from "../tableFooter";
+import { useSkipper } from "../../hooks/useSkipper";
 import { useTranslations } from "next-intl";
 import { CentralMemberEntity } from "~/types/central/members";
 import { getLocalStorageItem, setLocalStorageItem } from "~/utils/localstorage";
+import TableFooter from "~/components/shared/tableFooter";
 
 // import { makeNetworkData } from "../../utils/fakeData";
 const TruncateText = ({ text }: { text: string }) => {

src/components/modules/networkTable.tsx → src/components/networkPage/networkTable.tsx

@@ -11,11 +11,11 @@ import {
 	createColumnHelper,
 	type SortingState,
 } from "@tanstack/react-table";
-import { useSkipper } from "../elements/useSkipper";
-import TableFooter from "./tableFooter";
+import { useSkipper } from "../../hooks/useSkipper";
 import { useTranslations } from "next-intl";
 import { type network_members } from "@prisma/client";
 import { getLocalStorageItem, setLocalStorageItem } from "~/utils/localstorage";
+import TableFooter from "../shared/tableFooter";
 
 const LOCAL_STORAGE_KEY = "networkTableSorting";
 

src/components/elements/tableFilter.tsx → src/components/shared/tableFilter.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { DebouncedInput } from "./debouncedInput";
+import { DebouncedInput } from "../elements/debouncedInput";
 import { type Column, type Table } from "@tanstack/react-table";
 import { type MemberEntity } from "~/types/local/member";
 

src/pages/_app.tsx

@@ -9,7 +9,7 @@ import { ThemeProvider } from "next-themes";
 import "~/styles/globals.css";
 import { Toaster } from "react-hot-toast";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-import Modal from "~/components/elements/modal";
+import Modal from "~/components/shared/modal";
 import { useEffect } from "react";
 import { NextIntlClientProvider } from "next-intl";
 import { useRouter } from "next/router";

src/pages/admin/controller/index.tsx

@@ -2,10 +2,10 @@ import { useTranslations } from "next-intl";
 import { useState, type ReactElement } from "react";
 import EditableField from "~/components/elements/inputField";
 import { LayoutAdminAuthenticated } from "~/components/layouts/layout";
-import PrivateRoot from "~/components/admin/controller/privateRoot";
-import DebugMirror from "~/components/modules/debugController";
-import { UnlinkedNetwork } from "~/components/modules/table/unlinkedNetworkTable";
+import PrivateRoot from "~/components/adminPage/controller/privateRoot";
 import { api } from "~/utils/api";
+import DebugMirror from "~/components/adminPage/controller/debugController";
+import { UnlinkedNetwork } from "~/components/adminPage/controller/unlinkedNetworkTable";
 
 const Controller = () => {
 	const [error, setError] = useState(false);

src/pages/admin/mail/index.tsx

@@ -3,9 +3,9 @@ import { type ReactElement } from "react";
 import { LayoutAdminAuthenticated } from "~/components/layouts/layout";
 import { api } from "~/utils/api";
 import { type GlobalOptions } from "@prisma/client";
-import MailUserInviteTemplate from "~/components/modules/mailUserInviteTemplate";
-import ForgotPasswordMailTemplate from "~/components/modules/mailForgotPasswordTemplate";
-import NotificationTemplate from "~/components/modules/mailNotificationTemplate";
+import MailUserInviteTemplate from "~/components/adminPage/mail/mailUserInviteTemplate";
+import ForgotPasswordMailTemplate from "~/components/adminPage/mail/mailForgotPasswordTemplate";
+import NotificationTemplate from "~/components/adminPage/mail/mailNotificationTemplate";
 import { useTranslations } from "use-intl";
 
 const Mail = () => {

src/pages/admin/users/index.tsx

@@ -1,9 +1,9 @@
 import { useTranslations } from "next-intl";
 import { type ReactElement } from "react";
-import UserInvitation from "~/components/admin/users/userInvitation";
+import { Accounts } from "~/components/adminPage/users/table/accounts";
+import UserInvitation from "~/components/adminPage/users/userInvitation";
 import { LayoutAdminAuthenticated } from "~/components/layouts/layout";
-import { Accounts } from "~/components/modules/accountTable";
-import UserGroups from "~/components/modules/userGroups";
+import UserGroups from "~/components/adminPage/users/userGroups";
 import { api } from "~/utils/api";
 
 const Users = () => {

src/pages/auth/forgotPassword/index.tsx

@@ -3,8 +3,8 @@ import { Session } from "next-auth";
 import { getSession } from "next-auth/react";
 import Head from "next/head";
 import React, { ReactElement } from "react";
+import ForgotPasswordForm from "~/components/auth/forgotPasswordForm";
 import { LayoutPublic } from "~/components/layouts/layout";
-import ForgotPasswordForm from "~/components/modules/forgotPasswordForm";
 import { globalSiteTitle } from "~/utils/global";
 
 const ForgotPassword = () => {

src/pages/auth/login/index.tsx

@@ -6,7 +6,7 @@ import { ReactElement } from "react";
 import { globalSiteTitle } from "~/utils/global";
 import Link from "next/link";
 import { LayoutPublic } from "~/components/layouts/layout";
-import LoginForm from "~/components/modules/loginForm";
+import LoginForm from "~/components/auth/loginForm";
 
 const Login = ({ auth }) => {
 	const title = `${globalSiteTitle} - Sign In`;

src/pages/auth/register/index.tsx

@@ -4,7 +4,7 @@ import { getSession } from "next-auth/react";
 import Head from "next/head";
 import React, { ReactElement } from "react";
 import { LayoutPublic } from "~/components/layouts/layout";
-import RegisterForm from "~/components/modules/registerForm";
+import RegisterForm from "~/components/auth/registerForm";
 import { prisma } from "~/server/db";
 import { globalSiteTitle } from "~/utils/global";
 

src/pages/central/[id].tsx

@@ -1,30 +1,30 @@
 import { useRouter } from "next/router";
 import { type ReactElement } from "react";
 import { LayoutAuthenticated } from "~/components/layouts/layout";
-import { NettworkRoutes } from "~/components/modules/networkRoutes";
-import { NetworkMembersTable } from "~/components/modules/table/networkMembersTable";
+import { NettworkRoutes } from "~/components/networkByIdPage/networkRoutes";
+import { NetworkMembersTable } from "~/components/networkByIdPage/table/networkMembersTable";
 import { api } from "~/utils/api";
-import { NetworkIpAssignment } from "~/components/modules/networkIpAssignments";
-import { NetworkPrivatePublic } from "~/components/modules/networkPrivatePublic";
-import { AddMemberById } from "~/components/modules/addMemberById";
+import { NetworkIpAssignment } from "~/components/networkByIdPage/networkIpAssignments";
+import { NetworkPrivatePublic } from "~/components/networkByIdPage/networkPrivatePublic";
+import { AddMemberById } from "~/components/networkByIdPage/addMemberById";
 import { CopyToClipboard } from "react-copy-to-clipboard";
 import CopyIcon from "~/icons/copy";
 import toast from "react-hot-toast";
-// import { DeletedNetworkMembersTable } from "~/components/modules/deletedNetworkMembersTable";
+// import { DeletedNetworkMembersTable } from "~/components/networkByIdPage/deletedNetworkMembersTable";
 import { useModalStore } from "~/utils/store";
-import { CentralFlowRules } from "~/components/modules/ztCentral/centralFlowRules";
-import { NetworkDns } from "~/components/modules/networkDns";
-import { NetworkMulticast } from "~/components/modules/networkMulticast";
+import { CentralFlowRules } from "~/components/networkByIdPage/ztCentral/centralFlowRules";
+import { NetworkMulticast } from "~/components/networkByIdPage/networkMulticast";
 import cn from "classnames";
-import NetworkHelpText from "~/components/modules/networkHelp";
-import { InviteMemberByMail } from "~/components/modules/inviteMemberbyMail";
+import NetworkHelpText from "~/components/networkByIdPage/networkHelp";
+import { InviteMemberByMail } from "~/components/networkByIdPage/inviteMemberbyMail";
 import { useTranslations } from "next-intl";
 import { GetServerSidePropsContext } from "next/types";
-import NetworkDescription from "../../components/modules/networkDescription";
-import NetworkName from "~/components/modules/networkName";
+import NetworkDescription from "../../components/networkByIdPage/networkDescription";
+import NetworkName from "~/components/networkByIdPage/networkName";
 import { withAuth } from "~/components/auth/withAuth";
 import Head from "next/head";
 import { globalSiteTitle } from "~/utils/global";
+import { NetworkDns } from "~/components/networkByIdPage/networkDns";
 
 const HeadSection = ({ title }: { title: string }) => (
 	<Head>

src/pages/central/index.tsx

@@ -3,7 +3,7 @@ import type { ReactElement } from "react";
 import { LayoutAuthenticated } from "~/components/layouts/layout";
 import type { NextPageWithLayout } from "../_app";
 import { api } from "~/utils/api";
-import { CentralNetworkTable } from "../../components/modules/ztCentral/centralNetworkTable";
+import { CentralNetworkTable } from "../../components/networkPage/centralNetworkTable";
 import { globalSiteTitle } from "~/utils/global";
 import { useTranslations } from "next-intl";
 import { type GetServerSidePropsContext } from "next";

src/pages/network/[id].tsx

@@ -1,27 +1,27 @@
 import { useRouter } from "next/router";
 import { useState, type ReactElement } from "react";
 import { LayoutAuthenticated } from "~/components/layouts/layout";
-import { NettworkRoutes } from "~/components/modules/networkRoutes";
-import { NetworkMembersTable } from "~/components/modules/table/networkMembersTable";
+import { NettworkRoutes } from "~/components/networkByIdPage/networkRoutes";
+import { NetworkMembersTable } from "~/components/networkByIdPage/table/networkMembersTable";
 import { api } from "~/utils/api";
-import { NetworkIpAssignment } from "~/components/modules/networkIpAssignments";
-import { NetworkPrivatePublic } from "~/components/modules/networkPrivatePublic";
-import { AddMemberById } from "~/components/modules/addMemberById";
+import { NetworkIpAssignment } from "~/components/networkByIdPage/networkIpAssignments";
+import { NetworkPrivatePublic } from "~/components/networkByIdPage/networkPrivatePublic";
+import { AddMemberById } from "~/components/networkByIdPage/addMemberById";
 import { CopyToClipboard } from "react-copy-to-clipboard";
 import CopyIcon from "~/icons/copy";
 import toast from "react-hot-toast";
-import { DeletedNetworkMembersTable } from "~/components/modules/deletedNetworkMembersTable";
+import { DeletedNetworkMembersTable } from "~/components/networkByIdPage/table/deletedNetworkMembersTable";
 import { useModalStore } from "~/utils/store";
-import { NetworkFlowRules } from "~/components/modules/networkFlowRules";
-import { NetworkDns } from "~/components/modules/networkDns";
-import { NetworkMulticast } from "~/components/modules/networkMulticast";
+import { NetworkFlowRules } from "~/components/networkByIdPage/networkFlowRules";
+import { NetworkDns } from "~/components/networkByIdPage/networkDns";
+import { NetworkMulticast } from "~/components/networkByIdPage/networkMulticast";
 import cn from "classnames";
-import NetworkHelpText from "~/components/modules/networkHelp";
-import { InviteMemberByMail } from "~/components/modules/inviteMemberbyMail";
+import NetworkHelpText from "~/components/networkByIdPage/networkHelp";
+import { InviteMemberByMail } from "~/components/networkByIdPage/inviteMemberbyMail";
 import { useTranslations } from "next-intl";
 import { GetServerSidePropsContext } from "next/types";
-import NetworkName from "~/components/modules/networkName";
-import NetworkDescription from "~/components/modules/networkDescription";
+import NetworkName from "~/components/networkByIdPage/networkName";
+import NetworkDescription from "~/components/networkByIdPage/networkDescription";
 import { withAuth } from "~/components/auth/withAuth";
 import Head from "next/head";
 import { globalSiteTitle } from "~/utils/global";

src/pages/network/index.tsx

@@ -3,7 +3,7 @@ import type { ReactElement } from "react";
 import { LayoutAuthenticated } from "~/components/layouts/layout";
 import type { NextPageWithLayout } from "../_app";
 import { api } from "~/utils/api";
-import { NetworkTable } from "../../components/modules/networkTable";
+import { NetworkTable } from "../../components/networkPage/networkTable";
 import { globalSiteTitle } from "~/utils/global";
 import { useTranslations } from "next-intl";
 import { type GetServerSidePropsContext } from "next";