Wired saving member's name for comments

refs https://github.com/TryGhost/Team/issues/1682

- wires member name to be saved from the popup for adding comments

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 */

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 (
         <GenericDialog show={props.show} cancel={props.cancel}>
             <h1 className="font-sans font-bold tracking-tight text-[24px] mb-3 text-black">Add context to your comment</h1>
@@ -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"
                 />
                 <button
                     className="transition 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-blue-700"
-                    onClick={props.submit}
+                    onClick={() => {
+                        dispatchAction('updateMemberName', {
+                            name
+                        });
+                        props.submit();
+                    }}
                 >
                     Save
                 </button>
@@ -32,4 +42,4 @@ const AddNameDialog = (props) => {
     );
 };
 
-export default AddNameDialog;
+export default AddNameDialog;

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)