From b00fe89679253376fc6d688e15abfd7ead6daf96 Mon Sep 17 00:00:00 2001
From: Bart <bartolomej.kozorog@gmail.com>
Date: Mon, 14 Aug 2023 12:11:28 +0200
Subject: [PATCH] reorganize dialog components

---
 frontend/src/App.tsx                                |  2 +-
 .../action}/ActionDialog.module.scss                |  0
 .../action}/ActionDialog.tsx                        |  6 +++---
 .../base/BaseDialog.module.scss}                    |  0
 .../Dialog.tsx => dialogs/base/BaseDialog.tsx}      |  8 +++-----
 .../confirmation/ConfirmationDialog.tsx}            |  8 +++-----
 .../consent}/ConsentDialog.module.scss              |  0
 .../consent}/ConsentDialog.tsx                      | 12 ++++++------
 .../snapshot}/SnapshotDialog.module.scss            |  0
 .../snapshot}/SnapshotDialog.tsx                    | 13 ++++++-------
 .../components/requirements/ProjectRequirements.tsx |  2 +-
 frontend/src/contexts/confirm-dialog.context.tsx    |  6 +++---
 frontend/src/contexts/project.context.tsx           |  2 +-
 frontend/src/pages/start/main/Main.tsx              |  2 +-
 14 files changed, 28 insertions(+), 33 deletions(-)
 rename frontend/src/components/{action-dialog => dialogs/action}/ActionDialog.module.scss (100%)
 rename frontend/src/components/{action-dialog => dialogs/action}/ActionDialog.tsx (84%)
 rename frontend/src/components/{dialog/Dialog.module.scss => dialogs/base/BaseDialog.module.scss} (100%)
 rename frontend/src/components/{dialog/Dialog.tsx => dialogs/base/BaseDialog.tsx} (84%)
 rename frontend/src/components/{confirm-dialog/ConfirmDialog.tsx => dialogs/confirmation/ConfirmationDialog.tsx} (83%)
 rename frontend/src/components/{consent-dialog => dialogs/consent}/ConsentDialog.module.scss (100%)
 rename frontend/src/components/{consent-dialog => dialogs/consent}/ConsentDialog.tsx (87%)
 rename frontend/src/components/{snapshot-dialog => dialogs/snapshot}/SnapshotDialog.module.scss (100%)
 rename frontend/src/components/{snapshot-dialog => dialogs/snapshot}/SnapshotDialog.tsx (82%)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 7e2f5a6b..bd50e1ed 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -31,7 +31,7 @@ import {
   PlatformAdapterState,
 } from "./contexts/platform-adapter.context";
 import { queryClient } from "./config/react-query";
-import { ConsentDialog } from "./components/consent-dialog/ConsentDialog";
+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";
diff --git a/frontend/src/components/action-dialog/ActionDialog.module.scss b/frontend/src/components/dialogs/action/ActionDialog.module.scss
similarity index 100%
rename from frontend/src/components/action-dialog/ActionDialog.module.scss
rename to frontend/src/components/dialogs/action/ActionDialog.module.scss
diff --git a/frontend/src/components/action-dialog/ActionDialog.tsx b/frontend/src/components/dialogs/action/ActionDialog.tsx
similarity index 84%
rename from frontend/src/components/action-dialog/ActionDialog.tsx
rename to frontend/src/components/dialogs/action/ActionDialog.tsx
index ce750cb7..2d1667e4 100644
--- a/frontend/src/components/action-dialog/ActionDialog.tsx
+++ b/frontend/src/components/dialogs/action/ActionDialog.tsx
@@ -1,7 +1,7 @@
 import React, { FC, ReactElement } from "react";
 import classes from "./ActionDialog.module.scss";
 import classNames from "classnames";
