Merge pull request #13 from kjannette/fun3

Fun3

src/Components/Dashboard/Dashboard.js

@@ -1,6 +1,7 @@
-import React, { useState, useContext, useEffect } from "react";
+import React, { useState, useContext, useEffect, useRef } from "react";
 import { CaseCard } from "../../pageElements/Cards.js";
 import { Link, useNavigate } from "react-router-dom";
+import MobileContent from "../MobileContent";
 import {
   ArrowRight,
   Activity,
@@ -16,6 +17,9 @@ import UploadModal from "../Modals/UploadModal.js";
 import Button from "react-bootstrap/Button";
 
 const Dashboard = () => {
+  const size = window.innerWidth < 440;
+  const [isMobile, setIsMobile] = useState(size);
+  const count = useRef(null);
   const navigate = useNavigate();
   const [allCases, setAllCases] = useState(null);
   const [selectedCase, setSelectedCase] = useState(null);
@@ -25,6 +29,18 @@ const Dashboard = () => {
   const { appState } = useContext(AppContext);
   const { group } = appState;
   const appUserId = group ? group.appUserId : null;
+  const isDashboard = true;
+  useEffect(() => {
+    if (count.current == null) {
+      setIsMobile(window.innerWidth < 440);
+    }
+    if (count.current < 3) {
+      setIsMobile(window.innerWidth < 440);
+    }
+    return () => {
+      count.current = 1;
+    };
+  }, []);
 
   function getCases() {
     if (!appUserId) {
@@ -83,6 +99,67 @@ const Dashboard = () => {
     return null;
   }
 
+  const DesktopContent = () => {
+    return allCases !== null ? (
+      <div>
+        <div className="dashboard-filter mb-3">
+          <Typeahead
+            className="flex-grow-1"
+            id="case-search"
+            labelKey="caseNumber"
+            options={allCases}
+            minLength={1}
+            placeholder="Search by Case Number"
+            onChange={(selected) => {
+              let item = null;
+              for (const currentItem of selected) {
+                item = { ...currentItem };
+              }
+              setSelectedCase(item);
+            }}
+          />
+          <Button
+            disabled={selectedCase === null}
+            onClick={() => handleViewClick(selectedCase?.caseId)}
+          >
+            View Case
+          </Button>
+          <Button
+            disabled={selectedCase === null}
+            onClick={() => setShowModal(true)}
+          >
+            Express Document Upload
+          </Button>
+        </div>
+        {allCases.slice(0, 3).map((c, i) => (
+          <CaseCard
+            key={`linkcard-${i}`}
+            caption={c.caption}
+            captionTwo={c.captionTwo}
+            jurisdiction={c.jurisdiction}
+            caseNumber={`Index no. ${c.caseNumber}`}
+            filedDate={c.filedDate}
+            caseId={c.caseId}
+            labelText="View"
+            onClick={handleViewClick}
+          />
+        ))}
+        {allCases?.length > 3 ? (
+          <div className="view-all-link-box mb-3">
+            <div className="view-all-wrapper">
+              <Link className="view-all-link" to="/cases">
+                View All{" "}
+                <span className="arrow-wrapper">
+                  <ArrowRight />
+                </span>
+              </Link>
+            </div>
+          </div>
+        ) : null}
+      </div>
+    ) : null;
+  };
+
   return (
     <>
       <div className="dashboard-header">
@@ -179,65 +256,11 @@ const Dashboard = () => {
           </div>
         </div>
       </div>
-      {allCases === null ? <div>Loading...</div> : null}
+      {isMobile ? (
-      {allCases !== null ? (
+        <MobileContent isDashboard={isDashboard} />
-        <div>
+      ) : (
-          <div className="dashboard-filter mb-3">
+        <DesktopContent />
-            <Typeahead
+      )}
-              className="flex-grow-1"
-              id="case-search"
-              labelKey="caseNumber"
-              options={allCases}
-              minLength={1}
-              placeholder="Search by Case Number"
-              onChange={(selected) => {
-                let item = null;
-                for (const currentItem of selected) {
-                  item = { ...currentItem };
-                }
-                setSelectedCase(item);
-              }}
-            />
-            <Button
-              disabled={selectedCase === null}
-              onClick={() => handleViewClick(selectedCase?.caseId)}
-            >
-              View Case
-            </Button>
-            <Button
-              disabled={selectedCase === null}
-              onClick={() => setShowModal(true)}
-            >
-              Express Document Upload
-            </Button>
-          </div>
-          {allCases.slice(0, 3).map((c, i) => (
-            <CaseCard
-              key={`linkcard-${i}`}
-              caption={c.caption}
-              captionTwo={c.captionTwo}
-              jurisdiction={c.jurisdiction}
-              caseNumber={`Index no. ${c.caseNumber}`}
-              filedDate={c.filedDate}
-              caseId={c.caseId}
-              labelText="View"
-              onClick={handleViewClick}
-            />
-          ))}
-          {allCases?.length > 3 ? (
-            <div className="view-all-link-box mb-3">
-              <div className="view-all-wrapper">
-                <Link className="view-all-link" to="/cases">
-                  View All{" "}
-                  <span className="arrow-wrapper">
-                    <ArrowRight />
-                  </span>
-                </Link>
-              </div>
-            </div>
-          ) : null}
-        </div>
-      ) : null}
       {showModal && selectedCase !== null ? (
         <UploadModal setShowModal={setShowModal} caseData={selectedCase} />
       ) : null}

src/Components/Document/DocEditPage.js

@@ -57,7 +57,6 @@ const DocEditPage = () => {
       : docEditCopy.NewYork;
 
   const headerPicker = () => {
-    console.log("state", state);
     switch (state) {
       case "New York":
         return (

src/Components/Document/DocumentListPage.js

@@ -106,7 +106,6 @@ const DocumentListPage = ({ perPage }) => {
 
   async function deleteFromStorage() {
     const selectedDoc = allDocs.filter((doc) => {
-      console.log("doc", doc);
       return doc.documentId == selectedDocumentId;
     });
     console.log(

src/Components/Home/DemoRequestPage.js

@@ -40,7 +40,6 @@ const DemoRequestPage = () => {
   };
 
   async function saveUserData(dataValues) {
-    console.log("saveUserData dataValues", dataValues);
     const { firstName, lastName, firm, telephone, email } = dataValues;
     const requestDate = new Date();
     dataValues["requestDate"] = requestDate;

src/Components/Home/HomePage.js

@@ -191,7 +191,6 @@ const HomePage = () => {
                     <div className="home-card-divider"></div>
                   </div>
                 </div>
-
                 <div className="home-card-text-box">
                   <p className="card-texts">
                     Your Novodash displays important deadlines, sends email/SMS

src/Components/Login/Login.js

@@ -47,7 +47,7 @@ const Login = () => {
 
   function handleClick(e) {
     e.preventDefault();
-    console.log("handleClick fired");
+
     //searchParams.set("mode", mode);
     //setSearchParams(searchParams);
     //navigate(`/passwordreset/?mode=enterEmail`);

src/Components/MobileContent.js

@@ -1,8 +1,23 @@
 import legalTechFlip from "../Assets/Images/legalTechFlip.jpg";
+import { ExclamationTriangle } from "react-bootstrap-icons";
 const MobileContent = ({ isDashboard }) => {
-  const copy = isDashboard
+  const copy = isDashboard ? (
-    ? "hello dash"
+    <>
-    : "Novodraft is a desktop application. Please login on your desktop device to use this feature";
+      <div>
+        <p className="mobile-text-dashboard">
+          Novodraft is a desktop application. The functionailty of your
+          Dashboard in mobile mode is limited to displaying stats and important
+          notifications.
+        </p>
+        <p className="mobile-text-dashboard">
+          Please login on your desktop device to use all of the functions your
+          Dashboard.
+        </p>
+      </div>
+    </>
+  ) : (
+    "Novodraft is a desktop application. Please login on your desktop device to use this feature."
+  );
 
   return (
     <>
@@ -15,10 +30,33 @@ const MobileContent = ({ isDashboard }) => {
             </div>
           </>
         ) : (
-          <></>
+          <>
+            <div>
+              <div className="notication-container">
+                <strong>Notification Center</strong>
+                <div className="notication-text-container">
+                  <p>
+                    <ExclamationTriangle
+                      style={{ color: "red", marginBottom: "5px" }}
+                    />
+                  </p>
+                  <p className="notification-text">No new notifications</p>
+                </div>
+              </div>
+            </div>
+          </>
         )}
-        <div className="mobile-info-heading">{copy}</div>
+        <div className="lower-foo">
+          {isDashboard ? (
+            <>
               <div className="mobile-divider"></div>
+              <div className="mobile-info-heading-dashboard">{copy}</div>
+              <div className="mobile-divider"></div>
+            </>
+          ) : (
+            <div className="mobile-info-heading">{copy}</div>
+          )}
+        </div>
       </div>
     </>
   );

src/Components/Modals/CreateModal.js

@@ -65,8 +65,6 @@ const CreateModal = ({ setShowModal, caseData }) => {
   const validateData = () => {
     const newData = getValidatedFormData(data, fields);
     const hasErrors = isFormDataHasErrors(newData);
-    console.log("newData", newData);
-    console.log("hasErrors", hasErrors);
     setData(newData);
     return hasErrors ? null : objectMap(({ value }) => value, newData);
   };

src/Components/Modals/UploadModal.js

@@ -72,7 +72,6 @@ const UploadModal = (props) => {
         body: file,
       });
       const res = response;
-      console.log("-------------------------------------------->res", res);
       return res;
     } catch (error) {
       console.error("Error:", error);
@@ -101,7 +100,7 @@ const UploadModal = (props) => {
     let response = {};
 
     const res = await uploadFile(formData);
-    console.log("--------------------------res", res);
+
     response["uuidName"] = uuidName;
     response["res"] = res;
     return response;

src/Hooks/useReducer/reducers.js

@@ -3,7 +3,6 @@ export const useGroupReducer = (state, action) => {
     case "CREATE_GROUP":
       return { ...state, group: action.payload };
     case "UPDATE_GROUP_NAME":
-      console.log("state, action.payload", state, action.payload);
       return [...state, { name: action.payload }];
     case "DELETE_GROUP":
       return { ...state, group: null };
@@ -17,7 +16,6 @@ export const useDataReducer = (state, action) => {
     case "CREATE_CASES":
       return { ...state, cases: action.payload };
     case "UPDATE_GROUP_NAME":
-      console.log("state, action.payload", state, action.payload);
       return [...state, { cases: action.payload }];
     default:
       return state;

src/styles/app.scss

@@ -77,10 +77,19 @@ p {
     justify-content: center;
     margin: 18px 2px 0px 2px;
     padding: 2px 2px;
-    background-color: var(--background-blue);
     border-radius: 18px;
   }
 
+  .lower-foo {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin: auto;
+    background-color: var(--background-blue);
+    border-radius: 15px;
+  }
+
   .mobile-divider {
     height: 8px;
     width: 88%;
@@ -99,4 +108,40 @@ p {
     font-size: 15px;
     line-height: 21px;
   }
+  .mobile-info-heading-dashboard {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: 2px 6px 2px 6px;
+    text-align: justify;
+    font-size: 15px;
+    line-height: 21px;
+  }
+
+  .mobile-text-dashboard {
+    margin-bottom: 6px;
+    padding: 0px 6px;
+  }
+  .notication-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-right: auto;
+    margin-left: auto;
+    margin-bottom: 40px;
+  }
+
+  .notication-text-container {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    font-size: 1rem;
+    margin-top: 12px;
+  }
+
+  .notification-text {
+    margin-left: 16px;
+  }
 }

src/styles/dashboard.scss

@@ -80,8 +80,51 @@
   flex-direction: column;
 }
 
-@media only screen and (min-width: map.get($grid-breakpoints, "md")) {
+@media only screen and (max-width: 430px) {
+  .dashboard-header {
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+    margin: 30px 0px 0px 0px;
+    align-items: center;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 12px 0px;
+    width: 280px;
+    background-color: var(--background-blue);
+    border-radius: 15px;
+  }
+
   .dashboard-filter {
     flex-direction: row;
   }
+
+  .stats-container {
+    height: 100%;
+  }
+
+  .stats-row-box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 12px;
+    margin-bottom: 0px;
+    padding: 0px 6px;
+    background-color: #fff;
+    height: 100%;
+    border-radius: 6px;
+  }
+
+  .stats-unit-wrapper {
+    display: flex;
+    flex-direction: row;
+    background-color: var(--barely-there-accent);
+    margin: 4px 0px;
+    padding: 8px 0px;
+    border-radius: 15px;
+  }
+
+  .notification-center {
+    background-color: red;
+  }
 }