diff --git a/src/Components/Dashboard/Dashboard.js b/src/Components/Dashboard/Dashboard.js index 448bb31..86f2e91 100644 --- a/src/Components/Dashboard/Dashboard.js +++ b/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 ? ( +
+
+ { + let item = null; + for (const currentItem of selected) { + item = { ...currentItem }; + } + setSelectedCase(item); + }} + /> + + +
+ {allCases.slice(0, 3).map((c, i) => ( + + ))} + {allCases?.length > 3 ? ( +
+
+ + View All{" "} + + + + +
+
+ ) : null} +
+ ) : null; + }; + return ( <>
@@ -179,65 +256,11 @@ const Dashboard = () => {
- {allCases === null ?
Loading...
: null} - {allCases !== null ? ( -
-
- { - let item = null; - for (const currentItem of selected) { - item = { ...currentItem }; - } - setSelectedCase(item); - }} - /> - - -
- {allCases.slice(0, 3).map((c, i) => ( - - ))} - {allCases?.length > 3 ? ( -
-
- - View All{" "} - - - - -
-
- ) : null} -
- ) : null} + {isMobile ? ( + + ) : ( + + )} {showModal && selectedCase !== null ? ( ) : null} diff --git a/src/Components/MobileContent.js b/src/Components/MobileContent.js index f06332c..6cf20d9 100644 --- a/src/Components/MobileContent.js +++ b/src/Components/MobileContent.js @@ -1,8 +1,20 @@ import legalTechFlip from "../Assets/Images/legalTechFlip.jpg"; const MobileContent = ({ isDashboard }) => { - const copy = isDashboard - ? "hello dash" - : "Novodraft is a desktop application. Please login on your desktop device to use this feature"; + const copy = isDashboard ? ( +
+

+ Novodraft is a desktop application. The functionailty of your Dashboard + in mobile mode is limited to displaying stats and important + notifications. +

+

+ Please login on your desktop device to use all of the functions your + Dashboard. +

+
+ ) : ( + "Novodraft is a desktop application. Please login on your desktop device to use this feature." + ); return ( <> @@ -15,7 +27,9 @@ const MobileContent = ({ isDashboard }) => { ) : ( - <> + <> +
+ )}
{copy}