fix: update the filter removing existing users from Jellyfin import m…

…odal (#924)

Currently import button sometimes shows already imported users and this would break it if an admin
tries to import an already imported user.

src/components/UserList/JellyfinImportModal.tsx

@@ -56,14 +56,6 @@ const JellyfinImportModal: React.FC<JellyfinImportProps> = ({
     `/api/v1/user?take=${children}`
   );
 
-  data?.forEach((user, pos) => {
-    if (
-      existingUsers?.results.some((data) => data.jellyfinUserId === user.id)
-    ) {
-      data?.splice(pos, 1);
-    }
-  });
-
   const importUsers = async () => {
     setImporting(true);
 
@@ -209,64 +201,71 @@ const JellyfinImportModal: React.FC<JellyfinImportProps> = ({
                       </tr>
                     </thead>
                     <tbody className="divide-y divide-gray-700 bg-gray-600">
-                      {data?.map((user) => (
-                        <tr key={`user-${user.id}`}>
-                          <td className="whitespace-nowrap px-4 py-4 text-sm font-medium leading-5 text-gray-100">
-                            <span
-                              role="checkbox"
-                              tabIndex={0}
-                              aria-checked={isSelectedUser(user.id)}
-                              onClick={() => toggleUser(user.id)}
-                              onKeyDown={(e) => {
-                                if (e.key === 'Enter' || e.key === 'Space') {
-                                  toggleUser(user.id);
-                                }
-                              }}
-                              className="relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center pt-2 focus:outline-none"
-                            >
+                      {data
+                        ?.filter(
+                          (user) =>
+                            !existingUsers?.results.some(
+                              (u) => u.jellyfinUserId === user.id
+                            )
+                        )
+                        .map((user) => (
+                          <tr key={`user-${user.id}`}>
+                            <td className="whitespace-nowrap px-4 py-4 text-sm font-medium leading-5 text-gray-100">
                               <span
-                                aria-hidden="true"
-                                className={`${
-                                  isSelectedUser(user.id)
-                                    ? 'bg-indigo-500'
-                                    : 'bg-gray-800'
-                                } absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out`}
-                              ></span>
-                              <span
-                                aria-hidden="true"
-                                className={`${
-                                  isSelectedUser(user.id)
-                                    ? 'translate-x-5'
-                                    : 'translate-x-0'
-                                } absolute left-0 inline-block h-5 w-5 transform rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
-                              ></span>
-                            </span>
-                          </td>
-                          <td className="whitespace-nowrap px-1 py-4 text-sm font-medium leading-5 text-gray-100 md:px-6">
-                            <div className="flex items-center">
-                              <Image
-                                className="h-10 w-10 flex-shrink-0 rounded-full"
-                                src={user.thumb}
-                                alt=""
-                                width={40}
-                                height={40}
-                              />
-                              <div className="ml-4">
-                                <div className="text-base font-bold leading-5">
-                                  {user.username}
-                                </div>
-                                {/* {user.username &&
+                                role="checkbox"
+                                tabIndex={0}
+                                aria-checked={isSelectedUser(user.id)}
+                                onClick={() => toggleUser(user.id)}
+                                onKeyDown={(e) => {
+                                  if (e.key === 'Enter' || e.key === 'Space') {
+                                    toggleUser(user.id);
+                                  }
+                                }}
+                                className="relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center pt-2 focus:outline-none"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  className={`${
+                                    isSelectedUser(user.id)
+                                      ? 'bg-indigo-500'
+                                      : 'bg-gray-800'
+                                  } absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out`}
+                                ></span>
+                                <span
+                                  aria-hidden="true"
+                                  className={`${
+                                    isSelectedUser(user.id)
+                                      ? 'translate-x-5'
+                                      : 'translate-x-0'
+                                  } absolute left-0 inline-block h-5 w-5 transform rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
+                                ></span>
+                              </span>
+                            </td>
+                            <td className="whitespace-nowrap px-1 py-4 text-sm font-medium leading-5 text-gray-100 md:px-6">
+                              <div className="flex items-center">
+                                <Image
+                                  className="h-10 w-10 flex-shrink-0 rounded-full"
+                                  src={user.thumb}
+                                  alt=""
+                                  width={40}
+                                  height={40}
+                                />
+                                <div className="ml-4">
+                                  <div className="text-base font-bold leading-5">
+                                    {user.username}
+                                  </div>
+                                  {/* {user.username &&
                                   user.username.toLowerCase() !==
                                   user.email && (
                                     <div className="text-sm leading-5 text-gray-300">
                                       {user.email}
                                     </div>
                                   )} */}
+                                </div>
                               </div>
-                            </div>
-                          </td>
-                        </tr>
-                      ))}
+                            </td>
+                          </tr>
+                        ))}
                     </tbody>
                   </table>
                 </div>