boolean-uk · Miadog7Extra · Feb 26, 2025 · Feb 26, 2025 · Feb 26, 2025 · Feb 26, 2025
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -15,6 +15,12 @@
   },
   "plugins": ["react", "prettier"],
   "rules": {
+    "prettier/prettier": [
+      "error",
+      {
+        "endOfLine": "auto"
+      }
+    ],
     "react/react-in-jsx-scope": "off",
     "react/prop-types": 0
   },

diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -5,14 +5,14 @@
 
 version: 2
 updates:
-  - package-ecosystem: "npm" # See documentation for possible values
-    directory: "/" # Location of package manifests
+  - package-ecosystem: 'npm' # See documentation for possible values
+    directory: '/' # Location of package manifests
     schedule:
-      interval: "weekly"
+      interval: 'weekly'
 
-  - package-ecosystem: "github-actions"
+  - package-ecosystem: 'github-actions'
     # Workflow files stored in the
     # default location of `.github/workflows`
-    directory: "/"
+    directory: '/'
     schedule:
-      interval: "weekly"
+      interval: 'weekly'
diff --git a/.prettierrc b/.prettierrc
@@ -4,6 +4,5 @@
   "printWidth": 100,
   "singleQuote": true,
   "trailingComma": "none",
-  "jsxBracketSameLine": false,
-  "endOfLine": "lf"
+  "jsxBracketSameLine": false
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -47,9 +47,9 @@
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-n": "^16.6.2",
-    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-prettier": "^5.2.3",
     "eslint-plugin-promise": "^6.6.0",
     "eslint-plugin-react": "^7.37.1",
-    "prettier": "^3.3.3"
+    "prettier": "^3.5.2"
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -1,14 +1,11 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
+    <meta name="description" content="Web site created using create-react-app" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a

diff --git a/src/App.css b/src/App.css
@@ -7,7 +7,7 @@
   grid-template-columns: 151px 2fr 1fr;
   grid-template-rows: 96px auto;
   background-color: #f0f5fa;
-  height: 100vh;
+  min-height: 100vh;
 }
 
 .ReactModal__Body--open,

diff --git a/src/App.js b/src/App.js
@@ -1,43 +1,56 @@
 import './App.css';
 import { Routes, Route } from 'react-router-dom';
 import Dashboard from './pages/dashboard';
+import CohortTeacher from './pages/cohortTeacher';
 import Login from './pages/login';
 import Register from './pages/register';
 import Loading from './pages/loading';
 import Verification from './pages/verification';
 import { AuthProvider, ProtectedRoute } from './context/auth';
 import { ModalProvider } from './context/modal';
+import { UserProvider } from './context/user';
 import Welcome from './pages/welcome';
 
 const App = () => {
   return (
     <>
       <AuthProvider>
-        <ModalProvider>
-          <Routes>
-            <Route path="login" element={<Login />} />
-            <Route path="register" element={<Register />} />
-            <Route path="loading" element={<Loading />} />
-            <Route path="verification" element={<Verification />} />
+        <UserProvider>
+          <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={
-                <ProtectedRoute>
-                  <Dashboard />
-                </ProtectedRoute>
-              }
-            />
-            <Route
-              path="welcome"
-              element={
-                <ProtectedRoute disabledNav={true}>
-                  <Welcome />
-                </ProtectedRoute>
-              }
-            />
-          </Routes>
-        </ModalProvider>
+              <Route
+                index
+                element={
+                  <ProtectedRoute>
+                    <Dashboard />
+                  </ProtectedRoute>
+                }
+              />
+              <Route
+                index
+                path="cohort"
+                element={
+                  <ProtectedRoute>
+                    <CohortTeacher />
+                  </ProtectedRoute>
+                }
+              />
+              <Route
+                path="welcome"
+                element={
+                  <ProtectedRoute disabledNav={true}>
+                    <Welcome />
+                  </ProtectedRoute>
+                }
+              />
+            </Routes>
+          </ModalProvider>
+        </UserProvider>
       </AuthProvider>
     </>
   );

diff --git a/src/assets/icons/clipboardIcon.js b/src/assets/icons/clipboardIcon.js
@@ -0,0 +1,18 @@
+/* eslint-disable prettier/prettier */
+import React from 'react';
+
+const ClipboardIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 33 36"
+      width="50"
+      height="56"
+      fill="currentColor"
+    >
+      <path d="M16 2H8C7.45 2 7 2.45 7 3V4H5C4.45 4 4 4.45 4 5V21C4 21.55 4.45 22 5 22H19C19.55 22 20 21.55 20 21V5C20 4.45 19.55 4 19 4H17V3C17 2.45 16.55 2 16 2zM9 4H15V3H9V4zM6 6H18V20H6V6z" />
+    </svg>
+  );
+};
+
+export default ClipboardIcon;
diff --git a/src/assets/icons/fileIcon.js b/src/assets/icons/fileIcon.js
@@ -0,0 +1,13 @@
+/* eslint-disable prettier/prettier */
+const FileIcon = () => {
+  return (
+    <svg width="33" height="36" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V8L14 2ZM13 9V3.5L18.5 9H13Z"
+        fill="#000046"
+      />
+    </svg>
+  );
+};
+
+export default FileIcon;
diff --git a/src/assets/icons/noteIcon.js b/src/assets/icons/noteIcon.js
@@ -0,0 +1,18 @@
+/* eslint-disable prettier/prettier */
+import React from 'react';
+
+const NoteIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 20"
+      width="45"
+      height="50"
+      fill="currentColor"
+    >
+      <path d="M3 3h18v18H3V3zm2 2v14h14V5H5zm2 3h10v2H7V8zm0 4h10v2H7v-2zm0 4h6v2H7v-2z" />
+    </svg>
+  );
+};
+
+export default NoteIcon;
diff --git a/src/components/createPostModal/index.js b/src/components/createPostModal/index.js
@@ -1,36 +1,53 @@
-import { useState } from 'react';
+import { useState, useContext } from 'react';
 import useModal from '../../hooks/useModal';