-import Dialog, { DialogProps } from "../dialog/Dialog";
+import { BaseDialog, DialogProps } from "../base/BaseDialog";
 
 export type ActionDialogProps = {
   title: string;
@@ -17,12 +17,12 @@ export const ActionDialog: FC<ActionDialogProps> = ({
   ...dialogProps
 }) => {
   return (
-    <Dialog {...dialogProps}>
+    <BaseDialog {...dialogProps}>
       <div className={classes.root}>
         <h3>{title}</h3>
         <div className={classNames(classes.body, bodyClass)}>{children}</div>
         {footer && <div className={classes.actions}>{footer}</div>}
       </div>
-    </Dialog>
+    </BaseDialog>
   );
 };
diff --git a/frontend/src/components/dialog/Dialog.module.scss b/frontend/src/components/dialogs/base/BaseDialog.module.scss
similarity index 100%
rename from frontend/src/components/dialog/Dialog.module.scss
rename to frontend/src/components/dialogs/base/BaseDialog.module.scss
diff --git a/frontend/src/components/dialog/Dialog.tsx b/frontend/src/components/dialogs/base/BaseDialog.tsx
similarity index 84%
rename from frontend/src/components/dialog/Dialog.tsx
rename to frontend/src/components/dialogs/base/BaseDialog.tsx
index 1913947a..c58c3245 100644
--- a/frontend/src/components/dialog/Dialog.tsx
+++ b/frontend/src/components/dialogs/base/BaseDialog.tsx
@@ -3,9 +3,9 @@ import React, {
   MouseEventHandler,
   ReactElement,
 } from "react";
-import classes from "./Dialog.module.scss";
+import classes from "./BaseDialog.module.scss";
 import classNames from "classnames";
-import Card from "../card/Card";
+import Card from "../../card/Card";
 
 export type DialogProps = {
   children: ReactElement[] | ReactElement;
@@ -13,7 +13,7 @@ export type DialogProps = {
   className?: string;
 };
 
-const Dialog: FunctionComponent<DialogProps> = ({
+export const BaseDialog: FunctionComponent<DialogProps> = ({
   children,
   onClose,
   className,
@@ -37,5 +37,3 @@ const Dialog: FunctionComponent<DialogProps> = ({
     </div>
   );
 };
-
-export default Dialog;
diff --git a/frontend/src/components/confirm-dialog/ConfirmDialog.tsx b/frontend/src/components/dialogs/confirmation/ConfirmationDialog.tsx
similarity index 83%
rename from frontend/src/components/confirm-dialog/ConfirmDialog.tsx
rename to frontend/src/components/dialogs/confirmation/ConfirmationDialog.tsx
index 7f280655..6351b3b0 100644
--- a/frontend/src/components/confirm-dialog/ConfirmDialog.tsx
+++ b/frontend/src/components/dialogs/confirmation/ConfirmationDialog.tsx
@@ -1,6 +1,6 @@
 import React, { FunctionComponent, useState } from "react";
-import Button from "../buttons/button/Button";
-import { ActionDialog, ActionDialogProps } from "../action-dialog/ActionDialog";
+import Button from "../../buttons/button/Button";
+import { ActionDialog, ActionDialogProps } from "../action/ActionDialog";
 
 export type ConfirmDialogProps = ActionDialogProps & {
   onClose: () => void | Promise<void>;
@@ -11,7 +11,7 @@ export type ConfirmDialogProps = ActionDialogProps & {
   title: string;
 };
 
-const ConfirmDialog: FunctionComponent<ConfirmDialogProps> = ({
+export const ConfirmationDialog: FunctionComponent<ConfirmDialogProps> = ({
   onConfirm,
   onClose,
   title,
@@ -52,5 +52,3 @@ const ConfirmDialog: FunctionComponent<ConfirmDialogProps> = ({
     </ActionDialog>
   );
 };
-
-export default ConfirmDialog;
diff --git a/frontend/src/components/consent-dialog/ConsentDialog.module.scss b/frontend/src/components/dialogs/consent/ConsentDialog.module.scss
similarity index 100%
rename from frontend/src/components/consent-dialog/ConsentDialog.module.scss
rename to frontend/src/components/dialogs/consent/ConsentDialog.module.scss
diff --git a/frontend/src/components/consent-dialog/ConsentDialog.tsx b/frontend/src/components/dialogs/consent/ConsentDialog.tsx
similarity index 87%
rename from frontend/src/components/consent-dialog/ConsentDialog.tsx
rename to frontend/src/components/dialogs/consent/ConsentDialog.tsx
index 503bc859..c689b368 100644
--- a/frontend/src/components/consent-dialog/ConsentDialog.tsx
+++ b/frontend/src/components/dialogs/consent/ConsentDialog.tsx
@@ -1,11 +1,11 @@
 import React, { ReactElement, useState } from "react";
-import Dialog from "../dialog/Dialog";
+import { BaseDialog } from "../base/BaseDialog";
 import classes from "./ConsentDialog.module.scss";
-import logo from "../../assets/images/logo-foreground.svg";
+import logo from "../../../assets/images/logo-foreground.svg";
 import ToggleButton, {
   ToggleButtonProps,
-} from "../buttons/toggle-button/ToggleButton";
-import Button from "../buttons/button/Button";
+} from "../../buttons/toggle-button/ToggleButton";
+import Button from "../../buttons/button/Button";
 
 export type ConsentDialogProps = {
   consent: boolean;
@@ -21,7 +21,7 @@ export function ConsentDialog({
   const [tempConsent, setTempConsent] = useState(consent);
 
   return (
-    <Dialog onClose={onClose} className={classes.modal}>
+    <BaseDialog onClose={onClose} className={classes.modal}>
       <div className={classes.root}>
         <div className={classes.header}>
           <img alt="Flowser logo" src={logo} className={classes.logo} />
@@ -53,7 +53,7 @@ export function ConsentDialog({
           <Button onClick={() => setConsent(tempConsent)}>Continue</Button>
         </div>
       </div>
-    </Dialog>
+    </BaseDialog>
   );
 }
 
diff --git a/frontend/src/components/snapshot-dialog/SnapshotDialog.module.scss b/frontend/src/components/dialogs/snapshot/SnapshotDialog.module.scss
similarity index 100%
rename from frontend/src/components/snapshot-dialog/SnapshotDialog.module.scss
rename to frontend/src/components/dialogs/snapshot/SnapshotDialog.module.scss
diff --git a/frontend/src/components/snapshot-dialog/SnapshotDialog.tsx b/frontend/src/components/dialogs/snapshot/SnapshotDialog.tsx
similarity index 82%
rename from frontend/src/components/snapshot-dialog/SnapshotDialog.tsx
rename to frontend/src/components/dialogs/snapshot/SnapshotDialog.tsx
index 15bcf8cf..4b10e1ce 100644
--- a/frontend/src/components/snapshot-dialog/SnapshotDialog.tsx
+++ b/frontend/src/components/dialogs/snapshot/SnapshotDialog.tsx
@@ -1,12 +1,12 @@
 import React, { FC, useState } from "react";
-import Button from "../buttons/button/Button";
+import Button from "../../buttons/button/Button";
 import classes from "./SnapshotDialog.module.scss";
 import toast from "react-hot-toast";
-import { ServiceRegistry } from "../../services/service-registry";
-import Input from "../input/Input";
-import { ActionDialog } from "../action-dialog/ActionDialog";
-import { useCurrentProjectId, useGetCurrentProject } from "../../hooks/use-api";
-import { useErrorHandler } from "../../hooks/use-error-handler";
+import { ServiceRegistry } from "../../../services/service-registry";
+import Input from "../../input/Input";
+import { ActionDialog } from "../action/ActionDialog";
+import { useCurrentProjectId } from "../../../hooks/use-api";
+import { useErrorHandler } from "../../../hooks/use-error-handler";
 
 export type SnapshotDialogProps = {
   show?: boolean;
@@ -15,7 +15,6 @@ export type SnapshotDialogProps = {
 
 export const SnapshotDialog: FC<SnapshotDialogProps> = ({ show, setShow }) => {
   const projectId = useCurrentProjectId();
-  const { data } = useGetCurrentProject();
   const { handleError } = useErrorHandler(SnapshotDialog.name);
   const { snapshotService } = ServiceRegistry.getInstance();
   const [loading, setLoading] = useState(false);
diff --git a/frontend/src/components/requirements/ProjectRequirements.tsx b/frontend/src/components/requirements/ProjectRequirements.tsx
index 6a279726..2aa6ec8f 100644
--- a/frontend/src/components/requirements/ProjectRequirements.tsx
+++ b/frontend/src/components/requirements/ProjectRequirements.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { ActionDialog } from "../action-dialog/ActionDialog";
+import { ActionDialog } from "../dialogs/action/ActionDialog";
 import { useGetProjectRequirements } from "../../hooks/use-api";
 import { ReactElement } from "react";
 import { ProjectRequirement, ProjectRequirementType } from "@flowser/shared";
diff --git a/frontend/src/contexts/confirm-dialog.context.tsx b/frontend/src/contexts/confirm-dialog.context.tsx
index de535da9..b91847b8 100644
--- a/frontend/src/contexts/confirm-dialog.context.tsx
+++ b/frontend/src/contexts/confirm-dialog.context.tsx
@@ -4,7 +4,7 @@ import React, {
   useContext,
   useState,
 } from "react";
-import ConfirmDialog from "../components/confirm-dialog/ConfirmDialog";
+import { ConfirmationDialog } from "../components/dialogs/confirmation/ConfirmationDialog";
 
 export type ConfirmDialogContextState = {
   showDialog: (props: OpenConfirmDialogProps) => void;
@@ -53,7 +53,7 @@ export function ConfirmDialogProvider({
     <ConfirmDialogContext.Provider value={{ showDialog, hideDialog }}>
       {children}
       {isShowingDialog && (
-        <ConfirmDialog
+        <ConfirmationDialog
           onClose={hideDialog}
           title={dialogProps.title}
           onConfirm={dialogProps.onConfirm ?? defaultOnConfirm}
@@ -61,7 +61,7 @@ export function ConfirmDialogProvider({
           cancelButtonLabel={dialogProps.cancelButtonLabel}
         >
           {dialogProps.body}
-        </ConfirmDialog>
+        </ConfirmationDialog>
       )}
     </ConfirmDialogContext.Provider>
   );
diff --git a/frontend/src/contexts/project.context.tsx b/frontend/src/contexts/project.context.tsx
index fa3a4419..d8e593e3 100644
--- a/frontend/src/contexts/project.context.tsx
+++ b/frontend/src/contexts/project.context.tsx
@@ -18,7 +18,6 @@ import {
   useGetPollingBlocks,
   useGetPollingEmulatorSnapshots,
 } from "../hooks/use-api";
-import { SnapshotDialog } from "../components/snapshot-dialog/SnapshotDialog";
 import { useErrorHandler } from "../hooks/use-error-handler";
 import { useQueryClient } from "react-query";
 import { useAnalytics } from "../hooks/use-analytics";
@@ -26,6 +25,7 @@ import { AnalyticEvent } from "../services/analytics.service";
 import { FlowUtils } from "../utils/flow-utils";
 // @ts-ignore missing fcl types
 import * as fcl from "@onflow/fcl";
+import { SnapshotDialog } from "components/dialogs/snapshot/SnapshotDialog";
 
 export type ProjectActionsContextState = {
   switchProject: () => Promise<void>;
diff --git a/frontend/src/pages/start/main/Main.tsx b/frontend/src/pages/start/main/Main.tsx
index dfadbfd3..9e3cfb2b 100644
--- a/frontend/src/pages/start/main/Main.tsx
+++ b/frontend/src/pages/start/main/Main.tsx
@@ -29,7 +29,7 @@ import { ServiceRegistry } from "../../../services/service-registry";
 import { useErrorHandler } from "../../../hooks/use-error-handler";
 import { useAnalytics } from "../../../hooks/use-analytics";
 import { AnalyticEvent } from "../../../services/analytics.service";
-import { ConsentDialog } from "../../../components/consent-dialog/ConsentDialog";
+import { ConsentDialog } from "../../../components/dialogs/consent/ConsentDialog";
 import { useAnalyticsConsent } from "../../../hooks/use-analytics-consent";
 
 type ProjectTab = {