From b84cd7708e30348c3fd0c04b86d25fd158249a85 Mon Sep 17 00:00:00 2001 From: Tim Zoltie Date: Wed, 31 Jul 2024 11:29:26 +0100 Subject: [PATCH 01/13] component extracted from searchResults --- src/App.css | 3 +- src/components/userLists/index.jsx | 70 ++++++++++++++++++++++-------- src/components/userLists/style.css | 4 +- src/pages/dashboard/index.jsx | 1 + 4 files changed, 59 insertions(+), 19 deletions(-) diff --git a/src/App.css b/src/App.css index 800c59d8..b0477a0b 100644 --- a/src/App.css +++ b/src/App.css @@ -12,4 +12,5 @@ .ReactModal__Body--open, .ReactModal__Html--open { overflow: hidden; -} \ No newline at end of file +} + diff --git a/src/components/userLists/index.jsx b/src/components/userLists/index.jsx index 5e8f48f4..67426c15 100644 --- a/src/components/userLists/index.jsx +++ b/src/components/userLists/index.jsx @@ -1,8 +1,15 @@ import "./style.css"; import ProfileCircle from "../profileCircle/index.jsx"; import Card from "../card/index.jsx"; -import EllipsisIcon from "../../assets/icons/ellipsisIcon.jsx"; +import { NavLink } from "react-router-dom"; +import SimpleThreeDotsMenu from "../simpleThreeDotsMenu/index.jsx"; +import useUser from "../../hooks/useUser.jsx"; +import ThreeDotsMenu from "../threeDotsMenu/index.jsx" +import { useEffect, useRef } from "react"; + const UserLists = ({ results, name }) => { + const { currentUser } = useUser() + const menuRef = useRef(null); const getInitials = (firstName, lastName) => { const firstInitial = firstName ? firstName[0].toUpperCase() : ""; @@ -10,11 +17,48 @@ const UserLists = ({ results, name }) => { return [firstInitial, lastInitial]; }; - const onClickStudent = (id) => { - setSelectedProfileId(id); - setIsStudentModalVisible(true); + const handleClickOutside = (event) => { + if (menuRef.current && !menuRef.current.contains(event.target) && !event.target.closest('.link-to-profile')) { + setSelectedProfileId(null); + } + }; + + useEffect(() => { + document.addEventListener('click', handleClickOutside); + return () => { + document.removeEventListener('click', handleClickOutside); + }; + }, []); + + const onClickMenu = (id, event) => { + event.stopPropagation(); + setSelectedProfileId(prevId => (prevId === id ? null : id)); }; + const renderTeacherContent = (user) => ( + <> +
+ Profile + Add Note + Move to Cohort +
+
+ onClickMenu(user.id)} id={user.id} hasCascadingMenu={true} /> +
+ + ); + + const renderStudentContent = (user) => ( + <> +
+

Profile

 +
+
+ onClickMenu(user.id)} id={user.id} hasCascadingMenu={true}/> +
+ + ); + return ( {results?.length === 0 &&

No results found.

} @@ -27,21 +71,13 @@ const UserLists = ({ results, name }) => { hasCascadingMenu={false} /> -
+
{`${user.firstName} ${user.lastName}`} -

{`${user.cohort}`}

+

{`Software Developer, Cohort ${user.cohortId}`}

- -
-

Profile

-
- -
onClickStudent(cohort.id)} - > - -
+ {name === 'searchResults' && currentUser.role === 'TEACHER' + ? renderTeacherContent(user) + : renderStudentContent(user)} ))} diff --git a/src/components/userLists/style.css b/src/components/userLists/style.css index ea56b56c..3abb77da 100644 --- a/src/components/userLists/style.css +++ b/src/components/userLists/style.css @@ -81,4 +81,6 @@ padding-bottom: 12px; } - +.found-user-card { + max-width: 400px; +} \ No newline at end of file diff --git a/src/pages/dashboard/index.jsx b/src/pages/dashboard/index.jsx index c8ee630f..7311a2c7 100644 --- a/src/pages/dashboard/index.jsx +++ b/src/pages/dashboard/index.jsx @@ -110,6 +110,7 @@ const Dashboard = () => { setIsTeacher(true); } } + console.log(students) return ( <> From 4dd62ca7f7c02ab9cf77e8e58c52749d32ba480c Mon Sep 17 00:00:00 2001 From: Tim Zoltie Date: Wed, 31 Jul 2024 11:48:58 +0100 Subject: [PATCH 02/13] conditional rendering added to properly display the card --- src/components/userLists/index.jsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/userLists/index.jsx b/src/components/userLists/index.jsx index 67426c15..df0a8e93 100644 --- a/src/components/userLists/index.jsx +++ b/src/components/userLists/index.jsx @@ -50,15 +50,18 @@ const UserLists = ({ results, name }) => { const renderStudentContent = (user) => ( <> -
+ {name !== 'cohorts' || name !== 'students' && ( +

Profile
+ )}
onClickMenu(user.id)} id={user.id} hasCascadingMenu={true}/>
); + return ( {results?.length === 0 &&

No results found.

} @@ -78,6 +81,7 @@ const UserLists = ({ results, name }) => { {name === 'searchResults' && currentUser.role === 'TEACHER' ? renderTeacherContent(user) : renderStudentContent(user)} + ))} From e93f056558d466812947d7fa86169e5252996bd0 Mon Sep 17 00:00:00 2001 From: Tim Zoltie Date: Wed, 31 Jul 2024 12:29:41 +0100 Subject: [PATCH 03/13] cohorts section of left menu created --- src/components/cohorts/index.jsx | 35 ++++++++++++++++++++++++++ src/components/profileCircle/index.jsx | 2 +- src/components/userLists/index.jsx | 1 - src/pages/dashboard/index.jsx | 3 ++- src/service/apiClient.js | 7 +++++- 5 files changed, 44 insertions(+), 4 deletions(-) create mode 100644 src/components/cohorts/index.jsx diff --git a/src/components/cohorts/index.jsx b/src/components/cohorts/index.jsx new file mode 100644 index 00000000..2dbba776 --- /dev/null +++ b/src/components/cohorts/index.jsx @@ -0,0 +1,35 @@ +import { useEffect, useState } from "react" +import { getCohorts } from "../../service/apiClient" +import Card from "../card" +import ProfileCircle, { CascadingMenu } from "../profileCircle" + +const Cohorts = () => { + const [cohorts, setCohorts] = useState([]) + useEffect(() => { + getCohorts().then(setCohorts) + }, []) + console.log(cohorts) + + return ( + + {cohorts.length === 0 && ( +

No cohorts found.

+ )} + {cohorts.length > 0 && ( +
    + {cohorts.map((cohort) => ( +
  • + +
    + {`${cohort.name}`} +

    {`Cohort ${cohort.id}`}

    +
    +
    • + ))} +
+ )} + + ) +} + +export default Cohorts \ No newline at end of file diff --git a/src/components/profileCircle/index.jsx b/src/components/profileCircle/index.jsx index 1cee91ed..bb2a05f9 100644 --- a/src/components/profileCircle/index.jsx +++ b/src/components/profileCircle/index.jsx @@ -51,7 +51,7 @@ const ProfileCircle = ({ initials, hasCascadingMenu = true }) => { ) } -const CascadingMenu = () => { +export const CascadingMenu = () => { return ( } text="Profile" /> diff --git a/src/components/userLists/index.jsx b/src/components/userLists/index.jsx index df0a8e93..66894e33 100644 --- a/src/components/userLists/index.jsx +++ b/src/components/userLists/index.jsx @@ -81,7 +81,6 @@ const UserLists = ({ results, name }) => { {name === 'searchResults' && currentUser.role === 'TEACHER' ? renderTeacherContent(user) : renderStudentContent(user)} - ))} diff --git a/src/pages/dashboard/index.jsx b/src/pages/dashboard/index.jsx index 7311a2c7..0f81ee92 100644 --- a/src/pages/dashboard/index.jsx +++ b/src/pages/dashboard/index.jsx @@ -16,6 +16,7 @@ import ProfileIcon from "../../assets/icons/profileIcon"; import UserProfileIcon from "../../components/UserProfileIcon"; import UserLists from "../../components/userLists"; import useUser from "../../hooks/useUser"; +import Cohorts from "../../components/cohorts"; const Dashboard = () => { const [searchVal, setSearchVal] = useState(""); @@ -206,7 +207,7 @@ const Dashboard = () => { <>

Cohorts

- +

Students

diff --git a/src/service/apiClient.js b/src/service/apiClient.js index eb8dfbad..81e1037c 100644 --- a/src/service/apiClient.js +++ b/src/service/apiClient.js @@ -36,6 +36,11 @@ async function createProfile( }) } +async function getCohorts() { + const res = await get('cohorts') + return res.data.cohorts +} + async function getUsers() { const res = await get('users') return res.data.users @@ -83,4 +88,4 @@ async function request(method, endpoint, data, auth = true) { return response.json() } -export { login, getUsers, getPosts, register, createProfile, getUser, createPost } +export { login, getUsers, getPosts, register, createProfile, getUser, createPost, getCohorts } From 4aa40ff1dd594428819a8068b8cc6a7f7cb622e7 Mon Sep 17 00:00:00 2001 From: Tim Zoltie Date: Wed, 31 Jul 2024 12:59:16 +0100 Subject: [PATCH 04/13] styling for cohort list on left menu --- src/components/cohorts/index.jsx | 8 +++++--- src/components/profileCircle/index.jsx | 15 +++++++++++++-- src/components/profileCircle/style.css | 13 +++++++++++++ 3 files changed, 31 insertions(+), 5 deletions(-) diff --git a/src/components/cohorts/index.jsx b/src/components/cohorts/index.jsx index 2dbba776..c9f86758 100644 --- a/src/components/cohorts/index.jsx +++ b/src/components/cohorts/index.jsx @@ -1,7 +1,9 @@ import { useEffect, useState } from "react" import { getCohorts } from "../../service/apiClient" import Card from "../card" -import ProfileCircle, { CascadingMenu } from "../profileCircle" +import CohortIcon from "../../assets/icons/cohortIcon" +import SquareBracketsIcon from "../../assets/icons/squareBracketsIcon" +import { CohortProfileCircle } from "../profileCircle" const Cohorts = () => { const [cohorts, setCohorts] = useState([]) @@ -18,8 +20,8 @@ const Cohorts = () => { {cohorts.length > 0 && (
    {cohorts.map((cohort) => ( -
  • - +
  • +
    {`${cohort.name}`}

    {`Cohort ${cohort.id}`}

    diff --git a/src/components/profileCircle/index.jsx b/src/components/profileCircle/index.jsx index bb2a05f9..335a293a 100644 --- a/src/components/profileCircle/index.jsx +++ b/src/components/profileCircle/index.jsx @@ -42,7 +42,6 @@ const ProfileCircle = ({ initials, hasCascadingMenu = true }) => { style={{ cursor: cursor }} > {renderCascadingMenu()} -

    {uppercaseInitials}

    @@ -51,7 +50,19 @@ const ProfileCircle = ({ initials, hasCascadingMenu = true }) => { ) } -export const CascadingMenu = () => { + export const CohortProfileCircle = () => { + return ( +
    +
    +
    + +
    +
    +
    + ) + } + + const CascadingMenu = () => { return ( } text="Profile" /> diff --git a/src/components/profileCircle/style.css b/src/components/profileCircle/style.css index fb3323ef..fddcff33 100644 --- a/src/components/profileCircle/style.css +++ b/src/components/profileCircle/style.css @@ -5,4 +5,17 @@ .profile-circle-menu { margin-left: 65px; +} + +.profile-icon-cohort { + justify-content: center; + padding-top: 1rem; + background-color: #64DC78; + width: 56px; + height: 56px; + border-radius: 50%; +} + +.profile-icon-cohort svg { + margin-left: 7px; } \ No newline at end of file From 76f08ea10f5a8746aba2fea6e41953af2d42562a Mon Sep 17 00:00:00 2001 From: Tim Zoltie Date: Wed, 31 Jul 2024 13:01:52 +0100 Subject: [PATCH 05/13] fill of svg updated --- src/components/cohorts/index.jsx | 2 -- src/components/profileCircle/style.css | 6 +++++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/cohorts/index.jsx b/src/components/cohorts/index.jsx index c9f86758..30f97f87 100644 --- a/src/components/cohorts/index.jsx +++ b/src/components/cohorts/index.jsx @@ -1,8 +1,6 @@ import { useEffect, useState } from "react" import { getCohorts } from "../../service/apiClient" import Card from "../card" -import CohortIcon from "../../assets/icons/cohortIcon" -import SquareBracketsIcon from "../../assets/icons/squareBracketsIcon" import { CohortProfileCircle } from "../profileCircle" const Cohorts = () => { diff --git a/src/components/profileCircle/style.css b/src/components/profileCircle/style.css index fddcff33..48ab56d5 100644 --- a/src/components/profileCircle/style.css +++ b/src/components/profileCircle/style.css @@ -17,5 +17,9 @@ } .profile-icon-cohort svg { - margin-left: 7px; + margin-left: 7.5px; +} + +.profile-icon-cohort path { + fill: white; } \ No newline at end of file From 193685c6198569cab0a62193f9b92f5da9fea35a Mon Sep 17 00:00:00 2001 From: Tim Zoltie Date: Wed, 31 Jul 2024 15:40:03 +0100 Subject: [PATCH 06/13] students page created --- src/App.jsx | 2 ++ src/components/userLists/index.jsx | 17 ++++++++++++++++- src/pages/students/index.jsx | 9 +++++++++ 3 files changed, 27 insertions(+), 1 deletion(-) create mode 100644 src/pages/students/index.jsx diff --git a/src/App.jsx b/src/App.jsx index 8113da0c..2508736f 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -11,6 +11,7 @@ import { ModalProvider } from "./context/modal"; import { CurrentUserProvider } from "./context/currentUser"; import Welcome from "./pages/welcome"; import AllSearchResults from "./pages/allSearchResults"; +import Students from "./pages/students"; const App = () => { return ( @@ -48,6 +49,7 @@ const App = () => { } /> + }/> diff --git a/src/components/userLists/index.jsx b/src/components/userLists/index.jsx index 66894e33..19d8829d 100644 --- a/src/components/userLists/index.jsx +++ b/src/components/userLists/index.jsx @@ -1,15 +1,17 @@ import "./style.css"; import ProfileCircle from "../profileCircle/index.jsx"; import Card from "../card/index.jsx"; -import { NavLink } from "react-router-dom"; +import { Navigate, NavLink, useNavigate } from "react-router-dom"; import SimpleThreeDotsMenu from "../simpleThreeDotsMenu/index.jsx"; import useUser from "../../hooks/useUser.jsx"; import ThreeDotsMenu from "../threeDotsMenu/index.jsx" import { useEffect, useRef } from "react"; +import Button from "../button/index.jsx"; const UserLists = ({ results, name }) => { const { currentUser } = useUser() const menuRef = useRef(null); + const navigate = useNavigate() const getInitials = (firstName, lastName) => { const firstInitial = firstName ? firstName[0].toUpperCase() : ""; @@ -61,6 +63,10 @@ const UserLists = ({ results, name }) => { ); + const onClick = () => { + navigate('/students', { state: { results: results } }) + } + return ( @@ -83,6 +89,15 @@ const UserLists = ({ results, name }) => { : renderStudentContent(user)}
    • ))} + {results.length > 10 && ( +
    +
    + )}
)} diff --git a/src/pages/students/index.jsx b/src/pages/students/index.jsx new file mode 100644 index 00000000..2316a56a --- /dev/null +++ b/src/pages/students/index.jsx @@ -0,0 +1,9 @@ +import UserLists from "../../components/userLists" + +const Students = ({ results }) => { + return ( + + ) +} + +export default Students \ No newline at end of file From a8fb418859e23134f8b91f6163fee8abc488f472 Mon Sep 17 00:00:00 2001 From: Tim Zoltie Date: Wed, 31 Jul 2024 16:13:40 +0100 Subject: [PATCH 07/13] number of students displayed on list shortened --- src/components/userLists/index.jsx | 3 ++- src/pages/dashboard/index.jsx | 2 +- src/pages/students/index.jsx | 9 +++++++-- 3 files changed, 10 insertions(+), 4 deletions(-) diff --git a/src/components/userLists/index.jsx b/src/components/userLists/index.jsx index 19d8829d..5941e100 100644 --- a/src/components/userLists/index.jsx +++ b/src/components/userLists/index.jsx @@ -66,6 +66,7 @@ const UserLists = ({ results, name }) => { const onClick = () => { navigate('/students', { state: { results: results } }) } + console.log(results) return ( @@ -73,7 +74,7 @@ const UserLists = ({ results, name }) => { {results?.length === 0 &&

No results found.

} {results?.length > 0 && (
    - {results.map((user) => ( + {results.slice(0, 10).map((user) => (
  • { setIsTeacher(true); } } - console.log(students) + console.log(teachers) return ( <> diff --git a/src/pages/students/index.jsx b/src/pages/students/index.jsx index 2316a56a..648d3790 100644 --- a/src/pages/students/index.jsx +++ b/src/pages/students/index.jsx @@ -1,8 +1,13 @@ +import { useLocation } from "react-router-dom" import UserLists from "../../components/userLists" +import { useState } from "react" -const Students = ({ results }) => { +const Students = () => { + const location = useLocation() + const { results: studentsState} = location.state || { results: []} + const [students, setStudents] = useState(studentsState) return ( - + ) } From 1beafa7e58fe5d6784cabdba2255770f1af2d408 Mon Sep 17 00:00:00 2001 From: Tim Zoltie Date: Wed, 31 Jul 2024 16:38:20 +0100 Subject: [PATCH 08/13] styling updated for students page --- src/components/userLists/index.jsx | 30 +++++++++++++++++++----------- src/components/userLists/style.css | 4 ++++ src/pages/students/index.jsx | 12 +++++++++++- src/pages/students/style.css | 21 +++++++++++++++++++++ 4 files changed, 55 insertions(+), 12 deletions(-) create mode 100644 src/pages/students/style.css diff --git a/src/components/userLists/index.jsx b/src/components/userLists/index.jsx index 5941e100..c4293cf0 100644 --- a/src/components/userLists/index.jsx +++ b/src/components/userLists/index.jsx @@ -66,15 +66,31 @@ const UserLists = ({ results, name }) => { const onClick = () => { navigate('/students', { state: { results: results } }) } - console.log(results) + const renderButton = () => { + if ( + location.pathname !== "/students" || + results.length > 10 + ) { +
    + {console.log('true')} +
    + } + } + console.log(results) + console.log(location) return ( {results?.length === 0 &&

    No results found.

    } {results?.length > 0 && (
      - {results.slice(0, 10).map((user) => ( + {results.map((user) => (
    • { : renderStudentContent(user)}
      • ))} - {results.length > 10 && ( -
      -
      - )} + {renderButton}
    )}     diff --git a/src/components/userLists/style.css b/src/components/userLists/style.css index 3abb77da..488f3312 100644 --- a/src/components/userLists/style.css +++ b/src/components/userLists/style.css @@ -83,4 +83,8 @@ .found-user-card { max-width: 400px; +} + +.button-container { + border-top: 1px #e6ebf5 solid; } \ No newline at end of file diff --git a/src/pages/students/index.jsx b/src/pages/students/index.jsx index 648d3790..8fe14cce 100644 --- a/src/pages/students/index.jsx +++ b/src/pages/students/index.jsx @@ -1,13 +1,23 @@ import { useLocation } from "react-router-dom" import UserLists from "../../components/userLists" import { useState } from "react" +import Header from "../../components/header" +import Navigation from "../../components/navigation" +import './style.css' const Students = () => { const location = useLocation() const { results: studentsState} = location.state || { results: []} const [students, setStudents] = useState(studentsState) return ( - +
    +
    + +
    + +
    +
    + ) } diff --git a/src/pages/students/style.css b/src/pages/students/style.css new file mode 100644 index 00000000..7fbfa038 --- /dev/null +++ b/src/pages/students/style.css @@ -0,0 +1,21 @@ +.students-header { + grid-column: 1 / -1; + position: sticky; + top: 0; + z-index: 10; +} + +.left-bar { + position: sticky; + top: 0; + height: 100vh; + overflow-y: auto; +} + +.students-page-container { + display: grid; + grid-template-columns: auto 1fr; + grid-template-rows: auto 1fr; + height: 100vh; + background-color: #f0f5fa; +} \ No newline at end of file From aa6210d545a3e6165a592e8b1272ff5028d70d6e Mon Sep 17 00:00:00 2001 From: Tim Zoltie Date: Wed, 31 Jul 2024 17:24:55 +0100 Subject: [PATCH 09/13] students page styling --- src/components/userLists/index.jsx | 31 +++++++++++++----------------- src/pages/students/index.jsx | 16 +++++++++++++-- src/pages/students/style.css | 2 +- 3 files changed, 28 insertions(+), 21 deletions(-) diff --git a/src/components/userLists/index.jsx b/src/components/userLists/index.jsx index c4293cf0..ea8ab454 100644 --- a/src/components/userLists/index.jsx +++ b/src/components/userLists/index.jsx @@ -62,29 +62,16 @@ const UserLists = ({ results, name }) => {
); - + const onClick = () => { - navigate('/students', { state: { results: results } }) + const students = results + navigate('/students', { state: { results: students } }) } const renderButton = () => { - if ( - location.pathname !== "/students" || - results.length > 10 - ) { -
- {console.log('true')} -
- } + } - console.log(results) - console.log(location) return ( {results?.length === 0 &&

No results found.

} @@ -106,7 +93,15 @@ const UserLists = ({ results, name }) => { : renderStudentContent(user)} ))} - {renderButton} + {results.length > 10 && location.pathname !== '/students' && ( +
+
+ )} )} diff --git a/src/pages/students/index.jsx b/src/pages/students/index.jsx index 8fe14cce..40aa834b 100644 --- a/src/pages/students/index.jsx +++ b/src/pages/students/index.jsx @@ -1,9 +1,10 @@ -import { useLocation } from "react-router-dom" +import { Link, useLocation } from "react-router-dom" import UserLists from "../../components/userLists" import { useState } from "react" import Header from "../../components/header" import Navigation from "../../components/navigation" import './style.css' +import ArrowLeftIcon from "../../assets/icons/arrowLeftIcon" const Students = () => { const location = useLocation() @@ -14,7 +15,18 @@ const Students = () => {
- +
+
+ + + +

Students

+
+
+
+ +
+
diff --git a/src/pages/students/style.css b/src/pages/students/style.css index 7fbfa038..67e9bb49 100644 --- a/src/pages/students/style.css +++ b/src/pages/students/style.css @@ -18,4 +18,4 @@ grid-template-rows: auto 1fr; height: 100vh; background-color: #f0f5fa; -} \ No newline at end of file +} From a9f0d12a68f4231fc72ac9ce48398813a612b7b5 Mon Sep 17 00:00:00 2001 From: Tim Zoltie Date: Thu, 1 Aug 2024 11:32:33 +0100 Subject: [PATCH 10/13] listitem component created --- src/components/userLists/index.jsx | 112 +++++++++++++++----------- src/components/userLists/listItem.jsx | 22 +++++ src/pages/dashboard/index.jsx | 1 - src/pages/students/index.jsx | 13 +-- src/pages/students/style.css | 5 ++ 5 files changed, 96 insertions(+), 57 deletions(-) create mode 100644 src/components/userLists/listItem.jsx diff --git a/src/components/userLists/index.jsx b/src/components/userLists/index.jsx index ea8ab454..6c9f280b 100644 --- a/src/components/userLists/index.jsx +++ b/src/components/userLists/index.jsx @@ -4,98 +4,118 @@ import Card from "../card/index.jsx"; import { Navigate, NavLink, useNavigate } from "react-router-dom"; import SimpleThreeDotsMenu from "../simpleThreeDotsMenu/index.jsx"; import useUser from "../../hooks/useUser.jsx"; -import ThreeDotsMenu from "../threeDotsMenu/index.jsx" +import ThreeDotsMenu from "../threeDotsMenu/index.jsx"; import { useEffect, useRef } from "react"; import Button from "../button/index.jsx"; +import ListItem from "./listItem.jsx"; const UserLists = ({ results, name }) => { - const { currentUser } = useUser() + const { currentUser } = useUser(); const menuRef = useRef(null); - const navigate = useNavigate() + const navigate = useNavigate(); - const getInitials = (firstName, lastName) => { + const getInitials = (firstName, lastName) => { const firstInitial = firstName ? firstName[0].toUpperCase() : ""; const lastInitial = lastName ? lastName[0].toUpperCase() : ""; return [firstInitial, lastInitial]; }; const handleClickOutside = (event) => { - if (menuRef.current && !menuRef.current.contains(event.target) && !event.target.closest('.link-to-profile')) { + if ( + menuRef.current && + !menuRef.current.contains(event.target) && + !event.target.closest(".link-to-profile") + ) { setSelectedProfileId(null); } }; useEffect(() => { - document.addEventListener('click', handleClickOutside); + document.addEventListener("click", handleClickOutside); return () => { - document.removeEventListener('click', handleClickOutside); + document.removeEventListener("click", handleClickOutside); }; }, []); const onClickMenu = (id, event) => { event.stopPropagation(); - setSelectedProfileId(prevId => (prevId === id ? null : id)); + setSelectedProfileId((prevId) => (prevId === id ? null : id)); }; const renderTeacherContent = (user) => ( <> -
- Profile - Add Note - Move to Cohort +
+ + Profile + + + Add Note + + + Move to Cohort +
-
- onClickMenu(user.id)} id={user.id} hasCascadingMenu={true} /> +
+ onClickMenu(user.id)} + id={user.id} + hasCascadingMenu={true} + />
); const renderStudentContent = (user) => ( <> - {name !== 'cohorts' || name !== 'students' && ( -
-

Profile

 -
- )} -
- onClickMenu(user.id)} id={user.id} hasCascadingMenu={true}/> -
+ {name !== "cohorts" || + (name !== "students" && ( +
+ +

Profile

+ +
+ ))} +
+ onClickMenu(user.id)} + id={user.id} + hasCascadingMenu={true} + /> +
); - - const onClick = () => { - const students = results - navigate('/students', { state: { results: students } }) - } - const renderButton = () => { - - } + const onClick = () => { + const students = results; + navigate("/students", { state: { results: students } }); + }; return ( {results?.length === 0 &&

No results found.

} {results?.length > 0 && (
    - {results.map((user) => ( -
  • - index < 10).map((user) => ( + + )) + : results.map((user) => ( + - -
    - {`${user.firstName} ${user.lastName}`} -

    {`Software Developer, Cohort ${user.cohortId}`}

    -
    - {name === 'searchResults' && currentUser.role === 'TEACHER' - ? renderTeacherContent(user) - : renderStudentContent(user)} -
    • ))} - {results.length > 10 && location.pathname !== '/students' && ( + {results.length > 10 && location.pathname !== "/students" && (
    -