Co-authored-by: amritvela <amritvela@users.noreply.github.com>

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
+}

__tests__/jest.test.js

@@ -0,0 +1,12 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { render, screen, cleanup } from '@testing-library/react';
+import LandingPage from '../client/containers/LandingPage';
+// import LoginForm from '../client/components/LoginForm.jsx';
+
+//landing page
+test('Landing page should render', () => {
+  render(<LandingPage />);
+  const LandingPageElement = screen.getByTestId('landing');
+  expect(LandingPageElement).toBeInTheDocument();
+});

__tests__/supertest.test.js

@@ -0,0 +1,59 @@
+const request = require("supertest");
+const server = 'http://localhost:3000';
+
+//testing post route to user/verify
+describe('Requests to /user/verify should work', () => {
+  test('POST /user/verify', (done) => {
+    request(server)
+    .post("/user/verify")
+    .send({
+      name: 'TESTNAME',
+      email: 'TESTEMAIL',
+      password: 'TESTPASSWORD',
+    })
+    .expect(200)
+    .end((err, res) => {
+      if (err) return done(err);
+      return done();
+    })
+  });
+});
+
+//test get request for user/:user_id
+describe('Requests to /user/:user_id should work', () => {
+  test('GET /user/user_id', (done) => {
+    request(server)
+    .get("/user/1")
+    .expect(200)
+    .end((err, res) => {
+      if (err) return done(err);
+      return done();
+    })
+  });
+});
+
+//testing get route to record/:record_id
+describe('Requests to /record/:record_id should work', () => {
+  test('GET /record/:record_id', (done) => {
+    request(server)
+    .post("/record/1")
+    .expect(200)
+    .end((err, res) => {
+      if (err) return done(err);
+      return done();
+    })
+  });
+});
+
+//testing get route to client/:client_id
+describe('Requests to /user/verify should work', () => {
+  test('GET /client/:client_id', (done) => {
+    request(server)
+    .post("/client/1")
+    .expect(200)
+    .end((err, res) => {
+      if (err) return done(err);
+      return done();
+    })
+  });
+});

client/components/ClientView.jsx

@@ -28,11 +28,13 @@ export const ClientView = ({
       </li>
     );
   }
