150-autosave-feature-date-2025-01-23

components/WorkingDocs.tsx

@@ -1,33 +1,91 @@
 import styles from '../styles/workingDocsTable.module.css'; 
 
-const WorkingDocs = ({ handleChange, addNewDoc, docs, removeDoc, originalDocsCount, updateMyVariable }: any) => {
+type Doc = {
+  title?: string;
+  link?: string;
+};
+
+type WorkingDocsProps = {
+  /** The complete array of docs, both old + newly added. */
+  docs: Doc[];
+  /**
+   * Number of docs that existed in the DB before.
+   * If `index < originalDocsCount`, we treat it as an “existing doc”.
+   * Otherwise, it's a newly added doc.
+   */
+  originalDocsCount: number;
+
+  /** Called when a NEW doc changes (indexes >= originalDocsCount). */
+  handleChange: (e: any, newDocIndex: number) => void;
+
+  /** Called when the user clicks “Add New Working Document”. */
+  addNewDoc: () => void;
+
+  /** Called to remove a NEW doc from the parent's state. */
+  removeDoc: (newDocIndex: number) => void;
+
+  /**
+   * Called to update an OLD doc (i.e. in DB).
+   * If `e === null`, it means remove. Otherwise it’s a change event.
+   */
+  updateMyVariable: (e: any | null, oldDocIndex: number) => void;
+};
+
+const WorkingDocs = ({
+  docs,
+  originalDocsCount,
+  handleChange,
+  addNewDoc,
+  removeDoc,
+  updateMyVariable
+}: WorkingDocsProps) => {
+
+  /**
+   * Called whenever an input changes in the table row.
+   * If it's an existing doc (index < originalDocsCount),
+   * we call `updateMyVariable`. Otherwise, we call `handleChange`.
+   */
   const handleDocChange = (e: any, index: number) => {
     if (index < originalDocsCount) {
+      // This is an existing doc from the DB
       updateMyVariable(e, index);
     } else {
+      // This is a newly added doc
       handleChange(e, index - originalDocsCount);
     }
   };
 
+  /**
+   * Called when the user clicks the “X” to remove a doc row.
+   * If it’s an existing doc, call `updateMyVariable(null, index)`.
+   * If it’s a new doc, call `removeDoc(...)`.
+   */
   const handleDocRemove = (index: number) => {
     if (index < originalDocsCount) {
+      // Remove an existing doc from DB or mark it removed
       updateMyVariable(null, index);
     } else {
+      // Remove a new doc from local state
       removeDoc(index - originalDocsCount);
     }
   };
 
+  /**
+   * Called when the user clicks “Add New Working Document”.
+   * If we currently have 0 docs, we initialize the first doc as empty.
+   * Otherwise, we call `addNewDoc()` to push another blank doc to local.
+   */
   const handleAddNewDoc = () => {
     if (docs.length === 0) {
-      // Add the first document
+      // Force-initialize the very first doc
       handleChange({ target: { name: 'title', value: '' } }, 0);
       handleChange({ target: { name: 'link', value: '' } }, 0);
     } else {
-      // Add a new document
       addNewDoc();
     }
   };
 
+  /** Utility function to ensure links have a protocol. */
   const formatUrl = (url: string) => {
     if (!url?.startsWith('http://') && !url?.startsWith('https://')) {
       return `http://${url}`;
@@ -47,8 +105,9 @@ const WorkingDocs = ({ handleChange, addNewDoc, docs, removeDoc, originalDocsCou
           </tr>
         </thead>
         <tbody>
-          {docs.map((doc: any, index: number) => (
+          {docs.map((doc: Doc, index: number) => (
             <tr className={styles.tr} key={index}>
+              {/* TITLE */}
               <td className={styles.td}>
                 <input
                   className={styles.input}
@@ -59,8 +118,10 @@ const WorkingDocs = ({ handleChange, addNewDoc, docs, removeDoc, originalDocsCou
                   onChange={(e) => handleDocChange(e, index)}
                 />
               </td>
+
+              {/* LINK */}
               <td className={`${styles.td} ${styles.centerAligned} ${styles.linkCell}`}>
-                {/* Change here: Always show input fields if there's only one row */}
+                {/* If there's only 1 row total, or if it's a newly added doc, show the text input. */}
                 {(docs.length === 1 || index >= originalDocsCount) ? (
                   <input
                     className={styles.input}
@@ -71,17 +132,31 @@ const WorkingDocs = ({ handleChange, addNewDoc, docs, removeDoc, originalDocsCou
                     onChange={(e) => handleDocChange(e, index)}
                   />
                 ) : (
-                  <a href={formatUrl(doc.link)} target="_blank" rel="noopener noreferrer">Link</a>
+                  // Otherwise, for older docs, show a clickable link
+                  <a href={formatUrl(doc.link || '')} target="_blank" rel="noopener noreferrer">
+                    Link
+                  </a>
                 )}
               </td>
+
+              {/* REMOVE BUTTON */}
               <td className={`${styles.td} ${styles.centerAligned} ${styles.removeButtonColumn}`}>
-                <button className={styles.removeButton} type="button" onClick={() => handleDocRemove(index)}>X</button>
+                <button
+                  className={styles.removeButton}
+                  type="button"
+                  onClick={() => handleDocRemove(index)}
+                >
+                  X
+                </button>
               </td>
             </tr>
           ))}
         </tbody>
       </table>
-      <button className={styles.button} type="button" onClick={handleAddNewDoc}>Add New Working Document</button>
+
+      <button className={styles.button} type="button" onClick={handleAddNewDoc}>
+        Add New Working Document
+      </button>
     </>
   );
 };

package.json

@@ -21,14 +21,17 @@
     "eslint-config-next": "13.4.6",
     "google-auth-library": "^9.14.1",
     "googleapis": "^144.0.0",
+    "lodash": "^4.17.21",
     "next": "^14.2.8",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-markdown": "^9.0.0",
+    "react-modal": "^3.16.3",
     "react-select": "^5.7.7",
     "typescript": "5.1.3"
   },
   "devDependencies": {
-    "@netlify/plugin-nextjs": "^5.9.4"
+    "@netlify/plugin-nextjs": "^5.9.4",
+    "@types/lodash": "^4.17.14"
   }
 }

pages/index.tsx

@@ -42,10 +42,10 @@ const Home: NextPage = () => {
           <div>
             <ul>
               <li className={styles.listItem}>When you hover over input fields it will give you a tip on what is needed or how it works</li>
-              <li className={styles.listItem}>When you select your workgroup to submit a meeting summary, it will load all the data from the previous meeting</li>
-              <li className={styles.listItem}>{`Please select the date the meeting happened in the "Meeting Date:" dropdown`}</li>
-              <li className={styles.listItem}>{`Any changes you save will be saved to the date you selected in the "Meeting Date:" dropdown`}</li>
-              <li className={styles.listItem}>Please remember to click the save button when you are done</li>
+              <li className={styles.listItem}>When you select your workgroup it will ask how you want to proceed in creating the meeting summary</li>
+              <li className={styles.listItem}>It will give you the following options - Edit existing summary, New clean summary or New prefilled Summary</li>
+              <li className={styles.listItem}>For each of these options you need to select a date</li>
+              <li className={styles.listItem}>The tool now autosaves</li>
               <li className={styles.listItem}>Bottom left of the save button you will find the date and time the summary was last saved</li>
               <li className={styles.listItem}>Meeting summaries will be reviewed by an Archive member</li>
               <li className={styles.listItem}>When the Archive member approves the data, the GitBook and database will be updated</li>