From afcb6e2442f5d3ad8db6abf194789a3526023171 Mon Sep 17 00:00:00 2001
From: Aria Moradi <aria.moradi007@gmail.com>
Date: Tue, 26 Oct 2021 12:42:30 +0330
Subject: [PATCH] refactor

---
 src/{ => components}/util/ListItemLink.tsx |  0
 src/components/util/TabPanel.tsx           | 30 ++++++++++++++++++++++
 src/screens/manga/Library.tsx              | 25 ++----------------
 3 files changed, 32 insertions(+), 23 deletions(-)
 rename src/{ => components}/util/ListItemLink.tsx (100%)
 create mode 100644 src/components/util/TabPanel.tsx

diff --git a/src/util/ListItemLink.tsx b/src/components/util/ListItemLink.tsx
similarity index 100%
rename from src/util/ListItemLink.tsx
rename to src/components/util/ListItemLink.tsx
diff --git a/src/components/util/TabPanel.tsx b/src/components/util/TabPanel.tsx
new file mode 100644
index 00000000..0b7c2d02
--- /dev/null
+++ b/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>
+    );
+}
diff --git a/src/screens/manga/Library.tsx b/src/screens/manga/Library.tsx
index aba4b44a..3e451d09 100644
--- a/src/screens/manga/Library.tsx
+++ b/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}