diff --git a/apps/comments-ui/src/actions.js b/apps/comments-ui/src/actions.js index 1b626d082c..b7a1fd332f 100644 --- a/apps/comments-ui/src/actions.js +++ b/apps/comments-ui/src/actions.js @@ -258,6 +258,29 @@ async function editComment({state, api, data: {comment, parent}}) { }; } +async function updateMemberName({data, state, api}) { + const {name} = data; + const originalName = state?.member?.name; + if (originalName !== name) { + try { + const member = await api.member.update({name}); + if (!member) { + throw new Error('Failed to update member'); + } + return { + member, + success: true + }; + } catch (err) { + return { + success: false, + error: err + }; + } + } + return null; +} + const Actions = { // Put your actions here addComment, @@ -269,7 +292,8 @@ const Actions = { unlikeComment, reportComment, addReply, - loadMoreComments + loadMoreComments, + updateMemberName }; /** Handle actions in the App, returns updated state */ diff --git a/apps/comments-ui/src/components/modals/AddNameDialog.js b/apps/comments-ui/src/components/modals/AddNameDialog.js index 5ef4fd4213..3c4bcdd8e9 100644 --- a/apps/comments-ui/src/components/modals/AddNameDialog.js +++ b/apps/comments-ui/src/components/modals/AddNameDialog.js @@ -1,7 +1,10 @@ -import React from 'react'; +import React, {useContext, useState} from 'react'; +import AppContext from '../../AppContext'; import GenericDialog from './GenericDialog'; const AddNameDialog = (props) => { + const {dispatchAction} = useContext(AppContext); + const [name, setName] = useState(''); return (

Add context to your comment

@@ -13,17 +16,24 @@ const AddNameDialog = (props) => { className="font-sans px-3 rounded border border-neutral-200 focus:border-neutral-300 w-full outline-0 h-[42px] flex items-center" type="text" name="name" - value="" + value={name} placeholder="Jamie Larson" autoFocus={true} - // onChange={e => onChange(e, name)} + onChange={(e) => { + setName(e.target.value); + }} // onKeyDown={e => onKeyDown(e, name)} // onBlur={e => onBlur(e, name)} maxLength="64" /> @@ -32,4 +42,4 @@ const AddNameDialog = (props) => { ); }; -export default AddNameDialog; \ No newline at end of file +export default AddNameDialog; diff --git a/apps/comments-ui/src/utils/api.js b/apps/comments-ui/src/utils/api.js index 8e82101469..f80fa83497 100644 --- a/apps/comments-ui/src/utils/api.js +++ b/apps/comments-ui/src/utils/api.js @@ -71,8 +71,30 @@ function setupGhostApi({siteUrl = window.location.origin, apiUrl, apiKey}) { } return res.json(); }); + }, + + update({name}) { + const url = endpointFor({type: 'members', resource: 'member'}); + const body = { + name + }; + + return makeRequest({ + url, + method: 'PUT', + headers: { + 'Content-Type': 'application/json' + }, + credentials: 'same-origin', + body: JSON.stringify(body) + }).then(function (res) { + if (!res.ok) { + return null; + } + return res.json(); + }); } - + }; // To fix pagination when we create new comments (or people post comments after you loaded the page, we need to only load comments creatd AFTER the page load)