feat: show import result

RSSNext · May 19, 2024 · 8da3b21 · 8da3b21
1 parent 460d577
commit 8da3b21
Showing 1 changed file with 47 additions and 80 deletions.
diff --git a/src/renderer/src/components/follow/import.tsx b/src/renderer/src/components/follow/import.tsx
@@ -11,17 +11,8 @@ import {
   FormMessage,
 } from "@renderer/components/ui/form"
 import { Input } from "@renderer/components/ui/input"
-import { useEffect } from "react"
 import { useMutation } from "@tanstack/react-query"
-import { Image } from "@renderer/components/ui/image"
-import { FeedResponse, EntriesResponse } from "@renderer/lib/types"
-import {
-  Card,
-  CardContent,
-  CardFooter,
-  CardHeader,
-} from "@renderer/components/ui/card"
-import { FollowButton } from "./button"
+import { Card, CardContent, CardHeader } from "@renderer/components/ui/card"
 import { FollowSummary } from "../feed-summary"
 import { apiFetch } from "@renderer/lib/queries/api-fetch"
 
@@ -37,6 +28,21 @@ const formSchema = z.object({
   }),
 })
 
+const list = [
+  {
+    key: "parsedErrorItems",
+    title: "Parsed Error Items",
+  },
+  {
+    key: "successfulItems",
+    title: "Successful Items",
+  },
+  {
+    key: "conflictItems",
+    title: "Conflict Items",
+  },
+]
+
 export function FollowImport() {
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
@@ -98,76 +104,37 @@ export function FollowImport() {
       </Form>
       {mutation.isSuccess && (
         <div className="max-w-lg mt-8">
-          <div className="text-zinc-500 mb-4">
-            {mutation.data?.successfulItems.length || 0} feeds were successfully
-            imported, {mutation.data?.conflictItems.length || 0} were already
-            subscribed to, and {mutation.data?.parsedErrorItems.length || 0}{" "}
-            failed to import.
-          </div>
-          <div className="space-y-6 text-sm">
-            {/* {mutation.data?.map((item) => (
-              <Card key={item.feed.url || item.docs} className="select-text">
-                <CardHeader>
-                  <FollowSummary feed={item.feed} docs={item.docs} />
-                </CardHeader>
-                {item.docs ? (
-                  <CardFooter>
-                    <a href={item.docs} target="_blank">
-                      <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) => (
-                              <a
-                                key={entry!.id}
-                                href={entry!.url}
-                                target="_blank"
-                                className="flex items-center gap-1 flex-col min-w-0 flex-1"
-                              >
-                                {entry!.images?.[0] ? (
-                                  <Image
-                                    src={entry!.images?.[0]}
-                                    className="aspect-square w-full"
-                                  />
-                                ) : (
-                                  <div className="bg-stone-100 rounded text-zinc-500 p-2 overflow-hidden w-full aspect-square text-xs leading-tight flex">
-                                    {entry!.title}
-                                  </div>
-                                )}
-                                <div className="line-clamp-2 w-full text-xs leading-tight">
-                                  {entry!.title}
-                                </div>
-                              </a>
-                            ))}
-                        </div>
-                      )}
-                    </CardContent>
-                    <CardFooter>
-                      {item.isSubscribed ? (
-                        <Button variant="outline" disabled>
-                          Followed
-                        </Button>
-                      ) : (
-                        <FollowButton feed={item.feed} />
-                      )}
-                      <div className="ml-6 text-zinc-500">
-                        <span className="text-zinc-800 font-medium">
-                          {item.subscriptionCount}
-                        </span>{" "}
-                        Followers
-                      </div>
-                    </CardFooter>
-                  </>
-                )}
-              </Card>
-            ))} */}
-          </div>
+          <Card>
+            <CardHeader className="text-zinc-500 block">
+              <span className="font-bold text-zinc-800">
+                {mutation.data?.successfulItems.length || 0}
+              </span>{" "}
+              feeds were successfully imported,{" "}
+              <span className="font-bold text-zinc-800">
+                {mutation.data?.conflictItems.length || 0}
+              </span>{" "}
+              were already subscribed to, and{" "}
+              <span className="font-bold text-zinc-800">
+                {mutation.data?.parsedErrorItems.length || 0}
+              </span>{" "}
+              failed to import.
+            </CardHeader>
+            <CardContent className="space-y-6">
+              {list.map((item) => (
+                <div key={item.key}>
+                  <div className="font-medium text-xl mb-4">{item.title}</div>
+                  <div className="space-y-4">
+                    {!mutation.data?.[item.key].length && (
+                      <div className="text-zinc-500">No items</div>
+                    )}
+                    {mutation.data?.[item.key].map((feed) => (
+                      <FollowSummary feed={feed} />
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </CardContent>
+          </Card>
         </div>
       )}
     </>