From 20fe790e5dbfa8bca37268446f4f4ecdb6852439 Mon Sep 17 00:00:00 2001 From: James Morris Date: Tue, 9 Aug 2022 12:40:59 +0100 Subject: [PATCH] First round of improving the name and bio modal refs https://github.com/TryGhost/Team/issues/1756 --- apps/comments-ui/src/components/Form.js | 2 +- .../src/components/modals/AddDetailsDialog.js | 230 ++++++++++++------ .../src/components/modals/CloseButton.js | 2 +- .../src/components/modals/GenericDialog.js | 8 +- .../src/components/modals/ReportDialog.js | 8 +- 5 files changed, 169 insertions(+), 81 deletions(-) diff --git a/apps/comments-ui/src/components/Form.js b/apps/comments-ui/src/components/Form.js index 582a08ebd3..8421dcbf5a 100644 --- a/apps/comments-ui/src/components/Form.js +++ b/apps/comments-ui/src/components/Form.js @@ -423,7 +423,7 @@ const Form = (props) => { handleShowDialog(event, { bioAutofocus: true }); - }}>{memberBio ? memberBio : 'Add your bio'} + }}>{memberBio ? memberBio : 'Add your expertise'} {memberBio && } diff --git a/apps/comments-ui/src/components/modals/AddDetailsDialog.js b/apps/comments-ui/src/components/modals/AddDetailsDialog.js index 0704c7667a..948f8ebd47 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 [exampleProfiles, setExampleProfiles] = useState([]); + const [exampleExpertise, setExampleExpertise] = useState('Head of Marketing'); + const maxBioChars = 50; let initialBioChars = maxBioChars; if (member.bio) { @@ -20,6 +23,10 @@ const AddNameDialog = (props) => { const [error, setError] = useState({name: '', bio: ''}); + const stopPropagation = (event) => { + event.stopPropagation(); + }; + const close = (succeeded) => { dispatchAction('closePopup'); props.callback(succeeded); @@ -39,8 +46,49 @@ const AddNameDialog = (props) => { } }; + const generateExampleProfiles = () => { + let returnable = []; + let dummyData = [ + {avatar: 'https://images.unsplash.com/photo-1607746882042-944635dfe10e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80', name: 'Sophie Joan', expertise: 'Freelance Writer'}, + {avatar: 'https://images.unsplash.com/photo-1569913486515-b74bf7751574?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1289&q=80', name: 'Naomi Schiff', expertise: 'Founder @ Acme Inc'}, + {avatar: 'https://images.unsplash.com/photo-1544725176-7c40e5a71c5e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2667&q=80', name: 'Katrina Klosp', expertise: 'Local Resident'}, + {avatar: 'https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1361&q=80', name: 'Laura Smith', expertise: 'Craft Maker'}, + {avatar: 'https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1760&q=80', name: 'Peter Kristy', expertise: 'Design Consultant'}, + {avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1364&q=80', name: 'Linda Lo', expertise: 'Wedding Photographer'}, + {avatar: 'https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1760&q=80', name: 'Darren Mckenzie', expertise: 'Senior Engineer'}, + {avatar: 'https://images.unsplash.com/photo-1566492031773-4f4e44671857?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80', name: 'Jack Tomlin', expertise: 'Mid-level UX Designer'} + ]; + + // setup fake users + for (let i = 0; i < 4; i++) { + let dummyIndex = Math.floor(Math.random() * dummyData.length); + returnable.push(dummyData[dummyIndex]); + dummyData.splice(dummyIndex, 1); + } + + return returnable; + }; + + const generateExampleExpertise = () => { + let dummyData = [ + 'Freelance Copywriter', + 'Head of Marketing', + 'Junior Developer', + 'Full-time Parent', + 'Local Resident', + 'English Teacher', + 'Support Officer', + 'Professional Athlete' + ]; + + return dummyData[Math.floor(Math.random() * dummyData.length)]; + }; + // using breaks transitions in browsers. So we need to use a timer useEffect(() => { + setExampleProfiles(generateExampleProfiles()); + setExampleExpertise(generateExampleExpertise()); + const timer = setTimeout(() => { if (props.bioAutofocus) { inputBioRef.current?.focus(); @@ -52,80 +100,122 @@ const AddNameDialog = (props) => { return () => { clearTimeout(timer); }; - }, [inputNameRef]); + }, [inputNameRef, inputBioRef]); + + const renderExampleProfile = (index) => { + return (exampleProfiles[index] ? + +
+
+
+
+ {exampleProfiles[index].name} +
+
+ {exampleProfiles[index].expertise} +
+
+
+ : null + ); + }; return ( - <> -

Add to your profile

-

For a healthy discussion, let other members know who you are when commenting.

-
-
- - -
{error.name}
- +
+
+
+
+ {exampleProfiles.length > 0 && ( + <> + {renderExampleProfile(0)} + {renderExampleProfile(1)} + {renderExampleProfile(2)} + {renderExampleProfile(3)} + + )} +
- { - setName(e.target.value); - }} - onKeyDown={(e) => { - if (e.key === 'Enter') { - setName(e.target.value); - submit(); - } - }} - maxLength="64" - /> -
- -
{bioCharsLeft} characters left
+
+

