Implemented action to rename project

Author: stever

apps/web/src/components/ProjectEditor.jsx

@@ -24,7 +24,7 @@ export function ProjectEditor() {
     const renameInputReference = useRef(null);
 
     const [renameDialogVisible, setRenameDialogVisible] = useState(false);
-    const [newProjectName, setNewProjectName] = useState(undefined);
+    const [newProjectName, setNewProjectName] = useState('');
 
     const lang = useSelector(state => state?.project.lang);
     const code = useSelector(state => state?.project.code);
@@ -139,7 +139,7 @@ export function ProjectEditor() {
                             label="Cancel"
                             icon="pi pi-times"
                             onClick={() => {
-                                setNewProjectName(undefined);
+                                setNewProjectName('');
                                 setRenameDialogVisible(false);
                             }}
                             className="p-button-text"
@@ -149,7 +149,7 @@ export function ProjectEditor() {
                             icon="pi pi-check"
                             onClick={() => {
                                 dispatch(renameProject(newProjectName));
-                                setNewProjectName(undefined);
+                                setNewProjectName('');
                                 setRenameDialogVisible(false);
                             }}
                             autoFocus
@@ -168,7 +168,7 @@ export function ProjectEditor() {
                         onKeyDown={(e) => {
                             if (e.key === 'Enter') {
                                 dispatch(renameProject(newProjectName));
-                                setNewProjectName(undefined);
+                                setNewProjectName('');
                                 setRenameDialogVisible(false);
                             }
                         }}

apps/web/src/redux/project/actions.js

@@ -9,6 +9,7 @@ export const actionTypes = {
     saveCodeChanges: 'project/saveCodeChanges',
     deleteProject: 'project/deleteProject',
     renameProject: 'project/renameProject',
+    setProjectTitle: 'project/setProjectTitle',
     setErrorItems: 'project/setErrorItems',
 };
 
@@ -54,8 +55,14 @@ export const deleteProject = () => ({
     type: actionTypes.deleteProject
 });
 
-export const renameProject = () => ({
-    type: actionTypes.renameProject
+export const renameProject = (title) => ({
+    type: actionTypes.renameProject,
+    title
+});
+
+export const setProjectTitle = (title) => ({
+    type: actionTypes.setProjectTitle,
+    title
 });
 
 export const setErrorItems = (errorItems) => ({

apps/web/src/redux/project/reducers.js

@@ -70,6 +70,13 @@ function setErrorItems(state, action) {
     };
 }
 
+function setProjectTitle(state, action) {
+    return {
+        ...state,
+        title: action.title,
+    };
+}
+
 // -----------------------------------------------------------------------------
 // Reducer
 // -----------------------------------------------------------------------------
@@ -83,6 +90,7 @@ const actionsMap = {
     [actionTypes.setCode]: setCode,
     [actionTypes.setSavedCode]: setSavedCode,
     [actionTypes.setErrorItems]: setErrorItems,
+    [actionTypes.setProjectTitle]: setProjectTitle,
 };
 
 export default function reducer(state = initialState, action) {

apps/web/src/redux/project/sagas.js

@@ -2,7 +2,7 @@ import {takeLatest, put, select, call} from "redux-saga/effects";
 import gql from "graphql-tag";
 import {history} from "../store";
 import {gqlFetch} from "../../graphql_fetch";
-import {actionTypes, reset, receiveLoadedProject, setSavedCode, setSelectedTabIndex} from "./actions";
+import {actionTypes, reset, receiveLoadedProject, setSavedCode, setSelectedTabIndex, setProjectTitle} from "./actions";
 import {pause, reset as resetMachine} from "../jsspeccy/actions";
 import {handleException} from "../../errors";
 
@@ -35,6 +35,11 @@ export function* watchForDeleteProjectActions() {
     yield takeLatest(actionTypes.deleteProject, handleDeleteProjectActions);
 }
 
+// noinspection JSUnusedGlobalSymbols
+export function* watchForRenameProjectActions() {
+    yield takeLatest(actionTypes.renameProject, handleRenameProjectActions);
+}
+
 // -----------------------------------------------------------------------------
 // Action handlers
 // -----------------------------------------------------------------------------
@@ -180,3 +185,33 @@ function* handleDeleteProjectActions(_) {
         handleException(e);
     }
 }
+
+function* handleRenameProjectActions(action) {
+    try {
+        const userId = yield select((state) => state.identity.userId);
+        const projectId = yield select((state) => state.project.id);
+
+        const query = gql`
+            mutation ($project_id: uuid!, $title: String!) {
+                update_project_by_pk(pk_columns: {project_id: $project_id}, _set: {title: $title}) {
+                    project_id
+                }
+            }
+        `;
+
+        const variables = {
+            'project_id': projectId,
+            'title': action.title
+        };
+
+        // noinspection JSCheckFunctionSignatures
+        const response = yield call(gqlFetch, userId, query, variables);
+
+        // noinspection JSUnresolvedVariable
+        console.assert(response?.data?.update_project_by_pk?.project_id, response);
+
+        yield put(setProjectTitle(action.title));
+    } catch (e) {
+        handleException(e);
+    }
+}