merge development

api/.env.example

@@ -17,7 +17,7 @@ geocoder_provider=mapquest
 geocoder_api_key= # Get your API key from https://developer.mapquest.com/
 
 # File upload configuration
-file_upload_path=./public/uploads
+file_upload_path=../ui/public/images
 max_file_upload=1000000
 
 # JWT configuration

ui/eslint.config.mjs

@@ -0,0 +1,26 @@
+import globals from 'globals';
+import pluginJs from '@eslint/js';
+import pluginReact from 'eslint-plugin-react';
+
+export default [
+  { files: ['**/*.{js,mjs,cjs,jsx}'] },
+  {
+    languageOptions: {
+      globals: {
+        ...globals.builtin,
+        ...globals.browser,
+        ...globals.node,
+        ...globals.es2022,
+        ...globals.es2023,
+        ...globals.esnext,
+      },
+    },
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+  },
+  pluginJs.configs.recommended,
+  pluginReact.configs.flat.recommended,
+];

ui/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "bootstrap": "^5.3.3",
+    "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-bootstrap": "^2.10.4",
     "react-dom": "^18.3.1",
@@ -18,7 +19,8 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --passWithNoTests",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "lint": "npx eslint ."
   },
   "eslintConfig": {
     "extends": [
@@ -37,5 +39,13 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@eslint/js": "^9.13.0",
+    "eslint": "^8.57.1",
+    "eslint-plugin-react": "^7.37.1",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "globals": "^15.11.0"
   }
 }

ui/src/App.js

@@ -1,10 +1,10 @@
-import { useEffect, useState } from 'react';
+import React from 'react';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { ToastContainer } from 'react-toastify';
 
 import { Header, Footer } from './components';
 import { HomePage, AboutPage, NotFoundPage } from './pages';
