fixed selection of tab in new local upload section

bible-technology · Nov 24, 2023 · 9b34d31 · 9b34d31
1 parent 888b5ad
commit 9b34d31
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 18 deletions.
diff --git a/renderer/src/components/Resources/ResourceTabPane.js b/renderer/src/components/Resources/ResourceTabPane.js
@@ -1,5 +1,5 @@
 /* eslint-disable no-nested-ternary */
-import React, { Fragment, useState } from 'react';
+import React, { Fragment, useEffect, useState } from 'react';
 import { Tab } from '@headlessui/react';
 import { classNames } from '@/util/classNames';
 import { PlusIcon } from '@heroicons/react/24/outline';
@@ -34,26 +34,40 @@ export default function ResourceTabPane({
     }
   };
 
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [selectResource]);
+
   return (
     <div className="bg-gray-50 items-center p-3 justify-between w-full h-full">
-      <Tab.Group>
+      <Tab.Group selectedIndex={selectedIndex} onChange={setSelectedIndex}>
         <Tab.List className="flex space-x-0 rounded-xl ">
-          {selectResource !== 'local-helps' && (
-            <Tab className={({ selected }) => classNames(
-            'w-20 rounded-t-lg flex items-center justify-center font-bold py-2 text-xs leading-5 text-white uppercase',
+          <Tab className={({ selected }) => classNames(
+            'px-6 rounded-t-lg flex items-center justify-center font-bold py-2 text-xs leading-5 text-white uppercase',
             'ring-offset-2 ring-offset-white focus:outline-none z-50',
             selected
               ? 'bg-primary text-white'
               : 'text-black bg-gray-200',
           )}
-            >
-              {selectResource === 'bible'
+          >
+            {selectResource === 'bible'
             ? t('label-resource-bible')
             : selectResource === 'OBS' ? 'OBS'
+            : selectResource === 'local-helps'
+            ? (
+              <div className="flex gap-2">
+                <PlusIcon
+                  className="w-4 h-4"
+                  aria-hidden="true"
+                />
+                {t('label-collection')}
+              </div>
+            )
             : selectResource === 'audio' ? t('label-audio-bible') : selectResource}
 
-            </Tab>
-          )}
+          </Tab>
 
           {(selectResource !== 'audio' && selectResource !== 'local-helps')
           && (
@@ -80,6 +94,7 @@ export default function ResourceTabPane({
           </Tab>
           )}
 
+          {selectResource !== 'local-helps' && (
           <Tab
             className={({ selected }) => classNames(
               'w-32 rounded-t-lg flex items-center justify-center gap-2 font-bold py-2 text-xs leading-5 text-white uppercase',
@@ -97,6 +112,7 @@ export default function ResourceTabPane({
             />
             {t('label-collection')}
           </Tab>
+          )}
         </Tab.List>
 
         <Tab.Panels>

diff --git a/renderer/src/components/Resources/ResourcesPopUp.js b/renderer/src/components/Resources/ResourcesPopUp.js
@@ -115,15 +115,17 @@ export default function ResourcesPopUp(
             <div className="flex border bg-white">
               <ResourcesSidebar selectResource={selectResource} setSelectResource={setSelectResource} setShowInput={setShowInput} setTitle={setTitle} selectedProjectMeta={selectedProjectMeta} />
               <div className="h-[85vh] w-full overflow-x-scroll bg-gray-50 items-center p-3 justify-between">
-                <SearchBar
-                  currentFullResources={currentFullResources}
-                  selectResource={selectResource}
-                  setFilteredResources={setFilteredResources}
-                  subMenuItems={subMenuItems}
-                  setfilteredBibleObsAudio={setfilteredBibleObsAudio}
-                  selectedPreProd={selectedPreProd}
-                  setSelectedPreProd={setSelectedPreProd}
-                />
+                {selectResource !== 'local-helps' && (
+                  <SearchBar
+                    currentFullResources={currentFullResources}
+                    selectResource={selectResource}
+                    setFilteredResources={setFilteredResources}
+                    subMenuItems={subMenuItems}
+                    setfilteredBibleObsAudio={setfilteredBibleObsAudio}
+                    selectedPreProd={selectedPreProd}
+                    setSelectedPreProd={setSelectedPreProd}
+                  />
+                )}
 
                 {(selectResource === 'obs' || selectResource === 'audio' || selectResource === 'bible' || selectResource === 'local-helps')
                   ? (