diff --git a/src/components/atoms/GroupSearchBox/index.tsx b/src/components/atoms/GroupSearchBox/index.tsx index 4315facc..35acd3ad 100644 --- a/src/components/atoms/GroupSearchBox/index.tsx +++ b/src/components/atoms/GroupSearchBox/index.tsx @@ -1,4 +1,4 @@ -import React, { forwardRef } from 'react' +import React, { useState, useMemo, forwardRef } from 'react' import { IoSearch } from 'react-icons/io5' import './index.css' @@ -6,8 +6,10 @@ type Props = { placeholder?: string className?: string type: string + onChange?: (e: React.ChangeEvent) => void } -const GroupSearchBox = forwardRef(({ placeholder, className = '', type, ...rest }, ref) => { + +const GroupSearchBox = forwardRef(({ placeholder, className = '', type, onChange, ...rest }, ref) => { return (
@@ -16,6 +18,7 @@ const GroupSearchBox = forwardRef(({ placeholder, class type={type} placeholder={placeholder} ref={ref} + onChange={onChange} {...rest} />
diff --git a/src/components/communityUniversity/GroupSelectors.tsx b/src/components/communityUniversity/GroupSelectors.tsx index 2f740fdd..f78418ea 100644 --- a/src/components/communityUniversity/GroupSelectors.tsx +++ b/src/components/communityUniversity/GroupSelectors.tsx @@ -19,7 +19,7 @@ const GroupSelectors = ({ const handleGroupNavigate = () => { setCurrSelectedGroup(data) router.push(`/community/${selectCommunityId}/${data?._id}`) - toggleLeftNavbar() + toggleLeftNavbar && toggleLeftNavbar() } const isSelected = selectedCommuntyGroupdId === data?._id diff --git a/src/components/molecules/NavbarUniversityItem/NavbarSubscribedUniversity/index.tsx b/src/components/molecules/NavbarUniversityItem/NavbarSubscribedUniversity/index.tsx index 0eb8cb70..bd5fb2e0 100644 --- a/src/components/molecules/NavbarUniversityItem/NavbarSubscribedUniversity/index.tsx +++ b/src/components/molecules/NavbarUniversityItem/NavbarSubscribedUniversity/index.tsx @@ -1,13 +1,13 @@ 'use client' import Button from '@/components/atoms/Buttons' -import React, { useState } from 'react' +import React from 'react' import Image from 'next/image' import avatar from '@assets/unibuzz_rounded.svg' import { userType } from '@/store/userSlice/userType' import { Community } from '@/types/Community' import UniversityVerificationModal from '@/components/organisms/SettingsSection/SettingModals/UniversityVerificationModal' import { openModal } from '../../Modal/ModalManager' - +import { FaCircleCheck } from 'react-icons/fa6' interface Props { subscribedCommunities: Community[] communityId: string @@ -45,7 +45,12 @@ function NavbarSubscribedUniversity({ subscribedCommunities, communityId, handle alt={community.name} /> -

{community.name}

+
+

{community.name}

+

+ +

+
) diff --git a/src/components/molecules/NavbarUniversityItem/index.tsx b/src/components/molecules/NavbarUniversityItem/index.tsx index 969e79e4..4f461f46 100644 --- a/src/components/molecules/NavbarUniversityItem/index.tsx +++ b/src/components/molecules/NavbarUniversityItem/index.tsx @@ -19,6 +19,7 @@ import Buttons from '@/components/atoms/Buttons' import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/Popover' import { sortBy } from '@/types/CommuityGroup' import useCookie from '@/hooks/useCookie' +import useDebounce from '@/hooks/useDebounce' interface Props { setActiveMenu: (activeMenu: string) => void @@ -28,6 +29,7 @@ interface Props { export default function NavbarUniversityItem({ setActiveMenu, toggleLeftNavbar }: Props) { const { userData } = useUniStore() const [cookieValue] = useCookie('uni_user_token') + const router = useRouter() const { communityId, groupId: communityGroupId }: { communityId: string; groupId: string } = useParams() const [currSelectedGroup, setCurrSelectedGroup] = useState() @@ -36,6 +38,8 @@ export default function NavbarUniversityItem({ setActiveMenu, toggleLeftNavbar } const [selectedFiltersMain, setSelectedFiltersMain] = useState>({}) const [selectedTypeMain, setSelectedTypeMain] = useState([]) const [sort, setSort] = useState('') + const [searchQuery, setSearchQuery] = useState('') + const debouncedSearchQuery = useDebounce(searchQuery, 1000) const [assignUsers, setAssignUsers] = useState(false) const [showGroupTill, setShowGroupTill] = useState(5) const [community, setCommunity] = useState() @@ -49,7 +53,7 @@ export default function NavbarUniversityItem({ setActiveMenu, toggleLeftNavbar } handleUniversityClick(index) setCurrSelectedGroup(community) setActiveMenu('') - toggleLeftNavbar() + toggleLeftNavbar && toggleLeftNavbar() } const handleNewGroupModal = () => { @@ -71,30 +75,34 @@ export default function NavbarUniversityItem({ setActiveMenu, toggleLeftNavbar } ) } + const handleSearch = (e: React.ChangeEvent) => { + setSearchQuery(e.target.value.toLowerCase()) + } + const subscribedCommunitiesAllGroups = useMemo(() => { - if (communityId) { - return subscribedCommunities?.find((community) => community._id === communityId)?.communityGroups - } else { - return subscribedCommunities && subscribedCommunities[0]?.communityGroups - } - }, [subscribedCommunities, communityId]) + const groups = communityId + ? subscribedCommunities?.find((community) => community._id === communityId)?.communityGroups + : subscribedCommunities?.[0]?.communityGroups + return groups?.filter((group) => group.title.toLowerCase().includes(debouncedSearchQuery)) + }, [subscribedCommunities, communityId, debouncedSearchQuery]) const joinedSubscribedCommunitiesGroup = useMemo(() => { const selectedCommunityGroup = subscribedCommunities?.find((community) => community?._id === (communityId || subscribedCommunities?.[0]._id)) ?.communityGroups - return selectedCommunityGroup?.filter( - (userCommunityGroup) => - userCommunityGroup?.users?.some((selectCommunityGroup) => selectCommunityGroup?.userId?.toString() === userData?.id?.toString()) - ) - }, [subscribedCommunities, communityId, userData]) - - const subscribedCommunitiesMyGroup = useMemo( - () => - subscribedCommunities - ?.find((community) => community._id === (communityId || subscribedCommunities?.[0]._id)) - ?.communityGroups.filter((communityGroup) => communityGroup.adminUserId === userData?.id), - [subscribedCommunities, communityId, userData?.id, community] - ) + return selectedCommunityGroup + ?.filter( + (userCommunityGroup) => + userCommunityGroup?.users?.some((selectCommunityGroup) => selectCommunityGroup?.userId?.toString() === userData?.id?.toString()) + ) + ?.filter((group) => group.title.toLowerCase().includes(debouncedSearchQuery)) + }, [subscribedCommunities, communityId, userData, debouncedSearchQuery]) + + const subscribedCommunitiesMyGroup = useMemo(() => { + const groups = subscribedCommunities + ?.find((community) => community._id === (communityId || subscribedCommunities?.[0]._id)) + ?.communityGroups.filter((communityGroup) => communityGroup.adminUserId === userData?.id) + return groups?.filter((group) => group.title.toLowerCase().includes(debouncedSearchQuery)) + }, [subscribedCommunities, communityId, userData?.id, community, debouncedSearchQuery]) useEffect(() => { if (communityId && subscribedCommunities) { @@ -136,8 +144,8 @@ export default function NavbarUniversityItem({ setActiveMenu, toggleLeftNavbar } label: 'Joined', content: (

UNIVERSITY GROUPS

-
- handleCommunityGroupFilter()} size="extra_small" variant="border_primary"> +
+ handleCommunityGroupFilter()} className="w-32" size="extra_small" variant="border_primary"> Filter -
+
Sort
- -
+ +
{sortBy.map((item) => (

setSort(item)} key={item} className="capitalize cursor-pointer"> {item} @@ -234,7 +242,7 @@ export default function NavbarUniversityItem({ setActiveMenu, toggleLeftNavbar } alt="communtiy image" />

- +