Teacher search page

README.md

@@ -7,11 +7,15 @@ Client repository for team dev project.
 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)
 2. Make sure the `REACT_APP_API_URL` environment variable in the `.env` file contains the URL of the server app on your machine
 3. `npm ci` to install dependencies
-4. `npm start` to run the app. The server must also be running on your machine
+4. `npm start` to run the app. The [server](https://github.com/boolean-uk/team-dev-server-c9/) must also be running on your machine
 
 ### Project Management
 
-https://github.com/orgs/boolean-uk/projects/10/views/1
+[https://github.com/orgs/boolean-uk/projects/10/views/1](https://trello.com/b/NXE9Z6hG/c10-team-dev-client)
+
+### API Documentation
+
+[https://supreme-bassoon-7v7v8r2.pages.github.io/](https://supreme-bassoon-7v7v8r2.pages.github.io/)
 
 ### Contributing
 

src/App.js

@@ -5,42 +5,90 @@ import Login from "./pages/login";
 import Register from "./pages/register";
 import Loading from "./pages/loading";
 import Verification from "./pages/verification";
+import SearchPage from "./pages/search";
 import { AuthProvider, ProtectedRoute } from "./context/auth";
 import { ModalProvider } from "./context/modal";
 import Welcome from "./pages/welcome";
+import Navigation from "./components/navigation";
+import ViewProfile from "./pages/profile";
+import Button from "./components/button";
+import Card from "./components/card";
+import Comment from "./components/comment";
+import CredentialsCard from "./components/credentials";
+import SocialLinks from "./components/socialLinks";
+import Header from "./components/header";
+import MyCohort from "./pages/mycohort/MyCohort";
+import EditProfile from "./pages/edit";
+
 
 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 />} />
+  return (
+    <>
+      <AuthProvider>
+        <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="MyCohort"
+              element={
+                <ProtectedRoute>
+                  <MyCohort />
+                </ProtectedRoute>
+              }
+            />
+            <Route
+              path="/profile/:id"
+              element={
+                <ProtectedRoute>
+                  <ViewProfile />
+                </ProtectedRoute>
+              }
+            />
+            <Route
+              path="/profile/:id/edit"
+              element={
+                <ProtectedRoute>
+                  <EditProfile />
+                </ProtectedRoute>
+              }
+            />
+
+              <Route 
+                  path="search"
+                   element={
+                       <ProtectedRoute>
+                            <SearchPage />
+                       </ProtectedRoute>
+                  }
+              />
+          </Routes>
+        </ModalProvider>
+      </AuthProvider>
+    </>
+  );
 
-                        <Route
-                            index
-                            element={
-                                <ProtectedRoute>
-                                    <Dashboard />
-                                </ProtectedRoute>
-                            }
-                        />
-                        <Route
-                            path="welcome"
-                            element={
-                                <ProtectedRoute disabledNav={true}>
-                                    <Welcome />
-                                </ProtectedRoute>
-                            }
-                        />
-                    </Routes>
-                </ModalProvider>
-			</AuthProvider>
-		</>
-	);
 };
 
 export default App;

src/assets/icons/arrowBackIcon.js

@@ -0,0 +1,16 @@
+const ArrowBackIcon = () => {
+	return (
+		<svg 
+            className="backarrow"
+            width="24" 
+            height="24" 
+            viewBox="0 0 24 24" 
+            fill="none" 
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path d="M12 24L0 12L12 0L13.575 1.575L4.275 10.875H24V13.125H4.275L13.575 22.425L12 24Z" fill="#64648C"/>
+        </svg>
+	);
+};
+
+export default ArrowBackIcon;

src/assets/icons/crossBlackIcon.js

@@ -0,0 +1,9 @@
+const CrossBlackIcon = () => {
+	return (
+		<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M1.94872 17.3332L0.666672 16.0511L7.71795 8.99984L0.666672 1.94855L1.94872 0.666504L9 7.71779L16.0513 0.666504L17.3333 1.94855L10.2821 8.99984L17.3333 16.0511L16.0513 17.3332L9 10.2819L1.94872 17.3332Z" fill="#64648C"/>
+        </svg>
+	);
+};
+
+export default CrossBlackIcon;

src/assets/icons/eyeIcon.js

