Merge pull request #316 from hidden4003/webui-v2

remove not needed tabs from unrecognized

src/components/Panels/ShokoPanel.tsx

@@ -1,4 +1,6 @@
 import React, { ReactNode } from 'react';
+import { Icon } from '@mdi/react';
+import { mdiLoading } from '@mdi/js';
 
 type Props = {
   title: string;
@@ -9,7 +11,7 @@ type Props = {
   titleTabs?: ReactNode;
 };
 
-const ShokoPanel = ({ className, title, options, children, titleTabs }: Props) => (
+const ShokoPanel = ({ className, title, options, children, titleTabs, isFetching }: Props) => (
     <div className={`${className ?? ''} flex flex-col overflow-hidden h-full`}>
         <div className="flex justify-between items-center mr-2">
           <span className="flex font-semibold text-base">{title}{titleTabs}</span>
@@ -22,8 +24,8 @@ const ShokoPanel = ({ className, title, options, children, titleTabs }: Props) =
             </div>
         </div>
       <span className="bg-background-border my-4 h-0.5 flex-shrink-0" />
-      <div className="flex flex-col mr-2 font-open-sans">
-        {children}
+      <div className="flex grow flex-col mr-2 font-open-sans">
+        {isFetching ? <div className="flex grow justify-center items-center"><Icon path={mdiLoading} spin size={1} /></div> : children}
       </div>
     </div>
 );

src/core/sagas/dashboard.ts

@@ -5,6 +5,7 @@ import ApiDashboard from '../api/v3/dashboard';
 
 import {
   setFetched,
+  unsetFetched,
   setSeriesSummary,
   setStats,
   setRecentEpisodes,
@@ -71,16 +72,19 @@ function* getDashboardContinueWatching() {
   }
 
   yield put(setContinueWatching(resultJson.data));
+  yield put(setFetched('continueWatching'));
 }
 
 function* getDashboardUpcomingAnime(action: PayloadAction<boolean>) {
+  yield put(unsetFetched('upcomingAnime'));
   const resultJson = yield call(ApiDashboard.getDashboardAniDBCalendar, action.payload);
   if (resultJson.error) {
     toast.error(resultJson.message);
     return;
   }
 
   yield put(setUpcomingAnime(resultJson.data));
+  yield put(setFetched('upcomingAnime'));
 }
 
 export default {

src/core/sagas/mainpage.ts

@@ -31,7 +31,6 @@ function* eventMainPageLoad() {
     yield call(SagaImportFolder.getImportFolders),
     yield call(SagaDashboard.getDashboardRecentlyAddedEpisodes),
     yield call(SagaDashboard.getDashboardRecentlyAddedSeries),
-    yield call(SagaFile.getRecentFiles),
     yield call(SagaFile.getUnrecognizedFiles),
     yield call(SagaDashboard.getDashboardContinueWatching),
     yield call(SagaDashboard.getDashboardUpcomingAnime, { type: Events.DASHBOARD_UPCOMING_ANIME, payload: false }),

src/pages/dashboard/panels/ContinueWatching.tsx

@@ -6,6 +6,7 @@ import { DashboardEpisodeDetailsType } from '../../../core/types/api/dashboard';
 
 const ContinueWatching = () => {
   const items = useSelector((state: RootState) => state.mainpage.continueWatching);
+  const hasFetched = useSelector((state: RootState) => state.mainpage.fetched.continueWatching);
 
   const renderDetails = (item: DashboardEpisodeDetailsType ) => {
 
@@ -17,7 +18,7 @@ const ContinueWatching = () => {
   };
 
   return (
-    <ShokoPanel title="Continue Watching">
+    <ShokoPanel title="Continue Watching" isFetching={!hasFetched}>
       <div className="flex flex-nowrap overflow-x-auto shoko-scrollbar h-90">{items.map(item => renderDetails(item))}</div>
     </ShokoPanel>
   );

src/pages/dashboard/panels/ImportBreakdown.tsx

@@ -1,46 +1,18 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { useSelector } from 'react-redux';
-import cx from 'classnames';
 
 import { RootState } from '../../../core/store';
 import ShokoPanel from '../../../components/Panels/ShokoPanel';
-import Button from '../../../components/Input/Button';
-import ImportedTab from './ImportBreakdownTabs/ImportedTab';
 import UnrecognizedTab from './ImportBreakdownTabs/UnrecognizedTab';
 
 function ImportBreakdown() {
-  const hasFetchedRecents = useSelector((state: RootState) => state.mainpage.fetched.recentFiles);
   const hasFetchedUnrecognized = useSelector(
     (state: RootState) => state.mainpage.fetched.unrecognizedFiles,
   );
 
-  const [activeTab, setActiveTab] = useState('unrecognized');
-
-  const renderOptions = () => (
-    <div className="font-open-sans font-semibold">
-      <Button onClick={() => setActiveTab('imported')} className={cx(['mr-2 font-open-sans font-semibold', activeTab === 'imported' && 'color-highlight-1'])}>
-        Imported
-      </Button>
-      <Button onClick={() => setActiveTab('unrecognized')} className={cx(['mr-2 font-open-sans font-semibold', activeTab === 'unrecognized' && 'color-highlight-1'])}>
-        Unrecognized
-      </Button>
-    </div>
-  );
-
-  const renderContent = () => {
-    switch (activeTab) {
-      case 'imported':
-        return <ImportedTab />;
-      case 'unrecognized':
-        return <UnrecognizedTab />;
-      default:
-        return <UnrecognizedTab />;
-    }
-  };
-
   return (
-    <ShokoPanel title="Unrecognized" options={renderOptions()} isFetching={!(activeTab === 'unrecognized' ? hasFetchedUnrecognized : hasFetchedRecents)}>
-      {renderContent()}
+    <ShokoPanel title="Unrecognized" isFetching={!hasFetchedUnrecognized}>
+      <UnrecognizedTab />
     </ShokoPanel>
   );
 }

src/pages/dashboard/panels/ImportFolders.tsx

@@ -68,10 +68,8 @@ function ImportFolders() {
   };
 
   const renderOptions = () => (
-    <div>
-      <Button className="color-highlight-1 mx-2" onClick={() => setImportFolderModalStatus(true)} tooltip="Add Folder">
+    <div className="color-highlight-1 mx-2 cursor-pointer" onClick={() => setImportFolderModalStatus(true)} title="Add Folder">
         <Icon path={mdiFolderPlusOutline} size={1} horizontal vertical rotate={180}/>
-      </Button>
     </div>
   );
 

src/pages/dashboard/panels/QueueProcessor.tsx

@@ -70,13 +70,13 @@ function QueueProcessor() {
     return (
       <React.Fragment>
         {paused ? (
-          <Button className="color-highlight-1 mx-2" onClick={() => handleOperation!('Start')} tooltip="Resume All">
+          <div className="color-highlight-1 mx-2 cursor-pointer" onClick={() => handleOperation!('Start')} title="Resume All">
             <Icon path={mdiCloseCircleOutline} size={1} horizontal vertical rotate={180} />
-          </Button>
+          </div>
         ) : (
-          <Button className="color-highlight-1 mx-2" onClick={() => handleOperation!('Pause')} tooltip="Pause All">
+          <div className="color-highlight-1 mx-2 cursor-pointer" onClick={() => handleOperation!('Pause')} title="Pause All">
             <Icon path={mdiPauseCircleOutline} size={1} horizontal vertical rotate={180} />
-          </Button>
+          </div>
         )}
       </React.Fragment>
     );

src/pages/dashboard/panels/RecentlyImported.tsx

@@ -10,9 +10,9 @@ import { SeriesType } from '../../../core/types/api/series';
 
 const Title = ({ showSeries, setShowSeries }) => (<div>
   <span className="px-2">&gt;</span>
-  <span className={cx({ 'font-semibold': showSeries === false, 'text-highlight-1': showSeries === false })} onClick={() => { setShowSeries(false);}}>Episodes</span>
+  <span className={cx({ 'cursor-pointer': true, 'font-semibold': showSeries === false, 'text-highlight-1': showSeries === false })} onClick={() => { setShowSeries(false);}}>Episodes</span>
 <span className="mx-2">|</span>
-<span className={cx({ 'font-semibold': showSeries, 'text-highlight-1': showSeries })} onClick={() => { setShowSeries(true);}}>Series</span>
+<span className={cx({ 'cursor-pointer': true, 'font-semibold': showSeries, 'text-highlight-1': showSeries })} onClick={() => { setShowSeries(true);}}>Series</span>
 </div>
 );
 

src/pages/dashboard/panels/UpcomingAnime.tsx

@@ -18,14 +18,15 @@ const CalendarConfig: moment.CalendarSpec = {
 
 const Title = ({ showAll, setShowAll }) => (<div>
     <span className="px-2">&gt;</span>
-    <span className={cx({ 'font-semibold': showAll === false, 'text-highlight-1': showAll === false })} onClick={() => { setShowAll(false);}}>My Collection</span>
+    <span className={cx({ 'cursor-pointer': true, 'font-semibold': showAll === false, 'text-highlight-1': showAll === false })} onClick={() => { setShowAll(false);}}>My Collection</span>
   <span className="mx-2">|</span>
-  <span className={cx({ 'font-semibold': showAll, 'text-highlight-1': showAll })} onClick={() => { setShowAll(true);}}>All</span>
+  <span className={cx({ 'cursor-pointer': true, 'font-semibold': showAll, 'text-highlight-1': showAll })} onClick={() => { setShowAll(true);}}>All</span>
 </div>
 );
 
 const UpcomingAnime = () => {
   const items = useSelector((state: RootState) => state.mainpage.upcomingAnime);
+  const hasFetched = useSelector((state: RootState) => state.mainpage.fetched.upcomingAnime);
   const [showAll, setShowAll] = useState(false);
 
   const dispatch = useDispatch();
@@ -49,7 +50,7 @@ const UpcomingAnime = () => {
   };
 
   return (
-    <ShokoPanel title="Upcoming Anime" titleTabs={<Title showAll={showAll} setShowAll={updatePanel} />}>
+    <ShokoPanel title="Upcoming Anime" isFetching={!hasFetched} titleTabs={<Title showAll={showAll} setShowAll={updatePanel} />}>
       <div className="flex flex-nowrap overflow-x-auto shoko-scrollbar h-90 pb-5">{items.map(item => renderDetails(item))}</div>
     </ShokoPanel>
   );