fix: links in tools section to specific category do not work

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<boolean>(false);
-  const [showMoreDescription, setShowMoreDescription] = useState<boolean>(false);
+  const [isTruncated, setIsTruncated] = useState<boolean>(false);
   const [readMore, setReadMore] = useState<boolean>(false);
   const descriptionRef = useRef<HTMLDivElement>(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,22 @@ export default function ToolsCard({ toolData }: ToolsCardProp) {
           <div className='relative'>
             <Paragraph typeStyle={ParagraphTypeStyle.sm}>
               <span
-                ref={descriptionRef}
-                className={`w-full ${showMoreDescription ? 'cursor-pointer' : ''}`}
+                className={`w-full ${isTruncated ? 'cursor-pointer' : ''}`}
                 onMouseEnter={() =>
                   setTimeout(() => {
-                    if (showMoreDescription) setShowDescription(true);
+                    if (isTruncated) setShowDescription(true);
                   }, 500)
                 }
               >
-                <TextTruncate element='span' line={3} text={toolData.description} />
+                <div
+                  ref={descriptionRef}
+                  className={`line-clamp-3 max-h-[4.5em] overflow-hidden text-ellipsis ${isTruncated && 'after:content-["..."]'}`}
+                >
+                  {toolData.description}
+                </div>
               </span>
             </Paragraph>
+
             {showDescription && (
               <div
                 className='absolute top-0 z-10 w-full border border-gray-200 bg-white p-2 shadow-md'

components/tools/ToolsDashboard.tsx

@@ -1,5 +1,5 @@
 import { useRouter } from 'next/router';
-import { useContext, useEffect, useRef, useState } from 'react';
+import { useContext, useEffect, useMemo, useRef, useState } from 'react';
 
 import type { ToolsListData } from '@/types/components/tools/ToolDataType';
 
@@ -20,17 +20,13 @@ const ToolsData = ToolsDataList as ToolsListData;
  */
 export default function ToolsDashboard() {
   const router = useRouter();
-  const loader = 'img/loaders/loader.png'; // preloader image for the tools
-
-  const [loading, setLoading] = useState<boolean>(false); // used to handle the preloader on the page
   const filterRef = useRef<HTMLDivElement>(); // used to provide ref to the Filter menu and outside click close feature
   const categoryRef = useRef<HTMLDivElement>(); // used to provide ref to the Category menu and outside click close feature
   const [openFilter, setOpenFilter] = useState<boolean>(false);
   const [openCategory, setopenCategory] = useState<boolean>(false);
   // filter parameters extracted from the context
   const { isPaid, isAsyncAPIOwner, languages, technologies, categories } = useContext(ToolFilterContext);
   const [searchName, setSearchName] = useState<string>(''); // state variable used to get the search name
-  const [toolsList, setToolsList] = useState<ToolsListData>({}); // state variable used to set the list of tools according to the filters applied
   const [checkToolsList, setCheckToolsList] = useState<boolean>(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
@@ -48,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) => {
@@ -71,8 +59,7 @@ export default function ToolsDashboard() {
     };
   });
 
-  // Function to update the list of tools according to the current filters applied
-  const updateToolsList = () => {
+  const toolsList = useMemo(() => {
     let tempToolsList: ToolsListData = {};
 
     // Tools data list is first filtered according to the category filter if applied by the user.
@@ -149,18 +136,30 @@ export default function ToolsDashboard() {
       }
     });
 
-    setToolsList(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 = document.getElementById(elementID);
+
+      if (element) {
+        document.documentElement.style.scrollPaddingTop = '6rem';
+        element.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
   );
@@ -225,23 +224,16 @@ export default function ToolsDashboard() {
             <span className='ml-3'>Clear Filters</span>
           </div>
         )}
-        {loading ? (
-          <div className='mx-auto my-24 flex w-fit animate-pulse gap-4 text-black'>
-            <img src={loader} alt='loading' className='mx-auto w-16' />
-            <div className='my-auto text-xl'>Loading Tools...</div>
-          </div>
-        ) : (
-          <div className='mt-0'>
-            {checkToolsList ? (
-              <ToolsList toolsListData={toolsList} />
-            ) : (
-              <div className='p-4'>
-                <img src='/img/illustrations/not-found.webp' alt='not found' className='m-auto w-1/2' />
-                <div className='text-center text-lg'> Sorry, we don&apos;t have tools according to your needs. </div>
-              </div>
-            )}
-          </div>
-        )}
+        <div className='mt-0'>
+          {checkToolsList ? (
+            <ToolsList toolsListData={toolsList} />
+          ) : (
+            <div className='p-4'>
+              <img src='/img/illustrations/not-found.webp' alt='not found' className='m-auto w-1/2' />
+              <div className='text-center text-lg'> Sorry, we don&apos;t have tools according to your needs. </div>
+            </div>
+          )}
+        </div>
       </div>
     </ToolFilter>
   );