fix: update the filter removing existing users from Jellyfin import modal (#924)

Currently import button sometimes shows already imported users and this would break it if an admin
tries to import an already imported user.
This commit is contained in:
Gauthier
2024-08-11 19:25:17 +02:00
committed by GitHub
parent 9aee8887d3
commit 61dcd8e487

View File

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