@@ -0,0 +1,17 @@
+export default function EyeIcon() {
+  return(
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 32 32"
+      width="32"
+      height="32"
+      className="eye-icon"
+    >
+      <path
+        fill="#64648C"
+        d="M20.967 18.033 19.5 16.567c.578-1.578.278-2.89-.9-3.934s-2.456-1.31-3.833-.8L13.3 10.367a4.03 4.03 0 0 1 1.267-.534A6.167 6.167 0 0 1 16 9.667c1.578 0 2.917.55 4.017 1.65 1.1 1.1 1.65 2.439 1.65 4.016 0 .49-.061.973-.184 1.45a4.404 4.404 0 0 1-.516 1.25Zm4.3 4.3L23.933 21a15.632 15.632 0 0 0 2.85-2.683c.811-.99 1.406-1.984 1.784-2.984-1.111-2.466-2.778-4.416-5-5.85-2.223-1.433-4.634-2.15-7.234-2.15-.933 0-1.888.09-2.866.267-.978.178-1.745.389-2.3.633L9.633 6.667c.778-.356 1.773-.667 2.984-.934 1.21-.266 2.394-.4 3.55-.4 3.177 0 6.083.906 8.716 2.717 2.634 1.811 4.562 4.239 5.784 7.283a16.47 16.47 0 0 1-2.234 3.9 16.1 16.1 0 0 1-3.166 3.1Zm1.933 7.534-5.6-5.5c-.778.31-1.655.55-2.633.716a17.62 17.62 0 0 1-2.967.25c-3.244 0-6.189-.905-8.833-2.716-2.645-1.811-4.59-4.24-5.834-7.284a15.127 15.127 0 0 1 1.85-3.383c.79-1.1 1.75-2.15 2.884-3.15l-4.2-4.2 1.4-1.433L28.5 28.4l-1.3 1.467ZM7.433 10.2c-.822.6-1.616 1.389-2.383 2.367-.767.977-1.317 1.9-1.65 2.766 1.133 2.467 2.839 4.417 5.117 5.85 2.277 1.434 4.86 2.15 7.75 2.15.733 0 1.455-.044 2.166-.133.712-.089 1.245-.222 1.6-.4L17.9 20.667a3.483 3.483 0 0 1-.9.25A6.49 6.49 0 0 1 16 21c-1.556 0-2.889-.544-4-1.633-1.111-1.09-1.667-2.434-1.667-4.034 0-.333.028-.666.084-1 .055-.333.139-.633.25-.9L7.433 10.2Z"
+      />
+    </svg>
+  )
+}

src/assets/icons/like.js

@@ -0,0 +1,25 @@
+import React from 'react';
+
+const Like = () => {
+  return (
+    <svg
+      version="1.1"
+      id="Layer_1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      x="0px"
+      y="0px"
+   width="40px"
+        height="40px"
+      viewBox="0 0 122.88 107.68"
+      style={{ enableBackground: 'new 0 0 122.88 107.68' }}
+      xmlSpace="preserve"
+    >
+      <g>
+        <path d="M61.43,13.53C66.76,7.51,72.8,3.69,78.96,1.69c6.48-2.1,13.07-2.15,19.09-0.6c6.05,1.55,11.52,4.72,15.74,9.03 c5.58,5.7,9.09,13.36,9.09,22.02c0,13.7-6.6,26.75-17.42,39.37c-10.14,11.83-24.05,23.35-39.61,34.73 c-2.58,1.89-5.98,1.88-8.5,0.22l0,0.01l-0.03-0.02l0,0.01l-0.02-0.01l-0.21-0.15c-4.46-2.92-8.75-5.91-12.8-8.94 c-4.05-3.03-8.01-6.22-11.83-9.56C12.58,70.42,0,51.4,0,32.13c0-8.8,3.44-16.44,8.93-22.08c4.25-4.37,9.73-7.51,15.79-9.03V1.02 c5.99-1.5,12.57-1.4,19.05,0.69C49.99,3.71,56.09,7.54,61.43,13.53L61.43,13.53L61.43,13.53z M83.51,15.87 C78.02,17.65,72.51,22.02,68,29.78c-0.63,1.19-1.6,2.21-2.85,2.93c-3.56,2.05-8.11,0.82-10.15-2.74 c-4.5-7.82-10.14-12.27-15.78-14.08c-3.71-1.19-7.46-1.25-10.88-0.4l0,0l-0.02,0c-3.35,0.83-6.37,2.56-8.7,4.95 c-2.87,2.95-4.67,7-4.67,11.7c0,14.53,10.59,29.82,27.3,44.43c3.28,2.87,6.95,5.82,10.95,8.81c2.61,1.96,5.35,3.92,8.04,5.74 c13.03-9.76,24.53-19.53,32.9-29.3c8.58-10,13.8-19.92,13.8-29.68c0-4.55-1.84-8.58-4.76-11.57c-2.38-2.42-5.43-4.2-8.8-5.06 C90.98,14.63,87.23,14.67,83.51,15.87L83.51,15.87L83.51,15.87z" />
+      </g>
+    </svg>
+  );
+};
+
+export default Like;

src/assets/icons/likeRed.js

