From 3fc40915d9324e438d79106393e1ad067d8f6339 Mon Sep 17 00:00:00 2001 From: RAGHAV <94848646+raghav1030@users.noreply.github.com> Date: Fri, 6 Oct 2023 08:02:53 +0000 Subject: [PATCH 1/5] Fixed the behavior of dropdownlist when clicked outside of its scope. --- components/SideNavbar/SideNavbarCategory.tsx | 9 +++++--- .../SideNavbar/SideNavbarCategoryList.tsx | 9 ++++++-- hooks/useOnClickOutside.ts | 21 +++++++++++++++++++ 3 files changed, 34 insertions(+), 5 deletions(-) create mode 100644 hooks/useOnClickOutside.ts diff --git a/components/SideNavbar/SideNavbarCategory.tsx b/components/SideNavbar/SideNavbarCategory.tsx index 2b51d0d9d..23211c43d 100644 --- a/components/SideNavbar/SideNavbarCategory.tsx +++ b/components/SideNavbar/SideNavbarCategory.tsx @@ -3,13 +3,14 @@ import { FaAngleDown } from 'react-icons/fa' import { SideNavbarElement } from './SideNavbarElement' import type { ISidebar } from '../../types' import Link from 'next/link' +import useOnClickOutside from 'hooks/useOnClickOutside' export const SideNavbarCategory: FC<{ categoryData: ISidebar expand: boolean -}> = ({ categoryData, expand }) => { + listRef: React.MutableRefObject +}> = ({ categoryData, expand, listRef }) => { const [isOpen, setIsOpen] = useState(expand) - const { category, subcategory } = categoryData const sortedSubcategoryList = subcategory .sort((a, b) => (a.name.toUpperCase() < b.name.toUpperCase() ? -1 : 1)) @@ -27,11 +28,13 @@ export const SideNavbarCategory: FC<{ setIsOpen(!isOpen) } + useOnClickOutside(listRef, () => setIsOpen(false)) + return (
  • handleToggle()} aria-label="toggle category" href={`/${category}`} > diff --git a/components/SideNavbar/SideNavbarCategoryList.tsx b/components/SideNavbar/SideNavbarCategoryList.tsx index 005d011bd..976f98886 100644 --- a/components/SideNavbar/SideNavbarCategoryList.tsx +++ b/components/SideNavbar/SideNavbarCategoryList.tsx @@ -1,8 +1,9 @@ -import React, { FC, useEffect, useState } from 'react' +import React, { FC, useEffect, useState, useRef } from 'react' import type { SubCategories } from '../../types' import { sidebarData } from 'database/data' import { SideNavbarCategory } from './SideNavbarCategory' import { useRouter } from 'next/router' +import useOnClickOutside from 'hooks/useOnClickOutside' export const SideNavbarCategoryList: FC<{ query: string @@ -10,6 +11,9 @@ export const SideNavbarCategoryList: FC<{ const categoriesList = getFilteredCategoryList(query) const router = useRouter() const [category, setCategory] = useState('') + const listRef = useRef(null) + + useOnClickOutside(listRef, () => console.log('Clicked Outside')) useEffect(() => { const cat: string | undefined = router.query.category as string | undefined @@ -28,12 +32,13 @@ export const SideNavbarCategoryList: FC<{ } return ( -
      +
        {/* Reset the open/close states of categories. This makes sure that changes to the toggle state don't reflect when a new query is submitted */} {categoriesList.map((categoryData) => ( 0 || category === categoryData.category} diff --git a/hooks/useOnClickOutside.ts b/hooks/useOnClickOutside.ts new file mode 100644 index 000000000..807925680 --- /dev/null +++ b/hooks/useOnClickOutside.ts @@ -0,0 +1,21 @@ +import { MutableRefObject, useEffect } from 'react'; + + + +const useOnClickOutside = (ref : MutableRefObject , handler : () => void ) => { + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + if (ref.current && !ref.current.contains(event.target as Node)) { + handler(); + } + }; + + document.addEventListener('mousedown', handleClickOutside); + + return () => { + document.removeEventListener('mousedown', handleClickOutside); + }; + }, [ref, handler]); +}; + +export default useOnClickOutside; From e8d0cb0568c247b44fc988a1b9198572ff4e8254 Mon Sep 17 00:00:00 2001 From: RAGHAV <94848646+raghav1030@users.noreply.github.com> Date: Sat, 7 Oct 2023 11:43:58 +0000 Subject: [PATCH 2/5] removed unwanted console.log --- components/SideNavbar/SideNavbarCategoryList.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/components/SideNavbar/SideNavbarCategoryList.tsx b/components/SideNavbar/SideNavbarCategoryList.tsx index 976f98886..f44b778c3 100644 --- a/components/SideNavbar/SideNavbarCategoryList.tsx +++ b/components/SideNavbar/SideNavbarCategoryList.tsx @@ -13,7 +13,6 @@ export const SideNavbarCategoryList: FC<{ const [category, setCategory] = useState('') const listRef = useRef(null) - useOnClickOutside(listRef, () => console.log('Clicked Outside')) useEffect(() => { const cat: string | undefined = router.query.category as string | undefined From 765682e5cc384e1fa261cc87ae2251d9762c76ef Mon Sep 17 00:00:00 2001 From: RAGHAV <94848646+raghav1030@users.noreply.github.com> Date: Mon, 9 Oct 2023 13:10:23 +0000 Subject: [PATCH 3/5] Fixed a bug --- components/Backdrop/Backdrop.tsx | 1 + components/Cards/Card.tsx | 7 ++-- components/SideNavbar/SideNavbarCategory.tsx | 8 +++- .../SideNavbar/SideNavbarCategoryList.tsx | 2 - components/popup/popupInfo.tsx | 1 + hooks/useOnClickOutside.ts | 38 ++++++++++++------- pages/[category]/index.tsx | 14 +++++-- 7 files changed, 48 insertions(+), 23 deletions(-) diff --git a/components/Backdrop/Backdrop.tsx b/components/Backdrop/Backdrop.tsx index 84115a88c..8a58ba65a 100644 --- a/components/Backdrop/Backdrop.tsx +++ b/components/Backdrop/Backdrop.tsx @@ -24,6 +24,7 @@ export const Backdrop: FC<{ return createPortal(
        = ({ data }) => { }, []) return ( -
        +

        = ({ data }) => { > {name}

        -
        +
        @@ -68,4 +70,3 @@ export const Card: FC = ({ data }) => {
        ) } - diff --git a/components/SideNavbar/SideNavbarCategory.tsx b/components/SideNavbar/SideNavbarCategory.tsx index 23211c43d..3eb28897a 100644 --- a/components/SideNavbar/SideNavbarCategory.tsx +++ b/components/SideNavbar/SideNavbarCategory.tsx @@ -4,6 +4,8 @@ import { SideNavbarElement } from './SideNavbarElement' import type { ISidebar } from '../../types' import Link from 'next/link' import useOnClickOutside from 'hooks/useOnClickOutside' +import { useRouter } from 'next/router' + export const SideNavbarCategory: FC<{ categoryData: ISidebar @@ -12,6 +14,7 @@ export const SideNavbarCategory: FC<{ }> = ({ categoryData, expand, listRef }) => { const [isOpen, setIsOpen] = useState(expand) const { category, subcategory } = categoryData + const router = useRouter(); const sortedSubcategoryList = subcategory .sort((a, b) => (a.name.toUpperCase() < b.name.toUpperCase() ? -1 : 1)) .map((subcategoryData, i) => ( @@ -28,7 +31,10 @@ export const SideNavbarCategory: FC<{ setIsOpen(!isOpen) } - useOnClickOutside(listRef, () => setIsOpen(false)) + useOnClickOutside(listRef, () =>{ + setIsOpen(false) + router.push('/') + }) return (
      • diff --git a/components/SideNavbar/SideNavbarCategoryList.tsx b/components/SideNavbar/SideNavbarCategoryList.tsx index f44b778c3..9487e3d18 100644 --- a/components/SideNavbar/SideNavbarCategoryList.tsx +++ b/components/SideNavbar/SideNavbarCategoryList.tsx @@ -3,7 +3,6 @@ import type { SubCategories } from '../../types' import { sidebarData } from 'database/data' import { SideNavbarCategory } from './SideNavbarCategory' import { useRouter } from 'next/router' -import useOnClickOutside from 'hooks/useOnClickOutside' export const SideNavbarCategoryList: FC<{ query: string @@ -13,7 +12,6 @@ export const SideNavbarCategoryList: FC<{ const [category, setCategory] = useState('') const listRef = useRef(null) - useEffect(() => { const cat: string | undefined = router.query.category as string | undefined diff --git a/components/popup/popupInfo.tsx b/components/popup/popupInfo.tsx index 814eb7fb1..a8443908c 100644 --- a/components/popup/popupInfo.tsx +++ b/components/popup/popupInfo.tsx @@ -27,6 +27,7 @@ export const PopupInfo: React.FC<{ {createPortal(
        e.stopPropagation()} className={`fixed left-1/2 top-1/2 z-[150] max-w-[500px] -translate-x-1/2 -translate-y-1/2 transition-all ${ currentCard ? 'animate-scale-appearance' : 'animate-scale-hide' diff --git a/hooks/useOnClickOutside.ts b/hooks/useOnClickOutside.ts index 807925680..1c188fad9 100644 --- a/hooks/useOnClickOutside.ts +++ b/hooks/useOnClickOutside.ts @@ -1,21 +1,33 @@ -import { MutableRefObject, useEffect } from 'react'; +import { MutableRefObject, useEffect } from 'react' - - -const useOnClickOutside = (ref : MutableRefObject , handler : () => void ) => { +const useOnClickOutside = ( + ref: MutableRefObject, + handler: () => void +) => { useEffect(() => { const handleClickOutside = (event: MouseEvent) => { - if (ref.current && !ref.current.contains(event.target as Node)) { - handler(); + if ( + event.target && + (event.target as HTMLElement)?.closest('[data-custom="restrict-click-outside"]') !== null) { + return + } + + if ( + ref.current && + !ref.current.classList.contains('copy-to-clipboard-button') && + !ref.current.contains(event.target as Node) + ) { + console.log('clicked-outside') + handler() } - }; + } - document.addEventListener('mousedown', handleClickOutside); + document.addEventListener('mousedown', handleClickOutside) return () => { - document.removeEventListener('mousedown', handleClickOutside); - }; - }, [ref, handler]); -}; + document.removeEventListener('mousedown', handleClickOutside) + } + }, [ref, handler]) +} -export default useOnClickOutside; +export default useOnClickOutside diff --git a/pages/[category]/index.tsx b/pages/[category]/index.tsx index 655ab463b..76b48de6e 100644 --- a/pages/[category]/index.tsx +++ b/pages/[category]/index.tsx @@ -6,7 +6,7 @@ import Link from 'next/link' const CategoryPage = () => { const router = useRouter() - const { category } = router.query as { category: string} + const { category } = router.query as { category: string } const subcategories: SubCategories[] = [] sidebarData.forEach((c) => { @@ -34,7 +34,10 @@ const CategoryPage = () => { resources!

        -
        +
        {subcategories.map((subcat, i) => ( {
        ) : ( -
        +

        - 404| No resources found. + + 404| + {' '} + No resources found.

        )} From ebbe04bfc229e5d3658e7ec23beb115ac26a7c2c Mon Sep 17 00:00:00 2001 From: RAGHAV <94848646+raghav1030@users.noreply.github.com> Date: Mon, 9 Oct 2023 13:22:33 +0000 Subject: [PATCH 4/5] removed unnecessary console.log() --- hooks/useOnClickOutside.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/hooks/useOnClickOutside.ts b/hooks/useOnClickOutside.ts index 1c188fad9..63e123edd 100644 --- a/hooks/useOnClickOutside.ts +++ b/hooks/useOnClickOutside.ts @@ -17,7 +17,6 @@ const useOnClickOutside = ( !ref.current.classList.contains('copy-to-clipboard-button') && !ref.current.contains(event.target as Node) ) { - console.log('clicked-outside') handler() } } From a0c8b049785ba166eb85545f1451218a1278d855 Mon Sep 17 00:00:00 2001 From: RAGHAV <94848646+raghav1030@users.noreply.github.com> Date: Tue, 10 Oct 2023 14:52:57 +0000 Subject: [PATCH 5/5] Restricted topbar icons to inherit click-outside functionality --- components/Header/Header.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx index cdae6366c..609028add 100644 --- a/components/Header/Header.tsx +++ b/components/Header/Header.tsx @@ -19,12 +19,12 @@ export const Header: FC = () => {
        -
        +
        -
        +