From ee040e96df3b70b7c48e6343a4a4f86dbe535d90 Mon Sep 17 00:00:00 2001 From: Sagar Sahu <145163371+sagars2004@users.noreply.github.com> Date: Wed, 16 Apr 2025 22:46:11 -0400 Subject: [PATCH 1/3] Update README.md --- README.md | 41 +++++++++++++++++++++++++++++++++-------- 1 file changed, 33 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 8ac29cbc..5b2fed97 100644 --- a/README.md +++ b/README.md @@ -1,29 +1,54 @@ -# LabConnect-Frontend +# Welcome to LabConnect (Frontend) +Team: Rafael Cenzano, Sagar Sahu, Will Broadwell -React frontend for the [Labconnect project](https://labconnect.cs.rpi.edu/). +This README is meant to serve as documentation for users and developers to explore the LabConnect application on their down device. Below you will find detailed setup instructions as well as more information about the product and its intended purpose, as well as some important links and guides. Enjoy! + +All open-source contributions for LabConnect can be found at the following link: https://github.com/LabConnect-RCOS. + +## What's LabConnect? +LabConnect is a platform dedicated to bridging the gap between students and research opportunities. We aim to make it easier for students to find meaningful lab/research work while helping professors connect with passionate individuals through a convenient, all-in-one application. Our team is hard at work, and we will provide updates on our progress so keep an eye out for announcements! Currently, we're putting some final touches on our product and hope to release it university-wide in the upcoming fall semester. + +If you're interested in learning more about the team at RCOS or are thinking about joining LabConnect or any branch of RCOS, please check out the new website here to learn more about existing projects and areas of interest: https://new.rcos.io/. + +## Some New Stuff +This semester, our team has made a lot of progress in finetuning the application and correctly syncing the backend and frontend. A few of the new contributions made are: +1. A brand new, remade UI catered towards students +2. Convenient features and toggles, such as dark mode, to accommodate for different user preferences +3. Revamped opportunities and listing pages +4. Functioning backend with PostgreSQL database for departments, professors, and opportunities +5. Advances filtering for facotrs like hours, pay/credit, supervisor, subject, etc... ## Setup -Clone repo +To clone the repository: ```bash $ git clone https://github.com/LabConnect-RCOS/LabConnect-Frontend.git ``` -Install dependencies +To install dependencies: ```bash npm install ``` ## Developement - +Running the application should be very simple. Use one of the commands below: +```bash +npm start +``` +OR ```bash npm run dev ``` -## Production - -You can use the docker images in the packages that are created on all commits to the main branch or build with the commands below and serve the files through your own prefered methods. +You can also use the docker images in the packages that are created on all commits to the main branch or build with the commands below and serve the files through your own prefered methods: ```bash npm run build ``` + +## Troubleshooting +If you encounter any bugs or issues in your experience, double check the spelling of your commands and consider force-quitting the application by entering `^C` in both the backend and frontend terminals. Then restart the application, and ensure that all connections and dependencies are installed and working, as decribed above. + +Please don't hesitate to reach out with additional concerns or comments. We value your feedback in making LabConnect the best product it can be. + +### Thank you so much for checking out LabConnect! From 9e1fa3412e80a030e3d510c1fb7e6a1cfa559cec Mon Sep 17 00:00:00 2001 From: Sagar Sahu Date: Fri, 18 Apr 2025 16:49:47 -0400 Subject: [PATCH 2/3] Add notification popup prototype --- src/shared/pages/Home.tsx | 64 ++++++++++++++++++++++++++++++++++++--- 1 file changed, 60 insertions(+), 4 deletions(-) diff --git a/src/shared/pages/Home.tsx b/src/shared/pages/Home.tsx index e738f9a8..36218703 100644 --- a/src/shared/pages/Home.tsx +++ b/src/shared/pages/Home.tsx @@ -1,5 +1,6 @@ import React, { useRef, useState, useEffect } from "react"; import { Link } from "react-router-dom"; +import { FaEnvelope } from "react-icons/fa"; import darkLogo from "../../images/LabConnect_Logo2-removebg-preview.png"; import SEO from "../components/SEO.tsx"; @@ -24,13 +25,24 @@ const Home = () => { document.documentElement.classList.contains("dark") ); + // Inbox popup state & ref + const [showInbox, setShowInbox] = useState(false); + const inboxRef = useRef(null); + + // Mock notifications + const notifications = [ + { id: 1, text: "Biology Department posted new research positions.", time: "2h ago" }, + { id: 2, text: "Your application to Quantum Lab was accepted!", time: "1d ago" }, + { id: 3, text: "Reminder: Update your profile by April 30th.", time: "3d ago" }, + ]; + // Preload the dark logo to ensure it's cached. useEffect(() => { const preloadImg = new Image(); preloadImg.src = darkLogo; }, []); - // Use a faster polling interval (50ms) to check if the "dark" class is present + // Poll for dark-mode changes useEffect(() => { const intervalId = setInterval(() => { setIsDarkMode(document.documentElement.classList.contains("dark")); @@ -57,6 +69,21 @@ const Home = () => { return () => window.removeEventListener("scroll", handleScroll); }, []); + // Click‑outside handler for Inbox popup + useEffect(() => { + const handleClickOutside = (e: MouseEvent) => { + if ( + showInbox && + inboxRef.current && + !inboxRef.current.contains(e.target as Node) + ) { + setShowInbox(false); + } + }; + document.addEventListener("mousedown", handleClickOutside); + return () => document.removeEventListener("mousedown", handleClickOutside); + }, [showInbox]); + const handleContactChange = ( e: React.ChangeEvent ) => { @@ -82,9 +109,38 @@ const Home = () => { {/* Welcome Section */}
+ {/* Inbox button & popup wrapper */} +
+ + + {showInbox && ( +
+
+ Inbox +
+ {notifications.map((n) => ( +
+ + {n.text} + + + {n.time} + +
+ ))} +
+ )} +
+
- {/* The image source now switches instantaneously. - Inline style disables any default transition. */} LabConnect { ); }; -export default Home; +export default Home; \ No newline at end of file From ec2a7de857f5c0d30da7b3c35f80957ee3208301 Mon Sep 17 00:00:00 2001 From: Sagar Sahu Date: Fri, 18 Apr 2025 17:09:19 -0400 Subject: [PATCH 3/3] Update Home.tsx (minor fix for inbox) --- src/shared/pages/Home.tsx | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/src/shared/pages/Home.tsx b/src/shared/pages/Home.tsx index 36218703..b13764b4 100644 --- a/src/shared/pages/Home.tsx +++ b/src/shared/pages/Home.tsx @@ -42,7 +42,7 @@ const Home = () => { preloadImg.src = darkLogo; }, []); - // Poll for dark-mode changes + // Poll for dark‑mode changes useEffect(() => { const intervalId = setInterval(() => { setIsDarkMode(document.documentElement.classList.contains("dark")); @@ -50,7 +50,7 @@ const Home = () => { return () => clearInterval(intervalId); }, []); - // Scroll event to update "Return to Top" button visibility and position. + // Scroll event for Return to Top button useEffect(() => { const handleScroll = () => { setShowReturnToTop(window.scrollY > 100); @@ -109,17 +109,23 @@ const Home = () => { {/* Welcome Section */}
- {/* Inbox button & popup wrapper */} -
+ {/* Inbox label + button locked top‑right */} +
+ + View Inbox + {showInbox && ( -
+
Inbox