Skip to content
Snippets Groups Projects
Commit 280d5f6c authored by hannahl8's avatar hannahl8
Browse files

add utils.ts and update page links to call from it. update vite.config.ts to...

add utils.ts and update page links to call from it. update vite.config.ts to start frontend dev on 8081
parent 05b5bbf2
No related branches found
No related tags found
No related merge requests found
Pipeline #10679 failed
......@@ -10,20 +10,29 @@ import DiscussionPage from "./pages/DiscussionPage.tsx";
import ProfilePage from "./pages/ProfilePage.tsx";
import './App.css'
import {Route, Routes} from "react-router-dom";
import {
discussionPagePath,
labsPagePath,
loginPagePath,
openingsPagePath, profilePagePath,
signUpProfessorPagePath,
signUpStudentPagePath,
welcomePagePath
} from "./utils.ts";
export default function App() {
return (
<div className="app">
<AppHeader/>
<Routes>
<Route path="/" element={<WelcomePage/>}/>
<Route path="/signup/student" element={<SignUpStudentPage/>}/>
<Route path="/signup/professor" element={<SignUpProfessorPage/>}/>
<Route path="/login" element={<LoginPage/>}/>
<Route path="/labs" element={<LabsPage/>}/>
<Route path="/openings" element={<OpeningsPage/>}/>
<Route path="/discussion" element={<DiscussionPage/>}/>
<Route path="/profile" element={<ProfilePage/>}/>
<Route path={welcomePagePath} element={<WelcomePage/>}/>
<Route path={signUpStudentPagePath} element={<SignUpStudentPage/>}/>
<Route path={signUpProfessorPagePath} element={<SignUpProfessorPage/>}/>
<Route path={loginPagePath} element={<LoginPage/>}/>
<Route path={labsPagePath} element={<LabsPage/>}/>
<Route path={openingsPagePath} element={<OpeningsPage/>}/>
<Route path={discussionPagePath} element={<DiscussionPage/>}/>
<Route path={profilePagePath} element={<ProfilePage/>}/>
</Routes>
<AppFooter/>
</div>
......
import {Link} from "react-router-dom";
import "./AppFooter.css";
import {discussionPagePath, labsPagePath, openingsPagePath, profilePagePath} from "../utils.ts";
export default function AppFooter() {
return (
<footer className="container">
<section className="links">
<Link to="/labs">LABS</Link> | <Link to="/openings">OPENINGS</Link> | <Link to="/discussion">DISCUSSION</Link> | <Link to="/profile">PROFILE</Link>
<Link to={labsPagePath}>LABS</Link> | <Link to={openingsPagePath}>OPENINGS</Link> | <Link
to={discussionPagePath}>DISCUSSION</Link> | <Link to={profilePagePath}>PROFILE</Link>
</section>
<p>&copy; 2024 VT Research Connect. All Rights Reserved.</p>
<p>Capstone Project</p>
......
import {Link} from "react-router-dom";
import "./AppHeader.css";
import {
discussionPagePath,
labsPagePath,
loginPagePath,
openingsPagePath,
profilePagePath,
welcomePagePath
} from "../utils.ts";
export default function AppHeader() {
return (
<header className="header container">
<section className="logo-and-title">
<Link className="logo-and-text" to="/">
<Link className="logo-and-text" to={welcomePagePath}>
<img
className="logo"
src="/site-images/logo.png" // PLACEHOLDER
alt="VT Reseach Connect Logo"
/>
</Link>
<Link className="logo-and-text" to="/">
<Link className="logo-and-text" to={welcomePagePath}>
<h1 className="logo-text">VT Research Connect</h1>
</Link>
</section>
<section className="labs-openings-discussion-profile-login">
<Link to="/labs"><button className="button"><i className="fa-solid fa-flask"></i> LABS</button></Link>
<Link to="/openings"><button className="button"><i className="fa-solid fa-door-open"></i> OPENINGS</button></Link>
<Link to="/discussion"><button className="button"><i className="fa-solid fa-comments"></i> DISCUSSION</button></Link>
<Link to="/profile"><button className="button"><i className="fa-solid fa-user"></i> PROFILE</button></Link>
<Link to="/login"><button className="button"><i className="fa-solid fa-sign-in"></i> LOGIN</button></Link>
<Link to={labsPagePath}><button className="button"><i className="fa-solid fa-flask"></i> LABS</button></Link>
<Link to={openingsPagePath}><button className="button"><i className="fa-solid fa-door-open"></i> OPENINGS</button></Link>
<Link to={discussionPagePath}><button className="button"><i className="fa-solid fa-comments"></i> DISCUSSION</button></Link>
<Link to={profilePagePath}><button className="button"><i className="fa-solid fa-user"></i> PROFILE</button></Link>
<Link to={loginPagePath}><button className="button"><i className="fa-solid fa-sign-in"></i> LOGIN</button></Link>
</section>
</header>
);
......
import {useState, useEffect} from 'react';
import axios from 'axios';
import './LabsPage.css';
import {labsAPI} from "../utils.ts";
interface Data {
// Define the structure of the data you expect from the endpoint
......@@ -38,7 +39,7 @@ export default function LabsPage() {
// , []);
axios.get<Data[]>('https://vtrc-backend.discovery.cs.vt.edu/api/labs')
axios.get<Data[]>(`${labsAPI}`)
.then(response => {
setData(response.data);
setLoading(false);
......
......@@ -23,6 +23,11 @@
justify-content: space-between;
}
.login-form form input {
color: var(--primary-color);
border-radius: 5px;
}
.remember-me {
display: flex;
align-items: center;
......
import './LoginPage.css'
import {Link, useNavigate} from "react-router-dom";
import React, {useState} from "react";
import {labsPagePath, loginAPI, signUpProfessorPagePath, signUpStudentPagePath} from "../utils.ts";
export default function LoginPage() {
......@@ -20,7 +21,7 @@ export default function LoginPage() {
e.preventDefault();
// Send email and password to server
fetch('https://vtrc-backend.discovery.cs.vt.edu/api/login', {
fetch(`${loginAPI}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
......@@ -33,7 +34,7 @@ export default function LoginPage() {
// use this on other pages to check if user is logged in
// Added to LabsPage.tsx, but commented out until we have a login page working
localStorage.setItem('token', data.token);
navigate('/labs'); // We can change this
navigate(`${labsPagePath}`); // We can change this
} else {
alert('Login failed: ' + data.message);
}
......@@ -65,8 +66,8 @@ export default function LoginPage() {
</form>
<div className="no-account">
<p>Don't have an account?</p>
<Link to="/signup/student"><a>Student Sign Up</a></Link>
<Link to="/signup/professor"><a>Professor Sign Up</a></Link>
<Link to={signUpStudentPagePath}>Student Sign Up</Link>
<Link to={signUpProfessorPagePath}>Professor Sign Up</Link>
</div>
</section>
</div>
......
import "./SignUpPage.css"
import {Link} from "react-router-dom";
import {loginPagePath, signUpStudentPagePath} from "../utils.ts";
export default function SignUpProfessorPage() {
return (
......@@ -43,7 +44,9 @@ export default function SignUpProfessorPage() {
</form>
<div className="have-account">
<p>Already have an account?</p>
<Link to="/login"><a>Login</a></Link>
<Link to={loginPagePath}>Login</Link>
<p>Not a Professor?</p>
<Link to={signUpStudentPagePath}>Student Sign Up</Link>
</div>
</section>
</div>
......
import {Link} from "react-router-dom";
import "./SignUpPage.css"
import {loginPagePath, signUpProfessorPagePath} from "../utils.ts";
export default function SignUpStudentPage() {
return (
......@@ -55,7 +56,9 @@ export default function SignUpStudentPage() {
<div className="have-account">
<p>Already have an account?</p>
<Link to="/login"><a>Login</a></Link>
<Link to={loginPagePath}>Login</Link>
<p>Not a Student?</p>
<Link to={signUpProfessorPagePath}>Professor Sign Up</Link>
</div>
</section>
</div>
......
import './WelcomePage.css'
import {Link} from "react-router-dom";
import {
discussionPagePath,
labsPagePath,
openingsPagePath,
signUpProfessorPagePath,
signUpStudentPagePath
} from "../utils.ts";
export default function WelcomePage() {
return (
<div className="welcome-page center-content">
<section className="welcome-students">
<h2>Welcome Students</h2>
<p>As a student, you can easily explore and filter through all the <Link to="/labs">Research Labs</Link> at
<p>As a student, you can easily explore and filter through all the <Link to={labsPagePath}>Research Labs</Link> at
Virginia Tech. Each lab's profile includes essential details such as the lab name, the principal
investigator (PI), and a link to their external website. Additionally, you can search for <Link
to="/openings">Openings</Link> and apply for volunteer or paid positions in various research labs. Join
our <Link to="/discussion">Discussion Forum</Link> to engage with fellow students, share insights about
to={openingsPagePath}>Openings</Link> and apply for volunteer or paid positions in various research labs. Join
our <Link to={discussionPagePath}>Discussion Forum</Link> to engage with fellow students, share insights about
research, and subscribe to feeds based on department, topic, or specific labs.</p>
<Link to="/signup/student"><button className="call-to-action-button">STUDENT SIGN UP!</button></Link>
<Link to={signUpStudentPagePath}><button className="call-to-action-button">STUDENT SIGN UP!</button></Link>
</section>
<section className="welcome-professors">
<h2>Welcome Professors</h2>
<p>As a professor, you can showcase your <Link to="/labs">Research Lab</Link> to the vibrant Virginia Tech
<p>As a professor, you can showcase your <Link to={labsPagePath}>Research Lab</Link> to the vibrant Virginia Tech
community. Create a comprehensive profile that includes your lab's name, your role as the principal
investigator (PI), and a link to your external website. Post <Link to="/openings">Openings</Link> for
investigator (PI), and a link to your external website. Post <Link to={openingsPagePath}>Openings</Link> for
volunteer and paid positions to attract enthusiastic and qualified students. Engage with students
and colleagues in our <Link to="/discussion">Discussion Forum</Link>, where you can share insights, foster
and colleagues in our <Link to={discussionPagePath}>Discussion Forum</Link>, where you can share insights, foster
collaborations, and stay updated on the latest research topics and departmental news.</p>
<Link to="/signup/professor"><button className="call-to-action-button">PROFESSOR SIGN UP!</button></Link>
<Link to={signUpProfessorPagePath}><button className="call-to-action-button">PROFESSOR SIGN UP!</button></Link>
</section>
</div>
);
......
// http://localhost:8080/api/login
// https://vtrc-backend.discovery.cs.vt.edu/api/login
export const loginAPI = 'https://vtrc-backend.discovery.cs.vt.edu/api/login';
// http://localhost:8080/api/labs
// https://vtrc-backend.discovery.cs.vt.edu/api/labs
export const labsAPI = 'https://vtrc-backend.discovery.cs.vt.edu/api/labs';
// ROUTES
export const welcomePagePath = '/';
export const signUpStudentPagePath = '/signup/student';
export const signUpProfessorPagePath = '/signup/professor';
export const loginPagePath = '/login';
export const labsPagePath = '/labs';
export const openingsPagePath = '/openings';
export const discussionPagePath = '/discussion';
export const profilePagePath = '/profile';
......@@ -5,11 +5,11 @@ export default defineConfig({
base: "/",
plugins: [react()],
preview: {
port: 8080,
port: 8081,
strictPort: true,
},
server: {
port: 8080,
port: 8081,
strictPort: true,
host: true,
origin: "http://0.0.0.0:8080",
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment