Add hide feature to profile page

web/components/profile-grid.tsx

@@ -13,10 +13,7 @@ import {useUser} from "web/hooks/use-user";
 import {useT} from "web/lib/locale";
 import {useAllChoices} from "web/hooks/use-choices";
 import {getSeekingGenderText} from "web/lib/profile/seeking";
-import {Tooltip} from 'web/components/widgets/tooltip'
-import {EyeOffIcon} from '@heroicons/react/outline'
-import {useState} from 'react'
-import {api} from 'web/lib/api'
+import HideProfileButton from 'web/components/widgets/hide-profile-button'
 
 export const ProfileGrid = (props: {
   profiles: Profile[]
@@ -95,7 +92,6 @@ function ProfilePreview(props: {
   const choicesIdsToLabels = useAllChoices()
   const t = useT()
   // const currentUser = useUser()
-  const [hiding, setHiding] = useState(false)
 
   const bio = profile.bio as JSONContent;
 
@@ -170,26 +166,13 @@ function ProfilePreview(props: {
           )}
           {/* Hide profile button */}
           {onHide && (
-            <Tooltip text={t('profile_grid.hide_profile', "Don't show again")} noTap>
-              <button
-                className="ml-2 rounded-full p-1 hover:bg-canvas-300 shadow focus:outline-none"
-                onClick={async (e) => {
-                  e.preventDefault()
-                  e.stopPropagation()
-                  if (hiding) return
-                  setHiding(true)
-                  try {
-                    await api('hide-profile', {hiddenUserId: profile.user_id})
-                    onHide(profile.user_id)
-                  } finally {
-                    setHiding(false)
-                  }
-                }}
-                aria-label={t('profile_grid.hide_profile', 'Hide this profile')}
-              >
-                <EyeOffIcon className="h-5 w-5 guidance"/>
-              </button>
-            </Tooltip>
+            <HideProfileButton
+              hiddenUserId={profile.user_id}
+              onHidden={onHide}
+              className="ml-2"
+              stopPropagation
+              suppressToast
+            />
           )}
         </Row>
 

web/components/profile/profile-header.tsx

@@ -23,6 +23,7 @@ import {StarButton} from "web/components/widgets/star-button";
 import {disableProfile} from "web/lib/util/disable";
 import {useT} from 'web/lib/locale'
 import {Tooltip} from "web/components/widgets/tooltip";
+import HideProfileButton from 'web/components/widgets/hide-profile-button'
 
 export default function ProfileHeader(props: {
   user: User
@@ -153,8 +154,9 @@ export default function ProfileHeader(props: {
           </Row>
         ) : (
           <Row className="items-center gap-1 sm:gap-2">
-            {/*TODO: Add score to profile page once we can efficiently compute it (i.e., not recomputing it for every profile)*/}
-            {/*<CompatibleBadge compatibility={compatibilityScore}/>*/}
+            {currentUser && !isCurrentUser && (
+              <HideProfileButton hiddenUserId={user.id}/>
+            )}
             <ShareProfileButton
               className="sm:flex"
               username={user.username}

web/components/widgets/hide-profile-button.tsx

@@ -0,0 +1,71 @@
+import clsx from 'clsx'
+import {useState} from 'react'
+import {EyeOffIcon} from '@heroicons/react/outline'
+import {Tooltip} from 'web/components/widgets/tooltip'
+import {api} from 'web/lib/api'
+import toast from 'react-hot-toast'
+import {useT} from 'web/lib/locale'
+
+export type HideProfileButtonProps = {
+  hiddenUserId: string
+  onHidden?: (userId: string) => void
+  className?: string
+  iconClassName?: string
+  tooltip?: string
+  ariaLabel?: string
+  stopPropagation?: boolean
+  suppressToast?: boolean
+}
+
+export function HideProfileButton(props: HideProfileButtonProps) {
+  const {
+    hiddenUserId,
+    onHidden,
+    className,
+    iconClassName,
+    tooltip,
+    ariaLabel,
+    stopPropagation,
+    suppressToast,
+  } = props
+
+  const t = useT()
+  const [submitting, setSubmitting] = useState(false)
+
+  const onClick = async (e: React.MouseEvent) => {
+    e.preventDefault()
+    if (stopPropagation) e.stopPropagation()
+    if (submitting) return
+    setSubmitting(true)
+    try {
+      await api('hide-profile', {hiddenUserId})
+      onHidden?.(hiddenUserId)
+      if (!suppressToast)
+        toast.success(
+          t(
+            'profiles.hidden_success',
+            'Profile hidden. You will no longer see this person in search results.'
+          )
+        )
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <Tooltip text={tooltip ?? t('profile_grid.hide_profile', "Don't show again in search results")} noTap>
+      <button
+        className={clsx(
+          'rounded-full p-1 hover:bg-canvas-300 shadow focus:outline-none',
+          className
+        )}
+        onClick={onClick}
+        aria-label={ariaLabel ?? t('profile_grid.hide_profile', 'Hide this profile')}
+      >
+        <EyeOffIcon className={clsx('h-5 w-5 guidance', iconClassName)}/>
+      </button>
+    </Tooltip>
+  )
+}
+
+export default HideProfileButton