fix(frontend): handle currentLibrary possibly being null on first manual sync

src/components/Settings/SettingsPlex.tsx

@@ -48,7 +48,7 @@ interface SyncStatus {
   running: boolean;
   progress: number;
   total: number;
-  currentLibrary: Library;
+  currentLibrary?: Library;
   libraries: Library[];
 }
 
@@ -86,12 +86,17 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
 
   const syncLibraries = async () => {
     setIsSyncing(true);
+
+    const params: { sync: boolean; enable?: string } = {
+      sync: true,
+    };
+
+    if (activeLibraries.length > 0) {
+      params.enable = activeLibraries.join(',');
+    }
+
     await axios.get('/api/v1/settings/plex/library', {
-      params: {
-        sync: true,
-        enable:
-          activeLibraries.length > 0 ? activeLibraries.join(',') : undefined,
-      },
+      params,
     });
     setIsSyncing(false);
     revalidate();
@@ -118,13 +123,16 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
   const toggleLibrary = async (libraryId: string) => {
     setIsSyncing(true);
     if (activeLibraries.includes(libraryId)) {
+      const params: { enable?: string } = {};
+
+      if (activeLibraries.length > 1) {
+        params.enable = activeLibraries
+          .filter((id) => id !== libraryId)
+          .join(',');
+      }
+
       await axios.get('/api/v1/settings/plex/library', {
-        params: {
-          enable:
-            activeLibraries.length > 0
-              ? activeLibraries.filter((id) => id !== libraryId).join(',')
-              : undefined,
-        },
+        params,
       });
     } else {
       await axios.get('/api/v1/settings/plex/library', {
@@ -369,25 +377,29 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
             <div className="flex flex-col w-full sm:flex-row">
               {dataSync?.running && (
                 <>
-                  <div className="flex items-center mb-2 mr-0 sm:mb-0 sm:mr-2">
-                    <Badge>
-                      <FormattedMessage
-                        {...messages.currentlibrary}
-                        values={{ name: dataSync.currentLibrary.name }}
-                      />
-                    </Badge>
-                  </div>
+                  {dataSync.currentLibrary && (
+                    <div className="flex items-center mb-2 mr-0 sm:mb-0 sm:mr-2">
+                      <Badge>
+                        <FormattedMessage
+                          {...messages.currentlibrary}
+                          values={{ name: dataSync.currentLibrary.name }}
+                        />
+                      </Badge>
+                    </div>
+                  )}
                   <div className="flex items-center">
                     <Badge badgeType="warning">
                       <FormattedMessage
                         {...messages.librariesRemaining}
                         values={{
-                          count: dataSync.libraries.slice(
-                            dataSync.libraries.findIndex(
-                              (library) =>
-                                library.id === dataSync.currentLibrary.id
-                            ) + 1
-                          ).length,
+                          count: dataSync.currentLibrary
+                            ? dataSync.libraries.slice(
+                                dataSync.libraries.findIndex(
+                                  (library) =>
+                                    library.id === dataSync.currentLibrary?.id
+                                ) + 1
+                              ).length
+                            : 0,
                         }}
                       />
                     </Badge>