Complete your profile.

+

Add context to your comment, share your name and expertise to foster a healthy discussion.

+
+
+ + +
{error.name}
+ +
+ { + setName(e.target.value); + }} + onKeyDown={(e) => { + if (e.key === 'Enter') { + setName(e.target.value); + submit(); + } + }} + maxLength="64" + /> +
+ +
{bioCharsLeft} characters left
+
+ { + let bioText = e.target.value; + setBioCharsLeft(maxBioChars - bioText.length); + setBio(bioText); + }} + onKeyDown={(e) => { + if (e.key === 'Enter') { + setBio(e.target.value); + submit(); + } + }} + maxLength={maxBioChars} + /> + +
- { - let bioText = e.target.value; - setBioCharsLeft(maxBioChars - bioText.length); - setBio(bioText); - }} - onKeyDown={(e) => { - if (e.key === 'Enter') { - setBio(e.target.value); - submit(); - } - }} - maxLength={maxBioChars} - /> - -
- close(false)} /> - + close(false)} /> +
+ ); }; diff --git a/apps/comments-ui/src/components/modals/CloseButton.js b/apps/comments-ui/src/components/modals/CloseButton.js index 8c8afbe2d4..059f29b317 100644 --- a/apps/comments-ui/src/components/modals/CloseButton.js +++ b/apps/comments-ui/src/components/modals/CloseButton.js @@ -3,7 +3,7 @@ import {ReactComponent as CloseIcon} from '../../images/icons/close.svg'; const CloseButton = (props) => { return ( - ); diff --git a/apps/comments-ui/src/components/modals/GenericDialog.js b/apps/comments-ui/src/components/modals/GenericDialog.js index 50b5e6a4c6..a81ba3d00c 100644 --- a/apps/comments-ui/src/components/modals/GenericDialog.js +++ b/apps/comments-ui/src/components/modals/GenericDialog.js @@ -14,10 +14,6 @@ const GenericDialog = (props) => { } }; - const stopPropagation = (event) => { - event.stopPropagation(); - }; - useEffect(() => { const listener = (event) => { if (event.key === 'Escape') { @@ -52,9 +48,7 @@ const GenericDialog = (props) => { leaveFrom="translate-y-0 opacity-100" leaveTo="translate-y-4 opacity-0" > -
- {props.children} -
+ {props.children} diff --git a/apps/comments-ui/src/components/modals/ReportDialog.js b/apps/comments-ui/src/components/modals/ReportDialog.js index fa4846bf0c..48ada84410 100644 --- a/apps/comments-ui/src/components/modals/ReportDialog.js +++ b/apps/comments-ui/src/components/modals/ReportDialog.js @@ -27,6 +27,10 @@ const ReportDialog = (props) => { const {dispatchAction} = useContext(AppContext); + const stopPropagation = (event) => { + event.stopPropagation(); + }; + const close = (event) => { dispatchAction('closePopup'); }; @@ -48,7 +52,7 @@ const ReportDialog = (props) => { }; return ( - <> +

You sure you want to report?

You request will be sent to the owner of this site.

@@ -60,7 +64,7 @@ const ReportDialog = (props) => {

No,

- +
); };