Merge pull request #481 from thematters/feature/block-user

 Block User

src/common/enums/analytics.ts

@@ -63,6 +63,7 @@ export const FEED_TYPE = {
   FOLLOWER: 'follower',
   APPRECIATOR: 'appreciator',
   SEARCH_USER: 'search-user',
+  BLOCK_LIST: 'block-list',
   // tags
   TAGS: 'tags',
   ALL_TAGS: 'all-tags',

src/common/enums/route.ts

@@ -32,6 +32,7 @@ type ROUTE_KEY =
   | 'ME_NOTIFICATIONS'
   | 'ME_SETTINGS_ACCOUNT'
   | 'ME_SETTINGS_NOTIFICATION'
+  | 'ME_SETTINGS_BLOCKED'
   | 'ME_DRAFT_DETAIL'
   // | 'EDITOR'
   | 'AUTH_LOGIN'
@@ -210,6 +211,11 @@ export const ROUTES: Array<{
     href: '/MeSettingsNotification',
     as: '/me/settings/notification'
   },
+  {
+    key: 'ME_SETTINGS_BLOCKED',
+    href: '/MeSettingsBlocked',
+    as: '/me/settings/blocked'
+  },
 
   // Draft
   {

src/common/enums/text.ts

@@ -121,6 +121,7 @@ export const TEXT = {
     setting: '設定',
     accountSetting: '帳戶設定',
     notificationSetting: '通知設定',
+    blockedSetting: '屏蔽用戶',
     walletSetting: '錢包設定',
     uiSetting: '介面設定',
     userProfile: '個人簡介',
@@ -130,6 +131,10 @@ export const TEXT = {
     articleFingerprint: '作品指紋',
     copySuccess: '複製成功',
     copy: '複製',
+    block: '屏蔽',
+    blockUser: '屏蔽用戶',
+    unblockUser: '取消屏蔽',
+    blockSuccess: '屏蔽成功',
     pin: '喜歡回應',
     unpin: '取消精選',
     emptySearchResults: '沒有找到你搜索的內容',
@@ -289,6 +294,7 @@ export const TEXT = {
     setting: '设定',
     accountSetting: '账户设定',
     notificationSetting: '通知设定',
+    blockedSetting: '屏蔽用户',
     walletSetting: '钱包设定',
     uiSetting: '界面设定',
     userProfile: '个人简介',
@@ -298,6 +304,10 @@ export const TEXT = {
     articleFingerprint: '作品指纹',
     copySuccess: '复制成功',
     copy: '复制',
+    block: '屏蔽',
+    blockUser: '屏蔽用户',
+    unblockUser: '取消屏蔽',
+    blockSuccess: '屏蔽成功',
     pin: '喜欢回应',
     unpin: '取消精选',
     emptySearchResults: '没有找到你搜寻的内容',

src/components/Button/BlockUser/Dropdown/index.tsx

@@ -0,0 +1,110 @@
+import { Icon, TextIcon, Translate } from '~/components'
+import { useMutation } from '~/components/GQL'
+import { BlockUser } from '~/components/GQL/fragments/__generated__/BlockUser'
+import userFragments from '~/components/GQL/fragments/user'
+import { UnblockUser } from '~/components/GQL/mutations/__generated__/UnblockUser'
+import UNBLOCK_USER from '~/components/GQL/mutations/unblockUser'
+import BlocKUserModal from '~/components/Modal/BlockUserModal'
+import { ModalInstance, ModalSwitch } from '~/components/ModalManager'
+
+import { TEXT } from '~/common/enums'
+import ICON_BLOCK from '~/static/icons/block.svg?sprite'
+import ICON_UNBLOCK from '~/static/icons/unblock.svg?sprite'
+
+import styles from './styles.css'
+
+const fragments = {
+  user: userFragments.block
+}
+
+const TextIconBlock = () => (
+  <TextIcon
+    icon={<Icon id={ICON_BLOCK.id} viewBox={ICON_BLOCK.viewBox} size="small" />}
+    spacing="tight"
+  >
+    <Translate zh_hant={TEXT.zh_hant.blockUser} zh_hans={TEXT.zh_hans.block} />
+  </TextIcon>
+)
+
+const TextIconUnblock = () => (
+  <TextIcon
+    icon={
+      <Icon id={ICON_UNBLOCK.id} viewBox={ICON_UNBLOCK.viewBox} size="small" />
+    }
+    spacing="tight"
+  >
+    <Translate
+      zh_hant={TEXT.zh_hant.unblockUser}
+      zh_hans={TEXT.zh_hans.unblockUser}
+    />
+  </TextIcon>
+)
+
+const BlockUserButton = ({
+  user,
+  isShown,
+  hideDropdown
+}: {
+  user: BlockUser
+  isShown: boolean
+  hideDropdown: () => void
+}) => {
+  const [unblockUser] = useMutation<UnblockUser>(UNBLOCK_USER, {
+    variables: { id: user.id },
+    optimisticResponse: {
+      unblockUser: {
+        id: user.id,
+        isBlocked: false,
+        __typename: 'User'
+      }
+    }
+  })
+
+  return (
+    <>
+      {user.isBlocked && (
+        <button
+          type="button"
+          onClick={() => {
+            unblockUser()
+            hideDropdown()
+          }}
+        >
+          <TextIconUnblock />
+
+          <style jsx>{styles}</style>
+        </button>
+      )}
+
+      {!user.isBlocked && (
+        <ModalSwitch modalId="blockUserModal">
+          {(open: any) => (
+            <button
+              type="button"
+              onClick={() => {
+                open()
+                hideDropdown()
+              }}
+            >
+              <TextIconBlock />
+
+              <style jsx>{styles}</style>
+            </button>
+          )}
+        </ModalSwitch>
+      )}
+
+      {isShown && (
+        <ModalInstance modalId="blockUserModal" title="blockUser">
+          {(props: ModalInstanceProps) => (
+            <BlocKUserModal {...props} user={user} />
+          )}
+        </ModalInstance>
+      )}
+    </>
+  )
+}
+
+BlockUserButton.fragments = fragments
+
+export default BlockUserButton

src/components/Button/BlockUser/Dropdown/styles.css

@@ -0,0 +1,3 @@
+button {
+  font-size: var(--font-size-sm);
+}

src/components/Button/BlockUser/Unblock/index.tsx

@@ -0,0 +1,62 @@
+import gql from 'graphql-tag'
+
+import { Button, Translate } from '~/components'
+import { useMutation } from '~/components/GQL'
+import { UnblockUser } from '~/components/GQL/mutations/__generated__/UnblockUser'
+import UNBLOCK_USER from '~/components/GQL/mutations/unblockUser'
+
+import { ANALYTICS_EVENTS, TEXT } from '~/common/enums'
+import { analytics } from '~/common/utils'
+
+import { UnblockButtonUser } from './__generated__/UnblockButtonUser'
+
+const fragments = {
+  user: gql`
+    fragment UnblockButtonUser on User {
+      id
+      isBlocked
+    }
+  `
+}
+
+const Unblock = ({
+  user,
+  size = 'small'
+}: {
+  user: UnblockButtonUser
+  size?: 'small' | 'default'
+}) => {
+  const [unblockUser] = useMutation<UnblockUser>(UNBLOCK_USER, {
+    variables: { id: user.id },
+    optimisticResponse: {
+      unblockUser: {
+        id: user.id,
+        isBlocked: false,
+        __typename: 'User'
+      }
+    }
+  })
+
+  return (
+    <Button
+      size={size}
+      style={size === 'small' ? { width: '4rem' } : { width: '5.5rem' }}
+      onClick={() => {
+        unblockUser()
+        analytics.trackEvent(ANALYTICS_EVENTS.UNFOLLOW_USER, {
+          id: user.id
+        })
+      }}
+      bgColor="green"
+    >
+      <Translate
+        zh_hant={TEXT.zh_hant.unblockUser}
+        zh_hans={TEXT.zh_hans.unblockUser}
+      />
+    </Button>
+  )
+}
+
+Unblock.fragments = fragments
+
+export default Unblock