refactor: rename state name and discard unnecessary state

hypertrons · Nov 10, 2023 · b32ece3 · b32ece3
1 parent 59695b8
commit b32ece3
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 47 deletions.
diff --git a/src/pages/ContentScripts/features/repo-collection/CollectionButton/AddToCollections.tsx b/src/pages/ContentScripts/features/repo-collection/CollectionButton/AddToCollections.tsx
@@ -42,7 +42,7 @@ export const AddToCollections = () => {
     hideAddToCollections,
     setHideAddToCollections,
     setHideCollectionList,
-    setShowManageModal,
+    setShowCollectionModal,
   } = useRepoCollectionContext();
 
   const [checkedCollectionIds, setCheckedCollectionIds] = useState<
@@ -110,7 +110,7 @@ export const AddToCollections = () => {
 
   const manage = () => {
     // open modal to manage collections
-    setShowManageModal(true);
+    setShowCollectionModal(true);
   };
 
   // if the ids of currentRepositoryCollections are the same as the ids of selectedCollectionIds, then the "Apply" button should be disabled

diff --git a/src/pages/ContentScripts/features/repo-collection/CollectionButton/CollectionList.tsx b/src/pages/ContentScripts/features/repo-collection/CollectionButton/CollectionList.tsx
@@ -34,12 +34,12 @@ export const CollectionList = () => {
     setHideAddToCollections,
     setHideCollectionList,
     setSelectedCollection,
-    setShowManageModal,
+    setShowCollectionModal,
   } = useRepoCollectionContext();
 
   const handleCollectionClick = (collectionId: Collection['id']) => {
     setSelectedCollection(collectionId);
-    setShowManageModal(true);
+    setShowCollectionModal(true);
   };
 
   const goToAddToCollections = () => {

diff --git a/src/pages/ContentScripts/features/repo-collection/CollectionContent/index.tsx b/src/pages/ContentScripts/features/repo-collection/CollectionContent/index.tsx
@@ -36,7 +36,14 @@ const CollectionContent: React.FC<Index> = ({ repoNames, currentRepo }) => {
   };
 
   return (
-    <Layout style={{ padding: '18px 0', background: colorBgContainer }}>
+    <Layout
+      style={{
+        height: '100%',
+        padding: '18px 0',
+        background: colorBgContainer,
+        overflow: 'auto',
+      }}
+    >
       <Sider style={{ background: colorBgContainer }} width={200}>
         <Menu
           mode="inline"

diff --git a/src/pages/ContentScripts/features/repo-collection/CollectionModal/index.tsx b/src/pages/ContentScripts/features/repo-collection/CollectionModal/index.tsx
@@ -5,6 +5,8 @@ import CollectionContent from '../CollectionContent';
 import React, { useState, useEffect } from 'react';
 import { Modal, Tabs, List, Col, Row, Button } from 'antd';
 
+const { TabPane } = Tabs;
+
 type TargetKey = React.MouseEvent | React.KeyboardEvent | string;
 
 type CollectionTabType = {
@@ -15,8 +17,8 @@ type CollectionTabType = {
 
 export const CollectionManageModal = () => {
   const {
-    showManageModal,
-    setShowManageModal,
+    showCollectionModal,
+    setShowCollectionModal,
     selectedCollection,
     setSelectedCollection,
     updaters,
@@ -26,25 +28,22 @@ export const CollectionManageModal = () => {
 
   const [activeKey, setActiveKey] = useState<string>();
   const [items, setItems] = useState<CollectionTabType[]>([]);
-  const [isClick, setIsClick] = useState(false);
-  const [isEdit, setIsEdit] = useState<boolean>(false);
+  const [isInEditMode, setIsInEditMode] = useState<boolean>(false);
 
   const editTab = (
     <div style={{ display: 'flex', gap: '10px', marginRight: '15px' }}>
       <Button
         onClick={() => {
-          setIsClick(true);
-          setIsEdit(false);
-          setShowManageModal(true);
+          setIsInEditMode(false);
+          setShowCollectionModal(true);
         }}
       >
         Add New Collection
       </Button>
       <Button
         onClick={() => {
-          setIsClick(true);
-          setIsEdit(true);
-          setShowManageModal(true);
+          setIsInEditMode(true);
+          setShowCollectionModal(true);
         }}
         disabled={items.length === 0 || selectedCollection === undefined}
       >
@@ -67,10 +66,10 @@ export const CollectionManageModal = () => {
 
     setActiveKey(selectedCollection);
     setItems(initialItems);
-  }, [showManageModal]);
+  }, [showCollectionModal]);
 
   const onCreate = async (values: any, newRepoData: string[]) => {
-    if (isEdit) {
+    if (isInEditMode) {
       const updatedItems = items.map((item) => {
         if (item.key === activeKey?.toString()) {
           return {
@@ -126,8 +125,7 @@ export const CollectionManageModal = () => {
     console.log('Received values of form: ', values);
 
     setSelectedCollection(values.collectionName);
-    setIsClick(false);
-    setIsEdit(false);
+    setIsInEditMode(false);
   };
 
   const onChange = (newActiveKey: string) => {
@@ -175,9 +173,9 @@ export const CollectionManageModal = () => {
   return (
     <div>
       <Modal
-        open={showManageModal}
+        open={showCollectionModal}
         onCancel={() => {
-          setShowManageModal(false);
+          setShowCollectionModal(false);
           setSelectedCollection(undefined);
         }}
         footer={null}
@@ -187,7 +185,7 @@ export const CollectionManageModal = () => {
           bottom: '10px',
           height: '95vh',
         }}
-        bodyStyle={{ height: 'calc(95vh - 30px)', overflow: 'auto' }} // 40px is the sum of top and bottom padding
+        bodyStyle={{ height: 'calc(95vh - 30px)' }} // 40px is the sum of top and bottom padding
       >
         <Tabs
           hideAdd
@@ -197,30 +195,27 @@ export const CollectionManageModal = () => {
           onEdit={onEdit}
           items={items}
           tabBarExtraContent={editTab}
-          style={{ margin: '0px 24px' }}
+          style={{ height: '100%', margin: '0px 24px' }}
         />
       </Modal>
-      {isClick && (
-        <CollectionEditor
-          open={showManageModal}
-          onCreate={onCreate}
-          onCancel={() => {
-            setIsClick(false);
-            setIsEdit(false);
-          }}
-          isEdit={isEdit}
-          collectionName={selectedCollection ? selectedCollection : ''}
-          collectionData={
-            isEdit
-              ? allRelations
-                  .filter(
-                    (relation) => relation.collectionId === selectedCollection
-                  )
-                  .map((relation) => relation.repositoryId)
-              : ['']
-          }
-        />
-      )}
+      <CollectionEditor
+        open={isInEditMode}
+        onCreate={onCreate}
+        onCancel={() => {
+          setIsInEditMode(false);
+        }}
+        isEdit={isInEditMode}
+        collectionName={selectedCollection ? selectedCollection : ''}
+        collectionData={
+          isInEditMode
+            ? allRelations
+                .filter(
+                  (relation) => relation.collectionId === selectedCollection
+                )
+                .map((relation) => relation.repositoryId)
+            : ['']
+        }
+      />
     </div>
   );
 };
diff --git a/src/pages/ContentScripts/features/repo-collection/context/index.ts b/src/pages/ContentScripts/features/repo-collection/context/index.ts
@@ -21,7 +21,7 @@ const useRepoCollection = ({
   const [hideCollectionList, setHideCollectionList] = useState(false);
   const [hideAddToCollections, setHideAddToCollections] = useState(true);
 
-  const [showManageModal, setShowManageModal] = useState(false);
+  const [showCollectionModal, setShowCollectionModal] = useState(false);
   const [selectedCollection, setSelectedCollection] = useState<string>();
 
   return {
@@ -36,8 +36,8 @@ const useRepoCollection = ({
     hideAddToCollections,
     setHideAddToCollections,
 
-    showManageModal,
-    setShowManageModal,
+    showCollectionModal,
+    setShowCollectionModal,
 
     selectedCollection,
     setSelectedCollection,