From 758651013d2069586dcb79f629271d3ee15d32b1 Mon Sep 17 00:00:00 2001
From: James Morris <moreofmorris@users.noreply.github.com>
Date: Thu, 4 Aug 2022 16:46:22 +0100
Subject: [PATCH] Tidying up dialog calls for bio with correct autofocus

- Removed only showing bio in modal, now showing both always
- Changed how the modal is called with parameters to focus on bio if clicked

refs https://github.com/TryGhost/Team/issues/1716
---
 apps/comments-ui/src/components/Form.js       |  35 +++---
 .../src/components/modals/AddDetailsDialog.js | 100 ++++++++----------
 2 files changed, 60 insertions(+), 75 deletions(-)

diff --git a/apps/comments-ui/src/components/Form.js b/apps/comments-ui/src/components/Form.js
index 6b82ddce94..c4fdc2a2eb 100644
--- a/apps/comments-ui/src/components/Form.js
+++ b/apps/comments-ui/src/components/Form.js
@@ -302,26 +302,13 @@ const Form = (props) => {
         editor.commands.focus();
     };
 
-    const handleAddBoth = (event) => {
+    const handleShowDialog = (event, options) => {
         event.preventDefault();
         setPreventClosing(true);
 
         dispatchAction('openPopup', {
             type: 'addDetailsDialog',
-            callback: () => {
-                editor?.commands.focus();
-                setPreventClosing(false);
-            }
-        });
-    };
-
-    const handleAddBio = (event) => {
-        event.preventDefault();
-        setPreventClosing(true);
-
-        dispatchAction('openPopup', {
-            type: 'addDetailsDialog',
-            bioOnly: true,
+            bioAutofocus: options.bioAutofocus ?? false,
             callback: () => {
                 editor?.commands.focus();
                 setPreventClosing(false);
@@ -422,9 +409,21 @@ const Form = (props) => {
                                 leaveFrom="opacity-100"
                                 leaveTo="opacity-0"
                             >
-                                <button className="text-[17px] font-sans font-bold tracking-tight text-[rgb(23,23,23)] hover:text-black dark:text-[rgba(255,255,255,0.85)]" onClick={handleAddBoth}>{memberName ? memberName : 'Anonymous'}</button>
-                                <div className="flex items-baseline font-sans text-[14px] tracking-tight text-neutral-400 dark:text-[rgba(255,255,255,0.5)]">
-                                    <button className="transition duration-150 hover:text-neutral-500" onClick={memberBio ? handleAddBoth : handleAddBio}>{memberBio ? memberBio : 'Add your bio'}</button>
+                                <button
+                                    className="text-[17px] font-sans font-bold tracking-tight text-[rgb(23,23,23)] dark:text-[rgba(255,255,255,0.85)]"
+                                    onClick={(event) => {
+                                        handleShowDialog(event, {
+                                            bioAutofocus: false
+                                        });
+                                    }}>{memberName ? memberName : 'Anonymous'}</button>
+                                <div className="flex items-baseline">
+                                    <button
+                                        className={`transition duration-150 font-sans text-[14px] tracking-tight text-neutral-400 hover:text-neutral-500 dark:text-[rgba(255,255,255,0.5)] ${!memberBio && 'text-neutral-300 hover:text-neutral-400'}`}
+                                        onClick={(event) => {
+                                            handleShowDialog(event, {
+                                                bioAutofocus: true
+                                            });
+                                        }}>{memberBio ? memberBio : 'Add your bio'}</button>
                                 </div>
                             </Transition>
                         </div>
diff --git a/apps/comments-ui/src/components/modals/AddDetailsDialog.js b/apps/comments-ui/src/components/modals/AddDetailsDialog.js
index 3d2013c09a..dc146dab0b 100644
--- a/apps/comments-ui/src/components/modals/AddDetailsDialog.js
+++ b/apps/comments-ui/src/components/modals/AddDetailsDialog.js
@@ -26,37 +26,27 @@ const AddNameDialog = (props) => {
     };
 
     const submit = async () => {
-        // When it's both name and bio
-        if (!props.bioOnly) {
-            if (name.trim() !== '') {
-                await dispatchAction('updateMember', {
-                    name,
-                    bio
-                });
-                close(true);
-            } else {
-                setError({name: 'Enter your name'});
-                setName('');
-                inputNameRef.current?.focus();
-            }
-        // When it's only bio
-        } else {
+        if (name.trim() !== '') {
             await dispatchAction('updateMember', {
+                name,
                 bio
             });
-
             close(true);
+        } else {
+            setError({name: 'Enter your name'});
+            setName('');
+            inputNameRef.current?.focus();
         }
     };
 
     // using <input autofocus> breaks transitions in browsers. So we need to use a timer
     useEffect(() => {
         const timer = setTimeout(() => {
-            if (!props.bioOnly) {
-                inputNameRef.current?.focus();
-            } else {
+            if (props.bioAutofocus) {
                 inputBioRef.current?.focus();
-            }
+            } else {
+                inputNameRef.current?.focus();
+            }  
         }, 200);
 
         return () => {
@@ -69,43 +59,39 @@ const AddNameDialog = (props) => {
             <h1 className="font-sans font-bold tracking-tight text-[24px] mb-3 text-black">Add context to your comments</h1>
             <p className="font-sans text-[1.45rem] text-neutral-500 px-4 sm:px-8 leading-9">For a healthy discussion, let other members know who you are when commenting.</p>
             <section className="mt-8 text-left">
-                {!props.bioOnly &&
-                    <>
-                        <div className="flex flex-row mb-2 justify-between">
-                            <label htmlFor="comments-name" className="font-sans font-medium text-sm">Name</label>
-                            <Transition
-                                show={!!error.name}
-                                enter="transition duration-300 ease-out"
-                                enterFrom="opacity-0"
-                                enterTo="opacity-100"
-                                leave="transition duration-100 ease-out"
-                                leaveFrom="opacity-100"
-                                leaveTo="opacity-0"
-                            >
-                                <div className="font-sans text-sm text-red-500">{error.name}</div>
-                            </Transition>
-                        </div>
-                        <input
-                            id="comments-name"
-                            className={`transition-[border-color] duration-200 font-sans px-3 rounded border border-neutral-200 focus:border-neutral-300 w-full outline-0 h-[42px] flex items-center ${error.name && 'border-red-500 focus:border-red-500'}`}
-                            type="text"
-                            name="name"
-                            ref={inputNameRef}
-                            value={name}
-                            placeholder="Jamie Larson"
-                            onChange={(e) => {
-                                setName(e.target.value);
-                            }}
-                            onKeyDown={(e) => {
-                                if (e.key === 'Enter') {
-                                    setName(e.target.value);
-                                    submit();
-                                }
-                            }}
-                            maxLength="64"
-                        />
-                    </>
-                }
+                <div className="flex flex-row mb-2 justify-between">
+                    <label htmlFor="comments-name" className="font-sans font-medium text-sm">Name</label>
+                    <Transition
+                        show={!!error.name}
+                        enter="transition duration-300 ease-out"
+                        enterFrom="opacity-0"
+                        enterTo="opacity-100"
+                        leave="transition duration-100 ease-out"
+                        leaveFrom="opacity-100"
+                        leaveTo="opacity-0"
+                    >
+                        <div className="font-sans text-sm text-red-500">{error.name}</div>
+                    </Transition>
+                </div>
+                <input
+                    id="comments-name"
+                    className={`transition-[border-color] duration-200 font-sans px-3 rounded border border-neutral-200 focus:border-neutral-300 w-full outline-0 h-[42px] flex items-center ${error.name && 'border-red-500 focus:border-red-500'}`}
+                    type="text"
+                    name="name"
+                    ref={inputNameRef}
+                    value={name}
+                    placeholder="Jamie Larson"
+                    onChange={(e) => {
+                        setName(e.target.value);
+                    }}
+                    onKeyDown={(e) => {
+                        if (e.key === 'Enter') {
+                            setName(e.target.value);
+                            submit();
+                        }
+                    }}
+                    maxLength="64"
+                />
                 <div className="flex flex-row mt-4 mb-2 justify-between">
                     <label htmlFor="comments-name" className="font-sans font-medium text-sm">Bio</label>
                     <div className={`font-sans text-sm text-neutral-400 ${(bioCharsLeft === 0) && 'text-red-500'}`}><b>{bioCharsLeft}</b> characters left</div>