From 556ded9b0839f6df46602b1b6218ee4ab7cf2b4f Mon Sep 17 00:00:00 2001
From: "G.Ambatte" <sean@robertson-family.nz>
Date: Thu, 6 Jun 2024 12:01:55 +1200
Subject: [PATCH] Tweak Dialog to work with showModal and show
 LockNotifications

---
 client/components/dialog.jsx                  | 12 +++--
 client/homebrew/pages/editPage/editPage.jsx   | 47 +++++++++----------
 .../lockNotification/lockNotification.jsx     | 10 ++--
 3 files changed, 36 insertions(+), 33 deletions(-)

diff --git a/client/components/dialog.jsx b/client/components/dialog.jsx
index 90d51753c..7bd4e5795 100644
--- a/client/components/dialog.jsx
+++ b/client/components/dialog.jsx
@@ -8,18 +8,24 @@ function Dialog({ dismissKey, closeText = 'Close', blocking = false, ...rest })
 
 	useEffect(()=>{
 		if(!dismissKey || !localStorage.getItem(dismissKey)) {
-			blocking ? dialogRef.current?.showModal() : dialogRef.current?.show();
-			setOpen(true);
+			!open && setOpen(true);
 		}
 	}, []);
 
+	useEffect(()=>{
+		if(open && !dialogRef.current?.open){
+			blocking ? dialogRef.current?.showModal() : dialogRef.current?.show();
+		} else {
+			dialogRef.current?.close();
+		}
+	}, [open]);
+
 	const dismiss = ()=>{
 		dismissKey && localStorage.setItem(dismissKey, true);
 		dialogRef.current?.close();
 		setOpen(false);
 	};
 
-	if(!open) return null;
 	return (
 		<dialog ref={dialogRef} onCancel={dismiss} {...rest}>
 			<button className='dismiss' onClick={dismiss}>
diff --git a/client/homebrew/pages/editPage/editPage.jsx b/client/homebrew/pages/editPage/editPage.jsx
index 01269ec7d..48d0f3fe5 100644
--- a/client/homebrew/pages/editPage/editPage.jsx
+++ b/client/homebrew/pages/editPage/editPage.jsx
@@ -396,31 +396,28 @@ const EditPage = createClass({
 			{this.renderNavbar()}
 
 			<div className='content'>
-				{this.state.displayLockMessage ?
-					<LockNotification shareId={this.props.brew.shareId} message={this.props.brew.lock.editMessage} disableLock={()=>this.setState({ displayLockMessage: false })}/>
-					:
-					<SplitPane onDragFinish={this.handleSplitMove}>
-						<Editor
-							ref={this.editor}
-							brew={this.state.brew}
-							onTextChange={this.handleTextChange}
-							onStyleChange={this.handleStyleChange}
-							onMetaChange={this.handleMetaChange}
-							reportError={this.errorReported}
-							renderer={this.state.brew.renderer}
-						/>
-						<BrewRenderer
-							text={this.state.brew.text}
-							style={this.state.brew.style}
-							renderer={this.state.brew.renderer}
-							theme={this.state.brew.theme}
-							errors={this.state.htmlErrors}
-							lang={this.state.brew.lang}
-							currentEditorPage={this.state.currentEditorPage}
-							allowPrint={true}
-						/>
-					</SplitPane>
-				}
+				{this.props.brew.lock && <LockNotification shareId={this.props.brew.shareId} message={this.props.brew.lock.editMessage} />}
+				<SplitPane onDragFinish={this.handleSplitMove}>
+					<Editor
+						ref={this.editor}
+						brew={this.state.brew}
+						onTextChange={this.handleTextChange}
+						onStyleChange={this.handleStyleChange}
+						onMetaChange={this.handleMetaChange}
+						reportError={this.errorReported}
+						renderer={this.state.brew.renderer}
+					/>
+					<BrewRenderer
+						text={this.state.brew.text}
+						style={this.state.brew.style}
+						renderer={this.state.brew.renderer}
+						theme={this.state.brew.theme}
+						errors={this.state.htmlErrors}
+						lang={this.state.brew.lang}
+						currentEditorPage={this.state.currentEditorPage}
+						allowPrint={true}
+					/>
+				</SplitPane>
 			</div>
 		</div>;
 	}
diff --git a/client/homebrew/pages/editPage/lockNotification/lockNotification.jsx b/client/homebrew/pages/editPage/lockNotification/lockNotification.jsx
index ac64b6bd7..c5eeaee47 100644
--- a/client/homebrew/pages/editPage/lockNotification/lockNotification.jsx
+++ b/client/homebrew/pages/editPage/lockNotification/lockNotification.jsx
@@ -1,19 +1,20 @@
 require('./lockNotification.less');
 const React = require('react');
-const Dialog = require('../../../../components/dialog.jsx');
+import Dialog from '../../../../components/dialog.jsx';
 
 function LockNotification(props) {
 	props = {
 		shareId     : 0,
 		disableLock : ()=>{},
+		message     : '',
 		...props
-	}
+	};
 
-	const removeLock = () => {
+	const removeLock = ()=>{
 		alert(`Not yet implemented - ID ${props.shareId}`);
 	};
 
-	return <Dialog className='lockNotification'>
+	return <Dialog className='lockNotification' blocking closeText='CONTINUE TO EDITOR' >
 		<h1>BREW LOCKED</h1>
 		<p>This brew been locked by the Administrators. It will not be accessible by any method other than the Editor until the lock is removed.</p>
 		<hr />
@@ -22,7 +23,6 @@ function LockNotification(props) {
 		<hr />
 		<p>Once you have resolved this issue, click REQUEST LOCK REMOVAL to notify the Administrators for review.</p>
 		<p>Click CONTINUE TO EDITOR to temporarily hide this notification; it will reappear the next time the page is reloaded.</p>
-		<button onClick={props.disableLock}>CONTINUE TO EDITOR</button>
 		<button onClick={removeLock}>REQUEST LOCK REMOVAL</button>
 	</Dialog>;
 };