Merge pull request #148 from lucyjemutai/fix-footer

Fix footer and ensure logged in users can only upload resources when
moh-kenya · Oct 11, 2024 · 0efe637 · 0efe637
2 parents b66391b + cbdae20
commit 0efe637
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 12 deletions.
diff --git a/components/footer.js b/components/footer.js
@@ -10,8 +10,7 @@ export default function Footer() {
         backgroundColor: "#fcfcfc",
         width: "100%",
         height: "80px",
-        position: "fixed",
-        bottom: 0,
+        position: "absolute",
         display: "flex",
         alignItems: "center",
         justifyContent: "center",

diff --git a/pages/resources.js b/pages/resources.js
@@ -2,14 +2,27 @@ import React, { useState, useEffect } from "react";
 import Footer from "@/components/footer";
 import Head from "next/head";
 import Link from "next/link";
+import { doGetSession } from "@/utilities";
+import { Box, Typography } from "@mui/material";
 
 function ResourcesKnhts() {
   const [uploadedFiles, setUploadedFiles] = useState([]);
   const [selectedFiles, setSelectedFiles] = useState([]);
   const [uploadSuccess, setUploadSuccess] = useState(false);
   const [uploadError, setUploadError] = useState(null);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
 
   useEffect(() => {
+    const checkLoginStatus = async () => {
+      const sessionData = await doGetSession();
+      setIsLoggedIn(sessionData !== null);
+    };
+
+    checkLoginStatus();
+  }, []);
+
+  useEffect(() => {
+    //TODO,
     // Initialize IndexedDB database
     const request = indexedDB.open("uploadedFilesDB", 1);
 
@@ -230,17 +243,25 @@ function ResourcesKnhts() {
             </div>
           )}
           <br />
-          <p style={{ fontSize: "1.0em", color: "#777", marginTop: "5px" }}>
-            You can also add resources by uploading files.
-          </p>
+          <div>
+            {isLoggedIn && (
+              <Box>
+                <Typography
+                  style={{ fontSize: "1.0em", color: "#777", marginTop: "5px" }}
+                >
+                  You can also add resources by uploading files.
+                </Typography>
 
-          <input type="file" onChange={handleFileSelect} multiple />
-          <button
-            onClick={handleFileUpload}
-            disabled={selectedFiles.length === 0}
-          >
-            Upload
-          </button>
+                <input type="file" onChange={handleFileSelect} multiple />
+                <button
+                  onClick={handleFileUpload}
+                  disabled={selectedFiles.length === 0}
+                >
+                  Upload
+                </button>
+              </Box>
+            )}
+          </div>
         </div>
       </div>
       <Footer />