boolean-uk · PerikK · Jul 12, 2024 · Jul 16, 2024 · Jul 17, 2024 · Jul 17, 2024
diff --git a/README.md b/README.md
@@ -1,7 +1,3 @@
-### Team Dev Client
-
-Client repository for team dev project.
-
 ### Set up
 
 1. Copy the `.env.example` file to a new file named `.env` (NOTE: Make sure to copy the file, don't remove the original .env.example)
@@ -11,8 +7,8 @@ Client repository for team dev project.
 
 ### Project Management
 
-https://github.com/orgs/boolean-uk/projects/10/views/1
+https://github.com/orgs/boolean-uk/projects/13/views/1
 
 ### Contributing
 
-- Pull requests should be made from branches following the naming convention: `<username>-<issue_number>-<feature>`, e.g. `vherus-#1-user_registration`
+- Pull requests MUST be made from branches following the naming convention: `<username>-<issue_number>-<feature>`, e.g. `vherus-#1-user_registration`
diff --git a/public/favicon.ico → favicon.ico b/public/favicon.ico → favicon.ico
diff --git a/public/index.html → index.html b/public/index.html → index.html
@@ -1,20 +1,21 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <script type="module" src="/src/index.jsx"></script>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="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"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="/manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

diff --git a/public/logo192.png → logo192.png b/public/logo192.png → logo192.png
diff --git a/public/manifest.json → manifest.json b/public/manifest.json → manifest.json
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,14 +11,12 @@
     "react-dom": "^18.2.0",
     "react-modal": "^3.16.1",
     "react-router-dom": "^6.8.0",
-    "react-scripts": "5.0.1",
     "web-vitals": "^3.1.1"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
   },
   "eslintConfig": {
     "extends": [
@@ -37,5 +35,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.1",
+    "vite": "^5.3.4"
   }
 }
diff --git a/src/App.css b/src/App.css
@@ -3,11 +3,10 @@
 }
 
 .container {
-    display: grid;
-    grid-template-columns: 151px 2fr 1fr;
-    grid-template-rows: 96px auto;
-    background-color: #F0F5FA;
-    height: 100vh;
+  display: grid;
+  grid-template-columns: 151px 2fr 1fr;
+  grid-template-rows: 96px auto;
+  background-color: #F0F5FA;
 }
 
 .ReactModal__Body--open,

