Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-03 23:00:14 -05:00
Code Issues Activity

Aded in a basic Bio field into the Add Name dialog

Browse source
This commit is contained in:
James Morris 2022-07-26 11:45:10 +01:00
parent 1eb16692aa
commit b1e1d4e23b
1 changed files with 50 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
apps/comments-ui/src/components/modals/AddNameDialog.js
View file

@ -4,7 +4,8 @@ import CloseButton from './CloseButton';
import AppContext from '../../AppContext'; import AppContext from '../../AppContext';
const AddNameDialog = (props) => { const AddNameDialog = (props) => {
const inputRef = useRef(null); const inputNameRef = useRef(null);
const inputBioRef = useRef(null);
const {dispatchAction} = useContext(AppContext); const {dispatchAction} = useContext(AppContext);
const close = () => { const close = () => {
@ -16,37 +17,41 @@ const AddNameDialog = (props) => {
await dispatchAction('updateMemberName', { await dispatchAction('updateMemberName', {
name name
}); });
// TODO: need to save the bio, too
props.callback(); props.callback();
close(); close();
} else { } else {
setError('Enter your name'); setError({name: 'Enter your name'});
setName(''); setName('');
inputRef.current?.focus(); inputNameRef.current?.focus();
} }
}; };
// using <input autofocus> breaks transitions in browsers. So we need to use a timer // using <input autofocus> breaks transitions in browsers. So we need to use a timer
useEffect(() => { useEffect(() => {
const timer = setTimeout(() => { const timer = setTimeout(() => {
inputRef.current?.focus(); inputNameRef.current?.focus();
}, 200); }, 200);
return () => { return () => {
clearTimeout(timer); clearTimeout(timer);
}; };
}, [inputRef]); }, [inputNameRef]);
const [name, setName] = useState(''); const [name, setName] = useState('');
const [error, setError] = useState(''); const [bio, setBio] = useState('');
const [error, setError] = useState({name: '', bio: ''});
return ( return (
<> <>
<h1 className="font-sans font-bold tracking-tight text-[24px] mb-3 text-black">Add your name</h1> <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> <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"> <section className="mt-8 text-left">
<div className="flex flex-row mb-2 justify-between"> <div className="flex flex-row mb-2 justify-between">
<label htmlFor="comments-name" className="font-sans font-medium text-sm">Name</label> <label htmlFor="comments-name" className="font-sans font-medium text-sm">Name</label>
<Transition <Transition
show={!!error} show={!!error.name}
enter="transition duration-300 ease-out" enter="transition duration-300 ease-out"
enterFrom="opacity-0" enterFrom="opacity-0"
enterTo="opacity-100" enterTo="opacity-100"
@ -54,15 +59,15 @@ const AddNameDialog = (props) => {
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<div className="font-sans text-sm text-red-500">{error}</div> <div className="font-sans text-sm text-red-500">{error.name}</div>
</Transition> </Transition>
</div> </div>
<input <input
id="comments-name" 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 && '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 ${error.name && 'border-red-500 focus:border-red-500'}`}
type="text" type="text"
name="name" name="name"
ref={inputRef} ref={inputNameRef}
value={name} value={name}
placeholder="Jamie Larson" placeholder="Jamie Larson"
onChange={(e) => { onChange={(e) => {
@ -76,8 +81,41 @@ const AddNameDialog = (props) => {
}} }}
maxLength="64" 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>
<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>
<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'}`}
type="text"
name="bio"
ref={inputBioRef}
value={bio}
placeholder="Head of Marketing at Acme, Inc"
onChange={(e) => {
setBio(e.target.value);
}}
onKeyDown={(e) => {
if (e.key === 'Enter') {
setBio(e.target.value);
submit();
}
}}
maxLength="50"
/>
<button <button
className="transition-opacity duration-200 ease-linear w-full h-[44px] mt-4 px-8 flex items-center justify-center rounded-md text-white font-sans font-semibold text-[15px] bg-[#3204F5] opacity-100 hover:opacity-90" className="transition-opacity duration-200 ease-linear w-full h-[44px] mt-10 px-8 flex items-center justify-center rounded-md text-white font-sans font-semibold text-[15px] bg-[#3204F5] opacity-100 hover:opacity-90"
onClick={submit} onClick={submit}
> >
Save Save