ViewsUpdatedOn11032023

client/src/App.jsx

@@ -19,6 +19,7 @@ import StudentLogin from './views/StudentLogin/StudentLogin';
 import ForgetPassword from './views/TeacherLogin/ForgetPassword';
 import ResetPassword from './views/TeacherLogin/ResetPassword';
 import TeacherLogin from './views/TeacherLogin/TeacherLogin';
+import Gallery from './views/Gallery/Gallery';
 
 const App = () => {
   return (
@@ -32,6 +33,7 @@ const App = () => {
         <Route path='/login' element={<StudentLogin />} />
         <Route path='/replay/:saveID' element={<Replay />} />
         <Route path='/sandbox' element={<BlocklyPage isSandbox={true} />} />
+        <Route path='/gallery' element={<Gallery />} />
         <Route
           path='/report'
           element={

client/src/components/NavBar/NavBar.jsx

@@ -99,6 +99,12 @@ export default function NavBar() {
             Sign Out
         </Menu.Item>
       ) : null}
+      {shouldShowRoute('Gallery') ? (
+        <Menu.Item key='9' onClick={() => handleRouteChange(routes.Gallery)}>
+          <i className='fa fa-images' />
+          &nbsp; Gallery
+        </Menu.Item>) : null
+      }
     </Menu>
   );
 
@@ -110,12 +116,12 @@ export default function NavBar() {
           value.role === 'ContentCreator'
             ? '/ccdashboard'
             : value.role === 'Mentor'
-            ? '/dashboard'
-            : value.role === 'Student'
-            ? '/student'
-            : value.role === 'Researcher'
-            ? '/report'
-            : '/'
+              ? '/dashboard'
+              : value.role === 'Student'
+                ? '/student'
+                : value.role === 'Researcher'
+                  ? '/report'
+                  : '/'
         }
       >
         <img src={Logo} id='casmm-logo' alt='logo' />

client/src/components/NavBar/NavBarConfig.json

@@ -9,19 +9,21 @@
     "AccountInfo": "/account",
     "ContentCreatorDashboard": "/ccdashboard",
     "ResearcherDashboard": "/report",
-    "BugReport": "/bugreport"
+    "BugReport": "/bugreport",
+    "Gallery": "/gallery"
   },
   "users": {
-    "DefaultUser": ["Home", "TeacherLogin", "Sandbox", "About"],
-    "Mentor": ["Dashboard", "AccountInfo", "SignOut", "Sandbox", "BugReport"],
-    "Student": ["SignOut"],
+    "DefaultUser": ["Home", "TeacherLogin", "Sandbox", "About", "Gallery"],
+    "Mentor": ["Dashboard", "AccountInfo", "SignOut", "Sandbox", "BugReport", "Gallery"],
+    "Student": ["SignOut", "Gallery"],
     "ContentCreator": [
       "ContentCreatorDashboard",
       "AccountInfo",
       "Sandbox",
       "SignOut",
-      "BugReport"
+      "BugReport",
+      "Gallery"
     ],
-    "Researcher": ["ResearcherDashboard", "BugReport", "SignOut"]
+    "Researcher": ["ResearcherDashboard", "BugReport", "SignOut", "Gallery"]
   }
 }

client/src/views/Gallery/Gallery.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import NavBar from "../../components/NavBar/NavBar";
+import GalleryItem from "./GalleryItem";
+
+
+const Gallery = () => (
+    <>
+        <NavBar />
+        <div className='container nav-padding'>
+            <h1>Gallery</h1>
+            <div className='flex flex-column'>
+                <GalleryItem />
+            </div>
+        </div>
+    </>
+)
+
+export default Gallery;

client/src/views/Gallery/GalleryItem.jsx

