Merge branch 'main' into camille-frontend

client/components/ClientList.jsx

@@ -1,37 +1,26 @@
 import React, { useState } from 'react';
 import '../stylesheets/ClientList.scss';
 
-const ClientList = (props) => {
+const ClientList = ({ clients, controlModal, setCurrentClient }) => {
   const [searchTerm, setSearchTerm] = useState('');
-  //this should be replaced with a fetch request via axios
-  const [clients, setClients] = useState([
-    { id: 1, name: 'Client 1' },
-    { id: 2, name: 'Client 2' },
-    { id: 3, name: 'Client 3' },
-    { id: 4, name: 'Client 4' },
-    { id: 5, name: 'Client 5' },
-    { id: 6, name: 'Client 6' },
-  ]);
 
   const handleAddClientBtnClick = () => {
-    props.controlModal(true);
+    controlModal(true);
   };
-  // const [clients, setClients] = useState([]);
-
-  // useEffect(() => {
-  //   const fetchData = async () => {
-  //     const result = await axios(
-  //       'https://api.example.com/clients'
-  //     );
-  //     setClients(result.data);
-  //   };
-  //   fetchData();
-  // }, []);
 
   const handleSearch = (event) => {
     setSearchTerm(event.target.value);
   };
 
+  const handleClientClick = (event) => {
+    console.log(event.target.id);
+    console.log(clients);
+    const chosenClient = clients.filter((client) => {
+      return client.client_id === Number(event.target.id);
+    })[0];
+    setCurrentClient(chosenClient);
+  };
+
   return (
     <div className="client-list-container">
       <div className="client-list">
@@ -48,7 +37,12 @@ const ClientList = (props) => {
               client.name.toLowerCase().includes(searchTerm.toLowerCase())
             )
             .map((client) => (
-              <div key={client.id} className="client-list__client">
+              <div
+                key={client.client_id}
+                className="client-list__client"
+                id={client.client_id}
+                onClick={handleClientClick}
+              >
                 {client.name}
               </div>
             ))}

client/components/ClientView.jsx

@@ -1,17 +1,26 @@
 import React from 'react';
 import '../stylesheets/ClientView.scss';
 
-export function ClientView(props) {
+export const ClientView = ({
+  changeViewHandler,
+  currentClient,
+  currentClientSessions,
+}) => {
   const viewBtnClickHandler = () => {
-    props.changeViewHandler(true);
+    changeViewHandler(true);
   };
-
+  console.log('currentClientSessions', currentClientSessions);
   const allSessions = [];
-  for (let i = 0; i < 5; i++) {
+  for (let i = 0; i < currentClientSessions.length; i++) {
     allSessions.push(
-      <li className="session-list-item" key={i}>
+      <li
+        className="session-list-item"
+        key={i}
+        id={currentClientSessions[i].record_id}
+      >
         <p>
-          Session {i} - {i}/01/2022
+          {currentClientSessions[i].date.slice(0, 10)} -
+          {currentClientSessions[i].goal}
         </p>
         <button className="session-list-item-btn" onClick={viewBtnClickHandler}>
           View
@@ -27,21 +36,25 @@ export function ClientView(props) {
           <h1>Client Info</h1>
         </div>
         <ul className="client-info-list">
-          <li className="client-info-list-item">Client Name: Bob Turner</li>
           <li className="client-info-list-item">
-            Client Email: bobturner99@gmail.com
+            Client Name: {currentClient.name}
+          </li>
+          <li className="client-info-list-item">
+            Client Email: {currentClient.email}
           </li>
-          <li className="client-info-list-item">Client Phone: 000-000-0000</li>
-          <li className="client-info-list-item">Date of Birth: 01/01/1990</li>
         </ul>
       </div>
       <div className="client-session-section">
         <div className="client-session-header">
           <h1>Session History</h1>
         </div>
         <ul className="sessions-list">{allSessions}</ul>
-        <button className="session-button" onClick={viewBtnClickHandler}>Add Session</button>
+        {currentClient.client_id && (
+          <button className="session-button" onClick={viewBtnClickHandler}>
+            Add Session
+          </button>
+        )}
       </div>
     </div>
   );
-}
+};

client/components/CreateSession.jsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
-import '../stylesheets/CreateSession.scss';
 
-export function CreateSession(props) {
+export function CreateSession({ currentClient, changeViewHandler }) {
   const [notes, setNotes] = useState('these are all my old notes:');
 
   const handleNotesChange = (event) => {
@@ -10,21 +9,71 @@ export function CreateSession(props) {
     console.log(event.target.value);
   };
   const handleBackBtnClick = () => {
-    props.changeViewHandler(false);
+    changeViewHandler(false);
+  };
+
+  //   {
+  //     "date": "2022-01-28",
+  //     "goal": "work on something important",
+  //     "session_notes": "Lorem ipsum dolor sit amet, consectetur adipiscing elit,"
+  //     "upcoming": "work on getting something better for next session",
+  //     "client_id": "2"
+  // }
+
+  const handleSessionSubmit = async (event) => {
+    event.preventDefault();
+    const session_notes = event.target[0].value;
+    const date = event.target[1].value;
+    const goal = event.target[2].value;
+    const upcoming = event.target[3].value;
+    const { client_id } = currentClient;
+
+    console.log(`current client ====`, currentClient);
+
+    try {
+      const info = await axios.post(`http://localhost:3000/record`, {
+        date,
+        goal,
+        session_notes,
+        upcoming,
+        client_id,
+      });
+
+      console.log(`INFO=======`, info.data);
+    } catch (error) {
+      console.log(`Error in CreateSession`, error);
+    }
   };
 
   return (
     <div className="create-session">
-      <textarea
-        id="notes"
-        name="notes"
-        value={notes}
-        onChange={handleNotesChange}
-      />
+      <form onSubmit={handleSessionSubmit}>
+        <textarea
+          id="notes"
+          name="notes"
+          value={notes}
+          onChange={handleNotesChange}
+        />
+
+        <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>
 
-      <hr />
+        <button type="submit" disabled={!notes}>
+          Submit
+        </button>
+      </form>
 
-      <button disabled={!notes}>Submit</button>
       <button disabled={!notes}>Delete Session</button>
       <button onClick={handleBackBtnClick}> Back</button>
     </div>

client/components/Modal.jsx

@@ -1,21 +1,45 @@
 import React from 'react';
+import axios from 'axios';
 import '../stylesheets/Modal.scss';
 
-const Modal = (props) => {
+const Modal = ({ user, controlModal, setClients }) => {
   const handleCloseModalClick = () => {
-    props.controlModal(false);
+    controlModal(false);
   };
 
   //need to make the client POST request
 
+  const createClient = async (e) => {
+    e.preventDefault();
+    const name = e.target[0].value;
+    const email = e.target[1].value;
+    try {
+      const info = await axios.post(`http://localhost:3000/client`, {
+        name,
+        email,
+        user_id: user.userID,
+      });
+
+      const result = await axios.get(
+        `http://localhost:3000/client/allClients/${user.userID}`
+      );
+
+      console.log(`allclients=======`, result.data);
+      setClients(result.data);
+      controlModal(false);
+    } catch (error) {
+      console.log(`Error in Signup Form`, error);
+    }
+  };
+
   return (
     <div className="modal">
       <div className="modal-content">
         <div>
           <h4 className="modal-title">Add Client</h4>
         </div>
         <div className="modal-body">
-          <form className="modal-form">
+          <form className="modal-form" onSubmit={createClient}>
             <label htmlFor="name">
               Name:
               <input type="text" name="name" />
@@ -24,10 +48,7 @@ const Modal = (props) => {
               Email:
               <input type="text" name="email" />
             </label>
-            <label htmlFor="name">
-              Phone:
-              <input type="text" name="phone" />
-            </label>
+            <button type="submit">ADD CLIENT</button>
           </form>
         </div>
         <div className="modal-footer">

client/components/SessionsList.jsx

@@ -2,21 +2,23 @@ import React from 'react';
 import '../stylesheets/SessionsList.scss';
 
 
-const SessionsList = (props) => {
+const SessionsList = ({ currentClientSessions }) => {
   // const allSessions = props.sessions.map((sess, i) => {
   //   <li>{sess.date}</li>
   // })
 
+  const allSessions = currentClientSessions.map((sess, i) => {
+    return (
+      <li key={i} id={sess.record_id}>
+        {sess.date.slice(0, 10)}
+      </li>
+    );
+  });
+
   return (
     <div className="sessions-list-inner">
       <h2>Sessions List</h2>
-      <ul>
-        <li>01/01/2022</li>
-        <li>02/01/2022</li>
-        <li>03/01/2022</li>
-        <li>04/01/2022</li>
-        <li>05/01/2022</li>
-      </ul>
+      <ul>{allSessions}</ul>
     </div>
   );
 };

client/containers/ClientDisplay.jsx

@@ -3,25 +3,31 @@ import { ClientView } from '../components/ClientView';
 import { CreateSession } from '../components/CreateSession';
 //import '../stylesheets/ClientDisplay.scss';
 
-const ClientDisplay = (props) => {
-  //need to know which client is currently being viewed if we are in the ClientView:
-  const [currentClient, setCurrentClient] = useState('');
-  //need to know the current session if we are in the
-  const [currentSession, setCurrentSession] = useState('');
-  //make the request to backend here to grab all of the user's clients - should be coming back as an array, which we then pass down to client view
+const ClientDisplay = ({
+  viewState,
+  changeViewHandler,
+  currentClient,
+  currentClientSessions,
+}) => {
   return (
     <div>
       {/* this needs to know the current client */}
-      {!props.viewState && (
+      {!viewState && (
         <ClientView
-          changeViewHandler={props.changeViewHandler}
-          viewState={props.viewState}
+          changeViewHandler={changeViewHandler}
+          viewState={viewState}
           client={''}
+          currentClient={currentClient}
+          currentClientSessions={currentClientSessions}
         />
       )}
       {/* this needs to know the current session */}
-      {props.viewState && (
-        <CreateSession changeViewHandler={props.changeViewHandler} />
+      {viewState && (
+        <CreateSession
+          changeViewHandler={changeViewHandler}
+          currentClient={currentClient}
+          currentClientSessions={currentClientSessions}
+        />
       )}
     </div>
   );