bug fixed

components/CollectionListing.tsx

@@ -29,7 +29,7 @@ const CollectionListing = () => {
   const updateCollection = useUpdateCollection();
   const { data: collections = [], isLoading } = useCollections();
 
-  const { data: user = {} } = useUser();
+  const { data: user = {}, refetch } = useUser();
   const updateUser = useUpdateUser();
 
   const router = useRouter();
@@ -38,10 +38,7 @@ const CollectionListing = () => {
   const [tree, setTree] = useState<TreeData | undefined>();
 
   const initialTree = useMemo(() => {
-    if (
+    if (collections.length > 0) {
-      // !tree &&
-      collections.length > 0
-    ) {
       return buildTreeFromCollections(
         collections,
         router,
@@ -52,12 +49,12 @@ const CollectionListing = () => {
   }, [collections, user, router]);
 
   useEffect(() => {
-    // if (!tree)
     setTree(initialTree);
   }, [initialTree]);
 
   useEffect(() => {
     if (user.username) {
+      refetch();
       if (
         (!user.collectionOrder || user.collectionOrder.length === 0) &&
         collections.length > 0
@@ -65,11 +62,7 @@ const CollectionListing = () => {
         updateUser.mutate({
           ...user,
           collectionOrder: collections
-            .filter(
+            .filter((e) => e.parentId === null)
-              (e) =>
-                e.parentId === null ||
-                !collections.find((i) => i.id === e.parentId)
-            ) // Filter out collections with non-null parentId
             .map((e) => e.id as number),
         });
       else {
@@ -103,7 +96,7 @@ const CollectionListing = () => {
         }
       }
     }
-  }, [collections]);
+  }, [user, collections]);
 
   const onExpand = (movedCollectionId: ItemId) => {
     setTree((currentTree) =>

pages/dashboard.tsx

@@ -1,5 +1,5 @@
 import MainLayout from "@/layouts/MainLayout";
-import { BaseSyntheticEvent, useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import Link from "next/link";
 import React from "react";
 import { toast } from "react-hot-toast";
@@ -90,23 +90,44 @@ export default function Dashboard() {
           data: request,
         };
 
+        try {
           const response = await fetch("/api/v1/migration", {
             method: "POST",
             body: JSON.stringify(body),
           });
 
-        await response.json();
+          if (!response.ok) {
-
+            const errorData = await response.json();
             toast.dismiss(load);
 
+            toast.error(
+              errorData.response ||
+                "Failed to import bookmarks. Please try again."
+            );
+            return;
+          }
+
+          await response.json();
+          toast.dismiss(load);
           toast.success("Imported the Bookmarks! Reloading the page...");
 
           setTimeout(() => {
             location.reload();
           }, 2000);
+        } catch (error) {
+          console.error("Request failed", error);
+          toast.dismiss(load);
+          toast.error(
+            "An error occurred while importing bookmarks. Please check the logs for more info."
+          );
+        }
       };
+
       reader.onerror = function (e) {
-        console.log("Error:", e);
+        console.log("Error reading file:", e);
+        toast.error(
+          "Failed to read the file. Please make sure the file is correct and try again."
+        );
       };
     }
   };
@@ -233,7 +254,7 @@ export default function Dashboard() {
               />
             </div>
           ) : (
-            <div className="sky-shadow flex flex-col justify-center h-full border border-solid border-neutral-content w-full mx-auto p-10 rounded-2xl bg-base-200">
+            <div className="flex flex-col justify-center h-full border border-solid border-neutral-content w-full mx-auto p-10 rounded-2xl bg-base-200 bg-gradient-to-tr from-neutral-content/70 to-50% to-base-200">
               <p className="text-center text-2xl">
                 {t("view_added_links_here")}
               </p>
@@ -382,7 +403,7 @@ export default function Dashboard() {
           ) : (
             <div
               style={{ flex: "1 1 auto" }}
-              className="flex flex-col gap-2 justify-center h-full border border-solid border-neutral-content w-full mx-auto p-10 rounded-2xl bg-base-200"
+              className="flex flex-col gap-2 justify-center h-full border border-solid border-neutral-content w-full mx-auto p-10 rounded-2xl bg-base-200 bg-gradient-to-tr from-neutral-content/70 to-50% to-base-200"
             >
               <i className="bi-pin mx-auto text-6xl text-primary"></i>
               <p className="text-center text-2xl">