mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-01-06 22:40:14 -05:00
Replaced all references of "Bio" to "Expertise" for Comments (#10)
ref https://github.com/TryGhost/Team/issues/1772 - all references of "Bio" to "Expertise" for Comments - this commit is a breaking change as it relies on the API that returns `expertise` instead of `bio`.
This commit is contained in:
Ronald Langeveld
GitHub
parent
778080eebe
commit
878e5eba1d
6 changed files with 41 additions and 41 deletions
|
|
@ -285,7 +285,7 @@ async function editComment({state, api, data: {comment, parent}}) {
|
|||
}
|
||||
|
||||
async function updateMember({data, state, api}) {
|
||||
const {name, bio} = data;
|
||||
const {name, expertise} = data;
|
||||
const patchData = {};
|
||||
|
||||
const originalName = state?.member?.name;
|
||||
|
|
@ -294,10 +294,10 @@ async function updateMember({data, state, api}) {
|
|||
patchData.name = name;
|
||||
}
|
||||
|
||||
const originalBio = state?.member?.bio;
|
||||
if (bio !== undefined && originalBio !== bio) {
|
||||
const originalExpertise = state?.member?.expertise;
|
||||
if (expertise !== undefined && originalExpertise !== expertise) {
|
||||
// Allow to set it to an empty string or to null
|
||||
patchData.bio = bio;
|
||||
patchData.expertise = expertise;
|
||||
}
|
||||
|
||||
if (Object.keys(patchData).length > 0) {
|
||||
|
|
|
|||
|
|
@ -116,16 +116,16 @@ function UnpublishedComment({comment, openEditMode}) {
|
|||
|
||||
// Helper components
|
||||
|
||||
function MemberBio({comment}) {
|
||||
function MemberExpertise({comment}) {
|
||||
const {member} = useContext(AppContext);
|
||||
const memberBio = member && comment.member && comment.member.uuid === member.uuid ? member.bio : comment?.member?.bio;
|
||||
const memberExpertise = member && comment.member && comment.member.uuid === member.uuid ? member.expertise : comment?.member?.expertise;
|
||||
|
||||
if (!memberBio) {
|
||||
if (!memberExpertise) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<span>{memberBio}<span className="mx-[0.3em]">·</span></span>
|
||||
<span>{memberExpertise}<span className="mx-[0.3em]">·</span></span>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -193,7 +193,7 @@ function CommentHeader({comment}) {
|
|||
<AuthorName comment={comment} />
|
||||
<div className="flex items-baseline pr-4 font-sans text-[14px] tracking-tight text-[rgba(0,0,0,0.5)] dark:text-[rgba(255,255,255,0.5)]">
|
||||
<span>
|
||||
<MemberBio comment={comment}/>
|
||||
<MemberExpertise comment={comment}/>
|
||||
<span title={formatExplicitTime(comment.created_at)}>{formatRelativeTime(comment.created_at)}</span>
|
||||
<EditedInfo comment={comment} />
|
||||
</span>
|
||||
|
|
@ -214,7 +214,7 @@ function CommentBody({html}) {
|
|||
|
||||
function CommentMenu({comment, toggleReplyMode, isInReplyMode, openEditMode, parent}) {
|
||||
// If this comment is from the current member, always override member
|
||||
// with the member from the context, so we update the bio in existing comments when we change it
|
||||
// with the member from the context, so we update the expertise in existing comments when we change it
|
||||
const {member, commentsEnabled} = useContext(AppContext);
|
||||
|
||||
const paidOnly = commentsEnabled === 'paid';
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ const Form = (props) => {
|
|||
|
||||
const {comment, commentsCount} = props;
|
||||
const memberName = member?.name ?? comment?.member?.name;
|
||||
const memberBio = member?.bio ?? comment?.member?.bio;
|
||||
const memberExpertise = member?.expertise ?? comment?.member?.expertise;
|
||||
|
||||
// Keep track of the amount of open forms
|
||||
useEffect(() => {
|
||||
|
|
@ -393,7 +393,7 @@ const Form = (props) => {
|
|||
|
||||
dispatchAction('openPopup', {
|
||||
type: 'addDetailsPopup',
|
||||
bioAutofocus: options.bioAutofocus ?? false,
|
||||
expertiseAutofocus: options.expertiseAutofocus ?? false,
|
||||
callback: () => {
|
||||
editor?.commands.focus();
|
||||
setPreventClosing(false);
|
||||
|
|
@ -467,17 +467,17 @@ const Form = (props) => {
|
|||
className="font-sans text-[17px] font-bold tracking-tight text-[rgb(23,23,23)] dark:text-[rgba(255,255,255,0.85)]"
|
||||
onClick={(event) => {
|
||||
handleShowPopup(event, {
|
||||
bioAutofocus: false
|
||||
expertiseAutofocus: false
|
||||
});
|
||||
}}>{memberName ? memberName : 'Anonymous'}</div>
|
||||
<div className="flex items-baseline justify-start">
|
||||
<button
|
||||
className={`group flex max-w-[80%] items-center justify-start whitespace-nowrap text-left font-sans text-[14px] tracking-tight text-[rgba(0,0,0,0.5)] transition duration-150 hover:text-[rgba(0,0,0,0.75)] dark:text-[rgba(255,255,255,0.5)] dark:hover:text-[rgba(255,255,255,0.4)] sm:max-w-[90%] ${!memberBio && 'text-[rgba(0,0,0,0.3)] hover:text-[rgba(0,0,0,0.5)] dark:text-[rgba(255,255,255,0.3)]'}`}
|
||||
className={`group flex max-w-[80%] items-center justify-start whitespace-nowrap text-left font-sans text-[14px] tracking-tight text-[rgba(0,0,0,0.5)] transition duration-150 hover:text-[rgba(0,0,0,0.75)] dark:text-[rgba(255,255,255,0.5)] dark:hover:text-[rgba(255,255,255,0.4)] sm:max-w-[90%] ${!memberExpertise && 'text-[rgba(0,0,0,0.3)] hover:text-[rgba(0,0,0,0.5)] dark:text-[rgba(255,255,255,0.3)]'}`}
|
||||
onClick={(event) => {
|
||||
handleShowPopup(event, {
|
||||
bioAutofocus: true
|
||||
expertiseAutofocus: true
|
||||
});
|
||||
}}><span className="... overflow-hidden text-ellipsis">{memberBio ? memberBio : 'Add your expertise'}</span>
|
||||
}}><span className="... overflow-hidden text-ellipsis">{memberExpertise ? memberExpertise : 'Add your expertise'}</span>
|
||||
{memberBio && <EditIcon className="ml-1 h-[12px] w-[12px] -translate-x-[6px] stroke-[rgba(0,0,0,0.5)] opacity-0 transition-all duration-100 ease-out group-hover:translate-x-0 group-hover:stroke-[rgba(0,0,0,0.75)] group-hover:opacity-100 dark:stroke-[rgba(255,255,255,0.5)] dark:group-hover:stroke-[rgba(255,255,255,0.3)]" />}
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,20 +6,20 @@ import {isMobile} from '../../utils/helpers';
|
|||
|
||||
const AddDetailsPopup = (props) => {
|
||||
const inputNameRef = useRef(null);
|
||||
const inputBioRef = useRef(null);
|
||||
const inputExpertiseRef = useRef(null);
|
||||
const {dispatchAction, member, accentColor} = useContext(AppContext);
|
||||
|
||||
const [name, setName] = useState(member.name ?? '');
|
||||
const [bio, setBio] = useState(member.bio ?? '');
|
||||
const [expertise, setExpertise] = useState(member.expertise ?? '');
|
||||
|
||||
const maxBioChars = 50;
|
||||
let initialBioChars = maxBioChars;
|
||||
if (member.bio) {
|
||||
initialBioChars -= member.bio.length;
|
||||
const maxExpertiseChars = 50;
|
||||
let initialExpertiseChars = maxExpertiseChars;
|
||||
if (member.expertise) {
|
||||
initialExpertiseChars -= member.expertise.length;
|
||||
}
|
||||
const [bioCharsLeft, setBioCharsLeft] = useState(initialBioChars);
|
||||
const [expertiseCharsLeft, setExpertiseCharsLeft] = useState(initialExpertiseChars);
|
||||
|
||||
const [error, setError] = useState({name: '', bio: ''});
|
||||
const [error, setError] = useState({name: '', expertise: ''});
|
||||
|
||||
const stopPropagation = (event) => {
|
||||
event.stopPropagation();
|
||||
|
|
@ -34,7 +34,7 @@ const AddDetailsPopup = (props) => {
|
|||
if (name.trim() !== '') {
|
||||
await dispatchAction('updateMember', {
|
||||
name,
|
||||
bio
|
||||
expertise
|
||||
});
|
||||
close(true);
|
||||
} else {
|
||||
|
|
@ -48,8 +48,8 @@ const AddDetailsPopup = (props) => {
|
|||
useEffect(() => {
|
||||
if (!isMobile()) {
|
||||
const timer = setTimeout(() => {
|
||||
if (props.bioAutofocus) {
|
||||
inputBioRef.current?.focus();
|
||||
if (props.expertiseAutofocus) {
|
||||
inputExpertiseRef.current?.focus();
|
||||
} else {
|
||||
inputNameRef.current?.focus();
|
||||
}
|
||||
|
|
@ -59,7 +59,7 @@ const AddDetailsPopup = (props) => {
|
|||
clearTimeout(timer);
|
||||
};
|
||||
}
|
||||
}, [inputNameRef, inputBioRef, props.bioAutofocus]);
|
||||
}, [inputNameRef, inputExpertiseRef, props.expertiseAutofocus]);
|
||||
|
||||
const renderExampleProfiles = (index) => {
|
||||
const renderEl = (profile) => {
|
||||
|
|
@ -155,28 +155,28 @@ const AddDetailsPopup = (props) => {
|
|||
/>
|
||||
<div className="mt-6 mb-2 flex flex-row justify-between">
|
||||
<label htmlFor="comments-name" className="font-sans text-[1.3rem] font-semibold">Expertise</label>
|
||||
<div className={`font-sans text-[1.3rem] text-neutral-400 ${(bioCharsLeft === 0) && 'text-red-500'}`}><b>{bioCharsLeft}</b> characters left</div>
|
||||
<div className={`font-sans text-[1.3rem] text-neutral-400 ${(expertiseCharsLeft === 0) && 'text-red-500'}`}><b>{expertiseCharsLeft}</b> characters left</div>
|
||||
</div>
|
||||
<input
|
||||
id="comments-bio"
|
||||
className={`flex h-[42px] w-full items-center rounded border border-neutral-200 px-3 font-sans text-[16px] outline-0 transition-[border-color] duration-200 focus:border-neutral-300 ${(bioCharsLeft === 0) && 'border-red-500 focus:border-red-500'}`}
|
||||
className={`flex h-[42px] w-full items-center rounded border border-neutral-200 px-3 font-sans text-[16px] outline-0 transition-[border-color] duration-200 focus:border-neutral-300 ${(expertiseCharsLeft === 0) && 'border-red-500 focus:border-red-500'}`}
|
||||
type="text"
|
||||
name="bio"
|
||||
ref={inputBioRef}
|
||||
value={bio}
|
||||
name="expertise"
|
||||
ref={inputExpertiseRef}
|
||||
value={expertise}
|
||||
placeholder="Head of Marketing at Acme, Inc"
|
||||
onChange={(e) => {
|
||||
let bioText = e.target.value;
|
||||
setBioCharsLeft(maxBioChars - bioText.length);
|
||||
setBio(bioText);
|
||||
let expertiseText = e.target.value;
|
||||
setExpertiseCharsLeft(maxExpertiseChars - expertiseText.length);
|
||||
setExpertise(expertiseText);
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
setBio(e.target.value);
|
||||
setExpertise(e.target.value);
|
||||
submit();
|
||||
}
|
||||
}}
|
||||
maxLength={maxBioChars}
|
||||
maxLength={maxExpertiseChars}
|
||||
/>
|
||||
<button
|
||||
className={`mt-10 flex h-[42px] w-full items-center justify-center rounded-md px-8 font-sans text-[15px] font-semibold text-white opacity-100 transition-opacity duration-200 ease-linear hover:opacity-90`}
|
||||
|
|
|
|||
|
|
@ -71,11 +71,11 @@ function setupGhostApi({siteUrl = window.location.origin, apiUrl, apiKey}) {
|
|||
});
|
||||
},
|
||||
|
||||
update({name, bio}) {
|
||||
update({name, expertise}) {
|
||||
const url = endpointFor({type: 'members', resource: 'member'});
|
||||
const body = {
|
||||
name,
|
||||
bio
|
||||
expertise
|
||||
};
|
||||
|
||||
return makeRequest({
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ const ObjectId = require('bson-objectid').default;
|
|||
export function buildMember(override) {
|
||||
return {
|
||||
avatar_image: '',
|
||||
bio: 'Head of Testing',
|
||||
expertise: 'Head of Testing',
|
||||
id: ObjectId(),
|
||||
name: 'Test Member',
|
||||
uuid: '613e9667-4fa2-4ff4-aa62-507220103d41',
|
||||
|
|
|
|||
Loading…
Reference in a new issue