From 7b23c07a1c986fc63f6878e5bdce9c5b7fbde0f4 Mon Sep 17 00:00:00 2001 From: Zeel Rajodiya Date: Sat, 14 Sep 2024 13:29:55 +0530 Subject: [PATCH] fix: links in tools section to specific category do not work (#3116) Co-authored-by: Akshat Nema <76521428+akshatnema@users.noreply.github.com>%0ACo-authored-by: asyncapi-bot --- components/tools/ToolsCard.tsx | 24 ++++----- components/tools/ToolsDashboard.tsx | 73 +++++++++++++------------- components/tools/ToolsList.tsx | 2 +- types/components/tools/ToolDataType.ts | 1 + 4 files changed, 49 insertions(+), 51 deletions(-) diff --git a/components/tools/ToolsCard.tsx b/components/tools/ToolsCard.tsx index d690bf6b495..b3e73df9364 100644 --- a/components/tools/ToolsCard.tsx +++ b/components/tools/ToolsCard.tsx @@ -1,5 +1,4 @@ import { useEffect, useRef, useState } from 'react'; -import TextTruncate from 'react-text-truncate'; import type { ToolData, VisibleDataListType } from '@/types/components/tools/ToolDataType'; import { HeadingTypeStyle } from '@/types/typography/Heading'; @@ -23,21 +22,16 @@ interface ToolsCardProp { */ export default function ToolsCard({ toolData }: ToolsCardProp) { const [showDescription, setShowDescription] = useState(false); - const [showMoreDescription, setShowMoreDescription] = useState(false); + const [isTruncated, setIsTruncated] = useState(false); const [readMore, setReadMore] = useState(false); const descriptionRef = useRef(null); // Decide whether to show full description or not in the card based on the number of lines occupied by the description. useEffect(() => { - const divHeight = descriptionRef.current?.offsetHeight || 0; - const numberOfLines = divHeight / 20; - - if (numberOfLines > 3) { - setShowMoreDescription(true); - } else { - setShowMoreDescription(false); + if (descriptionRef.current) { + setIsTruncated(descriptionRef.current?.scrollHeight! > descriptionRef.current?.clientHeight!); } - }, []); + }, [descriptionRef.current]); let onGit = false; @@ -91,17 +85,19 @@ export default function ToolsCard({ toolData }: ToolsCardProp) {
setTimeout(() => { - if (showMoreDescription) setShowDescription(true); + if (isTruncated) setShowDescription(true); }, 500) } > - +
+ {toolData.description} +
+ {showDescription && (
(false); // used to handle the preloader on the page const filterRef = useRef(); // used to provide ref to the Filter menu and outside click close feature const categoryRef = useRef(); // used to provide ref to the Category menu and outside click close feature const [openFilter, setOpenFilter] = useState(false); @@ -31,7 +27,6 @@ export default function ToolsDashboard() { // filter parameters extracted from the context const { isPaid, isAsyncAPIOwner, languages, technologies, categories } = useContext(ToolFilterContext); const [searchName, setSearchName] = useState(''); // state variable used to get the search name - const [toolsList, setToolsList] = useState({}); // state variable used to set the list of tools according to the filters applied const [checkToolsList, setCheckToolsList] = useState(true); // state variable used to check whether any tool is available according to the needs of the user. // useEffect function to enable the close Modal feature when clicked outside of the modal @@ -49,14 +44,6 @@ export default function ToolsDashboard() { }; }); - // sets the preloader on the page for 1 second - useEffect(() => { - setLoading(true); - setTimeout(() => { - setLoading(false); - }, 1000); - }, []); - // useEffect function to enable the close Category dropdown Modal feature when clicked outside of the modal useEffect(() => { const checkIfClickOutside = (event: MouseEvent) => { @@ -72,8 +59,8 @@ export default function ToolsDashboard() { }; }); - // Function to update the list of tools according to the current filters applied - const updateToolsList = () => { + // useMemo function to filter the tools according to the filters applied by the user + const toolsList = useMemo(() => { let tempToolsList: ToolsListData = {}; // Tools data list is first filtered according to the category filter if applied by the user. @@ -150,18 +137,36 @@ export default function ToolsDashboard() { } }); - setToolsList(tempToolsList); - }; + Object.keys(tempToolsList).map((category) => { + tempToolsList[category].elementRef = createRef(); + + return tempToolsList; + }); + + return tempToolsList; + }, [isPaid, isAsyncAPIOwner, languages, technologies, categories, searchName]); + + // useEffect to scroll to the opened category when url has category as element id + useEffect(() => { + const { hash } = window.location; + + if (hash) { + const elementID = decodeURIComponent(hash.slice(1)); + const element = toolsList[elementID]?.elementRef!; + if (element.current) { + document.documentElement.style.scrollPaddingTop = '6rem'; + element.current.scrollIntoView({ behavior: 'smooth' }); + document.documentElement.style.scrollPaddingTop = '0'; + } + } + }, []); + // Function to update the list of tools according to the current filters applied const clearFilters = () => { setOpenFilter(false); router.push('/tools', undefined, { shallow: true }); }; - useEffect(() => { - updateToolsList(); - }, [isPaid, isAsyncAPIOwner, languages, technologies, categories, searchName]); - const isFiltered = Boolean( isPaid !== 'all' || isAsyncAPIOwner || languages.length || technologies.length || categories.length ); @@ -226,20 +231,16 @@ export default function ToolsDashboard() { Clear Filters
)} - {loading ? ( - } pulsating /> - ) : ( -
- {checkToolsList ? ( - - ) : ( -
- not found -
Sorry, we don't have tools according to your needs.
-
- )} -
- )} +
+ {checkToolsList ? ( + + ) : ( +
+ not found +
Sorry, we don't have tools according to your needs.
+
+ )} +
); diff --git a/components/tools/ToolsList.tsx b/components/tools/ToolsList.tsx index 9e41e58caea..b6e6eeeafe5 100644 --- a/components/tools/ToolsList.tsx +++ b/components/tools/ToolsList.tsx @@ -22,7 +22,7 @@ export default function ToolsList({ toolsListData }: ToolsListProp) { {Object.keys(toolsListData).map((categoryName, index) => { if (toolsListData[categoryName].toolsList.length > 0) { return ( -
+
{categoryName} diff --git a/types/components/tools/ToolDataType.ts b/types/components/tools/ToolDataType.ts index ef636d09b7e..3ef659f3c97 100644 --- a/types/components/tools/ToolDataType.ts +++ b/types/components/tools/ToolDataType.ts @@ -41,6 +41,7 @@ export interface ToolsListData { [category: string]: { description: string; toolsList: ToolData[]; + elementRef?: React.RefObject; }; }