fix: Sort pinned issues in extended search

Author: CrawlerCode

src/components/issues/Issue.tsx

@@ -154,7 +154,12 @@ const Issue = ({ issue, timerData, assignedToMe, pinned, remembered, onStart, on
             </div>
           </div>
           <div className="absolute top-2 right-2 flex justify-end items-start gap-x-1">
-            {pinned && <FontAwesomeIcon icon={faStar} className="text-gray-300 dark:text-gray-600 focus:outline-none" tabIndex={-1} />}
+            {pinned && (
+              <>
+                <Tooltip id="tooltip-pinned" place="left" delayShow={700} content="Issue is pinned at the top" className="italic" />
+                <FontAwesomeIcon icon={faStar} className="text-gray-300 dark:text-gray-600 focus:outline-none" data-tooltip-id="tooltip-pinned" tabIndex={-1} />
+              </>
+            )}
             {!assignedToMe && (
               <>
                 <Tooltip id="tooltip-not-assigned-to-me" place="left" delayShow={700} content="Issue is not assigned to you" className="italic" />

src/components/issues/IssuesList.tsx

@@ -23,11 +23,18 @@ type PropTypes = {
   issuesData: ReturnType<typeof useStorage<IssuesData>>;
 };
 
-const IssuesList = ({ account, issues, issuesData: { data: issuesData, setData: setIssuesData } }: PropTypes) => {
+const IssuesList = ({ account, issues: rawIssues, issuesData: { data: issuesData, setData: setIssuesData } }: PropTypes) => {
   const { settings } = useSettings();
 
+  const sortedIssues = rawIssues.sort((a, b) => {
+    const pinnedA = issuesData[a.id]?.pinned || issuesData[a.id]?.favorite;
+    const pinnedB = issuesData[b.id]?.pinned || issuesData[b.id]?.favorite;
+    if (pinnedA && pinnedB) return new Date(a.updated_on).getTime() - new Date(a.updated_on).getTime();
+    return pinnedA ? -1 : 1;
+  });
+
   const groupedIssues = Object.values(
-    issues.reduce(
+    sortedIssues.reduce(
       (
         result: {
           [id: number]: {
@@ -192,7 +199,7 @@ const IssuesList = ({ account, issues, issuesData: { data: issuesData, setData:
           })}
         </>
       ))}
-      {issues.length === 0 && <p className="text-center">No issues</p>}
+      {rawIssues.length === 0 && <p className="text-center">No issues</p>}
     </>
   );
 };

src/pages/IssuesPage.tsx

@@ -57,16 +57,7 @@ const IssuesPage = () => {
       <div className="flex flex-col gap-y-2">
         {myIssuesQuery.isLoading && <IssuesListSkeleton />}
 
-        <IssuesList
-          account={myIssuesQuery.account}
-          issues={myIssuesQuery.data.sort((a, b) => {
-            const favA = issuesData.data[a.id]?.pinned || issuesData.data[a.id]?.favorite;
-            const favB = issuesData.data[b.id]?.pinned || issuesData.data[b.id]?.favorite;
-            if (favA && favB) return new Date(a.updated_on).getTime() - new Date(a.updated_on).getTime();
-            return favA ? -1 : 1;
-          })}
-          issuesData={issuesData}
-        />
+        <IssuesList account={myIssuesQuery.account} issues={myIssuesQuery.data} issuesData={issuesData} />
 
         {searching && settings.options.extendedSearch && (
           <>