From 0a1b1eb70a2d97785ed955580cc50b4c3a6347b7 Mon Sep 17 00:00:00 2001
From: James Morris <moreofmorris@users.noreply.github.com>
Date: Thu, 4 Aug 2022 13:26:55 +0100
Subject: [PATCH] Added in the max length counter for the bio modal

refs https://github.com/TryGhost/Team/issues/1716
---
 .../src/components/modals/AddDetailsDialog.js | 21 +++++++------------
 1 file changed, 8 insertions(+), 13 deletions(-)

diff --git a/apps/comments-ui/src/components/modals/AddDetailsDialog.js b/apps/comments-ui/src/components/modals/AddDetailsDialog.js
index 80a515871a..190ea6b84e 100644
--- a/apps/comments-ui/src/components/modals/AddDetailsDialog.js
+++ b/apps/comments-ui/src/components/modals/AddDetailsDialog.js
@@ -11,6 +11,9 @@ const AddNameDialog = (props) => {
     const [name, setName] = useState(member.name ?? '');
     const [bio, setBio] = useState(member.bio ?? '');
 
+    const maxBioCharsLeft = 50;
+    const [bioCharsLeft, setBioCharsLeft] = useState(maxBioCharsLeft);
+
     const [error, setError] = useState({name: '', bio: ''});
 
     const close = (succeeded) => {
@@ -101,28 +104,20 @@ const AddNameDialog = (props) => {
                 }
                 <div className="flex flex-row mt-4 mb-2 justify-between">
                     <label htmlFor="comments-name" className="font-sans font-medium text-sm">Bio</label>
-                    <Transition
-                        show={!!error.bio}
-                        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.bio}</div>
-                    </Transition>
+                    <div className={`font-sans text-sm text-neutral-400 ${(bioCharsLeft === 0) && 'text-red-500'}`}><b>{bioCharsLeft}</b> characters left</div>
                 </div>
                 <input
                     id="comments-bio"
-                    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.bio && 'border-red-500 focus:border-red-500'}`}
+                    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 ${(bioCharsLeft === 0) && 'border-red-500 focus:border-red-500'}`}
                     type="text"
                     name="bio"
                     ref={inputBioRef}
                     value={bio}
                     placeholder="Head of Marketing at Acme, Inc"
                     onChange={(e) => {
-                        setBio(e.target.value);
+                        let bioText = e.target.value;
+                        setBioCharsLeft(maxBioCharsLeft - bioText.length);
+                        setBio(bioText);
                     }}
                     onKeyDown={(e) => {
                         if (e.key === 'Enter') {