@@ -0,0 +1,28 @@
+import React from 'react';
+
+const LikeRed = () => {
+  return (
+    <svg 
+      id="Layer_1" 
+      data-name="Layer 1" 
+      xmlns="http://www.w3.org/2000/svg" 
+      viewBox="0 0 122.88 107.39"
+      width="40px"
+      height="40px"
+    >
+      <defs>
+
+        <style>
+          {`.cls-1 {
+            fill: #ed1b24;
+            fill-rule: evenodd;
+          }`}
+        </style>
+      </defs>
+      <title>red-heart</title>
+      <path className="cls-1" d="M60.83,17.18c8-8.35,13.62-15.57,26-17C110-2.46,131.27,21.26,119.57,44.61c-3.33,6.65-10.11,14.56-17.61,22.32-8.23,8.52-17.34,16.87-23.72,23.2l-17.4,17.26L46.46,93.55C29.16,76.89,1,55.92,0,29.94-.63,11.74,13.73.08,30.25.29c14.76.2,21,7.54,30.58,16.89Z"/>
+    </svg>
+  );
+};
+
+export default LikeRed;

src/assets/icons/locIcon.js

@@ -0,0 +1,24 @@
+const LockIcon = () => {
+  return (
+      <svg
+        width="40px"
+        height="40px"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M13 14C13 13.4477 12.5523 13 12 13C11.4477 13 11 13.4477 11 14V16C11 16.5523 11.4477 17 12 17C12.5523 17 13 16.5523 13 16V14Z"
+          fill="#64648C"
+        />
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M7 8.12037C5.3161 8.53217 4 9.95979 4 11.7692V17.3077C4 19.973 6.31545 22 9 22H15C17.6846 22 20 19.973 20 17.3077V11.7692C20 9.95979 18.6839 8.53217 17 8.12037V7C17 4.23858 14.7614 2 12 2C9.23858 2 7 4.23858 7 7V8.12037ZM15 7V8H9V7C9 6.64936 9.06015 6.31278 9.17071 6C9.58254 4.83481 10.6938 4 12 4C13.3062 4 14.4175 4.83481 14.8293 6C14.9398 6.31278 15 6.64936 15 7ZM6 11.7692C6 10.866 6.81856 10 8 10H16C17.1814 10 18 10.866 18 11.7692V17.3077C18 18.7208 16.7337 20 15 20H9C7.26627 20 6 18.7208 6 17.3077V11.7692Z"
+          fill="#64648C"
+        />
+      </svg>
+  );
+};
+
+export default LockIcon;

src/assets/icons/profileIcon.js

@@ -1,23 +1,25 @@
 const ProfileIcon = ({ colour = "#64648C", background = "transparent" }) => {
-	return (
-		<svg
-			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>
-	);
+
+  return (
+    <svg
+      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;

src/assets/icons/squareBracketsIcon.js

@@ -1,15 +1,18 @@
-const SquareBracketsIcon = () => {
+const SquareBracketsIcon = ({color, scale}) => {
 	return (
 		<svg
-			width="40"
-			height="25"
+			width="50"
+			height="15"
 			viewBox="0 0 40 25"
 			fill="none"
 			xmlns="http://www.w3.org/2000/svg"
+			transform={scale}
+
+
 		>
 			<path
 				d="M12 24.8998L0 12.8998L12.1 0.799805L14.25 2.9498L4.3 12.8998L14.15 22.7498L12 24.8998ZM27.9 24.9998L25.75 22.8498L35.7 12.8998L25.85 3.0498L28 0.899804L40 12.8998L27.9 24.9998Z"
-				fill="#64648C"
+				fill={color}
 			/>
 		</svg>
 	);

src/components/backbutton/index.js

@@ -0,0 +1,10 @@
+import { Link } from "react-router-dom"
+import ArrowBackIcon from "../../assets/icons/arrowBackIcon"
+
+function BackButton() {
+    return (
+        <Link to='/'><ArrowBackIcon /></Link>
+    )
+}
+
+export default BackButton

src/components/button/index.js

@@ -1,9 +1,20 @@
-const Button = ({ text, onClick, type = "button", classes, disabled = false }) => {
-	return (
-		<button type={type} onClick={onClick} className={classes} disabled={disabled}>
-			{text}
-		</button>
-	);
+const Button = ({
+  text,
+  onClick,
+  type = "button",
+  classes,
+  disabled = false,
+}) => {
+  return (
+    <button
+      type={type}
+      onClick={onClick}
+      className={classes}
+      disabled={disabled}
+    >
+      {text}
+    </button>
+  );
 };
 
 export default Button;

src/components/cancelbutton/index.js

@@ -0,0 +1,10 @@
+import { Link } from "react-router-dom"
+import CrossBlackIcon from "../../assets/icons/crossBlackIcon"
+
+function CancelButton() {
+    return (
+        <Link to='/'><CrossBlackIcon /></Link>
+    )
+}
+
+export default CancelButton

src/components/card/index.js

@@ -1,8 +1,8 @@
 import './style.css'
 
-const Card = ({ children, boxShadow = false }) => {
+const Card = ({ children, boxShadow = false, id}) => {
     return (
-        <div className={`card ${boxShadow && 'card-shadow'}`}>
+        <div className={`card ${boxShadow && 'card-shadow'}`}  id={id}>
             {children}
         </div>
     )