more

src/Components/Document/DocumentListPage.js

@@ -4,6 +4,7 @@ import { AppContext } from "../../Hooks/useContext/appContext";
 import SelectDropdown from "../../pageElements/SelectDropdown";
 import { DocCard } from "../../pageElements/Cards";
 import { db } from "../../firebase";
+import MobileContent from "../MobileContent";
 import {
   collection,
   deleteDoc,
@@ -18,6 +19,8 @@ import ConfirmModal from "../Modals/ConfirmModal";
 import "../../styles/doclist-page.scss";
 
 const DocumentListPage = ({ perPage }) => {
+  const size = window.innerWidth < 440;
+  const [isMobile, setIsMobile] = useState(size);
   const navigate = useNavigate();
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [selectedDocumentId, setSelectedDocumentId] = useState(null);
@@ -164,7 +167,8 @@ const DocumentListPage = ({ perPage }) => {
   if (!group) {
     return null;
   }
-  console.log("allDocs", allDocs);
+
+  const DesktopContent = () => {
     return (
       <>
         <div className="doc-list-header">
@@ -220,8 +224,8 @@ const DocumentListPage = ({ perPage }) => {
                     <li>
                       {" "}
                       Click "View Case" to select the case with which your
-                    document will be associated. This will open the Case Detail
-                    view.{" "}
+                      document will be associated. This will open the Case
+                      Detail view.{" "}
                     </li>
                     <li className="nodocs-list-item">
                       Note: If you have not yet created any cases, you will need
@@ -261,6 +265,9 @@ const DocumentListPage = ({ perPage }) => {
         ) : null}
       </>
     );
+  };
+
+  return isMobile ? <MobileContent /> : <DesktopContent />;
 };
 
 export default DocumentListPage;