refactor

src/components/util/TabPanel.tsx

@@ -0,0 +1,30 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+import React from 'react';
+
+interface IProps {
+    children: React.ReactNode;
+    index: any;
+    currentIndex: any;
+}
+
+export default function TabPanel(props: IProps) {
+    const {
+        children, index, currentIndex,
+    } = props;
+
+    return (
+        <div
+            role="tabpanel"
+            hidden={index !== currentIndex}
+            id={`simple-tabpanel-${index}`}
+        >
+            {currentIndex === index && children}
+        </div>
+    );
+}

src/screens/manga/Library.tsx

@@ -13,6 +13,7 @@ import client from 'util/client';
 import cloneObject from 'util/cloneObject';
 import EmptyView from 'components/EmptyView';
 import LoadingPlaceholder from 'components/LoadingPlaceholder';
+import TabPanel from 'components/util/TabPanel';
 
 interface IMangaCategory {
     category: ICategory
@@ -20,28 +21,6 @@ interface IMangaCategory {
     isFetched: boolean
 }
 
-interface TabPanelProps {
-    children: React.ReactNode;
-    index: any;
-    value: any;
-}
-
-function TabPanel(props: TabPanelProps) {
-    const {
-        children, value, index,
-    } = props;
-
-    return (
-        <div
-            role="tabpanel"
-            hidden={value !== index}
-            id={`simple-tabpanel-${index}`}
-        >
-            {value === index && children}
-        </div>
-    );
-}
-
 export default function Library() {
     const { setTitle, setAction } = useContext(NavbarContext);
     useEffect(() => { setTitle('Library'); setAction(<></>); }, []);
@@ -108,7 +87,7 @@ export default function Library() {
         const tabDefines = tabs.map((tab) => (<Tab label={tab.category.name} value={tab.category.order} />));
 
         const tabBodies = tabs.map((tab) => (
-            <TabPanel value={tabNum} index={tab.category.order}>
+            <TabPanel index={tab.category.order} currentIndex={tabNum}>
                 <MangaGrid
                     mangas={tab.mangas}
                     hasNextPage={false}