Small cleanup of Dialog component

Reduce number of `useEffects` needed

client/components/dialog.jsx

@@ -2,45 +2,30 @@
 const React = require('react');
 const { useState, useRef, useEffect } = React;
 
-function Dialog({ dismissKey, closeText = 'Close', blocking = false, children, ...rest }) {
+function Dialog({ dismissKey, closeText = 'Close', blocking = false, ...rest }) {
-	const ref = useRef();
+	const dialogRef = useRef();
-
 	const [open, setOpen] = useState(false);
 
 	useEffect(()=>{
-		if(!window || !dismissKey) return;
+		if(dismissKey && !localStorage.getItem(dismissKey)) {
-		if(!localStorage.getItem(dismissKey)){
+			blocking ? dialogRef.current?.showModal() : dialogRef.current?.show();
 			setOpen(true);
 		}
 	}, []);
 
-	useEffect(()=>{
+	const dismiss = ()=>{
-		if(open) {
-			blocking ? ref.current?.showModal() : ref.current?.show();
-		} else {
-			ref.current?.close();
-		}
-	}, [open]);
-
-	const dismiss = function(){
 		localStorage.setItem(dismissKey, true);
+		dialogRef.current?.close();
 		setOpen(false);
 	};
 
-	if(!open) return;
+	if(!open) return null;
 	return (
-		<dialog
+		<dialog ref={dialogRef} onCancel={dismiss} {...rest}>
-			ref={ref}
+			<button className='dismiss' onClick={dismiss}>
-			onCancel={()=>dismiss()}
-			{...rest}
-		>
-			<button
-				className='dismiss'
-				onClick={()=>dismiss()}
-			>
         	{closeText}
 			</button>
-			{children}
+			{rest.children}
 		</dialog>
 	);
 }