paulmataruso/chartdb
1
0
Fork 0
mirror of https://github.com/chartdb/chartdb.git synced 2025-11-02 13:03:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

separate alert dialog from dialog context (#491)

Browse Source
This commit is contained in:
Guy Ben-Aharon
2024-12-22 15:10:42 +02:00
committed by GitHub
parent 0abe18cdf9
commit 205d431c89
9 changed files with 68 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/context/alert-context/alert-context.tsx Normal file
View File

@@ -0,0 +1,15 @@
import { createContext, useContext } from 'react';
import { emptyFn } from '@/lib/utils';
import type { BaseAlertDialogProps } from '@/dialogs/base-alert-dialog/base-alert-dialog';
export interface AlertContext {
showAlert: (params: BaseAlertDialogProps) => void;
closeAlert: () => void;
}
export const alertContext = createContext<AlertContext>({
closeAlert: emptyFn,
showAlert: emptyFn,
});
export const useAlert = () => useContext(alertContext);

36
src/context/alert-context/alert-provider.tsx Normal file
View File

@@ -0,0 +1,36 @@
import React, { useCallback, useState } from 'react';
import type { AlertContext } from './alert-context';
import { alertContext } from './alert-context';
import type { BaseAlertDialogProps } from '@/dialogs/base-alert-dialog/base-alert-dialog';
import { BaseAlertDialog } from '@/dialogs/base-alert-dialog/base-alert-dialog';
export const AlertProvider: React.FC<React.PropsWithChildren> = ({
children,
}) => {
const [showAlert, setShowAlert] = useState(false);
const [alertParams, setAlertParams] = useState<BaseAlertDialogProps>({
title: '',
});
const showAlertHandler: AlertContext['showAlert'] = useCallback(
(params) => {
setAlertParams(params);
setShowAlert(true);
},
[setShowAlert, setAlertParams]
);
const closeAlertHandler = useCallback(() => {
setShowAlert(false);
}, [setShowAlert]);
return (
<alertContext.Provider
value={{
showAlert: showAlertHandler,
closeAlert: closeAlertHandler,
}}
>
{children}
<BaseAlertDialog dialog={{ open: showAlert }} {...alertParams} />
</alertContext.Provider>
);
};

7
src/context/dialog-context/dialog-context.tsx
View File

@@ -1,6 +1,5 @@
import { createContext } from 'react';
import { emptyFn } from '@/lib/utils';
import type { BaseAlertDialogProps } from '@/dialogs/base-alert-dialog/base-alert-dialog';
import type { TableSchemaDialogProps } from '@/dialogs/table-schema-dialog/table-schema-dialog';
import type { ImportDatabaseDialogProps } from '@/dialogs/import-database-dialog/import-database-dialog';
import type { ExportSQLDialogProps } from '@/dialogs/export-sql-dialog/export-sql-dialog';
@@ -21,10 +20,6 @@ export interface DialogContext {
openExportSQLDialog: (params: Omit<ExportSQLDialogProps, 'dialog'>) => void;
closeExportSQLDialog: () => void;
// Alert dialog
showAlert: (params: BaseAlertDialogProps) => void;
closeAlert: () => void;
// Create relationship dialog
openCreateRelationshipDialog: () => void;
closeCreateRelationshipDialog: () => void;
@@ -71,8 +66,6 @@ export const dialogContext = createContext<DialogContext>({
closeOpenDiagramDialog: emptyFn,
openExportSQLDialog: emptyFn,
closeExportSQLDialog: emptyFn,
closeAlert: emptyFn,
showAlert: emptyFn,
closeCreateRelationshipDialog: emptyFn,
openCreateRelationshipDialog: emptyFn,
openImportDatabaseDialog: emptyFn,

21
src/context/dialog-context/dialog-provider.tsx
View File

@@ -6,8 +6,6 @@ import { OpenDiagramDialog } from '@/dialogs/open-diagram-dialog/open-diagram-di
import type { ExportSQLDialogProps } from '@/dialogs/export-sql-dialog/export-sql-dialog';
import { ExportSQLDialog } from '@/dialogs/export-sql-dialog/export-sql-dialog';
import { DatabaseType } from '@/lib/domain/database-type';
import type { BaseAlertDialogProps } from '@/dialogs/base-alert-dialog/base-alert-dialog';
import { BaseAlertDialog } from '@/dialogs/base-alert-dialog/base-alert-dialog';
import { CreateRelationshipDialog } from '@/dialogs/create-relationship-dialog/create-relationship-dialog';
import type { ImportDatabaseDialogProps } from '@/dialogs/import-database-dialog/import-database-dialog';
import { ImportDatabaseDialog } from '@/dialogs/import-database-dialog/import-database-dialog';
@@ -96,22 +94,6 @@ export const DialogProvider: React.FC<React.PropsWithChildren> = ({
const [openImportDiagramDialog, setOpenImportDiagramDialog] =
useState(false);
// Alert dialog
const [showAlert, setShowAlert] = useState(false);
const [alertParams, setAlertParams] = useState<BaseAlertDialogProps>({
title: '',
});
const showAlertHandler: DialogContext['showAlert'] = useCallback(
(params) => {
setAlertParams(params);
setShowAlert(true);
},
[setShowAlert, setAlertParams]
);
const closeAlertHandler = useCallback(() => {
setShowAlert(false);
}, [setShowAlert]);
return (
<dialogContext.Provider
value={{
@@ -121,8 +103,6 @@ export const DialogProvider: React.FC<React.PropsWithChildren> = ({
closeOpenDiagramDialog: () => setOpenOpenDiagramDialog(false),
openExportSQLDialog: openExportSQLDialogHandler,
closeExportSQLDialog: () => setOpenExportSQLDialog(false),
showAlert: showAlertHandler,
closeAlert: closeAlertHandler,
openCreateRelationshipDialog: () =>
setOpenCreateRelationshipDialog(true),
closeCreateRelationshipDialog: () =>
@@ -151,7 +131,6 @@ export const DialogProvider: React.FC<React.PropsWithChildren> = ({
dialog={{ open: openExportSQLDialog }}
{...exportSQLDialogParams}
/>
<BaseAlertDialog dialog={{ open: showAlert }} {...alertParams} />
<CreateRelationshipDialog
dialog={{ open: openCreateRelationshipDialog }}
/>

4
src/dialogs/base-alert-dialog/base-alert-dialog.tsx
View File

@@ -10,7 +10,7 @@ import {
AlertDialogTitle,
} from '@/components/alert-dialog/alert-dialog';
import type { AlertDialogProps } from '@radix-ui/react-alert-dialog';
import { useDialog } from '@/hooks/use-dialog';
import { useAlert } from '@/context/alert-context/alert-context';
export interface BaseAlertDialogProps {
title: string;
@@ -33,7 +33,7 @@ export const BaseAlertDialog: React.FC<BaseAlertDialogProps> = ({
content,
onClose,
}) => {
const { closeAlert } = useDialog();
const { closeAlert } = useAlert();
const closeAlertHandler = useCallback(() => {
onClose?.();

4
src/dialogs/import-database-dialog/import-database-dialog.tsx
View File

@@ -12,6 +12,7 @@ import { useRedoUndoStack } from '@/hooks/use-redo-undo-stack';
import { Trans, useTranslation } from 'react-i18next';
import { useReactFlow } from '@xyflow/react';
import type { BaseDialogProps } from '../common/base-dialog-props';
import { useAlert } from '@/context/alert-context/alert-context';
export interface ImportDatabaseDialogProps extends BaseDialogProps {
databaseType: DatabaseType;
@@ -21,7 +22,8 @@ export const ImportDatabaseDialog: React.FC<ImportDatabaseDialogProps> = ({
dialog,
databaseType,
}) => {
const { closeImportDatabaseDialog, showAlert } = useDialog();
const { closeImportDatabaseDialog } = useDialog();
const { showAlert } = useAlert();
const {
tables,
relationships,

4
src/pages/editor-page/canvas/canvas.tsx
View File

@@ -55,7 +55,6 @@ import {
TooltipTrigger,
TooltipContent,
} from '@/components/tooltip/tooltip';
import { useDialog } from '@/hooks/use-dialog';
import { MarkerDefinitions } from './marker-definitions';
import { CanvasContextMenu } from './canvas-context-menu';
import { areFieldTypesCompatible } from '@/lib/data/data-types/data-types';
@@ -76,6 +75,7 @@ import {
TOP_SOURCE_HANDLE_ID_PREFIX,
} from './table-node/table-node-dependency-indicator';
import { DatabaseType } from '@/lib/domain/database-type';
import { useAlert } from '@/context/alert-context/alert-context';
export type EdgeType = RelationshipEdgeType | DependencyEdgeType;
@@ -134,7 +134,7 @@ export const Canvas: React.FC<CanvasProps> = ({ initialTables, readonly }) => {
const { showSidePanel } = useLayout();
const { effectiveTheme } = useTheme();
const { scrollAction, showDependenciesOnCanvas } = useLocalConfig();
const { showAlert } = useDialog();
const { showAlert } = useAlert();
const { isMd: isDesktop } = useBreakpoint('md');
const nodeTypes = useMemo(() => ({ table: TableNode }), []);
const [highlightOverlappingTables, setHighlightOverlappingTables] =

13
src/pages/editor-page/editor-page.tsx
View File

@@ -36,6 +36,7 @@ import { KeyboardShortcutsProvider } from '@/context/keyboard-shortcuts-context/
import { Spinner } from '@/components/spinner/spinner';
import { Helmet } from 'react-helmet-async';
import { useStorage } from '@/hooks/use-storage';
import { AlertProvider } from '@/context/alert-context/alert-provider';
const OPEN_STAR_US_AFTER_SECONDS = 30;
const SHOW_STAR_US_AGAIN_AFTER_DAYS = 1;
@@ -280,11 +281,13 @@ export const EditorPage: React.FC = () => (
<HistoryProvider>
<ReactFlowProvider>
<ExportImageProvider>
<DialogProvider>
<KeyboardShortcutsProvider>
<EditorPageComponent />
</KeyboardShortcutsProvider>
</DialogProvider>
<AlertProvider>
<DialogProvider>
<KeyboardShortcutsProvider>
<EditorPageComponent />
</KeyboardShortcutsProvider>
</DialogProvider>
</AlertProvider>
</ExportImageProvider>
</ReactFlowProvider>
</HistoryProvider>

3
src/pages/editor-page/top-navbar/top-navbar.tsx
View File

@@ -35,6 +35,7 @@ import { DiagramName } from './diagram-name';
import { LastSaved } from './last-saved';
import { useNavigate } from 'react-router-dom';
import { LanguageNav } from './language-nav/language-nav';
import { useAlert } from '@/context/alert-context/alert-context';
export interface TopNavbarProps {}
@@ -50,11 +51,11 @@ export const TopNavbar: React.FC<TopNavbarProps> = () => {
openOpenDiagramDialog,
openExportSQLDialog,
openImportDatabaseDialog,
showAlert,
openExportImageDialog,
openExportDiagramDialog,
openImportDiagramDialog,
} = useDialog();
const { showAlert } = useAlert();
const { setTheme, theme } = useTheme();
const { hideSidePanel, isSidePanelShowed, showSidePanel } = useLayout();
const {