[WIP] Accomodate server side changes

package.json

@@ -57,6 +57,7 @@
     "@stylistic/stylelint-plugin": "^3.1.1",
     "@tanstack/eslint-plugin-query": "^5.62.1",
     "@types/format-thousands": "^2.0.3",
+    "@types/json-schema": "^7.0.15",
     "@types/lodash": "^4.17.13",
     "@types/node": "^22.10.2",
     "@types/react": "^19.0.1",

src/components/Collection/Episode/EpisodeFiles.tsx

@@ -9,7 +9,7 @@ import {
   mdiTrashCanOutline,
 } from '@mdi/js';
 import { Icon } from '@mdi/react';
-import { get, map } from 'lodash';
+import { map } from 'lodash';
 
 import DeleteFilesModal from '@/components/Dialogs/DeleteFilesModal';
 import FileInfo from '@/components/FileInfo';
@@ -92,8 +92,7 @@ const EpisodeFiles = ({ anidbSeriesId, episodeFiles, episodeId, seriesId }: Prop
   return (
     <div className="flex flex-col gap-y-6 p-6 pt-4">
       {map(episodeFiles, (file) => {
-        const ReleaseGroupID = get(file, 'AniDB.ReleaseGroup.ID', 0);
-        const ReleaseGroupName = get(file, 'AniDB.ReleaseGroup.Name', null);
+        const releaseGroup = file.ReleaseInfo?.Group;
 
         return (
           <div className="flex flex-col gap-y-6" key={file.ID}>
@@ -141,24 +140,24 @@ const EpisodeFiles = ({ anidbSeriesId, episodeFiles, episodeId, seriesId }: Prop
                   />
                   Copy ShokoID
                 </div>
-                {file.AniDB && (
-                  <a href={`https://anidb.net/file/${file.AniDB.ID}`} target="_blank" rel="noopener noreferrer">
+                {file.ReleaseInfo?.ReleaseURI?.startsWith('https://anidb.net/file/') && (
+                  <a href={file.ReleaseInfo.ReleaseURI} target="_blank" rel="noopener noreferrer">
                     <div className="flex items-center gap-x-2 font-semibold text-panel-text-primary">
                       <div className="metadata-link-icon AniDB" />
                       AniDB
                       <Icon className="text-panel-icon-action" path={mdiOpenInNew} size={1} />
                     </div>
                   </a>
                 )}
-                {ReleaseGroupID > 0 && (
+                {releaseGroup && releaseGroup.Source === 'AniDB' && (
                   <a
-                    href={`https://anidb.net/group/${ReleaseGroupID}/anime/${anidbSeriesId}`}
+                    href={`https://anidb.net/group/${releaseGroup.ID}/anime/${anidbSeriesId}`}
                     target="_blank"
                     rel="noopener noreferrer"
                   >
                     <div className="flex items-center gap-x-2 font-semibold text-panel-text-primary">
                       <div className="metadata-link-icon AniDB" />
-                      {ReleaseGroupName ?? 'Unknown'}
+                      {releaseGroup.Name}
                       &nbsp;(AniDB)
                       <Icon className="text-panel-icon-action" path={mdiOpenInNew} size={1} />
                     </div>

src/components/Collection/TimelineSidebar.tsx

@@ -11,9 +11,9 @@ import type { SeriesType } from '@/core/types/api/series';
 
 const TimelineItem = ({ series }: { series: SeriesType }) => {
   const mainPoster = useMainPoster(series);
-  const seriesType = series.AniDB?.Type === SeriesTypeEnum.TVSpecial
-    ? 'TV Special'
-    : series.AniDB?.Type;
+  let seriesType = series.AniDB?.Type as string | undefined;
+  if (seriesType === SeriesTypeEnum.TVSpecial) seriesType = 'TV Special';
+  else if (seriesType === SeriesTypeEnum.MusicVideo) seriesType = 'Music Video';
 
   return (
     <div className="flex gap-x-3" key={series.IDs.ID}>

src/components/Dashboard/DashboardSettingsModal.tsx

@@ -57,7 +57,7 @@ const DashboardSettingsModal = ({ onClose, show }: Props) => {
     combineContinueWatching,
     hideCollectionStats,
     hideContinueWatching,
-    hideImportFolders,
+    hideManagedFolders,
     hideMediaType,
     hideNextUp,
     hideQueueProcessor,
@@ -175,9 +175,9 @@ const DashboardSettingsModal = ({ onClose, show }: Props) => {
                 />
                 <Checkbox
                   justify
-                  label="Hide Import Folders"
-                  id="hideImportFolders"
-                  isChecked={hideImportFolders}
+                  label="Hide Managed Folders"
+                  id="hideManagedFolders"
+                  isChecked={hideManagedFolders}
                   onChange={handleUpdate}
                 />
                 <Checkbox

src/components/Dialogs/BrowseFolderModal.tsx

@@ -33,7 +33,7 @@ function BrowseFolderModal(props: Props) {
     <ModalPanel
       show={status}
       onRequestClose={() => handleClose()}
-      header="Select Import Folder"
+      header="Select Managed Folder"
       size="sm"
       overlayClassName="!z-[90]"
     >

src/components/Dialogs/ImportFolderModal.tsx → src/components/Dialogs/ManagedFolderModal.tsx

@@ -9,55 +9,55 @@ import Select from '@/components/Input/Select';
 import ModalPanel from '@/components/Panels/ModalPanel';
 import toast from '@/components/Toast';
 import {
-  useCreateImportFolderMutation,
-  useDeleteImportFolderMutation,
-  useUpdateImportFolderMutation,
-} from '@/core/react-query/import-folder/mutations';
-import { useImportFoldersQuery } from '@/core/react-query/import-folder/queries';
+  useCreateManagedFolderMutation,
+  useDeleteManagedFolderMutation,
+  useUpdateManagedFolderMutation,
+} from '@/core/react-query/managed-folder/mutations';
+import { useManagedFoldersQuery } from '@/core/react-query/managed-folder/queries';
 import { setStatus as setBrowseStatus } from '@/core/slices/modals/browseFolder';
-import { setStatus } from '@/core/slices/modals/importFolder';
+import { setStatus } from '@/core/slices/modals/managedFolder';
 import useEventCallback from '@/hooks/useEventCallback';
 
 import BrowseFolderModal from './BrowseFolderModal';
 
 import type { RootState } from '@/core/store';
-import type { ImportFolderType } from '@/core/types/api/import-folder';
+import type { ManagedFolderType } from '@/core/types/api/managed-folder';
 
-const defaultImportFolder = {
+const defaultManagedFolder = {
   WatchForNewFiles: false,
   DropFolderType: 'None',
   Path: '',
   Name: '',
   ID: 0,
-} as ImportFolderType;
+} as ManagedFolderType;
 
-function ImportFolderModal() {
+function ManagedFolderModal() {
   const dispatch = useDispatch();
 
-  const { ID, edit, status } = useSelector((state: RootState) => state.modals.importFolder);
+  const { ID, edit, status } = useSelector((state: RootState) => state.modals.managedFolder);
 
-  const importFolderQuery = useImportFoldersQuery();
-  const importFolders = importFolderQuery?.data ?? [] as ImportFolderType[];
+  const managedFolderQuery = useManagedFoldersQuery();
+  const managedFolders = managedFolderQuery?.data ?? [] as ManagedFolderType[];
 
-  const { isPending: isCreatePending, mutate: createFolder } = useCreateImportFolderMutation();
-  const { isPending: isDeletePending, mutate: deleteFolder } = useDeleteImportFolderMutation();
-  const { isPending: isUpdatePending, mutate: updateFolder } = useUpdateImportFolderMutation();
+  const { isPending: isCreatePending, mutate: createFolder } = useCreateManagedFolderMutation();
+  const { isPending: isDeletePending, mutate: deleteFolder } = useDeleteManagedFolderMutation();
+  const { isPending: isUpdatePending, mutate: updateFolder } = useUpdateManagedFolderMutation();
 
-  const [importFolder, setImportFolder] = useState(defaultImportFolder);
+  const [managedFolder, setManagedFolder] = useState(defaultManagedFolder);
 
   const getFolderDetails = () => {
-    setImportFolder(defaultImportFolder);
+    setManagedFolder(defaultManagedFolder);
 
     if (edit) {
-      const folderDetails = find(importFolders, { ID }) ?? {};
-      setImportFolder({ ...importFolder, ...folderDetails });
+      const folderDetails = find(managedFolders, { ID }) ?? {};
+      setManagedFolder({ ...managedFolder, ...folderDetails });
     }
   };
 
   const handleInputChange = (event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
     const name = event.target.id;
     const value = name === 'WatchForNewFiles' ? event.target.value === '1' : event.target.value;
-    setImportFolder({ ...importFolder, [name]: value });
+    setManagedFolder({ ...managedFolder, [name]: value });
   };
 
   const handleBrowse = () => dispatch(setBrowseStatus(true));
@@ -66,31 +66,31 @@ function ImportFolderModal() {
   const handleDelete = useEventCallback(() => {
     deleteFolder({ folderId: ID }, {
       onSuccess: () => {
-        toast.success('Import folder deleted!');
+        toast.success('Managed folder deleted!');
         dispatch(setStatus(false));
       },
     });
   });
 
   const handleSave = useEventCallback(() => {
     if (edit) {
-      updateFolder(importFolder, {
+      updateFolder(managedFolder, {
         onSuccess: () => {
-          toast.success('Import folder edited!');
+          toast.success('Managed folder edited!');
           dispatch(setStatus(false));
         },
       });
     } else {
-      createFolder(importFolder, {
+      createFolder(managedFolder, {
         onSuccess: () => {
-          toast.success('Import folder added!');
+          toast.success('Managed folder added!');
           dispatch(setStatus(false));
         },
       });
     }
   });
 
-  const onFolderSelect = (Path: string) => setImportFolder({ ...importFolder, Path });
+  const onFolderSelect = (Path: string) => setManagedFolder({ ...managedFolder, Path });
   const isLoading = isCreatePending || isDeletePending || isUpdatePending;
 
   return (
@@ -99,15 +99,15 @@ function ImportFolderModal() {
         show={status}
         onRequestClose={handleClose}
         onAfterOpen={() => getFolderDetails()}
-        header={edit ? 'Edit Import Folder' : 'Add New Import Folder'}
+        header={edit ? 'Edit Managed Folder' : 'Add New Managed Folder'}
         size="sm"
         noPadding
       >
         <div>
           <div className="flex flex-col gap-y-6 p-6">
             <Input
               id="Name"
-              value={importFolder.Name}
+              value={managedFolder.Name}
               label="Name"
               type="text"
               placeholder="Folder name"
@@ -116,7 +116,7 @@ function ImportFolderModal() {
             />
             <Input
               id="Path"
-              value={importFolder.Path}
+              value={managedFolder.Path}
               label="Location"
               type="text"
               placeholder="Location"
@@ -127,7 +127,7 @@ function ImportFolderModal() {
             <Select
               label="Drop Type"
               id="DropFolderType"
-              value={importFolder.DropFolderType ?? 'None'}
+              value={managedFolder.DropFolderType ?? 'None'}
               onChange={handleInputChange}
               className="w-full"
             >
@@ -139,7 +139,7 @@ function ImportFolderModal() {
             <Select
               label="Watch For New Files"
               id="WatchForNewFiles"
-              value={importFolder.WatchForNewFiles ? 1 : 0}
+              value={managedFolder.WatchForNewFiles ? 1 : 0}
               onChange={handleInputChange}
               className="w-full"
             >
@@ -159,7 +159,7 @@ function ImportFolderModal() {
                 onClick={handleSave}
                 buttonType="primary"
                 buttonSize="normal"
-                disabled={importFolder.Name === '' || importFolder.Path === '' || isLoading}
+                disabled={managedFolder.Name === '' || managedFolder.Path === '' || isLoading}
               >
                 Save
               </Button>
@@ -172,4 +172,4 @@ function ImportFolderModal() {
   );
 }
 
-export default ImportFolderModal;
+export default ManagedFolderModal;

src/components/Utilities/ReleaseManagement/Episode.tsx

@@ -111,17 +111,17 @@ const Episode = ({ episode, setFileOptions, type }: Props) => {
                   <option value="delete">Will be deleted</option>
                 </Select>
 
-                {file.AniDB?.ID && (
+                {file.ReleaseInfo?.ReleaseURI?.startsWith('https://anidb.net/file/') && (
                   <div className="flex gap-x-2">
                     <div className="metadata-link-icon AniDB" />
                     <a
-                      href={`https://anidb.net/file/${file.AniDB.ID}`}
+                      href={file.ReleaseInfo.ReleaseURI}
                       target="_blank"
                       rel="noreferrer noopener"
                       className="flex cursor-pointer gap-x-1 font-semibold text-panel-text-primary"
                       aria-label="Open AniDB file page"
                     >
-                      {file.AniDB.ID}
+                      {file.ReleaseInfo.ReleaseURI.split('/').pop()}
                       <span>(AniDB)</span>
                       <Icon path={mdiOpenInNew} size={1} />
                     </a>
@@ -150,17 +150,17 @@ const Episode = ({ episode, setFileOptions, type }: Props) => {
               <option value="variation">Marked as Variation</option>
             </Select>
 
-            {file.AniDB?.ID && (
+            {file.ReleaseInfo?.ReleaseURI?.startsWith('https://anidb.net/file/') && (
               <div className="flex gap-x-2">
                 <div className="metadata-link-icon AniDB" />
                 <a
-                  href={`https://anidb.net/file/${file.AniDB.ID}`}
+                  href={file.ReleaseInfo.ReleaseURI}
                   target="_blank"
                   rel="noreferrer noopener"
                   className="flex cursor-pointer gap-x-1 font-semibold text-panel-text-primary"
                   aria-label="Open AniDB file page"
                 >
-                  {file.AniDB.ID}
+                  {file.ReleaseInfo.ReleaseURI.split('/').pop()}
                   <span>(AniDB)</span>
                   <Icon path={mdiOpenInNew} size={1} />
                 </a>