Add unrecognized utility

src/core/events.ts

@@ -27,7 +27,6 @@ export default {
   // QUICK ACTIONS
   QUICK_ACTION_RUN: 'EVENT_QUICK_ACTION_RUN',
   // MAINPAGE
-  MAINPAGE_FILE_AVDUMP: 'EVENT_MAINPAGE_FILE_AVDUMP',
   MAINPAGE_IMPORT_FOLDER_SERIES: 'EVENT_MAINPAGE_IMPORT_FOLDER_SERIES',
   MAINPAGE_LOAD: 'EVENT_MAINPAGE_LOAD',
   MAINPAGE_QUEUE_OPERATION: 'EVENT_MAINPAGE_QUEUE_OPERATION',
@@ -59,4 +58,8 @@ export default {
   WEBUI_UPDATE: 'EVENT_WEBUI_UPDATE',
   // LOGS
   LOGPAGE_LOAD: 'EVENT_LOGPAGE_LOAD',
+  // UTILITIES:
+  UTILITIES_RESCAN: 'EVENT_UTILITIES_RESCAN',
+  UTILITIES_REHASH: 'EVENT_UTILITIES_REHASH',
+  UTILITIES_AVDUMP: 'EVENT_UTILITIES_AVDUMP',
 };

src/core/router/index.tsx

@@ -21,6 +21,7 @@ import SettingsPage from '../../pages/settings/SettingsPage';
 import LogsPage from '../../pages/logs/LogsPage';
 import NoMatchPage from '../../pages/nomatch';
 import CollectionPage from '../../pages/collection/CollectionPage';
+import UtilitiesPage from '../../pages/utilities/UtilitiesPage';
 
 // First run
 import Acknowledgement from '../../pages/firstrun/Acknowledgement';
@@ -66,6 +67,7 @@ function Router(props: Props) {
               <Route index element={<Navigate to="dashboard" />} />
               <Route path="dashboard" element={<DashboardPage />} />
               <Route path="import-folders" element={<ImportFoldersPage />} />
+              <Route path="utilities" element={<UtilitiesPage />} />
               <Route path="actions" element={<ActionsPage />} />
               <Route path="log" element={<LogsPage />} />
               <Route path="collection" element={<CollectionPage />} />

src/core/sagas/file.ts

@@ -39,8 +39,18 @@ function* runAvdump(action) {
   yield put(setAvdump({ [fileId]: { fetching: false, hash: resultJson.data.Ed2k } }));
 }
 
+function* runRescan(action) {
+  yield call(ApiFile.postFileRescan, action.payload);
+}
+
+function* runRehash(action) {
+  yield call(ApiFile.postFileRehash, action.payload);
+}
+
 export default {
   getRecentFiles,
   getUnrecognizedFiles,
   runAvdump,
+  runRescan,
+  runRehash,
 };

src/core/sagas/index.ts

@@ -69,7 +69,6 @@ export default function* rootSaga() {
     // QUICK ACTIONS
     takeEvery(Events.QUICK_ACTION_RUN, SagaQuickAction.runQuickAction),
     // MAINPAGE
-    takeEvery(Events.MAINPAGE_FILE_AVDUMP, SagaFile.runAvdump),
     takeEvery(Events.MAINPAGE_IMPORT_FOLDER_SERIES, SagaImportFolder.getImportFolderSeries),
     takeEvery(Events.MAINPAGE_LOAD, SagaMainPage.eventMainPageLoad),
     takeEvery(Events.MAINPAGE_QUEUE_OPERATION, SagaMainPage.eventQueueOperation),
@@ -97,5 +96,9 @@ export default function* rootSaga() {
     // WEBUI
     takeEvery(Events.WEBUI_CHECK_UPDATES, SagaWebUi.checkUpdates),
     takeEvery(Events.WEBUI_UPDATE, SagaWebUi.downloadUpdates),
+    // UTILITIES
+    takeEvery(Events.UTILITIES_RESCAN, SagaFile.runRescan),
+    takeEvery(Events.UTILITIES_REHASH, SagaFile.runRehash),
+    takeEvery(Events.UTILITIES_AVDUMP, SagaFile.runAvdump),
   ]);
 }

src/pages/dashboard/panels/ImportBreakdownTabs/UnrecognizedTab.tsx

@@ -25,7 +25,7 @@ function UnrecognizedTab() {
   const itemsMarked = useSelector((state: RootState) => state.mainpage.unrecognizedMark);
 
   const runAvdump = (fileId: number) => dispatch(
-    { type: Events.MAINPAGE_FILE_AVDUMP, payload: fileId },
+    { type: Events.UTILITIES_AVDUMP, payload: fileId },
   );
 
   const markFile = (id: string) => {

src/pages/utilities/UnrecognizedUtility.tsx

@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { Icon } from '@mdi/react';
+import {
+  mdiChevronRight,
+} from '@mdi/js';
+import cx from 'classnames';
+
+import type { RootState } from '../../core/store';
+
+import UnrecognizedTab from './UnrecognizedUtilityTabs/UnrecognizedTab';
+
+function UnrecognizedUtility() {
+  const files = useSelector((state: RootState) => state.mainpage.unrecognizedFiles);
+
+  const [activeTab, setActiveTab] = useState('unrecognized');
+
+  const renderTabContent = () => {
+    switch (activeTab) {
+      case 'unrecognized':
+        return (<UnrecognizedTab files={files} />);
+      case 'avdump':
+        return (<UnrecognizedTab files={files} />);
+      case 'manuallyLinked':
+        return (<UnrecognizedTab files={files} />);
+      case 'ignoredFiles':
+        return (<UnrecognizedTab files={files} />);
+      default:
+        return (<UnrecognizedTab files={files} />);
+    }
+  };
+
+  const renderTabButton = (key: string, name: string) => (
+    <div onClick={() => setActiveTab(key)} className={cx(['mx-2 cursor-pointer', activeTab === key && 'text-primary'])}>{name}</div>
+  );
+
+  return (
+    <React.Fragment>
+
+      <div className="flex items-center font-semibold">
+        Unrecognized Files
+        <Icon path={mdiChevronRight} size={1} className="ml-2" />
+        {renderTabButton('unrecognized', 'Unrecognized')}
+        <div>|</div>
+        {renderTabButton('avdump', 'AVDump')}
+        <div>|</div>
+        {renderTabButton('manuallyLinked', 'Manually Linked')}
+        <div>|</div>
+        {renderTabButton('ignoredFiles', 'Ignored Files')}
+        <div className="ml-auto">
+          <span className="text-highlight-2">{files.length}</span> Files
+        </div>
+      </div>
+
+      <div className="bg-background-border my-4 h-0.5 flex-shrink-0" />
+
+      {renderTabContent()}
+
+    </React.Fragment>
+  );
+}
+
+export default UnrecognizedUtility;