-
Notifications
You must be signed in to change notification settings - Fork 16
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
You can now delete platform entries from the client resolves #101
- Loading branch information
1 parent
4e257e3
commit 3f31a07
Showing
8 changed files
with
287 additions
and
33 deletions.
There are no files selected for viewing
159 changes: 159 additions & 0 deletions
159
packages/client/web/src/components/modals/delete-platform/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,159 @@ | ||
| import { useToast } from "@/components/ui/use-toast"; | ||
| import { cn } from "@/lib/utils"; | ||
| import { useCallback, useState } from "react"; | ||
| import { | ||
| DialogContent, | ||
| DialogHeader, | ||
| Dialog, | ||
| DialogFooter, | ||
| DialogTitle, | ||
| DialogDescription, | ||
| DialogClose, | ||
| } from "@/components/ui/dialog"; | ||
| import { Checkbox } from "@/components/ui/checkbox"; | ||
| import { Button } from "@/components/ui/button"; | ||
| import { LoaderCircleIcon } from "lucide-react"; | ||
| import { useDeletePlatforms } from "@/mutations/useDeletePlatforms"; | ||
| import { Route as RootRoute } from "@/routes/__root"; | ||
|
|
||
| export function DeletePlatformModal() { | ||
| const { toast } = useToast(); | ||
| const [deleteFromDisk, setDeleteFromDisk] = useState(false); | ||
| const [blacklistEntries, setBlacklistEntries] = useState(false); | ||
| const { deletePlatformModal } = RootRoute.useSearch(); | ||
| const platform = deletePlatformModal?.platform; | ||
| const navigate = RootRoute.useNavigate(); | ||
|
|
||
| const { mutateAsync: deletePlatforms, isPending } = useDeletePlatforms(); | ||
|
|
||
| const handleDelete = useCallback(async () => { | ||
| try { | ||
| if (!platform) { | ||
| return; | ||
| } | ||
|
|
||
| const res = await deletePlatforms({ | ||
| ids: [platform.id], | ||
| deleteFromDisk, | ||
| blacklistEntries, | ||
| }); | ||
|
|
||
| if (!res.platformsDeleted.length) { | ||
| throw new Error("Failed to delete platform"); | ||
| } | ||
|
|
||
| toast({ | ||
| title: `Platform deleted: ${platform.name}`, | ||
| }); | ||
|
|
||
| navigate({ | ||
| to: "/home", | ||
| search: (prev) => ({ ...prev, deletePlatformModal: undefined }), | ||
| }).catch(console.error); | ||
| } catch (e) { | ||
| console.error(e); | ||
| toast({ | ||
| title: "Failed to delete platform", | ||
| }); | ||
| } | ||
| }, [ | ||
| deletePlatforms, | ||
| platform, | ||
| deleteFromDisk, | ||
| blacklistEntries, | ||
| toast, | ||
| navigate, | ||
| ]); | ||
|
|
||
| return ( | ||
| <Dialog | ||
| open={deletePlatformModal?.open} | ||
| onOpenChange={(open) => { | ||
| if (!open) { | ||
| navigate({ | ||
| search: (prev) => ({ ...prev, deletePlatformModal: undefined }), | ||
| }).catch(console.error); | ||
| } | ||
| }} | ||
| > | ||
| <DialogContent className="max-w-[60ch]"> | ||
| <DialogHeader> | ||
| <DialogTitle>Delete Platform</DialogTitle> | ||
| <DialogDescription> | ||
| Are you sure you want to delete {platform?.name ?? "this platform"}? | ||
| </DialogDescription> | ||
| </DialogHeader> | ||
|
|
||
| <p className="pb-2"> | ||
| You can either delete the entry from the database or delete the | ||
| platform from the disk. Deleting only the entry will leave your file | ||
| system as is, but Retrom will ignore the platform's directory | ||
| moving forward. | ||
| </p> | ||
|
|
||
| <div className="flex flex-col gap-4"> | ||
| <div className="flex items-top gap-2"> | ||
| <Checkbox | ||
| id="delete-from-disk" | ||
| checked={deleteFromDisk} | ||
| disabled={platform?.thirdParty} | ||
| onCheckedChange={(event) => setDeleteFromDisk(!!event)} | ||
| /> | ||
|
|
||
| <div | ||
| className={cn( | ||
| "grid gap-1 5 leading-none", | ||
| platform?.thirdParty && "opacity-50", | ||
| )} | ||
| > | ||
| <label htmlFor="delete-from-disk">Delete from disk</label> | ||
|
|
||
| <p className="text-sm text-muted-foreground"> | ||
| This will alter the the file system | ||
| </p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="flex items-top gap-2"> | ||
| <Checkbox | ||
| id="blacklist-entries" | ||
| checked={blacklistEntries} | ||
| onCheckedChange={(event) => setBlacklistEntries(!!event)} | ||
| /> | ||
|
|
||
| <div className="grid gap-1 5 leading-none"> | ||
| <label htmlFor="blacklist-entries">Blacklist entries</label> | ||
|
|
||
| <p className="text-sm text-muted-foreground max-w-[45ch]"> | ||
| Enabling this will prevent the platform and its files from being | ||
| re-imported in any future library scans | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <DialogFooter> | ||
| <div className="flex gap-2"> | ||
| <DialogClose asChild> | ||
| <Button>Cancel</Button> | ||
| </DialogClose> | ||
|
|
||
| <Button | ||
| className="relative" | ||
| variant="destructive" | ||
| onClick={handleDelete} | ||
| > | ||
| <LoaderCircleIcon | ||
| className={cn( | ||
| "animate-spin absolute", | ||
| !isPending && "opacity-0", | ||
| )} | ||
| /> | ||
| <p className={cn(isPending && "opacity-0")}>Delete</p> | ||
| </Button> | ||
| </div> | ||
| </DialogFooter> | ||
| </DialogContent> | ||
| </Dialog> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,26 +1,24 @@ | ||
| import { Platform } from "@/generated/retrom/models/platforms"; | ||
| import { DeletePlatformsRequest } from "@/generated/retrom/services"; | ||
| import { useRetromClient } from "@/providers/retrom-client"; | ||
| import { useMutation, useQueryClient } from "@tanstack/react-query"; | ||
|
|
||
| export function useDeletePlatforms(platforms: Platform[]) { | ||
| export function useDeletePlatforms() { | ||
| const retromClient = useRetromClient(); | ||
| const queryClient = useQueryClient(); | ||
|
|
||
| return useMutation({ | ||
| mutationKey: ["deletePlatforms", platforms], | ||
| mutationFn: async () => | ||
| retromClient.platformClient.deletePlatforms({ | ||
| ids: platforms.map((platform) => platform.id), | ||
| }), | ||
| mutationKey: ["deletePlatforms"], | ||
| mutationFn: async (req: DeletePlatformsRequest) => | ||
| retromClient.platformClient.deletePlatforms(req), | ||
| onSuccess: () => { | ||
| return queryClient.invalidateQueries({ | ||
| queryKey: [ | ||
| "platforms", | ||
| "platform-metadata", | ||
| "library", | ||
| ...platforms.map((g) => g.id), | ||
| ], | ||
| }); | ||
| queryClient | ||
| .invalidateQueries({ | ||
| predicate: ({ queryKey }) => | ||
| ["platforms", "platform-metadata", "games", "game-metadata"].some( | ||
| (key) => queryKey.includes(key), | ||
| ), | ||
| }) | ||
| .catch(console.error); | ||
| }, | ||
| }); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.