feat: sort the query results by the number of followers in asc order (#379)

Co-authored-by: zhangchenyang <zhangchenyang@seclover.com>

Author: auuunya

src/renderer/src/modules/discover/form.tsx

@@ -144,97 +144,99 @@ export function DiscoverForm({ type }: { type: string }) {
             {mutation.data?.length > 1 && "s"}
           </div>
           <div className="space-y-6 text-sm">
-            {mutation.data?.map((item) => (
-              <Card
-                data-feed-id={item.feed.id}
-                key={item.feed.url || item.docs}
-                className="select-text"
-              >
-                <CardHeader>
-                  <FollowSummary className="max-w-[462px]" feed={item.feed} docs={item.docs} />
-                </CardHeader>
-                {item.docs ? (
-                  <CardFooter>
-                    <a href={item.docs} target="_blank" rel="noreferrer">
-                      <Button>View Docs</Button>
-                    </a>
-                  </CardFooter>
-                ) : (
-                  <>
-                    <CardContent>
-                      {!!item.entries?.length && (
-                        <div className="grid grid-cols-4 gap-4">
-                          {item.entries
-                            .filter((e) => !!e)
-                            .map((entry) => {
-                              const assertEntry = entry
-                              return (
-                                <a
-                                  key={assertEntry.id}
-                                  href={assertEntry.url || void 0}
-                                  target="_blank"
-                                  className="flex min-w-0 flex-1 flex-col items-center gap-1"
-                                  rel="noreferrer"
-                                >
-                                  {assertEntry.media?.[0] ? (
-                                    <Media
-                                      src={assertEntry.media?.[0].url}
-                                      type={assertEntry.media?.[0].type}
-                                      previewImageUrl={assertEntry.media?.[0].preview_image_url}
-                                      className="aspect-square w-full"
-                                    />
-                                  ) : (
-                                    <div className="flex aspect-square w-full overflow-hidden rounded bg-stone-100 p-2 text-xs leading-tight text-zinc-500">
+            {mutation.data
+              ?.sort((a, b) => (b.subscriptionCount ?? 0) - (a.subscriptionCount ?? 0))
+              .map((item) => (
+                <Card
+                  data-feed-id={item.feed.id}
+                  key={item.feed.url || item.docs}
+                  className="select-text"
+                >
+                  <CardHeader>
+                    <FollowSummary className="max-w-[462px]" feed={item.feed} docs={item.docs} />
+                  </CardHeader>
+                  {item.docs ? (
+                    <CardFooter>
+                      <a href={item.docs} target="_blank" rel="noreferrer">
+                        <Button>View Docs</Button>
+                      </a>
+                    </CardFooter>
+                  ) : (
+                    <>
+                      <CardContent>
+                        {!!item.entries?.length && (
+                          <div className="grid grid-cols-4 gap-4">
+                            {item.entries
+                              .filter((e) => !!e)
+                              .map((entry) => {
+                                const assertEntry = entry
+                                return (
+                                  <a
+                                    key={assertEntry.id}
+                                    href={assertEntry.url || void 0}
+                                    target="_blank"
+                                    className="flex min-w-0 flex-1 flex-col items-center gap-1"
+                                    rel="noreferrer"
+                                  >
+                                    {assertEntry.media?.[0] ? (
+                                      <Media
+                                        src={assertEntry.media?.[0].url}
+                                        type={assertEntry.media?.[0].type}
+                                        previewImageUrl={assertEntry.media?.[0].preview_image_url}
+                                        className="aspect-square w-full"
+                                      />
+                                    ) : (
+                                      <div className="flex aspect-square w-full overflow-hidden rounded bg-stone-100 p-2 text-xs leading-tight text-zinc-500">
+                                        {assertEntry.title}
+                                      </div>
+                                    )}
+                                    <div className="line-clamp-2 w-full text-xs leading-tight">
                                       {assertEntry.title}
                                     </div>
-                                  )}
-                                  <div className="line-clamp-2 w-full text-xs leading-tight">
-                                    {assertEntry.title}
-                                  </div>
-                                </a>
-                              )
-                            })}
+                                  </a>
+                                )
+                              })}
+                          </div>
+                        )}
+                      </CardContent>
+                      <CardFooter>
+                        {item.isSubscribed ? (
+                          <Button variant="outline" disabled>
+                            Followed
+                          </Button>
+                        ) : (
+                          <Button
+                            onClick={() => {
+                              present({
+                                title: "Add Feed",
+                                content: ({ dismiss }) => (
+                                  <FeedForm
+                                    asWidget
+                                    url={item.feed.url}
+                                    id={item.feed.id}
+                                    defaultValues={{
+                                      view: getSidebarActiveView().toString(),
+                                    }}
+                                    onSuccess={dismiss}
+                                  />
+                                ),
+                              })
+                            }}
+                          >
+                            Follow
+                          </Button>
+                        )}
+                        <div className="ml-6 text-zinc-500">
+                          <span className="font-medium text-zinc-800 dark:text-zinc-200">
+                            {item.subscriptionCount}
+                          </span>{" "}
+                          Followers
                         </div>
-                      )}
-                    </CardContent>
-                    <CardFooter>
-                      {item.isSubscribed ? (
-                        <Button variant="outline" disabled>
-                          Followed
-                        </Button>
-                      ) : (
-                        <Button
-                          onClick={() => {
-                            present({
-                              title: "Add Feed",
-                              content: ({ dismiss }) => (
-                                <FeedForm
-                                  asWidget
-                                  url={item.feed.url}
-                                  id={item.feed.id}
-                                  defaultValues={{
-                                    view: getSidebarActiveView().toString(),
-                                  }}
-                                  onSuccess={dismiss}
-                                />
-                              ),
-                            })
-                          }}
-                        >
-                          Follow
-                        </Button>
-                      )}
-                      <div className="ml-6 text-zinc-500">
-                        <span className="font-medium text-zinc-800 dark:text-zinc-200">
-                          {item.subscriptionCount}
-                        </span>{" "}
-                        Followers
-                      </div>
-                    </CardFooter>
-                  </>
-                )}
-              </Card>
-            ))}
+                      </CardFooter>
+                    </>
+                  )}
+                </Card>
+              ))}
           </div>
         </div>
       )}