-import { LoginPage, RegisterPage, ManageAccountPage } from './pages/user';
+import { LoginPage, RegisterPage, ManageAccountPage, ResetPasswordPage, UpdatePasswordPage } from './pages/user';
 import {
   AddBootcampPage,
   AddCoursePage,
@@ -18,18 +18,7 @@ import {
   ManageReviewsPage,
 } from './pages/bootcamps';
 
-import ProtectedRoute from './routes/ProtectedRoute';
-
 function App() {
-  const [isAuthenticated, setIsAuthenticated] = useState(false);
-
-  useEffect(() => {
-    const token = localStorage.getItem('token');
-    if (token) {
-      setIsAuthenticated(true);
-    }
-  }, []);
-
   return (
     <BrowserRouter>
       <Header />
@@ -38,40 +27,21 @@ function App() {
         <Routes>
           <Route path="/" element={<HomePage />} />
           <Route path="/about" element={<AboutPage />} />
-          <Route path="/login" element={<LoginPage setIsAuthenticated={setIsAuthenticated} />} />
-          <Route path="/register" element={<RegisterPage />} />
-          <Route
-            path="/account/manage"
-            element={
-              <ProtectedRoute isAuthenticated={isAuthenticated}>
-                <ManageAccountPage />
-              </ProtectedRoute>
-            }
-          />
+          <Route path="/user/login" element={<LoginPage />} />
+          <Route path="/user/register" element={<RegisterPage />} />
+          <Route path="/user/password/reset" element={<ResetPasswordPage />} />
+          <Route path="/user/password/update" element={<UpdatePasswordPage />} />
+          <Route path="/user/manage" element={<ManageAccountPage />} />
           <Route path="/bootcamps" element={<BootcampsPage />} />
           <Route path="/bootcamps/:bootcampId" element={<BootcampDetailsPage />} />
           <Route path="/bootcamps/add" element={<AddBootcampPage />} />
           <Route path="/bootcamps/manage" element={<ManageBootcampsPage />} />
-          <Route
-            path="/bootcamps/:bootcampId/manage"
-            element={
-              <ProtectedRoute isAuthenticated={isAuthenticated}>
-                <ManageBootcampPage />
-              </ProtectedRoute>
-            }
-          />
+          <Route path="/bootcamps/:bootcampId/manage" element={<ManageBootcampPage />} />
           <Route path="/bootcamps/:bootcampId/courses/add" element={<AddCoursePage />} />
           <Route path="/bootcamps/:bootcampId/courses/manage" element={<ManageCoursesPage />} />
           <Route path="/bootcamps/:bootcampId/reviews" element={<BootcampReviewsPage />} />
           <Route path="/bootcamps/:bootcampId/reviews/manage" element={<ManageReviewsPage />} />{' '}
-          <Route
-            path="/bootcamps/:bootcampId/reviews/add"
-            element={
-              <ProtectedRoute isAuthenticated={isAuthenticated}>
-                <AddReviewPage />
-              </ProtectedRoute>
-            }
-          />
+          <Route path="/bootcamps/:bootcampId/reviews/add" element={<AddReviewPage />} />
           <Route path="*" element={<NotFoundPage />} />
         </Routes>
       </main>

ui/src/components/Bootcamp.jsx

@@ -1,12 +1,14 @@
+import React from 'react';
 import { Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
 import { Image } from 'react-bootstrap';
 
 const Bootcamp = ({ id, photo, name, averageRating, location, careers }) => {
   return (
     <div className="card mb-3">
       <div className="row no-gutters">
         <div className="col-md-4">
-          <Image src={photo} className="card-img" alt={name} />
+          <Image src={`/images/${photo}`} className="card-img full-size-image" alt={name} />
         </div>
         <div className="col-md-8">
           <div className="card-body">
@@ -27,4 +29,13 @@ const Bootcamp = ({ id, photo, name, averageRating, location, careers }) => {
   );
 };
 
+Bootcamp.propTypes = {
+  id: PropTypes.string.isRequired,
+  photo: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  averageRating: PropTypes.number,
+  location: PropTypes.object.isRequired,
+  careers: PropTypes.array.isRequired,
+};
+
 export default Bootcamp;

ui/src/components/BootcampReviewRating.jsx

@@ -1,4 +1,6 @@
+import React from 'react';
 import { Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
 import { GrEdit, GrClose } from 'react-icons/gr';
 
 const BootcampReviewRating = ({ bootcampId, bootCampName, bootCampRating }) => {
@@ -11,12 +13,18 @@ const BootcampReviewRating = ({ bootcampId, bootCampName, bootCampRating }) => {
           <GrEdit />
         </Link>
 
-        <button class="btn btn-danger mb-1">
+        <button className="btn btn-danger mb-1">
           <GrClose />
         </button>
       </td>
     </tr>
   );
 };
 
+BootcampReviewRating.propTypes = {
+  bootcampId: PropTypes.string.isRequired,
+  bootCampName: PropTypes.string.isRequired,
+  bootCampRating: PropTypes.number.isRequired,
+};
+
 export default BootcampReviewRating;

ui/src/components/Footer.jsx

@@ -1,3 +1,4 @@
+import React from 'react';
 const Footer = () => {
   return <footer>{/* Add footer details here */}</footer>;
 };

ui/src/components/Header.jsx

@@ -1,4 +1,6 @@
+import React from 'react';
 import { Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
 import { Nav, Navbar, Container, Dropdown } from 'react-bootstrap';
 import { FaSignInAlt, FaUserPlus, FaSearch, FaUser, FaSignOutAlt, FaCogs, FaStar } from 'react-icons/fa';
 
@@ -46,10 +48,10 @@ function Header({ isAuthenticated, setIsAuthenticated }) {
                 </Dropdown>
               ) : (
                 <>
-                  <Nav.Link as={Link} to="/login">
+                  <Nav.Link as={Link} to="/user/login">
                     <FaSignInAlt /> Login
                   </Nav.Link>
-                  <Nav.Link as={Link} to="/register">
+                  <Nav.Link as={Link} to="/user/register">
                     <FaUserPlus /> Register
                   </Nav.Link>
                 </>
@@ -66,4 +68,9 @@ function Header({ isAuthenticated, setIsAuthenticated }) {
   );
 }
 
+Header.propTypes = {
+  isAuthenticated: PropTypes.bool,
+  setIsAuthenticated: PropTypes.func,
+};
+
 export default Header;

ui/src/components/Pagination.jsx

@@ -1,3 +1,4 @@
+import React from 'react';
 const Pagination = () => {
   return (
     <nav aria-label="Page navigation example">

ui/src/index.css

@@ -48,3 +48,9 @@ img {
   align-items: center;
   height: 100vh; /* Full viewport height */
 }
+
+.full-size-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}

ui/src/pages/AboutPage.jsx

@@ -1,3 +1,4 @@
+import React from 'react';
 const AboutPage = () => {
   return <div>AboutPage</div>;
 };

ui/src/pages/HomePage.jsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Row, Col, Form, Button } from 'react-bootstrap';
 
 const HomePage = () => {

ui/src/pages/NotFoundPage.jsx

@@ -1,3 +1,4 @@
+import React from 'react';
 const NotFoundPage = () => {
   return <div>Not Found Page</div>;
 };

ui/src/pages/bootcamps/AddBootcampPage.jsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { toast } from 'react-toastify';
 
@@ -21,6 +21,9 @@ const AddBootcampPage = () => {
   });
 
   const [error, setError] = useState(null);
+
+  // TODO: Fix eslint error during page implementation
+  // eslint-disable-next-line
   const { name, address, phone, email, website, description, careers, housing, jobAssistance, jobGuarantee, acceptGi } =
     formData;
 
@@ -44,6 +47,9 @@ const AddBootcampPage = () => {
     }
   };
 
+  // TODO: Add error handling
+  if (error) return <h1>Error: {error}</h1>;
+
   return (
     <section className="container mt-5">
       <div className="container">

ui/src/pages/bootcamps/AddCoursePage.jsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { Link, useParams, useNavigate } from 'react-router-dom';
 import { AiOutlineLeft } from 'react-icons/ai';
 import courseService from '../../services/courseService';

ui/src/pages/bootcamps/BootcampDetailsPage.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { Button, Card, ListGroup } from 'react-bootstrap';
 import { FaCheck, FaComments, FaTimes } from 'react-icons/fa';

ui/src/pages/bootcamps/BootcampReviewsPage.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Link, useParams } from 'react-router-dom';
 import Card from 'react-bootstrap/Card';
 import { FaPencil } from 'react-icons/fa6';
@@ -30,8 +30,8 @@ const BootcampReviewsPage = () => {
             </Link>
             <h1 className="mb-4">{bootcamp} Reviews</h1>
             {/* <!-- Reviews --> */}
-            {reviews.map((data, key) => (
-              <Card className="card mb-3">
+            {reviews.map((data) => (
+              <Card className="card mb-3" key={data.key}>
                 <h5 className="card-header bg-dark text-white">{data.title}</h5>
                 <div className="card-body">
                   <h5 className="card-title">

ui/src/pages/bootcamps/BootcampsPage.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Oval } from 'react-loader-spinner';
 import { Bootcamp } from '../../components';
 import bootcampService from '../../services/bootcampService';