diff --git a/src/App.js b/src/App.js
diff --git a/src/App.jsx b/src/App.jsx
@@ -0,0 +1,54 @@
+import './App.css'
+import { Routes, Route } from 'react-router-dom'
+import Dashboard from './pages/dashboard'
+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 { CurrentUserProvider } from './context/currentUser'
+import Welcome from './pages/welcome'
+import AllSearchResults from './pages/allSearchResults'
+
+const App = () => {
+    return (
+        <>
+            <AuthProvider>
+                <CurrentUserProvider>
+                    <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>
+                                }
+                            />
+                            <Route path="/search-results" element={<AllSearchResults />} />
+                        </Routes>
+                    </ModalProvider>
+                </CurrentUserProvider>
+            </AuthProvider>
+        </>
+    )
+}
+
+export default App
diff --git a/src/App.test.js → src/App.test.jsx b/src/App.test.js → src/App.test.jsx
diff --git a/src/assets/fullLogo-whiteLines.js → src/assets/fullLogo-whiteLines.jsx b/src/assets/fullLogo-whiteLines.js → src/assets/fullLogo-whiteLines.jsx
diff --git a/src/assets/fullLogo.js → src/assets/fullLogo.jsx b/src/assets/fullLogo.js → src/assets/fullLogo.jsx
diff --git a/src/assets/icons/addIcon.js → src/assets/icons/addIcon.jsx b/src/assets/icons/addIcon.js → src/assets/icons/addIcon.jsx
diff --git a/src/assets/icons/arrowLeftIcon.jsx b/src/assets/icons/arrowLeftIcon.jsx
@@ -0,0 +1,15 @@
+const ArrowLeftIcon = ({onClick = null}) => {
+    return (
+        <svg
+            width="2.1rem"
+            height="2.3rem"
+            viewBox="0 0 20 20"    
+            xmlns="http://www.w3.org/2000/svg"
+            onClick={onClick}
+        >
+            <path d="M1.328 10 8.203 3.125l0.829 0.828L3.57 9.414H18.672v1.172H3.57l5.463 5.463L8.203 16.875Z" />
+        </svg>
+    )
+}
+
+export default ArrowLeftIcon
diff --git a/src/assets/icons/arrowRightIcon.js → src/assets/icons/arrowRightIcon.jsx b/src/assets/icons/arrowRightIcon.js → src/assets/icons/arrowRightIcon.jsx
diff --git a/src/assets/icons/cogIcon.js → src/assets/icons/cogIcon.jsx b/src/assets/icons/cogIcon.js → src/assets/icons/cogIcon.jsx
diff --git a/src/assets/icons/cohortIcon-fill.js → src/assets/icons/cohortIcon-fill.jsx b/src/assets/icons/cohortIcon-fill.js → src/assets/icons/cohortIcon-fill.jsx
diff --git a/src/assets/icons/cohortIcon.js → src/assets/icons/cohortIcon.jsx b/src/assets/icons/cohortIcon.js → src/assets/icons/cohortIcon.jsx
diff --git a/src/assets/icons/dataIcon.js → src/assets/icons/dataIcon.jsx b/src/assets/icons/dataIcon.js → src/assets/icons/dataIcon.jsx
diff --git a/src/assets/icons/deleteIcon.js → src/assets/icons/deleteIcon.jsx b/src/assets/icons/deleteIcon.js → src/assets/icons/deleteIcon.jsx
diff --git a/src/assets/icons/ellipsisIcon.jsx b/src/assets/icons/ellipsisIcon.jsx
@@ -0,0 +1,15 @@
+const EllipsisIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 448 512"
+      width={20}
+      height={20}
+      fill="#64648c"
+    >
+      <path d="M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z" />
+    </svg>
+  );
+};
+
+export default EllipsisIcon;
diff --git a/src/assets/icons/homeIcon.js → src/assets/icons/homeIcon.jsx b/src/assets/icons/homeIcon.js → src/assets/icons/homeIcon.jsx
diff --git a/src/assets/icons/lockIcon.jsx b/src/assets/icons/lockIcon.jsx
@@ -0,0 +1,12 @@
+const LockIcon = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 448 512">
+            <path 
+                d="M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z"
+                fill="#64648C"
+            />
+        </svg>
+    )
+}
+
+export default LockIcon
diff --git a/src/assets/icons/logoutIcon.js → src/assets/icons/logoutIcon.jsx b/src/assets/icons/logoutIcon.js → src/assets/icons/logoutIcon.jsx
diff --git a/src/assets/icons/monitorIcon.js → src/assets/icons/monitorIcon.jsx b/src/assets/icons/monitorIcon.js → src/assets/icons/monitorIcon.jsx
diff --git a/src/assets/icons/profileIcon.js b/src/assets/icons/profileIcon.js
diff --git a/src/assets/icons/profileIcon.jsx b/src/assets/icons/profileIcon.jsx
@@ -0,0 +1,30 @@
+const ProfileIcon = ({
+    colour = '#64648C',
+    background = 'transparent',
+    className,
+    onClick = null,
+}) => {
+    return (
+        <svg
+            className={className}
+            onClick={onClick}
+            width="41"
+            height="40"
+            viewBox="0 0 41 40"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            style={{
+                borderRadius: '999px',
+                overflow: 'hidden',
+                background: background,
+            }}
+        >
+            <path
+                fill={colour}
+                d="M7.6 31.25C9.7 29.7833 11.7833 28.6583 13.85 27.875C15.9167 27.0917 18.1333 26.7 20.5 26.7C22.8667 26.7 25.0917 27.0917 27.175 27.875C29.2583 28.6583 31.35 29.7833 33.45 31.25C34.9167 29.45 35.9583 27.6333 36.575 25.8C37.1917 23.9667 37.5 22.0333 37.5 20C37.5 15.1667 35.875 11.125 32.625 7.875C29.375 4.625 25.3333 3 20.5 3C15.6667 3 11.625 4.625 8.375 7.875C5.125 11.125 3.5 15.1667 3.5 20C3.5 22.0333 3.81667 23.9667 4.45 25.8C5.08333 27.6333 6.13333 29.45 7.6 31.25ZM20.5 21.5C18.5667 21.5 16.9417 20.8417 15.625 19.525C14.3083 18.2083 13.65 16.5833 13.65 14.65C13.65 12.7167 14.3083 11.0917 15.625 9.775C16.9417 8.45833 18.5667 7.8 20.5 7.8C22.4333 7.8 24.0583 8.45833 25.375 9.775C26.6917 11.0917 27.35 12.7167 27.35 14.65C27.35 16.5833 26.6917 18.2083 25.375 19.525C24.0583 20.8417 22.4333 21.5 20.5 21.5ZM20.5 40C17.7667 40 15.1833 39.475 12.75 38.425C10.3167 37.375 8.19167 35.9417 6.375 34.125C4.55833 32.3083 3.125 30.1833 2.075 27.75C1.025 25.3167 0.5 22.7333 0.5 20C0.5 17.2333 1.025 14.6417 2.075 12.225C3.125 9.80833 4.55833 7.69167 6.375 5.875C8.19167 4.05833 10.3167 2.625 12.75 1.575C15.1833 0.525 17.7667 0 20.5 0C23.2667 0 25.8583 0.525 28.275 1.575C30.6917 2.625 32.8083 4.05833 34.625 5.875C36.4417 7.69167 37.875 9.80833 38.925 12.225C39.975 14.6417 40.5 17.2333 40.5 20C40.5 22.7333 39.975 25.3167 38.925 27.75C37.875 30.1833 36.4417 32.3083 34.625 34.125C32.8083 35.9417 30.6917 37.375 28.275 38.425C25.8583 39.475 23.2667 40 20.5 40ZM20.5 37C22.3333 37 24.125 36.7333 25.875 36.2C27.625 35.6667 29.35 34.7333 31.05 33.4C29.35 32.2 27.6167 31.2833 25.85 30.65C24.0833 30.0167 22.3 29.7 20.5 29.7C18.7 29.7 16.9167 30.0167 15.15 30.65C13.3833 31.2833 11.65 32.2 9.95 33.4C11.65 34.7333 13.375 35.6667 15.125 36.2C16.875 36.7333 18.6667 37 20.5 37ZM20.5 18.5C21.6333 18.5 22.5583 18.1417 23.275 17.425C23.9917 16.7083 24.35 15.7833 24.35 14.65C24.35 13.5167 23.9917 12.5917 23.275 11.875C22.5583 11.1583 21.6333 10.8 20.5 10.8C19.3667 10.8 18.4417 11.1583 17.725 11.875C17.0083 12.5917 16.65 13.5167 16.65 14.65C16.65 15.7833 17.0083 16.7083 17.725 17.425C18.4417 18.1417 19.3667 18.5 20.5 18.5Z"
+            />
+        </svg>
+    )
+}
+
+export default ProfileIcon
diff --git a/src/assets/icons/searchIcon.js → src/assets/icons/searchIcon.jsx b/src/assets/icons/searchIcon.js → src/assets/icons/searchIcon.jsx
diff --git a/src/assets/icons/squareBracketsIcon.js → src/assets/icons/squareBracketsIcon.jsx b/src/assets/icons/squareBracketsIcon.js → src/assets/icons/squareBracketsIcon.jsx
diff --git a/src/assets/tickIcon.js → src/assets/tickIcon.jsx b/src/assets/tickIcon.js → src/assets/tickIcon.jsx
diff --git a/src/components/PostModalActions/index.jsx b/src/components/PostModalActions/index.jsx
@@ -0,0 +1,14 @@
+import Button from "../button";
+
+export default function PostModalActions({ onSubmit=null, text=''}) {
+    return (
+        <section className="create-post-actions">
+            <Button
+                onClick={onSubmit}
+                text="Post"
+                classes={`${text.length ? 'blue' : 'offwhite'} width-full`}
+                disabled={!text.length}
+            />
+        </section>
+    )
+}
diff --git a/src/components/UserDetails/index.jsx b/src/components/UserDetails/index.jsx
@@ -0,0 +1,32 @@
+import useUser from '../../hooks/useUser'
+
+export default function UserDetails({ header = false }) {
+    const { currentUser } = useUser()
+
+    if (!currentUser || !currentUser?.firstName) {
+        return <div className="post-user-name"></div>
+    }
+
+    const userCohort = currentUser?.cohortId ? `, Cohort ${currentUser.cohortId}` : ''
+
+    const userFullName = `${currentUser?.firstName} ${currentUser?.lastName}`
+
+    if (header) {        
+        return (
+            <div className="post-user-name">
+                <p>{userFullName}</p>
+                <small>
+                    {currentUser.role} {userCohort}
+                </small>
+            </div>
+        )
+    }
+
+    const userFirstNameAndInital = `${currentUser?.firstName} ${currentUser?.lastName[0]}`
+
+    return (
+        <div className="post-user-name">
+            <p>{userFirstNameAndInital}</p>
+        </div>
+    )
+}
diff --git a/src/components/UserProfileIcon/index.jsx b/src/components/UserProfileIcon/index.jsx
@@ -0,0 +1,18 @@
+import useUser from '../../hooks/useUser'
+import ProfileIcon from '../../assets/icons/profileIcon'
+
+export default function UserProfileIcon({ onClick = null }) {
+    const { currentUser } = useUser()
+    if (!currentUser || !currentUser?.firstName) {
+        return <ProfileIcon className="profile-icon" colour="#000000" background='#5abedc' onClick={onClick} />
+    }
+
+    const userInitials =
+        currentUser?.firstName[0].toUpperCase() + currentUser?.lastName[0].toUpperCase()
+
+    return (
+        <div className="profile-icon" onClick={onClick}>
+            <p>{userInitials}</p>
+        </div>
+    )
+}
diff --git a/src/components/button/index.js → src/components/button/index.jsx b/src/components/button/index.js → src/components/button/index.jsx
diff --git a/src/components/card/index.js b/src/components/card/index.js
diff --git a/src/components/card/index.jsx b/src/components/card/index.jsx
@@ -0,0 +1,13 @@
+import './style.css'
+
+const Card = ({ children, boxShadow = false, name = "" }) => {
+  return (
+    <div
+      className={`card ${boxShadow && 'card-shadow'} ${name}`}
+    >
+      {children}
+    </div>
+  )
+}
+
+export default Card