-  //we will be recieving a current client, but if a specific client has not been picked yet, we will just render a div that says please choose a client
+
   return (
     <div className="client-view">
-      <div className="client-view-client-info">
-        <h1>Client Info:</h1>
+      <div className="client-info-section">
+        <div className="client-info-header">
+          <h1>Client Info</h1>
+        </div>
         <ul className="client-info-list">
           <li className="client-info-list-item">
             Client Name: {currentClient.name}
@@ -42,11 +44,15 @@ export const ClientView = ({
           </li>
         </ul>
       </div>
-      <div className="client-view-client-sessions">
-        <h1>Session History:</h1>
+      <div className="client-session-section">
+        <div className="client-session-header">
+          <h1>Session History</h1>
+        </div>
         <ul className="sessions-list">{allSessions}</ul>
         {currentClient.client_id && (
-          <button onClick={viewBtnClickHandler}>Add Session</button>
+          <button className="session-button" onClick={viewBtnClickHandler}>
+            Add Session
+          </button>
         )}
       </div>
     </div>

client/components/CreateSession.jsx

@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import axios from 'axios';
 
 export function CreateSession({ currentClient, changeViewHandler }) {
   const [notes, setNotes] = useState('these are all my old notes:');
@@ -47,7 +46,7 @@ export function CreateSession({ currentClient, changeViewHandler }) {
   };
 
   return (
-    <div>
+    <div className="create-session">
       <form onSubmit={handleSessionSubmit}>
         <textarea
           id="notes"

client/components/LoginForm.jsx

@@ -30,14 +30,14 @@ const LoginForm = ({ setUser, user }) => {
   return (
     <div className="formCard">
       <form onSubmit={onLoginSubmitHandler}>
-        <label htmlFor="email">
-          Email:
+        <div className="form-group">
+          <label htmlFor="email">Email:</label>
           <input name="email" type="text" placeholder="Email"></input>
-        </label>
-        <label htmlFor="password">
-          Password:
+        </div>
+        <div className="form-group">
+          <label htmlFor="password">Password:</label>
           <input name="password" type="text" placeholder="Password"></input>
-        </label>
+        </div>
         <button type="submit">LOGIN</button>
       </form>
     </div>

client/components/Modal.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import axios from 'axios';
+import '../stylesheets/Modal.scss';
 
 const Modal = ({ user, controlModal, setClients }) => {
   const handleCloseModalClick = () => {

client/components/Navbar.jsx

@@ -17,6 +17,7 @@ const NavBar = () => {
           Logout
         </button>
       </div>
+      <div className="banner">Jottr</div>
     </nav>
   );
 };

client/components/SessionsList.jsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import '../stylesheets/SessionsList.scss';
+
 
 const SessionsList = ({ currentClientSessions }) => {
   // const allSessions = props.sessions.map((sess, i) => {
@@ -14,7 +16,7 @@ const SessionsList = ({ currentClientSessions }) => {
   });
 
   return (
-    <div>
+    <div className="sessions-list-inner">
       <h2>Sessions List</h2>
       <ul>{allSessions}</ul>
     </div>

client/containers/LandingPage.jsx

@@ -2,14 +2,13 @@ import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import LoginForm from '../components/LoginForm';
 import SignUpForm from '../components/SignUpForm';
+import '../stylesheets/LandingPage.scss';
 
 const LandingPage = ({ user, setUser }) => {
   //usestate for showing modals set to false
   const [login, setLogin] = useState(false);
   const [signup, setSignup] = useState(false);
 
-  //create buttons to either log in or sign up
-
   //function that will show one modal or another
   const showModal = (str) => {
     if (login === true && signup === true) {
@@ -38,24 +37,29 @@ const LandingPage = ({ user, setUser }) => {
   };
 
   return (
-    <div>
-      <h1>Hello to Jottr</h1>
-      <button
-        onClick={() => {
-          setLogin(true);
-          showModal();
-        }}
-      >
-        Log In
-      </button>
-      <button
-        onClick={() => {
-          setSignup(true);
-          showModal();
-        }}
-      >
-        Signup
-      </button>
+    <div className="landing-page">
+      <h1 className="title">Welcome To Jottr</h1>
+      <div className="buttons-container">
+        <button
+          className="login-button"
+          onClick={() => {
+            setLogin(true);
+            showModal();
+          }}
+        >
+          Log In
+        </button>
+        <button
+          className="signup-button"
+          onClick={() => {
+            setSignup(true);
+            showModal();
+          }}
+        >
+          Signup
+        </button>
+      </div>
+
       {showModal()}
     </div>
   );

client/containers/MainPage.jsx

@@ -4,6 +4,7 @@ import SideDisplay from '../containers/SideDisplay';
 import ClientDisplay from './ClientDisplay';
 import NavBar from '../components/Navbar';
 import Modal from '../components/Modal';
+import '../stylesheets/MainPage.scss';
 import axios from 'axios';
 
 import '../styles.scss';

client/containers/SideDisplay.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import SessionsList from '../components/SessionsList';
 import ClientList from '../components/ClientList';
+import '../stylesheets/Navbar.scss';
 
 const SideDisplay = ({
   viewState,

client/styles.scss

@@ -7,24 +7,22 @@ form {
   flex-direction: column;
 }
 
-.mainpage {
-  display: grid;
-  height: 100vh;
-  width: 100vw;
-  grid-template-rows: 50px 1fr;
-  grid-template-columns: 1fr 3fr;
-  grid-template-areas: 'navbar main-content';
-}
+// .mainpage {
+//   display: grid;
+//   height: 100vh;
+//   width: 100vw;
+//   grid-template-rows: 50px 1fr;
+//   grid-template-columns: 1fr 2fr;
+//   grid-template-areas: 'navbar main-content';
+// }
 
 .main-page-content {
   display: grid;
   grid-template-rows: 1fr;
-  grid-template-columns: 1fr 1fr;
-  border: 1px solid black;
-  grid-row: 2 / 3;
-  grid-column: 1 / 3;
-  display: flex;
-  border: 1px solid black;
+  grid-template-columns: 1fr 2fr;
+  grid-row: 2 / 2;
+  grid-column: 1 / 2;
+
 }
 
 #notes {

client/stylesheets/ClientList.scss

@@ -1,27 +1,34 @@
 .client-list-container {
-  display: flex;
+  display: inline-flex;
   grid-row: 2/3;
   grid-column: 1/2;
   display: flex;
-  border: 1px solid black;
-  width: 100%;
+  width: 90%;
   align-self: flex-start;
   align-items: center;
-  height: 80vh;
-  background-color: rgb(41, 53, 50);
-  transition: width 0.5s ease;
+  height: 82vh;
+  background-color: rgb(135, 153, 105);
   overflow: hidden;
   padding: 10px;
+  border-radius: 5px;
+  border: 1px solid black;
+  box-shadow: inset 0 0 20px 5px rgba(0,0,0,1);
+
+  @media (max-width: 960px) {
+    max-width: 100%;
+  }
 
-  //border: 1px solid black;
-  //padding: 10px;
+  @media (min-width: 960px) {
+    min-width: 33.33%;
+  }
 }
 
 .client-list {
   display: flex;
   flex-direction: column;
   align-content: center;
   width: 100%;
+
 }
 
 .client-list__search-input {
@@ -34,6 +41,7 @@
   border-radius: 5px;
   font-size: 14px;
   color: rgb(41, 53, 50);
+
 }
 
 .client-list__client-list {
@@ -45,8 +53,9 @@
   overflow-y: auto;
   min-height: auto;
   max-height: calc(
-    100% - 50pc
+    100% - 50px
   ); /* subtract the height of the add client button */
+
 }
 
 .client-list__client {
@@ -58,6 +67,12 @@
   margin-bottom: 10px;
   background-color: white;
   height: 50px;
+  background: linear-gradient(
+      to bottom,
+      rgb(235, 232, 222) 0%,
+      rgb(235, 232, 222) 47%,
+      rgb(255, 255, 255) 100%
+    );
 }
 
 .client-list__add-client {
@@ -74,8 +89,12 @@
   border-radius: 5px;
   width: 95%;
   padding: 10px;
+  background-color: rgb(135, 128, 143);
+  font-weight: bold;
+  box-shadow: inset 0 0 20px 5px rgba(0,0,0,0.7);
 }
 
+
 // .client-list {
 //   background-color: rgb(41, 53, 50);
 //   height: 100%;