fix some bugs with category

src/screens/manga/Library.tsx

@@ -44,7 +44,7 @@ export default function Library() {
     const { setTitle, setAction } = useContext(NavbarContext);
     useEffect(() => { setTitle('Library'); setAction(<></>); }, []);
 
-    const [tabs, setTabs] = useState<IMangaCategory[]>([]);
+    const [tabs, setTabs] = useState<IMangaCategory[]>();
     const [tabNum, setTabNum] = useState<number>(0);
 
     // a hack so MangaGrid doesn't stop working. I won't change it in case
@@ -66,13 +66,17 @@ export default function Library() {
                 }));
 
                 setTabs(categoryTabs);
+                if (categoryTabs.length > 0) {
+                    setTabNum(categoryTabs[0].category.order);
+                }
             });
     }, []);
 
     // fetch the current tab
     useEffect(() => {
+        if (tabs !== undefined) {
             tabs.forEach((tab, index) => {
-            if (index === tabNum && !tab.isFetched) {
+                if (tab.category.order === tabNum && !tab.isFetched) {
                     // eslint-disable-next-line @typescript-eslint/no-shadow
                     client.get(`/api/v1/category/${tab.category.id}`)
                         .then((response) => response.data)
@@ -81,11 +85,16 @@ export default function Library() {
                             tabsClone[index].mangas = data;
                             tabsClone[index].isFetched = true;
 
-                        setTabs(tabsClone); // clone the object
+                            setTabs(tabsClone);
                         });
                 }
             });
-    }, [tabs.length, tabNum]);
+        }
+    }, [tabs?.length, tabNum]);
+
+    if (tabs === undefined) {
+        return <h3>Loading...</h3>;
+    }
 
     if (tabs.length === 0) {
         return <h3>Library is empty</h3>;
@@ -113,6 +122,7 @@ export default function Library() {
         toRender = (
             <>
                 <Tabs
+                    key={tabNum}
                     value={tabNum}
                     onChange={(e, newTab) => handleTabChange(newTab)}
                     indicatorColor="primary"

src/screens/settings/Categories.tsx

@@ -71,12 +71,10 @@ export default function Categories() {
     }, [updateTriggerHolder]);
 
     const categoryReorder = (list: ICategory[], from: number, to: number) => {
-        const category = list[from];
-
         const formData = new FormData();
         formData.append('from', `${from + 1}`);
         formData.append('to', `${to + 1}`);
-        client.post(`/api/v1/category/${category.id}/reorder`, formData)
+        client.patch('/api/v1/category/reorder', formData)
             .finally(() => triggerUpdate());
 
         // also move it in local state to avoid jarring moving behviour...