From 0cba852b0c600f9e20ce449e874a1992968ace60 Mon Sep 17 00:00:00 2001
From: e20178dulanga <e20178@eng.pdn.ac.lk>
Date: Fri, 13 Sep 2024 17:06:39 +0530
Subject: [PATCH] Downloads page updated

Downloads page updated with two parts for public users and cycle team to display relevant files.
---
 front-end/src/Pages/Downloads.jsx     | 36 ++++++++++++++++++++++-----
 front-end/src/components/Download.css | 30 ++++++----------------
 2 files changed, 38 insertions(+), 28 deletions(-)

diff --git a/front-end/src/Pages/Downloads.jsx b/front-end/src/Pages/Downloads.jsx
index 0a94a29c..9b94222b 100644
--- a/front-end/src/Pages/Downloads.jsx
+++ b/front-end/src/Pages/Downloads.jsx
@@ -111,6 +111,10 @@ const FileUploadDownload = () => {
     }
   };
 
+  // Filter files into two groups: visible to all and visible to logged-in users only
+  const visibleToAllFiles = uploadedFiles.filter(file => file.visibleToAll);
+  const visibleToLoggedInFiles = uploadedFiles.filter(file => !file.visibleToAll && loggedInUser.isLoggedIn);
+
   return (
     <div>
       <div className="downloadTitle">
@@ -172,19 +176,39 @@ const FileUploadDownload = () => {
       {errorMessage && <p className="error">{errorMessage}</p>}
 
       <div className="downloadSection">
-        {uploadedFiles.map((file) => (
-          (file.visibleToAll || loggedInUser.isLoggedIn) && (
+        <h4>Download Files here</h4>
+        {visibleToAllFiles.length > 0 ? (
+          visibleToAllFiles.map(file => (
             <div key={file.fileId} className="fileItem">
               <img src={fileDownload} alt="fileDownload" />
               <span><p>{file.displayName}</p></span>
-              
               <button onClick={() => handleDownload(file.fileId, file.fileName)}><FontAwesomeIcon icon={faDownload} /></button>
               {loggedInUser.isLoggedIn && (
-                <button onClick={() => handleDelete(file.fileId)}><FontAwesomeIcon icon={faTrash}/></button>
+                <button onClick={() => handleDelete(file.fileId)}><FontAwesomeIcon icon={faTrash} /></button>
               )}
             </div>
-          )
-        ))}
+          ))
+        ) : (
+          <p>No files visible to all</p>
+        )}
+
+        {loggedInUser.isLoggedIn && (
+          <>
+            <h4>Files for the CYCLE Team</h4>
+            {visibleToLoggedInFiles.length > 0 ? (
+              visibleToLoggedInFiles.map(file => (
+                <div key={file.fileId} className="fileItem">
+                  <img src={fileDownload} alt="fileDownload" />
+                  <span><p>{file.displayName}</p></span>
+                  <button onClick={() => handleDownload(file.fileId, file.fileName)}><FontAwesomeIcon icon={faDownload} /></button>
+                  <button onClick={() => handleDelete(file.fileId)}><FontAwesomeIcon icon={faTrash} /></button>
+                </div>
+              ))
+            ) : (
+              <p>No files visible to logged-in users</p>
+            )}
+          </>
+        )}
       </div>
     </div>
   );
diff --git a/front-end/src/components/Download.css b/front-end/src/components/Download.css
index 552eaf4f..f624b156 100644
--- a/front-end/src/components/Download.css
+++ b/front-end/src/components/Download.css
@@ -41,14 +41,9 @@
   flex-direction: column;
   align-items: center;
   padding: 20px;
-  /* border: 1.5px solid hsl(222, 83%, 98%); */
   border: 2px solid rgba(10, 48, 128);
   border-radius: 20px;
   background-color: #e1edf9;
-  /* box-shadow: 2px 2px 5px rgba(63, 108, 148, 0.1), 
-              -2px -2px 5px rgba(255, 255, 255, 0.7), 
-              2px -2px 5px rgba(255, 255, 255, 0.7), 
-              -2px 2px 5px rgba(63, 108, 148, 0.1); */
   width: 90%;
   max-width: 400px;
   margin-left: 5%;
@@ -101,8 +96,6 @@
   color: #ffffff;
   cursor: pointer;
   font-size: 16px;
-  /* font-weight: bold; */
-  /* transition: background 0.3s ease, transform 0.2s ease; */
 }
 
 .upload-form button:hover {
@@ -121,7 +114,7 @@
   background-color: hsl(0, 0%, 100%);;
   margin-left: 5%;
   margin-right: 5%; 
-  margin-bottom: 2%;
+  margin-bottom: 5%;
 }
 
 
@@ -134,15 +127,10 @@
   background:  hsl(94, 41%, 97%);
   border: 2px solid hsl(105, 68%, 24%);
   border-radius: 10px;
-  /* box-shadow: 2px 2px 5px rgba(63, 108, 148, 0.1), 
-              -2px -2px 5px rgba(255, 255, 255, 0.7), 
-              2px -2px 5px rgba(255, 255, 255, 0.7), 
-              -2px 2px 5px rgba(63, 108, 148, 0.1); */
   width: auto;
 }
 
 .fileItem p {
-  /* margin: 10px 0; */
   text-align: left;
 }
 
@@ -167,14 +155,17 @@
   margin-top: 10px;
 }
 
+.downloadSection h4{
+  text-align: left;
+  font-size: 20px;
+  font-family: 'Caudex';
+  color: #000000;
+}
+
 .downloadLinks {
   border: 2px solid rgba(10, 48, 128);
   border-radius: 20px;
   background-color: #e1edf9;
-  /* box-shadow: 2px 2px 5px rgba(63, 108, 148, 0.1), 
-              -2px -2px 5px rgba(255, 255, 255, 0.7), 
-              2px -2px 5px rgba(255, 255, 255, 0.7), 
-              -2px 2px 5px rgba(63, 108, 148, 0.1); */
   padding: 10px;
   display: center;
   margin-left: 5%;
@@ -220,11 +211,6 @@
   display: center;
 }
 
-
-
-
-
-
 @media (max-width: 760px) {
 
   .downloadSection {