23 search user

.eslintrc.json

@@ -23,4 +23,4 @@
       "version": "detect"
     }
   }
-}
+}

src/App.js

@@ -8,6 +8,9 @@ import Verification from './pages/verification';
 import { AuthProvider, ProtectedRoute } from './context/auth';
 import { ModalProvider } from './context/modal';
 import Welcome from './pages/welcome';
+import UserProfile from './pages/profilePage';
+import Cohort from './pages/cohort';
+import Search from './pages/search';
 
 const App = () => {
   return (
@@ -20,6 +23,24 @@ const App = () => {
             <Route path="loading" element={<Loading />} />
             <Route path="verification" element={<Verification />} />
 
+            <Route
+              path="dashboard/search/:searchQuery"
+              element={
+                <ProtectedRoute>
+                  <Search />
+                </ProtectedRoute>
+              }
+            />
+
+            <Route
+              path="dashboard/search/"
+              element={
+                <ProtectedRoute>
+                  <Search />
+                </ProtectedRoute>
+              }
+            />
+
             <Route
               index
               element={
@@ -28,6 +49,16 @@ const App = () => {
                 </ProtectedRoute>
               }
             />
+
+            <Route
+              path="/cohort"
+              element={
+                <ProtectedRoute>
+                  <Cohort />
+                </ProtectedRoute>
+              }
+            />
+
             <Route
               path="welcome"
               element={
@@ -36,6 +67,22 @@ const App = () => {
                 </ProtectedRoute>
               }
             />
+            <Route
+              path="/profile/:profileId"
+              element={
+                <ProtectedRoute>
+                  <UserProfile isEditMode={false} />
+                </ProtectedRoute>
+              }
+            />
+            <Route
+              path="/profile/:profileId/edit"
+              element={
+                <ProtectedRoute>
+                  <UserProfile isEditMode={true} />
+                </ProtectedRoute>
+              }
+            />
           </Routes>
         </ModalProvider>
       </AuthProvider>

src/assets/icons/arrowLeftIcon.js

@@ -0,0 +1,11 @@
+const arrowLeftIcon = () => (
+  <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="24" cy="24" r="20" fill="#F0F5FA" />
+    <path
+      d="M24 36L12 24L24 12L25.575 13.575L16.275 22.875H36V25.125H16.275L25.575 34.425L24 36Z"
+      fill="#64648C"
+    />
+  </svg>
+);
+
+export default arrowLeftIcon;

src/components/createCohortModal/index.js

@@ -0,0 +1,74 @@
+import useModal from '../../hooks/useModal';
+import { useState } from 'react';
+import Button from '../button';
+
+const CreateCohortModal = () => {
+  const { closeModal } = useModal();
+  const [title, setTitle] = useState('');
+  const [startDate, setStartDate] = useState('');
+  const [endDate, setEndDate] = useState('');
+
+  const onChange = (e) => {
+    const { name, value } = e.target;
+    if (name === 'title') setTitle(value);
+    if (name === 'startDate') setStartDate(value);
+    if (name === 'endDate') setEndDate(value);
+  };
+
+  const onSubmit = () => {
+    console.log('Submit button was clicked! Closing modal in 2 seconds...');
+    console.log(title);
+    console.log(startDate);
+    console.log(endDate);
+    setTimeout(() => {
+      closeModal();
+    }, 2000);
+  };
+
+  const today = new Date().toISOString().split('T')[0];
+
+  return (
+    <div>
+      <section>
+        <input
+          type="text"
+          name="title"
+          value={title}
+          onChange={onChange}
+          placeholder="Cohort Title"
+        />
+      </section>
+      <section>
+        <input
+          type="date"
+          name="startDate"
+          value={startDate}
+          onChange={onChange}
+          placeholder="Start Date"
+          min={today}
+        />
+      </section>
+      <section>
+        <input
+          type="date"
+          name="endDate"
+          value={endDate}
+          onChange={onChange}
+          placeholder="End Date"
+          min={today}
+        />
+      </section>
+
+      <section className="create-port-actions">
+        <Button
+          onClick={onSubmit}
+          text="Create Cohort"
+          classes={`${title.length ? 'blue' : 'offwhite'} width-full`}
+          disabled={!title.length}
+        />
+      </section>
+    </div>
+  );
+};
+
+export default CreateCohortModal;

src/components/errorMessage/_errorMessage.css

@@ -0,0 +1,12 @@
+.simple-error-message {
+  background: var(--color-offwhite);
+  padding: 24px;
+  border-radius: 8px;
+  width: 100%;
+  margin-bottom: 25px;
+  /* 
+    The value for red color below is taken from the style guide in the Figma Design Document.
+    It could be implemented as a global CSS variable in the _globals.css file instead.
+  */
+  border: 1px #f00000 solid;
+}

src/components/errorMessage/index.js

@@ -0,0 +1,7 @@
+import './_errorMessage.css';
+
+const ErrorMessage = ({ message }) => {
+  return <div className={`simple-error-message`}>{message}</div>;
+};
+
+export default ErrorMessage;

src/components/form/textInput/index.js

@@ -1,20 +1,119 @@
-import { useState } from 'react';
+import './textInput.css';
+import { useEffect, useState } from 'react';
 
-const TextInput = ({ value, onChange, name, label, icon, type = 'text' }) => {
+/**
+ * validChars: Characters that are allowed in the input, the user can't type characters that are not included in validChars
+ * -
+ * pattern: Required pattern/format for email or password.
+ * patternDescription: Requirements can be passed in via patternDescription, it will be displayed as help messages to the user if the input doesn't match the pattern
+ */
+const TextInput = ({
+  value,
+  onChange,
+  name,
+  label,
+  icon,
+  type = 'text',
+  isRequired = false,
+  validChars = 'A-Za-z0-9@_-',
+  pattern = null,
+  patternDescription = null,
+  minLength = 0,
+  maxLength = 50,
+  isLocked = false
+}) => {
   const [input, setInput] = useState('');
+  const [error, setError] = useState('');
   const [showpassword, setShowpassword] = useState(false);
-  if (type === 'password') {
+
+  useEffect(() => {
+    if (isRequired) {
+      if (value != null) {
+        if (value.length === 0) {
+          setError(`${label.slice(0, -1)} is required`);
+        } else {
+          setError('');
+        }
+      }
+    }
+  }, [isRequired, value]);
+
+  const validateInput = (value, event) => {
+    const regex = new RegExp(`^[${validChars}]+$`);
+    const isValid = regex.test(value) && value.length <= maxLength;
+    if (!isRequired) {
+      onChange(event);
+    } else if (value.length === 0 && isRequired) {
+      setError(`${label.slice(0, -1)} is required`);
+      onChange(event);
+    } else if (!isValid) {
+      setError(
+        `Input must be up to ${maxLength} characters long and contain only: ${validChars.split('').join(', ')}`
+      );
+    } else if (pattern && !pattern.test(value)) {
+      if (patternDescription) {
+        setError(`${patternDescription}`);
+      } else {
+        setError(`Input must match the pattern: ${pattern}`);
+      }
+      onChange(event);
+    } else if (value.length < minLength) {
+      setError(`Input must be at least ${minLength} characters long`);
+      onChange(event);
+    } else {
+      setError('');
+    }
+    return isValid;
+  };
+
+  const handleChange = (event) => {
+    const { value } = event.target;
+    if (validateInput(value, event)) {
+      onChange(event);
+    }
+    setInput(value);
+  };
+
+  if (isLocked && type === 'password') {
+    return (
+      <div className="inputwrapper">
+        <label htmlFor={name}>{label}</label>
+        <input type={type} name={name} value={value} readOnly={true} />
+        {showpassword && <input type="text" name={name} value={value} className="passwordreveal" />}
+        <button
+          className={`showpasswordbutton-duo formbutton ${showpassword === true && '__faded'}`}
+          onClick={(e) => {
+            e.preventDefault();
+            setShowpassword(!showpassword);
+          }}
+        >
+          <EyeLogo />
+        </button>
+        <button className={`lockbutton formbutton`}>
+          <LockLogo />
+        </button>
+      </div>
+    );
+  } else if (isLocked) {
+    return (
+      <div className="inputwrapper">
+        <label htmlFor={name}>{label}</label>
+        <input type={type} name={name} value={value} readOnly={true} />
+        <button className={`lockbutton formbutton`}>
+          <LockLogo />
+        </button>
+      </div>
+    );
+  } else if (type === 'password') {
     return (
       <div className="inputwrapper">
         <label htmlFor={name}>{label}</label>
         <input
           type={type}
           name={name}
           value={value}
-          onChange={(e) => {
-            onChange(e);
-            setInput(e.target.value);
-          }}
+          onChange={handleChange}
+          className={error && 'input-error'}
         />
         {showpassword && <input type="text" name={name} value={input} className="passwordreveal" />}
         <button
@@ -26,6 +125,23 @@ const TextInput = ({ value, onChange, name, label, icon, type = 'text' }) => {
         >
           <EyeLogo />
         </button>
+        {error && <span className="error-message">{error}</span>}
+      </div>
+    );
+  } else if (type === 'email') {
+    return (
+      <div className="inputwrapper">
+        {label && <label htmlFor={name}>{label}</label>}
+        <input
+          type={type}
+          name={name}
+          value={value}
+          onChange={handleChange}
+          pattern={pattern}
+          className={(error && 'input-error') || (icon && 'input-has-icon')}
+        />
+        {icon && <span className="input-icon">{icon}</span>}
+        {error && <span className="error-message">{error}</span>}
       </div>
     );
   } else {
@@ -36,10 +152,11 @@ const TextInput = ({ value, onChange, name, label, icon, type = 'text' }) => {
           type={type}
           name={name}
           value={value}
-          onChange={onChange}
-          className={icon && 'input-has-icon'}
+          onChange={handleChange}
+          className={(error && 'input-error') || (icon && 'input-has-icon')}
         />
         {icon && <span className="input-icon">{icon}</span>}
+        {error && <span className="error-message">{error}</span>}
       </div>
     );
   }
@@ -56,4 +173,15 @@ const EyeLogo = () => {
   );
 };
 
+const LockLogo = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32" width="32" height="32">
+      <path
+        fill="#64648C"
+        d="M16 2C12.686 2 10 4.686 10 8v6H8c-1.104 0-2 .896-2 2v12c0 1.104.896 2 2 2h16c1.104 0 2-.896 2-2V16c0-1.104-.896-2-2-2h-2V8c0-3.314-2.686-6-6-6zm0 2c2.206 0 4 1.794 4 4v6h-8V8c0-2.206 1.794-4 4-4zm-6 12h12v12H10V16zm6 2c-1.104 0-2 .896-2 2s.896 2 2 2 2-.896 2-2-.896-2-2-2z"
+      />
+    </svg>
+  );
+};
+
 export default TextInput;

src/components/form/textInput/textInput.css

@@ -0,0 +1,3 @@
+.error-message {
+  font-size: 0.8rem;
+}