Peterson_Fix_Weekly_Summaries_edit_Last_week

src/actions/weeklySummaries.js

@@ -79,7 +79,7 @@ export const updateWeeklySummaries = (userId, weeklySummariesData) => {
 
       // Merge the weekly summaries related changes with the user's profile.
       const {mediaUrl, weeklySummaries, weeklySummariesCount } = weeklySummariesData;
-      console.log('respon get', response.data)
+
       // update the changes on weekly summaries link into admin links
       let doesMediaFolderExist = false;
       for (const link of adminLinks) {

src/components/Timelog/WeeklySummaries.jsx

@@ -1,25 +1,42 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect} from 'react';
 import parse from 'html-react-parser';
 import './Timelog.css'
-import updateWeeklySummaries from 'actions/weeklySummaries';
+import {updateWeeklySummaries} from '../../actions/weeklySummaries';
 import { getUserProfile, updateUserProfile } from 'actions/userProfile';
 import hasPermission from 'utils/permissions';
 import { connect, useDispatch, useSelector } from 'react-redux';
 import { Editor } from '@tinymce/tinymce-react';
 import { userProfileByIdReducer } from 'reducers/userProfileByIdReducer';
+import Spinner from 'react-bootstrap/Spinner';
 
 const WeeklySummaries = ({ userProfile }) => {
+
+  useEffect(() => {
+      setEditedSummaries([
+        userProfile.weeklySummaries[0]?.summary || '',
+        userProfile.weeklySummaries[1]?.summary || '',
+        userProfile.weeklySummaries[2]?.summary || '',
+      ]);
+
+  }, [userProfile]);
+
   const darkMode = useSelector(state => state.theme.darkMode)
 
   // Initialize state variables for editing and original summaries
+
   const [editing, setEditing] = useState([false, false, false]);
+
   const [editedSummaries, setEditedSummaries] = useState([
     userProfile.weeklySummaries[0]?.summary || '',
     userProfile.weeklySummaries[1]?.summary || '',
     userProfile.weeklySummaries[2]?.summary || '',
   ]);
   const [originalSummaries, setOriginalSummaries] = useState([...editedSummaries]);
 
+  const [LoadingHandleSave, setLoadingHandleSave] = useState(null);
+
+  const [wordCount, setWordCount] = useState(0);
+
   const dispatch = useDispatch();
   const canEdit = dispatch(hasPermission('putUserProfile'));
 
@@ -32,14 +49,13 @@ const WeeklySummaries = ({ userProfile }) => {
   }
 
   const toggleEdit = (index) => {
-    // Toggle the editing state for the specified summary
-    const newEditing = [...editing];
-    newEditing[index] = !newEditing[index];
-    setEditing(newEditing);
+      const newEditing = editing.map((value, i) => (i === index ? !value : false));
+      setEditing(newEditing);    
   };
 
-  const handleSummaryChange = (event, index) => {
-    // Update the edited summary content
+  const handleSummaryChange = (event, index, editor) => {
+    const wordCounter = editor.plugins.wordcount.getCount();
+    setWordCount(wordCounter)    
     const newEditedSummaries = [...editedSummaries];
     newEditedSummaries[index] = event.target.value;
     setEditedSummaries(newEditedSummaries);
@@ -50,31 +66,38 @@ const WeeklySummaries = ({ userProfile }) => {
     const newEditedSummaries = [...editedSummaries];
     newEditedSummaries[index] = userProfile.weeklySummaries[index]?.summary || '';
     setEditedSummaries(newEditedSummaries);
-    
+
     // Toggle off editing mode
     toggleEdit(index);
-  };
 
+  };
+
   const handleSave = async (index) => {
     // Save the edited summary content and toggle off editing mode
     const editedSummary = editedSummaries[index];
-    // Check if the edited summary is not blank and contains at least 50 words
-    const wordCount = editedSummary.split(/\s+/).filter(Boolean).length;
+
     if (editedSummary.trim() !== '' && wordCount >= 50) {
+      setLoadingHandleSave(index);
       const updatedUserProfile = {
         ...userProfile,
         weeklySummaries: userProfile.weeklySummaries.map((item, i) =>
-          i === index ? { ...item, summary: editedSummary } : item
+        i === index ? { ...item, summary: editedSummary } : item
         )
       };
-
-    await dispatch(updateUserProfile(userProfile._id, updatedUserProfile));
+
+    // This code updates the summary.  
+    await dispatch(updateUserProfile(userProfile));
+
+    // This code saves edited weekly summaries in MongoDB.
+    await dispatch(updateWeeklySummaries(userProfile._id, updatedUserProfile));
     await dispatch(getUserProfile(userProfile._id));
-      // Toggle off editing mode
-      toggleEdit(index);
-    } else {
-      // Invalid summary, show an error message or handle it as needed
-      alert('Please enter a valid summary with at least 50 words.');
+    await setLoadingHandleSave(null);
+     setLoadingHandleSave(null);
+    // Toggle off editing mode
+    toggleEdit(index);    
+  } else {
+    // Invalid summary, show an error message or handle it as needed
+    alert('Please enter a valid summary with at least 50 words.');
     }
 
   };
@@ -96,10 +119,20 @@ const WeeklySummaries = ({ userProfile }) => {
               autoresize_bottom_margin: 1,
             }}
             value={editedSummaries[index]}
-            onEditorChange={(content) => handleSummaryChange({ target: { value: content } }, index)}
+            onEditorChange={(content, editor) => handleSummaryChange({ target: { value: content } }, index, editor)}
+            onGetContent={(content, editor) =>   setWordCount(editor.plugins.wordcount.getCount())}
           />
-          <button className = "button save-button" onClick={() => handleSave(index)}>Save</button>
+
+          <div style={{marginTop: '10px'}}>
+
+          <button className = "button save-button" onClick={() => handleSave(index)} 
+          disabled={LoadingHandleSave === index} >
+          { LoadingHandleSave === index? <Spinner animation="border" size="sm" /> : 'Save' }
+          </button>
+
           <button className = "button cancel-button" onClick={() => handleCancel(index)}>Cancel</button>
+          </div>
+
         </div>
       );
     } else if (summary && (canEdit || currentUserID == loggedInUserId)) {