+import ProfileCircle from '../profileCircle';
+import { UserContext } from '../../context/user';
+import { AuthContext } from '../../context/auth';
+import { post } from '../../service/apiClient';
 import './style.css';
 import Button from '../button';
 
 const CreatePostModal = () => {
   // Use the useModal hook to get the closeModal function so we can close the modal on user interaction
   const { closeModal } = useModal();
+  const auth = useContext(AuthContext);
+  const user = useContext(UserContext);
 
   const [message, setMessage] = useState(null);
   const [text, setText] = useState('');
 
+  const name = `${user.firstName} ${user.lastName}`;
+  const userInitials = name.match(/\b(\w)/g);
+
   const onChange = (e) => {
     setText(e.target.value);
   };
 
   const onSubmit = () => {
     setMessage('Submit button was clicked! Closing modal in 2 seconds...');
 
+    post('posts', { text }, true, auth.token).then(() => {
+      setText('');
+    });
+
     setTimeout(() => {
       setMessage(null);
       closeModal();
     }, 2000);
   };
 
+  if (!user) {
+    return <p>Loading...</p>;
+  }
+
   return (
     <>
       <section className="create-post-user-details">
         <div className="profile-icon">
-          <p>AJ</p>
+          <ProfileCircle initials={userInitials} />
         </div>
         <div className="post-user-name">
-          <p>Alex J</p>
+          <p>{`${user.firstName} ${user.lastName}`}</p>
         </div>
       </section>
 

diff --git a/src/components/editPostModal/index.js b/src/components/editPostModal/index.js
@@ -1,34 +1,52 @@
-import { useState } from 'react';
+import { useState, useContext } from 'react';
 import useModal from '../../hooks/useModal';
+import ProfileCircle from '../profileCircle';
+import { UserContext } from '../../context/user';
+import { AuthContext } from '../../context/auth';
+import { patch } from '../../service/apiClient';
 import './style.css';
 import Button from '../button';
 
-const EditPostModal = () => {
+const EditPostModal = ({ postId }) => {
   const { closeModal } = useModal();
+  const auth = useContext(AuthContext);
+  const user = useContext(UserContext);
+
   const [message, setMessage] = useState(null);
   const [text, setText] = useState('');
 
+  const name = `${user.firstName} ${user.lastName}`;
+  const userInitials = name.match(/\b(\w)/g);
+
   const onChange = (e) => {
     setText(e.target.value);
   };
 
   const onSubmit = () => {
     setMessage('Submit button was clicked! Closing modal in 2 seconds...');
 
+    patch(`posts/${postId}`, { text }, true, auth.token).then(() => {
+      setText('');
+    });
+
     setTimeout(() => {
       setMessage(null);
       closeModal();
     }, 2000);
   };
 
+  if (!user) {
+    return <p>Loading...</p>;
+  }
+
   return (
     <>
       <section className="create-post-user-details">
         <div className="profile-icon">
-          <p>AJ</p>
+          <ProfileCircle initials={userInitials} />
         </div>
         <div className="post-user-name">
-          <p>Alex J</p>
+          <p>{`${user.firstName} ${user.lastName}`}</p>
         </div>
       </section>
 
@@ -39,7 +57,7 @@ const EditPostModal = () => {
       <section className="create-post-actions">
         <Button
           onClick={onSubmit}
-          text="Post"
+          text="Update Post"
           classes={`${text.length ? 'blue' : 'offwhite'} width-full`}
           disabled={!text.length}
         />