Merge pull request #14 from Jottr42/dev

Dev

client/App.jsx

@@ -1,8 +1,9 @@
 //importing structures
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Route, Routes } from 'react-router-dom';
 import MainPage from './containers/MainPage.jsx';
 import LandingPage from './containers/LandingPage.jsx';
+
 //importing styling and images
 import './styles.scss';
 

client/components/ClientList.jsx

@@ -1,7 +1,13 @@
-import React, { useState } from 'react';
+import axios from 'axios';
+import React, { useState, useEffect } from 'react';
 import '../stylesheets/ClientList.scss';
 
-const ClientList = ({ clients, controlModal, setCurrentClient }) => {
+const ClientList = ({
+  clients,
+  controlModal,
+  setCurrentClient,
+  setClients,
+}) => {
   const [searchTerm, setSearchTerm] = useState('');
 
   const handleAddClientBtnClick = () => {
@@ -21,6 +27,33 @@ const ClientList = ({ clients, controlModal, setCurrentClient }) => {
     setCurrentClient(chosenClient);
   };
 
+  const handleRemoveClientClick = (event) => {
+    const client_id = Number(event.target.id);
+    const confirmDeletion = confirm(
+      `Are you sure you want to remove this client?`
+    );
+    if (!confirmDeletion) return;
+    axios({
+      method: 'DELETE',
+      url: `http://localhost:3000/client/${client_id}`,
+    })
+      .then((response) => {
+        console.log(response.data);
+        setClients((prev) => {
+          const newClientList = [];
+          for (let client of prev) {
+            if (client.client_id !== client_id) {
+              newClientList.push(client);
+            }
+          }
+          return newClientList;
+        });
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
   return (
     <div className="client-list-container">
       <div className="client-list">
@@ -41,9 +74,22 @@ const ClientList = ({ clients, controlModal, setCurrentClient }) => {
                 key={client.client_id}
                 className="client-list__client"
                 id={client.client_id}
-                onClick={handleClientClick}
               >
-                {client.name}
+                <p
+                  onClick={handleClientClick}
+                  id={client.client_id}
+                  className="client-list-p"
+                >
+                  {client.name}
+                </p>
+                <button
+                  className="remove-btn"
+                  type="button"
+                  id={client.client_id}
+                  onClick={handleRemoveClientClick}
+                >
+                  Remove
+                </button>
               </div>
             ))}
         </div>

client/components/ClientView.jsx

@@ -1,34 +1,49 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import '../stylesheets/ClientView.scss';
 
 export const ClientView = ({
   changeViewHandler,
   currentClient,
   currentClientSessions,
+  setCurrentSession,
 }) => {
-  const viewBtnClickHandler = () => {
+  const viewBtnClickHandler = (e) => {
+    //if we are adding a session, we remove all the prepopulation, else we set the current session to the session we want to view so we can prepopulate the createSession page.
+    if (e.target.id === 'addSession') {
+      setCurrentSession({});
+    } else {
+      const clickedSessionId = Number(e.target.id);
+      const clickedSession = currentClientSessions.filter((sess) => {
+        return sess.record_id === clickedSessionId;
+      })[0];
+      setCurrentSession(clickedSession);
+    }
     changeViewHandler(true);
   };
-  console.log('currentClientSessions', currentClientSessions);
+
   const allSessions = [];
   for (let i = 0; i < currentClientSessions.length; i++) {
     allSessions.push(
-      <li
-        className="session-list-item"
-        key={i}
-        id={currentClientSessions[i].record_id}
-      >
+      <li className="session-list-item" key={i}>
         <p>
           {currentClientSessions[i].date.slice(0, 10)} -
           {currentClientSessions[i].goal}
         </p>
-        <button className="session-list-item-btn" onClick={viewBtnClickHandler}>
+        <button
+          id={currentClientSessions[i].record_id}
+          className="session-list-item-btn"
+          onClick={viewBtnClickHandler}
+        >
           View
         </button>
       </li>
     );
   }
 
+  useEffect(() => {
+    console.log('currentClientSessions has been updated');
+  }, [currentClientSessions]);
+
   return (
     <div className="client-view">
       <div className="client-info-section">
@@ -50,7 +65,11 @@ export const ClientView = ({
         </div>
         <ul className="sessions-list">{allSessions}</ul>
         {currentClient.client_id && (
-          <button className="session-button" onClick={viewBtnClickHandler}>
+          <button
+            className="session-button"
+            id={'addSession'}
+            onClick={viewBtnClickHandler}
+          >
             Add Session
           </button>
         )}

client/components/CreateSession.jsx

@@ -1,8 +1,29 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import '../stylesheets/SessionsList.scss';
+import '../stylesheets/CreateSession.scss';
 
-export function CreateSession({ currentClient, changeViewHandler }) {
+export function CreateSession({
+  currentClient,
+  changeViewHandler,
+  setCurrentSession,
+  currentSession,
+  setCurrentClientSessions,
+  currentClientSessions,
+  setSessionCreated,
+}) {
   const [notes, setNotes] = useState('these are all my old notes:');
+  let textAreaVal = currentSession.session_notes
+    ? currentSession.session_notes
+    : '';
+  let sessionDateVal = currentSession.date
+    ? currentSession.date.slice(0, 10)
+    : '';
+  let sessionGoalVal = currentSession.goal ? currentSession.goal : '';
+  let upcomingVal = currentSession.upcoming ? currentSession.upcoming : '';
 
+  //if we are viewing an existing session, we setNotes to that sessions nots
+  console.log(currentSession, 'currentSession in createSession');
   const handleNotesChange = (event) => {
     // 👇️ access textarea value
     setNotes(event.target.value);
@@ -12,6 +33,10 @@ export function CreateSession({ currentClient, changeViewHandler }) {
     changeViewHandler(false);
   };
 
+  useEffect(() => {
+    console.log(currentSession, 'rerendering the sessions list');
+  }, [currentSession, currentClientSessions]);
+
   //   {
   //     "date": "2022-01-28",
   //     "goal": "work on something important",
@@ -38,44 +63,99 @@ export function CreateSession({ currentClient, changeViewHandler }) {
         upcoming,
         client_id,
       });
+      setSessionCreated(true);
+      changeViewHandler(false);
 
       console.log(`INFO=======`, info.data);
     } catch (error) {
       console.log(`Error in CreateSession`, error);
     }
   };
 
+  //handling record/session deletions
+  const handleDeleteSessionClick = () => {
+    const toBeDeletedRecordID = currentSession.record_id;
+    const confirmSessionDeletion = confirm(
+      'Are you sure you want to delete this client session?'
+    );
+    if (!confirmSessionDeletion) return;
+    axios({
+      method: 'DELETE',
+      url: `http://localhost:3000/record/${toBeDeletedRecordID}`,
+    })
+      .then((response) => {
+        setCurrentSession({});
+        setCurrentClientSessions((prev) => {
+          const newClientSessionsList = [];
+          for (let session of prev) {
+            if (session.session_id != toBeDeletedRecordID) {
+              newClientSessionsList.push(session);
+            }
+          }
+          return newClientSessionsList;
+        });
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
   return (
     <div className="create-session">
-      <form onSubmit={handleSessionSubmit}>
+      <form onSubmit={handleSessionSubmit} className="create-session-form">
         <textarea
           id="notes"
           name="notes"
-          value={notes}
+          defaultValue={textAreaVal}
+          key={textAreaVal}
           onChange={handleNotesChange}
+          className="sessions-list-notes text-area"
         />
-
-        <hr />
-
-        <label htmlFor="sessionDate">
-          <input type="date" id="sessionDate" name="sessionDate" />
-        </label>
-        <label htmlFor="sessionGoals">
-          Session Goal:
-          <input type="text" id="sessionGoals" />
-        </label>
-        <label htmlFor="nextSessionGoals">
-          Next Session Goal:
-          <input type="text" id="nextSessionGoals" name="nextSessionGoals" />
-        </label>
-
-        <button type="submit" disabled={!notes}>
-          Submit
-        </button>
+        <div className="create-sessions-inputs-container">
+          <label htmlFor="sessionDate">
+            Session Date:
+            <input
+              type="date"
+              id="sessionDate"
+              key={sessionDateVal}
+              name="sessionDate"
+              defaultValue={sessionDateVal}
+              className="create-session-input"
+            />
+          </label>
+          <label htmlFor="sessionGoals">
+            Session Goal:
+            <input
+              type="text"
+              id="sessionGoals"
+              defaultValue={sessionGoalVal}
+              key={sessionGoalVal}
+              className="create-session-input"
+            />
+          </label>
+          <label htmlFor="nextSessionGoals">
+            Next Session Goal:
+            <input
+              type="text"
+              id="nextSessionGoals"
+              name="nextSessionGoals"
+              defaultValue={upcomingVal}
+              key={upcomingVal}
+              className="create-session-input"
+            />
+          </label>
+        </div>
+        <div className="form-buttons">
+          <button type="submit" disabled={!notes}>
+            Submit
+          </button>
+          <button disabled={!notes} onClick={handleDeleteSessionClick}>
+            Delete Session
+          </button>
+          <button onClick={handleBackBtnClick}> Back</button>
+        </div>
       </form>
-
-      <button disabled={!notes}>Delete Session</button>
-      <button onClick={handleBackBtnClick}> Back</button>
+      <hr />
     </div>
   );
 }