first commit

resources/client/user-lists/watchlist-button.tsx

@@ -0,0 +1,51 @@
+import {Button, ButtonProps} from '@common/ui/buttons/button';
+import {AddIcon} from '@common/icons/material/Add';
+import {Trans} from '@common/i18n/trans';
+import {Title} from '@app/titles/models/title';
+import {CheckIcon} from '@common/icons/material/Check';
+import {useAddToWatchlist} from '@app/user-lists/requests/use-add-to-watchlist';
+import {useRemoveFromWatchlist} from '@app/user-lists/requests/use-remove-from-watchlist';
+import {useIsItemWatchlisted} from '@app/user-lists/requests/use-current-user-watchlist';
+import {useAuthClickCapture} from '@app/use-auth-click-capture';
+
+interface Props {
+  variant?: ButtonProps['variant'];
+  color?: ButtonProps['color'];
+  item: Title;
+}
+export function WatchlistButton({
+  item,
+  variant = 'flat',
+  color = 'primary',
+}: Props) {
+  const {isLoading, isWatchlisted} = useIsItemWatchlisted(item);
+  const addToWatchlist = useAddToWatchlist();
+  const removeFromWatchlist = useRemoveFromWatchlist();
+  const authHandler = useAuthClickCapture();
+
+  return (
+    <Button
+      variant={variant}
+      color={color}
+      startIcon={isWatchlisted ? <CheckIcon /> : <AddIcon />}
+      className="mt-14 min-h-40 w-full"
+      disabled={
+        addToWatchlist.isPending || removeFromWatchlist.isPending || isLoading
+      }
+      onClickCapture={authHandler}
+      onClick={() => {
+        if (isWatchlisted) {
+          removeFromWatchlist.mutate(item);
+        } else {
+          addToWatchlist.mutate(item);
+        }
+      }}
+    >
+      {isWatchlisted ? (
+        <Trans message="In watchlist" />
+      ) : (
+        <Trans message="Add to watchlist" />
+      )}
+    </Button>
+  );
+}