Remove dependency from dialog components to move provider higher

yaptide · Oct 20, 2023 · 70b3302 · 70b3302
1 parent f6289f8
commit 70b3302
Show file tree

Hide file tree

Showing 18 changed files with 163 additions and 105 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -85,9 +85,9 @@ function App() {
 				<StyledEngineProvider injectFirst />,
 				<ThemeProvider theme={theme} />,
 				<SnackbarProvider maxSnack={3} />,
+				<DialogProvider />,
 				<KeycloakAuth />,
 				<Store />,
-				<DialogProvider />,
 				<Auth />,
 				<ShSimulation />,
 				<PythonConverterService />,

diff --git a/src/ThreeEditor/components/Dialog/ClearHistoryDialog.tsx b/src/ThreeEditor/components/Dialog/ClearHistoryDialog.tsx
@@ -1,11 +1,12 @@
 import { Button } from '@mui/material';
 
-import { useStore } from '../../../services/StoreService';
+import { StoreContext } from '../../../services/StoreService';
 import { ConcreteDialogProps, CustomDialog } from './CustomDialog';
 
-export function ClearHistoryDialog({ onClose }: ConcreteDialogProps) {
-	const { yaptideEditor } = useStore();
-
+export function ClearHistoryDialog({
+	onClose,
+	yaptideEditor
+}: ConcreteDialogProps<Required<Pick<StoreContext, 'yaptideEditor'>>>) {
 	return (
 		<CustomDialog
 			onClose={onClose}

diff --git a/src/ThreeEditor/components/Dialog/EditProjectInfoDialog.tsx b/src/ThreeEditor/components/Dialog/EditProjectInfoDialog.tsx
@@ -1,11 +1,13 @@
 import { Box, Button, TextField } from '@mui/material';
 import { useState } from 'react';
 
-import { useStore } from '../../../services/StoreService';
+import { StoreContext } from '../../../services/StoreService';
 import { ConcreteDialogProps, CustomDialog } from './CustomDialog';
 
-export function EditProjectInfoDialog({ onClose }: ConcreteDialogProps) {
-	const { yaptideEditor } = useStore();
+export function EditProjectInfoDialog({
+	onClose,
+	yaptideEditor
+}: ConcreteDialogProps<Required<Pick<StoreContext, 'yaptideEditor'>>>) {
 	const [title, setTitle] = useState<string>(yaptideEditor?.config.getKey('project/title'));
 	const [description, setDescription] = useState<string>(
 		yaptideEditor?.config.getKey('project/description')

diff --git a/src/ThreeEditor/components/Dialog/LoadFileDialog.tsx b/src/ThreeEditor/components/Dialog/LoadFileDialog.tsx
@@ -1,20 +1,21 @@
 import { Button } from '@mui/material';
 import Typography from '@mui/material/Typography';
 
-import { useStore } from '../../../services/StoreService';
+import { StoreContext } from '../../../services/StoreService';
 import { EditorJson } from '../../js/EditorJson';
 import { ConcreteDialogProps, CustomDialog } from './CustomDialog';
 
 export function LoadFileDialog({
 	onClose,
 	validVersion = true,
-	data
-}: ConcreteDialogProps<{
-	validVersion: boolean;
-	data: EditorJson;
-}>) {
-	const { yaptideEditor } = useStore();
-
+	data,
+	yaptideEditor
+}: ConcreteDialogProps<
+	{
+		validVersion: boolean;
+		data: EditorJson;
+	} & Required<Pick<StoreContext, 'yaptideEditor'>>
+>) {
 	return (
 		<CustomDialog
 			alert={true}

diff --git a/src/ThreeEditor/components/Dialog/NewProjectDialog.tsx b/src/ThreeEditor/components/Dialog/NewProjectDialog.tsx
@@ -1,11 +1,12 @@
 import { Button } from '@mui/material';
 
-import { useStore } from '../../../services/StoreService';
+import { StoreContext } from '../../../services/StoreService';
 import { ConcreteDialogProps, CustomDialog } from './CustomDialog';
 
-export function NewProjectDialog({ onClose }: ConcreteDialogProps) {
-	const { yaptideEditor } = useStore();
-
+export function NewProjectDialog({
+	onClose,
+	yaptideEditor
+}: ConcreteDialogProps<Required<Pick<StoreContext, 'yaptideEditor'>>>) {
 	return (
 		<CustomDialog
 			onClose={onClose}

diff --git a/src/ThreeEditor/components/Dialog/RejectKeycloakUserDialog.tsx b/src/ThreeEditor/components/Dialog/RejectKeycloakUserDialog.tsx
@@ -1,29 +1,32 @@
 import { Button } from '@mui/material';
 
-import { useKeycloakAuth } from '../../../services/KeycloakAuthService';
+import { KeycloakAuthContext } from '../../../services/KeycloakAuthService';
 import { ConcreteDialogProps, CustomDialog } from './CustomDialog';
 
 export function RejectKeycloakUserDialog({
 	onClose,
-	reason
-}: ConcreteDialogProps & { reason: string }) {
-	const { keycloak, initialized } = useKeycloakAuth();
-
+	reason,
+	keycloakAuth: { keycloak, initialized }
+}: ConcreteDialogProps<{
+	reason: string;
+	keycloakAuth: KeycloakAuthContext;
+}>) {
 	return (
 		<CustomDialog
 			onClose={onClose}
 			alert={true}
 			title='Keycloak User Rejected'
 			contentText={
 				initialized
-					? `Hello ${keycloak.tokenParsed?.preferred_username}. We could not accept your authorisation because of the following:\n${reason}\nPlease contact with an administrator to resolve this issue.`
+					? `Hello ${keycloak!.tokenParsed
+							?.preferred_username}. We could not accept your authorisation because of the following:\n${reason}\nPlease contact with an administrator to resolve this issue.`
 					: 'Connection could not be established with the authentication server. Please try again later.'
 			}>
 			<Button
 				onClick={() => {
 					onClose();
 
-					if (initialized && keycloak.authenticated) keycloak.logout();
+					if (initialized && keycloak!.authenticated) keycloak!.logout();
 				}}
 				autoFocus>
 				I understand

diff --git a/src/ThreeEditor/components/Dialog/RunSimulationDialog.tsx b/src/ThreeEditor/components/Dialog/RunSimulationDialog.tsx
@@ -2,8 +2,8 @@ import { Card, CardContent, Fade, Modal } from '@mui/material';
 import { enqueueSnackbar } from 'notistack';
 import { useState } from 'react';
 
-import { useShSimulation } from '../../../services/ShSimulatorService';
-import { useStore } from '../../../services/StoreService';
+import { RestSimulationContext } from '../../../services/ShSimulatorService';
+import { StoreContext } from '../../../services/StoreService';
 import { SimulatorType } from '../../../types/RequestTypes';
 import { SimulationInputFiles } from '../../../types/ResponseTypes';
 import {
@@ -19,15 +19,19 @@ export function RunSimulationDialog({
 	inputFiles = {},
 	simulator,
 	onClose,
-	onSubmit = () => {}
-}: ConcreteDialogProps<{
-	onSubmit?: (jobId: string) => void;
-	inputFiles?: Record<string, string>;
-	simulator: SimulatorType;
-}>) {
-	const { yaptideEditor } = useStore();
+	onSubmit = () => {},
+	yaptideEditor,
+	postJobDirect,
+	postJobBatch
+}: ConcreteDialogProps<
+	{
+		onSubmit?: (jobId: string) => void;
+		inputFiles?: Record<string, string>;
+		simulator: SimulatorType;
+	} & Required<Pick<StoreContext, 'yaptideEditor'>> &
+		Pick<RestSimulationContext, 'postJobDirect' | 'postJobBatch'>
+>) {
 	const [controller] = useState(new AbortController());
-	const { postJobDirect, postJobBatch } = useShSimulation();
 	const sendSimulationRequest = (
 		postJobFn: typeof postJobDirect,
 		runType: SimulationRunType,
@@ -46,16 +50,22 @@ export function RunSimulationDialog({
 			runType === 'batch'
 				? {
 						...batchOptions,
-						arrayOptions: batchOptions.arrayOptions?.reduce((acc, curr) => {
-							acc[curr.optionKey] = curr.optionValue;
+						arrayOptions: batchOptions.arrayOptions?.reduce(
+							(acc, curr) => {
+								acc[curr.optionKey] = curr.optionValue;
 
-							return acc;
-						}, {} as Record<string, string>),
-						collectOptions: batchOptions.collectOptions?.reduce((acc, curr) => {
-							acc[curr.optionKey] = curr.optionValue;
+								return acc;
+							},
+							{} as Record<string, string>
+						),
+						collectOptions: batchOptions.collectOptions?.reduce(
+							(acc, curr) => {
+								acc[curr.optionKey] = curr.optionValue;
 
-							return acc;
-						}, {} as Record<string, string>)
+								return acc;
+							},
+							{} as Record<string, string>
+						)
 				  }
 				: undefined;
 

diff --git a/src/ThreeEditor/components/Dialog/SaveFileDialog.tsx b/src/ThreeEditor/components/Dialog/SaveFileDialog.tsx
@@ -2,7 +2,7 @@ import { Button, Checkbox, FormControlLabel, TextField } from '@mui/material';
 import { ChangeEvent, useCallback, useEffect, useState } from 'react';
 
 import { FullSimulationData } from '../../../services/ShSimulatorService';
-import { useStore } from '../../../services/StoreService';
+import { StoreContext } from '../../../services/StoreService';
 import { saveString } from '../../../util/File';
 import { ConcreteDialogProps, CustomDialog } from './CustomDialog';
 
@@ -25,13 +25,15 @@ export function SaveFileDialog({
 	onClose,
 	name: defaultName = 'editor',
 	results: providedResults,
-	disableCheckbox = false
-}: ConcreteDialogProps<{
-	name?: string;
-	results?: FullSimulationData;
-	disableCheckbox?: boolean;
-}>) {
-	const { yaptideEditor } = useStore();
+	disableCheckbox = false,
+	yaptideEditor
+}: ConcreteDialogProps<
+	{
+		name?: string;
+		results?: FullSimulationData;
+		disableCheckbox?: boolean;
+	} & Required<Pick<StoreContext, 'yaptideEditor'>>
+>) {
 	const results: FullSimulationData | undefined = providedResults ?? yaptideEditor?.getResults();
 
 	const [keepResults, setKeepResults] = useState<boolean>(false);

diff --git a/src/ThreeEditor/components/Editor/EditorAppBar/EditorAppBar.tsx b/src/ThreeEditor/components/Editor/EditorAppBar/EditorAppBar.tsx
@@ -12,6 +12,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { useDialog } from '../../../../services/DialogService';
 import { useLoader } from '../../../../services/LoaderService';
+import { useStore } from '../../../../services/StoreService';
 import { YaptideEditor } from '../../../js/YaptideEditor';
 import { EditorTitleBar } from './components/EditorTitlebar';
 import { EditorToolbar } from './components/EditorToolbar';
@@ -30,11 +31,12 @@ type AppBarOptions = {
 
 function EditorAppBar({ editor }: AppBarProps) {
 	const { loadFromJson, loadFromFiles, loadFromUrl, loadFromJsonString } = useLoader();
-	const [openTheOpenFileDialog] = useDialog('openFile');
-	const [openTheSaveFileDialog] = useDialog('saveFile');
-	const [openTheNewProjectDialog] = useDialog('newProject');
+	const { open: openTheOpenFileDialog } = useDialog('openFile');
+	const { open: openTheSaveFileDialog } = useDialog('saveFile');
+	const { open: openTheNewProjectDialog } = useDialog('newProject');
 	const [canUndo, setCanUndo] = useState((editor?.history.undos.length ?? 0) > 0);
 	const [canRedo, setCanRedo] = useState((editor?.history.redos.length ?? 0) > 0);
+	const { yaptideEditor } = useStore();
 
 	const updateHistoryButtons = useCallback(() => {
 		setCanUndo((editor?.history.undos.length ?? 0) > 0);
@@ -71,7 +73,7 @@ function EditorAppBar({ editor }: AppBarProps) {
 					label: 'New',
 					icon: <FiberNewIcon />,
 					disabled: false,
-					onClick: () => openTheNewProjectDialog()
+					onClick: () => yaptideEditor && openTheNewProjectDialog({ yaptideEditor })
 				},
 				{
 					label: 'Open',
@@ -95,7 +97,7 @@ function EditorAppBar({ editor }: AppBarProps) {
 					label: 'Save as',
 					icon: <SaveAsIcon />,
 					disabled: false,
-					onClick: () => openTheSaveFileDialog()
+					onClick: () => yaptideEditor && openTheSaveFileDialog({ yaptideEditor })
 				},
 				{
 					label: 'Redo (ctrl+y)',
@@ -113,6 +115,7 @@ function EditorAppBar({ editor }: AppBarProps) {
 		[
 			canUndo,
 			canRedo,
+			yaptideEditor,
 			openTheNewProjectDialog,
 			openTheOpenFileDialog,
 			loadFromFiles,

diff --git a/src/ThreeEditor/components/Editor/EditorAppBar/components/EditorTitlebar.tsx b/src/ThreeEditor/components/Editor/EditorAppBar/components/EditorTitlebar.tsx
@@ -15,7 +15,7 @@ import { useDialog } from '../../../../../services/DialogService';
 import { useStore } from '../../../../../services/StoreService';
 
 export function EditorTitleBar() {
-	const [open, , isOpen] = useDialog('editProject');
+	const { open: openEditProjectDialog, isOpen } = useDialog('editProject');
 	const { yaptideEditor } = useStore();
 	const [saving, setSaving] = useState(false);
 	const [editMode, setEditMode] = useState(false);
@@ -60,7 +60,11 @@ export function EditorTitleBar() {
 			key='edit project description'
 			onClick={() => {
 				popupState.close();
-				open();
+
+				if (yaptideEditor)
+					openEditProjectDialog({
+						yaptideEditor
+					});
 			}}>
 			Edit Project Description
 		</MenuItem>

diff --git a/src/ThreeEditor/components/Editor/EditorMenu/EditorMenu.tsx b/src/ThreeEditor/components/Editor/EditorMenu/EditorMenu.tsx
@@ -3,6 +3,7 @@ import { MouseEvent, useCallback, useEffect, useState } from 'react';
 import { Object3D } from 'three';
 
 import { useDialog } from '../../../../services/DialogService';
+import { useStore } from '../../../../services/StoreService';
 import { useSignal } from '../../../../util/hooks/signals';
 import { toggleFullscreen } from '../../../../util/toggleFullscreen';
 import {
@@ -104,8 +105,9 @@ function MenuPosition({ label, idx, openIdx, setOpenIdx, options }: MenuPosition
 }
 
 export function EditorMenu({ editor }: EditorMenuProps) {
-	const [open] = useDialog('clearHistory');
+	const { open: openClearHistory } = useDialog('clearHistory');
 	const [openIdx, setOpenIdx] = useState(-1);
+	const { yaptideEditor } = useStore();
 	const [, setSelectedObject] = useState(editor?.selected);
 
 	const handleObjectUpdate = useCallback((o: Object3D) => {
@@ -188,7 +190,7 @@ export function EditorMenu({ editor }: EditorMenuProps) {
 						[
 							{
 								label: 'Clear history',
-								onClick: () => open(),
+								onClick: () => yaptideEditor && openClearHistory({ yaptideEditor }),
 								disabled:
 									editor?.history.undos.length === 0 &&
 									editor?.history.redos.length === 0

diff --git a/src/WrapperApp/components/InputEditor/InputFilesEditor.tsx b/src/WrapperApp/components/InputEditor/InputFilesEditor.tsx
@@ -5,6 +5,7 @@ import CodeEditor from '@uiw/react-textarea-code-editor';
 import { useConfig } from '../../../config/ConfigService';
 import { useAuth } from '../../../services/AuthService';
 import { useDialog } from '../../../services/DialogService';
+import { useShSimulation } from '../../../services/ShSimulatorService';
 import { useStore } from '../../../services/StoreService';
 import { SimulatorType } from '../../../types/RequestTypes';
 import {
@@ -26,8 +27,9 @@ interface InputFilesEditorProps {
 }
 
 export function InputFilesEditor(props: InputFilesEditorProps) {
-	const [open] = useDialog('runSimulation');
-	const { setTrackedId } = useStore();
+	const { open: openRunSimulationDialog } = useDialog('runSimulation');
+	const { postJobDirect, postJobBatch } = useShSimulation();
+	const { yaptideEditor, setTrackedId } = useStore();
 	const { demoMode } = useConfig();
 	const { isAuthorized } = useAuth();
 	const inputFiles = props.inputFiles ?? _defaultShInputFiles;
@@ -85,12 +87,16 @@ export function InputFilesEditor(props: InputFilesEditorProps) {
 					variant='contained'
 					disabled={demoMode || !isAuthorized}
 					onClick={() =>
-						open({
+						yaptideEditor &&
+						openRunSimulationDialog({
 							inputFiles: Object.fromEntries(
 								Object.entries(inputFiles).filter(([, data]) => data.length > 0)
 							),
 							simulator: props.simulator,
-							onSubmit: setTrackedId
+							onSubmit: setTrackedId,
+							postJobDirect,
+							postJobBatch,
+							yaptideEditor
 						})
 					}>
 					Run with these input files