Skip to content

Commit

Permalink
reorganize dialog components
Browse files Browse the repository at this point in the history
  • Loading branch information
bartolomej committed Aug 14, 2023
1 parent 0908135 commit b00fe89
Show file tree
Hide file tree
Showing 14 changed files with 28 additions and 33 deletions.
2 changes: 1 addition & 1 deletion frontend/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,17 @@ 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;
onClose: MouseEventHandler<HTMLDivElement>;
className?: string;
};

const Dialog: FunctionComponent<DialogProps> = ({
export const BaseDialog: FunctionComponent<DialogProps> = ({
children,
onClose,
className,
Expand All @@ -37,5 +37,3 @@ const Dialog: FunctionComponent<DialogProps> = ({
</div>
);
};

export default Dialog;
Original file line number Diff line number Diff line change
@@ -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>;
Expand All @@ -11,7 +11,7 @@ export type ConfirmDialogProps = ActionDialogProps & {
title: string;
};

const ConfirmDialog: FunctionComponent<ConfirmDialogProps> = ({
export const ConfirmationDialog: FunctionComponent<ConfirmDialogProps> = ({
onConfirm,
onClose,
title,
Expand Down Expand Up @@ -52,5 +52,3 @@ const ConfirmDialog: FunctionComponent<ConfirmDialogProps> = ({
</ActionDialog>
);
};

export default ConfirmDialog;
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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} />
Expand Down Expand Up @@ -53,7 +53,7 @@ export function ConsentDialog({
<Button onClick={() => setConsent(tempConsent)}>Continue</Button>
</div>
</div>
</Dialog>
</BaseDialog>
);
}

Expand Down
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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);
Expand Down
Original file line number Diff line number Diff line change
@@ -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";
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/contexts/confirm-dialog.context.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -53,15 +53,15 @@ export function ConfirmDialogProvider({
<ConfirmDialogContext.Provider value={{ showDialog, hideDialog }}>
{children}
{isShowingDialog && (
<ConfirmDialog
<ConfirmationDialog
onClose={hideDialog}
title={dialogProps.title}
onConfirm={dialogProps.onConfirm ?? defaultOnConfirm}
confirmButtonLabel={dialogProps.confirmButtonLabel}
cancelButtonLabel={dialogProps.cancelButtonLabel}
>
{dialogProps.body}
</ConfirmDialog>
</ConfirmationDialog>
)}
</ConfirmDialogContext.Provider>
);
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/contexts/project.context.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,14 @@ 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";
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>;
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/pages/start/main/Main.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down

0 comments on commit b00fe89

Please sign in to comment.