first commit

common/resources/client/users/follow-button.tsx

@@ -0,0 +1,60 @@
+import {Button, ButtonProps} from '@common/ui/buttons/button';
+import {useAuth} from '@common/auth/use-auth';
+import {User} from '@common/auth/user';
+import {useIsUserFollowing} from '@common/users/queries/use-followed-users';
+import {useFollowUser} from '@common/users/queries/use-follow-user';
+import {useUnfollowUser} from '@common/users/queries/use-unfollow-user';
+import {Trans} from '@common/i18n/trans';
+import clsx from 'clsx';
+
+interface Props extends Omit<ButtonProps, 'onClick' | 'disabled'> {
+  user: User;
+  minWidth?: string | null;
+}
+export function FollowButton({
+  user,
+  className,
+  minWidth = 'min-w-82',
+  ...buttonProps
+}: Props) {
+  const {user: currentUser} = useAuth();
+  const {isFollowing, isLoading} = useIsUserFollowing(user);
+  const followUser = useFollowUser();
+  const unfollowUser = useUnfollowUser();
+
+  const mergedClassName = clsx(className, minWidth);
+
+  if (isFollowing) {
+    return (
+      <Button
+        {...buttonProps}
+        className={mergedClassName}
+        onClick={() => unfollowUser.mutate({user})}
+        disabled={
+          !currentUser ||
+          currentUser?.id === user.id ||
+          unfollowUser.isPending ||
+          isLoading
+        }
+      >
+        <Trans message="Unfollow" />
+      </Button>
+    );
+  }
+
+  return (
+    <Button
+      {...buttonProps}
+      className={mergedClassName}
+      onClick={() => followUser.mutate({user})}
+      disabled={
+        !currentUser ||
+        currentUser?.id === user.id ||
+        followUser.isPending ||
+        isLoading
+      }
+    >
+      <Trans message="Follow" />
+    </Button>
+  );
+}