From b9ba12cb3a578be89c64f387a2069c711cd23edb Mon Sep 17 00:00:00 2001 From: Igor Barcik Date: Wed, 1 Nov 2023 18:01:27 +0100 Subject: [PATCH] Implementing editing results as new tool + prettier entire solution --- src/components/Breadcrumbs.tsx | 14 +- src/components/CardGrid.tsx | 4 +- .../ConfirmationDialog/ConfirmationDialog.tsx | 9 +- .../ConfirmationDialogProvider.tsx | 9 +- .../useConfirmationDialog.ts | 9 +- src/components/NavigationTree.tsx | 32 +--- src/contexts/ConfirmationDialogContext.tsx | 4 +- src/features/App/App.tsx | 5 +- src/features/Debugger.tsx | 4 +- src/features/Home/HomePage.tsx | 14 +- src/routes.tsx | 4 +- src/toolsDatabase.ts | 151 ++++++++++-------- src/utils/ObjectUtils.ts | 4 +- src/utils/RoutingTableUtils.ts | 22 +-- 14 files changed, 116 insertions(+), 169 deletions(-) diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx index 29a993f..3270079 100644 --- a/src/components/Breadcrumbs.tsx +++ b/src/components/Breadcrumbs.tsx @@ -21,11 +21,7 @@ const Breadcrumbs = () => { return _route?.name || path; }; - const renderLinkBreadcrumb = ( - value: string, - index: number, - pathnames: string[], - ) => { + const renderLinkBreadcrumb = (value: string, index: number, pathnames: string[]) => { if (value === pathParams.id) return null; const to = `/${pathnames.slice(0, index + 1).join("/")}`; const routeName = capitalizeFirstLetter(findRouteNameByPath(value)); @@ -47,9 +43,7 @@ const Breadcrumbs = () => { }; if (hideBreadcrumbBar(location.pathname)) { - return ( -
{pathnames[0].toUpperCase()}
- ); + return
{pathnames[0].toUpperCase()}
; } return ( @@ -60,9 +54,7 @@ const Breadcrumbs = () => { {pathnames.map((value, index) => { const isLast = index === pathnames.length - 1; - return isLast - ? renderTextBreadcrumb(value) - : renderLinkBreadcrumb(value, index, pathnames); + return isLast ? renderTextBreadcrumb(value) : renderLinkBreadcrumb(value, index, pathnames); })} diff --git a/src/components/CardGrid.tsx b/src/components/CardGrid.tsx index 9956d7a..56cb5bb 100644 --- a/src/components/CardGrid.tsx +++ b/src/components/CardGrid.tsx @@ -3,9 +3,7 @@ import { ReactNode } from "react"; const CardGrid = ({ children }: { children: ReactNode }) => { return (
-
- {children} -
+
{children}
); }; diff --git a/src/components/ConfirmationDialog/ConfirmationDialog.tsx b/src/components/ConfirmationDialog/ConfirmationDialog.tsx index 2afad34..a13e71b 100644 --- a/src/components/ConfirmationDialog/ConfirmationDialog.tsx +++ b/src/components/ConfirmationDialog/ConfirmationDialog.tsx @@ -8,13 +8,8 @@ import useConfirmationDialog from "./useConfirmationDialog"; * @returns ConfirmationDialog component */ const ConfirmationDialog = () => { - const { - isConfirmationDialogVisible, - handleConfirm, - handleCancel, - customModalBoxStyles, - customModalStyles, - } = useConfirmationDialog(); + const { isConfirmationDialogVisible, handleConfirm, handleCancel, customModalBoxStyles, customModalStyles } = + useConfirmationDialog(); return ( <> diff --git a/src/components/ConfirmationDialog/ConfirmationDialogProvider.tsx b/src/components/ConfirmationDialog/ConfirmationDialogProvider.tsx index 7b76f23..ff74211 100644 --- a/src/components/ConfirmationDialog/ConfirmationDialogProvider.tsx +++ b/src/components/ConfirmationDialog/ConfirmationDialogProvider.tsx @@ -1,13 +1,8 @@ import { useState } from "react"; import { ConfirmationDialogContext } from "../../contexts/ConfirmationDialogContext"; -export const ConfirmationDialogProvider = ({ - children, -}: { - children: React.ReactNode; -}) => { - const [isConfirmationDialogVisible, setIsConfirmationDialogVisible] = - useState(false); +export const ConfirmationDialogProvider = ({ children }: { children: React.ReactNode }) => { + const [isConfirmationDialogVisible, setIsConfirmationDialogVisible] = useState(false); const [customModalBoxStyles, setCustomModalBoxStyles] = useState(""); const [customModalStyles, setCustomModalStyles] = useState(""); diff --git a/src/components/ConfirmationDialog/useConfirmationDialog.ts b/src/components/ConfirmationDialog/useConfirmationDialog.ts index 4363baf..84e7895 100644 --- a/src/components/ConfirmationDialog/useConfirmationDialog.ts +++ b/src/components/ConfirmationDialog/useConfirmationDialog.ts @@ -1,8 +1,5 @@ import { useContext } from "react"; -import { - ConfirmationDialogContext, - ConfirmationDialogContextType, -} from "../../contexts/ConfirmationDialogContext"; +import { ConfirmationDialogContext, ConfirmationDialogContextType } from "../../contexts/ConfirmationDialogContext"; /** * @description Hook to manage the confirmation dialog, only passes the controls to specyfic dialog component @@ -13,9 +10,7 @@ import { export const useConfirmationDialog = (): ConfirmationDialogContextType => { const context = useContext(ConfirmationDialogContext); if (!context) { - throw new Error( - "useConfirmationDialog must be used within a ConfirmationDialogProvider", - ); + throw new Error("useConfirmationDialog must be used within a ConfirmationDialogProvider"); } return context; }; diff --git a/src/components/NavigationTree.tsx b/src/components/NavigationTree.tsx index 89d45ce..e6ba357 100644 --- a/src/components/NavigationTree.tsx +++ b/src/components/NavigationTree.tsx @@ -1,9 +1,6 @@ import { CustomRouteObject } from "../configure"; import { Link, useLocation } from "react-router-dom"; -import { - clearMultiplePathSlashes, - trimPathOfParameters, -} from "../utils/StringTransformationUtils"; +import { clearMultiplePathSlashes, trimPathOfParameters } from "../utils/StringTransformationUtils"; /** * @returns Navigation tree elements, require to be used like in example below @@ -14,38 +11,26 @@ import { * * ``` */ -function NavigationTree(props: { - routes: CustomRouteObject[]; -}): React.JSX.Element { +function NavigationTree(props: { routes: CustomRouteObject[] }): React.JSX.Element { const locationHook = useLocation(); // Used to highlight active link in navigation tree - const GenerateNavigationEntries = ( - routes: CustomRouteObject[], - parentPath?: string, - ): React.ReactNode => { + const GenerateNavigationEntries = (routes: CustomRouteObject[], parentPath?: string): React.ReactNode => { return ( routes.map((route) => { // Prepare path for links let combinedPath = undefined; if (parentPath !== undefined && route.path !== undefined) - combinedPath = trimPathOfParameters( - clearMultiplePathSlashes(`/${parentPath}/${route.path}`), - ); + combinedPath = trimPathOfParameters(clearMultiplePathSlashes(`/${parentPath}/${route.path}`)); else combinedPath = route.path; // Does it have children and enabled? Make entry with `/{parent.path}/{route.path}` if (route.children && !route.additionalProps.disableInNavbar) { return ( ); @@ -60,10 +45,7 @@ function NavigationTree(props: { else { return (
  • - + {route.additionalProps.name}
    • diff --git a/src/contexts/ConfirmationDialogContext.tsx b/src/contexts/ConfirmationDialogContext.tsx index 5bdbb68..b0e2f7d 100644 --- a/src/contexts/ConfirmationDialogContext.tsx +++ b/src/contexts/ConfirmationDialogContext.tsx @@ -13,7 +13,5 @@ export type ConfirmationDialogContextType = { setCustomModalStyles: React.Dispatch>; }; // Create the context with default values -export const ConfirmationDialogContext = createContext< - ConfirmationDialogContextType | undefined ->(undefined); +export const ConfirmationDialogContext = createContext(undefined); ConfirmationDialogContext.displayName = "ConfirmationDialog"; diff --git a/src/features/App/App.tsx b/src/features/App/App.tsx index 43baa4e..bd030e9 100644 --- a/src/features/App/App.tsx +++ b/src/features/App/App.tsx @@ -47,10 +47,7 @@ function App() {
    {/* Left side navbar */}
    -