Fixed so that the names work with backen and frontend

.gitignore

@@ -23,4 +23,6 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-.vscode
+.vscode
+.idea
+

.prettierignore

@@ -0,0 +1,3 @@
+
+src/*
+src/

package.json

@@ -10,8 +10,10 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-modal": "^3.16.1",
+    "react-password-checklist": "^1.8.1",
     "react-router-dom": "^6.8.0",
     "react-scripts": "5.0.1",
+    "reactjs-popup": "^2.0.6",
     "web-vitals": "^3.1.1"
   },
   "scripts": {
@@ -43,7 +45,7 @@
   },
   "devDependencies": {
     "eslint": "^8.57.1",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-prettier": "^9.1.2",
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-n": "^16.6.2",

src/App.css

@@ -14,3 +14,8 @@
 .ReactModal__Html--open {
   overflow: hidden;
 }
+
+.border-line {
+  border-bottom: 1px solid var(--color-blue5);
+  padding: 20px 10px;
+}

src/App.js

@@ -8,18 +8,21 @@ import Verification from './pages/verification';
 import { AuthProvider, ProtectedRoute } from './context/auth';
 import { ModalProvider } from './context/modal';
 import Welcome from './pages/welcome';
+import { FormProvider } from './context/form';
+import Cohort from './pages/cohort';
+
 
 const App = () => {
   return (
     <>
       <AuthProvider>
+        <FormProvider>
         <ModalProvider>
           <Routes>
             <Route path="login" element={<Login />} />
             <Route path="register" element={<Register />} />
             <Route path="loading" element={<Loading />} />
             <Route path="verification" element={<Verification />} />
-
             <Route
               index
               element={
@@ -36,8 +39,17 @@ const App = () => {
                 </ProtectedRoute>
               }
             />
+            <Route
+              path="cohorts"
+              element={
+                <ProtectedRoute>
+                  <Cohort />
+                </ProtectedRoute>
+              }
+            />
           </Routes>
         </ModalProvider>
+        </FormProvider>
       </AuthProvider>
     </>
   );

src/components/dropdown/index.js

@@ -0,0 +1,75 @@
+import React, { useState, useRef, useEffect } from "react";
+
+function DropdownMenu({
+  label,
+  options = [],
+  value,
+  onChange,
+  placeholder = "Select an option",
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef(null);
+
+  const toggleDropdown = () => setIsOpen((prev) => !prev);
+
+  const handleOptionClick = (optionValue) => {
+    onChange(optionValue);
+    setIsOpen(false);
+  };
+
+  const handleClickOutside = (event) => {
+    if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+      setIsOpen(false);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const normalizedOptions = Array.isArray(options)
+    ? options.map((opt) =>
+        typeof opt === "object"
+          ? { label: opt.label, value: opt.value }
+          : { label: opt, value: opt }
+      )
+    : [];
+
+  const selectedOption = normalizedOptions.find((opt) => opt.value === value);
+
+  return (
+    <div className="inputwrapper" ref={dropdownRef} style={{ position: "relative" }}>
+      {label && <label>{label}</label>}
+      <button
+        type="button"
+        onClick={toggleDropdown}
+        className="dropbtn"
+      >
+        {selectedOption?.label || placeholder}
+      </button>
+
+      {isOpen && (
+        <ul
+          className="dropdown-menu"
+        >
+          {normalizedOptions.map((option) => (
+            <li
+              key={option.value}
+              onClick={() => handleOptionClick(option.value)}
+              style={{
+                padding: "0.5rem 1rem",
+                cursor: "pointer",
+                backgroundColor: value === option.value ? "#f0f0f0" : "#fff",
+              }}
+            >
+              {option.label}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+export default DropdownMenu;

src/components/dropdown/style.css

@@ -0,0 +1,45 @@
+/* Dropdown Button */
+.dropbtn {
+  background-color: #3498DB;
+  color: white;
+  padding: 16px;
+  font-size: 16px;
+  border: none;
+  cursor: pointer;
+}
+
+/* Dropdown button on hover & focus */
+.dropbtn:hover, .dropbtn:focus {
+  background-color: #2980B9;
+}
+
+/* The container <div> - needed to position the dropdown content */
+.dropdown {
+  position: relative;
+  left: 0;
+  display: inline-block;
+}
+
+/* Dropdown Content (Hidden by Default) */
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: #f1f1f1;
+  min-width: 160px;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  z-index: 1;
+}
+
+/* Links inside the dropdown */
+.dropdown-content a {
+  color: black;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+}
+
+/* Change color of dropdown links on hover */
+.dropdown-content a:hover {background-color: #ddd;}
+
+/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
+.show {display:block;}

src/components/form/numberInput/index.js

@@ -0,0 +1,25 @@
+
+const NumberInput = ({ value, onChange, name, label, icon, type = 'number',placeholder}) => {
+
+    return (
+      <div className="inputwrapper">
+        {label && <label htmlFor={name}>{label}</label>}
+        <input
+          type={type}
+          name={name}
+          value={value}
+          onChange={onChange}
+          className={icon && 'input-has-icon'}
+          placeholder={placeholder} 
+
+          onInput={(e) => {
+            if (e.target.value.length > 11) {
+                e.target.value = e.target.value.slice(0, 11);
+              }}}
+        />
+        {icon && <span className="input-icon">{icon}</span>}
+      </div>
+    );
+  }
+
+export default NumberInput;

src/components/form/textInput/index.js

@@ -1,8 +1,8 @@
 import { useState } from 'react';
 
-const TextInput = ({ value, onChange, name, label, icon, type = 'text' }) => {
-  const [input, setInput] = useState('');
+const TextInput = ({ value, onChange, name, label, icon, type = 'text', placeholder }) => {
   const [showpassword, setShowpassword] = useState(false);
+  const [input, setInput] = useState(value);
   if (type === 'password') {
     return (
       <div className="inputwrapper">
@@ -11,9 +11,10 @@ const TextInput = ({ value, onChange, name, label, icon, type = 'text' }) => {
           type={type}
           name={name}
           value={value}
+          placeholder = {placeholder}
           onChange={(e) => {
             onChange(e);
-            setInput(e.target.value);
+            setInput(e.target.value)
           }}
         />
         {showpassword && <input type="text" name={name} value={input} className="passwordreveal" />}
@@ -22,6 +23,7 @@ const TextInput = ({ value, onChange, name, label, icon, type = 'text' }) => {
           onClick={(e) => {
             e.preventDefault();
             setShowpassword(!showpassword);
+
           }}
         >
           <EyeLogo />
@@ -36,14 +38,15 @@ const TextInput = ({ value, onChange, name, label, icon, type = 'text' }) => {
           type={type}
           name={name}
           value={value}
+          placeholder = {placeholder}
           onChange={onChange}
           className={icon && 'input-has-icon'}
         />
         {icon && <span className="input-icon">{icon}</span>}
       </div>
     );
   }
-};
+}
 
 const EyeLogo = () => {
   return (

src/components/navigation/index.js

@@ -28,7 +28,7 @@ const Navigation = () => {
           </NavLink>
         </li>
         <li>
-          <NavLink to="/">
+          <NavLink to="/cohorts">
             <CohortIcon />
             <p>Cohort</p>
           </NavLink>

src/components/posts/index.js

@@ -6,17 +6,32 @@ const Posts = () => {
   const [posts, setPosts] = useState([]);
 
   useEffect(() => {
-    getPosts().then(setPosts);
+    async function fetchPosts() {
+      try {
+        const posts = await getPosts();
+        setPosts(posts);
+      } catch (error) {
+        console.error('Error fetching posts:', error);
+        setPosts([]);
+      }
+    }
+    fetchPosts();
   }, []);
 
+
   return (
     <>
       {posts.map((post) => {
+        // Handle missing author gracefully
+        const authorName = post.author 
+          ? `${post.author.first_name || 'Unknown'} ${post.author.last_name || 'User'}`
+          : 'Unknown User';
+
         return (
           <Post
             key={post.id}
-            name={`${post.author.firstName} ${post.author.lastName}`}
-            date={post.createdAt}
+            name={authorName}
+            date={post.createdAt || 'Unknown date'}
             content={post.content}
             comments={post.comments}
           />