much cleaner sorting logic

components/FilterSearchDropdown.tsx

@@ -8,7 +8,7 @@ type Props = {
   searchFilter: {
     name: boolean;
     url: boolean;
-    title: boolean;
+    description: boolean;
     collection: boolean;
     tags: boolean;
   };
@@ -44,10 +44,13 @@ export default function FilterSearchDropdown({
           }
         />
         <Checkbox
-          label="Title"
-          state={searchFilter.title}
+          label="Description"
+          state={searchFilter.description}
           onClick={() =>
-            setSearchFilter({ ...searchFilter, title: !searchFilter.title })
+            setSearchFilter({
+              ...searchFilter,
+              description: !searchFilter.description,
+            })
           }
         />
         <Checkbox

components/LinkCard.tsx

@@ -111,7 +111,7 @@ export default function LinkCard({ link, count, className }: Props) {
               </p>
             </div>
             <p className="text-gray-500 text-sm font-medium line-clamp-3 w-4/5">
-              {link.title}
+              {link.description}
             </p>
             <div className="flex gap-3 items-center flex-wrap my-3">
               <Link href={`/collections/${link.collection.id}`}>

components/Modal/LinkModal.tsx

@@ -36,7 +36,7 @@ export default function EditLink({
       : {
           name: "",
           url: "",
-          title: "",
+          description: "",
           tags: [],
           collection: {
             name: "",
@@ -106,7 +106,7 @@ export default function EditLink({
 
       {method === "UPDATE" ? (
         <p className="text-gray-500">
-          <b>{shortendURL}</b> | {link.title}
+          <b>{shortendURL}</b> | {link.description}
         </p>
       ) : null}
 

components/PublicPage/LinkCard.tsx

@@ -55,7 +55,9 @@ export default function LinkCard({ link, count }: Props) {
               <p className="text-lg text-sky-500  font-bold">{link.name}</p>
             </div>
 
-            <p className="text-gray-500 text-sm font-medium">{link.title}</p>
+            <p className="text-gray-500 text-sm font-medium">
+              {link.description}
+            </p>
 
             <div className="flex gap-2 items-center flex-wrap mt-2">
               <p className="text-gray-500">{formattedDate}</p>

components/SortDropdown.tsx

@@ -1,18 +1,19 @@
-import React, { ChangeEvent } from "react";
+import React, { Dispatch, SetStateAction } from "react";
 import ClickAwayHandler from "./ClickAwayHandler";
 import RadioButton from "./RadioButton";
 import { Sort } from "@/types/global";
 
 type Props = {
-  handleSortChange: (e: Sort) => void;
   sortBy: Sort;
+  setSort: Dispatch<SetStateAction<Sort>>;
+
   toggleSortDropdown: Function;
 };
 
-export default function SortLinkDropdown({
-  handleSortChange,
+export default function SortDropdown({
   sortBy,
   toggleSortDropdown,
+  setSort,
 }: Props) {
   return (
     <ClickAwayHandler
@@ -27,37 +28,37 @@ export default function SortLinkDropdown({
         <RadioButton
           label="Name (A-Z)"
           state={sortBy === Sort.NameAZ}
-          onClick={() => handleSortChange(Sort.NameAZ)}
+          onClick={() => setSort(Sort.NameAZ)}
         />
 
         <RadioButton
           label="Name (Z-A)"
           state={sortBy === Sort.NameZA}
-          onClick={() => handleSortChange(Sort.NameZA)}
+          onClick={() => setSort(Sort.NameZA)}
         />
 
         <RadioButton
-          label="Title (A-Z)"
-          state={sortBy === Sort.TitleAZ}
-          onClick={() => handleSortChange(Sort.TitleAZ)}
+          label="Description (A-Z)"
+          state={sortBy === Sort.DescriptionAZ}
+          onClick={() => setSort(Sort.DescriptionAZ)}
         />
 
         <RadioButton
-          label="Title (Z-A)"
-          state={sortBy === Sort.TitleZA}
-          onClick={() => handleSortChange(Sort.TitleZA)}
+          label="Description (Z-A)"
+          state={sortBy === Sort.DescriptionZA}
+          onClick={() => setSort(Sort.DescriptionZA)}
         />
 
         <RadioButton
           label="Date (Newest First)"
           state={sortBy === Sort.DateNewestFirst}
-          onClick={() => handleSortChange(Sort.DateNewestFirst)}
+          onClick={() => setSort(Sort.DateNewestFirst)}
         />
 
         <RadioButton
           label="Date (Oldest First)"
           state={sortBy === Sort.DateOldestFirst}
-          onClick={() => handleSortChange(Sort.DateOldestFirst)}
+          onClick={() => setSort(Sort.DateOldestFirst)}
         />
       </div>
     </ClickAwayHandler>