@@ -0,0 +1,134 @@
+import React, { useState, useEffect } from "react";
+import axios from 'axios';
+import './GalleryItem.less';
+
+//I make this declaration look like what is in the bootcamp3. 
+function GalleryItem() {
+
+	//these declarations are what i have found from google search
+
+	const path = './viewCountsRecord.JSON';
+
+
+  const [viewCounts, setViewCounts] = useState(
+    JSON.parse(localStorage.getItem("viewCounts")) || {}
+  );
+
+
+  // "0" should be changed in the future.
+  const handleClicked = (id) => {
+
+	  const updatedViewCounts = { ...viewCounts };
+	   updatedViewCounts[id] = (updatedViewCounts[id] || 0) + 1;
+    //the number of views increase by 1
+    setViewCounts(updatedViewCounts);
+
+  };
+
+
+
+  // This one is what i found from google search
+  useEffect(() => {
+    localStorage.setItem("viewCounts", JSON.stringify(viewCounts));
+  }, [viewCounts]);
+
+
+
+
+// The following is mostly from Spencer. I slightly modified it.
+  return (
+    <div className='container nav-padding'>
+      <div className='flex flex-row align-center justify-center'>
+        <div className='galleryItem' onClick={() => handleClicked(0)}>
+          <div className='header'><div>Project Name</div></div>
+          <img style={{ backgroundColor: 'red' }} />
+          <div className='flex flex-row'>
+            <div className='flex flex-column'>
+              <p>Creator:</p>
+              <p>Creator Name</p>
+              <p>Posted:</p>
+              <p>Posted Date</p>
+              <p>Views: {viewCounts[0] || 0}</p>
+            </div>
+            <div className='flex flex-column justify-end'>
+            </div>
+          </div>
+        </div>
+
+		<div className='galleryItem' onClick={() => handleClicked(1)}>
+          <div className='header'><div>Project Name</div></div>
+          <img style={{ backgroundColor: 'red' }} />
+          <div className='flex flex-row'>
+            <div className='flex flex-column'>
+              <p>Creator:</p>
+              <p>Creator Name</p>
+              <p>Posted:</p>
+              <p>Posted Date</p>
+              <p>Views: {viewCounts[1] || 0}</p>
+            </div>
+            <div className='flex flex-column justify-end'>
+            </div>
+          </div>
+        </div>
+
+
+
+      </div>
+    </div>
+  );
+}
+
+export default GalleryItem;
+
+
+/*import React, { useState, useEffect } from "react";
+import './GalleryItem.less';
+
+function GalleryItem ()
+{
+	const [viewCounts, setViewCounts] = useState(
+    JSON.parse(localStorage.getItem("viewCounts")) || {}
+  );
+
+  const handleClicked = () => {
+    // Increment the view count for the clicked post
+    setViewCounts((prevViewCounts) => ({
+      ...prevViewCounts,
+      0: (prevViewCounts[0] || 0) + 1,
+    }));
+  };
+
+   // Save view counts to local storage whenever they change
+  useEffect(() => {
+    localStorage.setItem("viewCounts", JSON.stringify(viewCounts));
+  }, [viewCounts]);
+
+  return
+ (
+
+    <div className='container nav-padding'>
+        <div className='flex flex-row align-center justify-center'>
+            <div className='galleryItem' onClick={() => handleClicked()}>
+                <div className='header'><div>Project Name</div></div>
+                <img style={{ backgroundColor: 'red' }} />
+                <div className='flex flex-row'>
+                    <div className='flex flex-column'>
+                        <p>Creator:</p>
+                        <p>Creator Name</p>
+                        <p>Posted:</p>
+                        <p>Posted Date</p>
+						<p>Views: {viewCounts[0] || 0}</p>
+                    </div>
+                    <div className='flex flex-column justify-end'>
+                        <p>7  5</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+);
+}
+
+export default GalleryItem;
+
+*/

client/src/views/Gallery/GalleryItem.less

@@ -0,0 +1,57 @@
+div.galleryItem {
+    display: block;
+    width: 20%;
+    height: min-content;
+    aspect-ratio: 1/1;
+    margin: 0.5rem;
+    background-color: #F4F4F5;
+    border-radius: 15px;
+    border: 4px solid;
+    border-color: #5BABDE;
+    transition: transform 0.5s ease;
+
+    &:hover {
+        cursor: pointer;
+        transform: scale(1.05);
+    }
+
+    &>img {
+        max-height: 50%;
+        max-width: 90%;
+        width: 100%;
+        height: 100%;
+        border-radius: inherit;
+    }
+
+    &>div.flex-row {
+        max-width: 100%;
+        break-inside: avoid;
+        justify-content: space-between;
+    }
+}
+
+div.header {
+    background-color: #5BABDE;
+    border-radius: 80px;
+    width: 90%;
+    min-height: 4vh;
+    color: #FFFFFF;
+    font-size: 2.25vh;
+    font-weight: bold;
+    position: relative;
+    top: -20px;
+    left: -30px;
+    line-height: 45px;
+    text-align: center;
+}
+
+div.ablock {
+    display: block;
+    width: 100%;
+    height: 100%;
+    background-color: red;
+}
+
+p {
+    text-align: start;
+}

client/src/views/Gallery/viewCountsRecord.json

@@ -0,0 +1,13 @@
+{
+"viewCounts": 
+	[ 
+		{
+			id: 0,
+			viewCount:0
+        },
+		{
+			id: 1,
+			viewCount:0
+        }
+	]
+}