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

Show toast after unblock user; Bugfixes;
thematters · Oct 29, 2019 · b736ae4 · b736ae4
2 parents a4fdc70 + a982f42
commit b736ae4
Show file tree

Hide file tree

Showing 18 changed files with 216 additions and 109 deletions.
diff --git a/src/common/enums/text.ts b/src/common/enums/text.ts
@@ -121,7 +121,7 @@ export const TEXT = {
     setting: '設定',
     accountSetting: '帳戶設定',
     notificationSetting: '通知設定',
-    blockedSetting: '屏蔽用戶',
+    blockedSetting: '封鎖用戶',
     walletSetting: '錢包設定',
     uiSetting: '介面設定',
     userProfile: '個人簡介',
@@ -131,10 +131,11 @@ export const TEXT = {
     articleFingerprint: '作品指紋',
     copySuccess: '複製成功',
     copy: '複製',
-    block: '屏蔽',
-    blockUser: '屏蔽用戶',
-    unblockUser: '取消屏蔽',
-    blockSuccess: '屏蔽成功',
+    block: '封鎖',
+    blockUser: '封鎖用戶',
+    unblockUser: '取消封鎖',
+    blockSuccess: '封鎖成功',
+    unblockSuccess: '已取消封鎖。該用戶現在可以評論你的作品。',
     pin: '喜歡回應',
     unpin: '取消精選',
     emptySearchResults: '沒有找到你搜索的內容',
@@ -308,6 +309,7 @@ export const TEXT = {
     blockUser: '屏蔽用户',
     unblockUser: '取消屏蔽',
     blockSuccess: '屏蔽成功',
+    unblockSuccess: '已取消屏蔽。该用户现在可以评论你的作品。',
     pin: '喜欢回应',
     unpin: '取消精选',
     emptySearchResults: '没有找到你搜寻的内容',

diff --git a/src/components/Button/BlockUser/Dropdown/index.tsx b/src/components/Button/BlockUser/Dropdown/index.tsx
@@ -1,13 +1,17 @@
+import { useContext } from 'react'
+
 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 { LanguageContext } from '~/components/Language'
 import BlocKUserModal from '~/components/Modal/BlockUserModal'
 import { ModalInstance, ModalSwitch } from '~/components/ModalManager'
 
-import { TEXT } from '~/common/enums'
+import { ADD_TOAST, TEXT } from '~/common/enums'
+import { translate } from '~/common/utils'
 import ICON_BLOCK from '~/static/icons/block.svg?sprite'
 import ICON_UNBLOCK from '~/static/icons/unblock.svg?sprite'
 
@@ -49,6 +53,7 @@ const BlockUserButton = ({
   isShown: boolean
   hideDropdown: () => void
 }) => {
+  const { lang } = useContext(LanguageContext)
   const [unblockUser] = useMutation<UnblockUser>(UNBLOCK_USER, {
     variables: { id: user.id },
     optimisticResponse: {
@@ -65,8 +70,20 @@ const BlockUserButton = ({
       {user.isBlocked && (
         <button
           type="button"
-          onClick={() => {
-            unblockUser()
+          onClick={async () => {
+            await unblockUser()
+            window.dispatchEvent(
+              new CustomEvent(ADD_TOAST, {
+                detail: {
+                  color: 'green',
+                  content: translate({
+                    zh_hant: TEXT.zh_hant.unblockSuccess,
+                    zh_hans: TEXT.zh_hans.unblockSuccess,
+                    lang
+                  })
+                }
+              })
+            )
             hideDropdown()
           }}
         >

diff --git a/src/components/Button/BlockUser/Unblock/index.tsx b/src/components/Button/BlockUser/Unblock/index.tsx
@@ -1,12 +1,14 @@
 import gql from 'graphql-tag'
+import { useContext } from 'react'
 
 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 { LanguageContext } from '~/components/Language'
 
-import { ANALYTICS_EVENTS, TEXT } from '~/common/enums'
-import { analytics } from '~/common/utils'
+import { ADD_TOAST, ANALYTICS_EVENTS, TEXT } from '~/common/enums'
+import { analytics, translate } from '~/common/utils'
 
 import { UnblockButtonUser } from './__generated__/UnblockButtonUser'
 
@@ -26,6 +28,7 @@ const Unblock = ({
   user: UnblockButtonUser
   size?: 'small' | 'default'
 }) => {
+  const { lang } = useContext(LanguageContext)
   const [unblockUser] = useMutation<UnblockUser>(UNBLOCK_USER, {
     variables: { id: user.id },
     optimisticResponse: {
@@ -41,8 +44,20 @@ const Unblock = ({
     <Button
       size={size}
       style={size === 'small' ? { width: '4rem' } : { width: '5.5rem' }}
-      onClick={() => {
-        unblockUser()
+      onClick={async () => {
+        await unblockUser()
+        window.dispatchEvent(
+          new CustomEvent(ADD_TOAST, {
+            detail: {
+              color: 'green',
+              content: translate({
+                zh_hant: TEXT.zh_hant.unblockSuccess,
+                zh_hans: TEXT.zh_hans.unblockSuccess,
+                lang
+              })
+            }
+          })
+        )
         analytics.trackEvent(ANALYTICS_EVENTS.UNFOLLOW_USER, {
           id: user.id
         })

diff --git a/src/components/CommentDigest/FooterActions/DownvoteButton.tsx b/src/components/CommentDigest/FooterActions/DownvoteButton.tsx
@@ -1,4 +1,5 @@
 import gql from 'graphql-tag'
+import { useContext } from 'react'
 
 import { Icon, TextIcon } from '~/components'
 import { useMutation } from '~/components/GQL'
@@ -8,6 +9,8 @@ import {
   UNVOTE_COMMENT,
   VOTE_COMMENT
 } from '~/components/GQL/mutations/voteComment'
+import { ModalSwitch } from '~/components/ModalManager'
+import { ViewerContext } from '~/components/Viewer'
 
 import { numAbbr } from '~/common/utils'
 import ICON_DISLIKE_ACTIVE from '~/static/icons/dislike-active.svg?sprite'
@@ -48,6 +51,7 @@ const DownvoteButton = ({
   comment: DownvoteComment
   disabled?: boolean
 }) => {
+  const viewer = useContext(ViewerContext)
   const [unvote] = useMutation<UnvoteComment>(UNVOTE_COMMENT, {
     variables: { id: comment.id },
     optimisticResponse: {
@@ -76,30 +80,58 @@ const DownvoteButton = ({
 
   if (comment.myVote === 'down') {
     return (
-      <button type="button" onClick={() => unvote()} disabled={disabled}>
-        <TextIcon
-          icon={<IconDislikeActive />}
-          color="grey"
-          weight="medium"
-          text={numAbbr(comment.downvotes)}
-          size="sm"
-          spacing="xxxtight"
-        />
-      </button>
+      <ModalSwitch modalId="likeCoinTermModal">
+        {(open: any) => (
+          <button
+            type="button"
+            onClick={() => {
+              if (viewer.shouldSetupLikerID) {
+                open()
+              } else {
+                unvote()
+              }
+            }}
+            disabled={disabled}
+          >
+            <TextIcon
+              icon={<IconDislikeActive />}
+              color="grey"
+              weight="medium"
+              text={numAbbr(comment.downvotes)}
+              size="sm"
+              spacing="xxxtight"
+            />
+          </button>
+        )}
+      </ModalSwitch>
     )
   }
 
   return (
-    <button type="button" onClick={() => downvote()} disabled={disabled}>
-      <TextIcon
-        icon={<IconDislikeInactive />}
-        color="grey"
-        weight="medium"
-        text={numAbbr(comment.downvotes)}
-        size="sm"
-        spacing="xxxtight"
-      />
-    </button>
+    <ModalSwitch modalId="likeCoinTermModal">
+      {(open: any) => (
+        <button
+          type="button"
+          onClick={() => {
+            if (viewer.shouldSetupLikerID) {
+              open()
+            } else {
+              downvote()
+            }
+          }}
+          disabled={disabled}
+        >
+          <TextIcon
+            icon={<IconDislikeInactive />}
+            color="grey"
+            weight="medium"
+            text={numAbbr(comment.downvotes)}
+            size="sm"
+            spacing="xxxtight"
+          />
+        </button>
+      )}
+    </ModalSwitch>
   )
 }
 

diff --git a/src/components/CommentDigest/FooterActions/UpvoteButton.tsx b/src/components/CommentDigest/FooterActions/UpvoteButton.tsx
@@ -1,4 +1,5 @@
 import gql from 'graphql-tag'
+import { useContext } from 'react'
 
 import { Icon, TextIcon } from '~/components'
 import { useMutation } from '~/components/GQL'
@@ -8,6 +9,8 @@ import {
   UNVOTE_COMMENT,
   VOTE_COMMENT
 } from '~/components/GQL/mutations/voteComment'
+import { ModalSwitch } from '~/components/ModalManager'
+import { ViewerContext } from '~/components/Viewer'
 
 import { numAbbr } from '~/common/utils'
 import ICON_LIKE_ACTIVE from '~/static/icons/like-active.svg?sprite'
@@ -48,6 +51,7 @@ const UpvoteButton = ({
   comment: UpvoteComment
   disabled?: boolean
 }) => {
+  const viewer = useContext(ViewerContext)
   const [unvote] = useMutation<UnvoteComment>(UNVOTE_COMMENT, {
     variables: { id: comment.id },
     optimisticResponse: {
@@ -76,30 +80,58 @@ const UpvoteButton = ({
 
   if (comment.myVote === 'up') {
     return (
-      <button type="button" onClick={() => unvote()} disabled={disabled}>
-        <TextIcon
-          icon={<IconLikeActive />}
-          color="grey"
-          weight="medium"
-          text={numAbbr(comment.upvotes)}
-          size="sm"
-          spacing="xxxtight"
-        />
-      </button>
+      <ModalSwitch modalId="likeCoinTermModal">
+        {(open: any) => (
+          <button
+            type="button"
+            onClick={() => {
+              if (viewer.shouldSetupLikerID) {
+                open()
+              } else {
+                unvote()
+              }
+            }}
+            disabled={disabled}
+          >
+            <TextIcon
+              icon={<IconLikeActive />}
+              color="grey"
+              weight="medium"
+              text={numAbbr(comment.upvotes)}
+              size="sm"
+              spacing="xxxtight"
+            />
+          </button>
+        )}
+      </ModalSwitch>
     )
   }
 
   return (
-    <button type="button" onClick={() => upvote()} disabled={disabled}>
-      <TextIcon
-        icon={<IconLikeInactive />}
-        color="grey"
-        weight="medium"
-        text={numAbbr(comment.upvotes)}
-        size="sm"
-        spacing="xxxtight"
-      />
-    </button>
+    <ModalSwitch modalId="likeCoinTermModal">
+      {(open: any) => (
+        <button
+          type="button"
+          onClick={() => {
+            if (viewer.shouldSetupLikerID) {
+              open()
+            } else {
+              upvote()
+            }
+          }}
+          disabled={disabled}
+        >
+          <TextIcon
+            icon={<IconLikeInactive />}
+            color="grey"
+            weight="medium"
+            text={numAbbr(comment.upvotes)}
+            size="sm"
+            spacing="xxxtight"
+          />
+        </button>
+      )}
+    </ModalSwitch>
   )
 }
 

diff --git a/src/components/CommentDigest/FooterActions/index.tsx b/src/components/CommentDigest/FooterActions/index.tsx
@@ -120,7 +120,7 @@ const FooterActions: React.FC<FooterActionsProps> & {
                     type="button"
                     className={showForm ? 'active' : ''}
                     onClick={() => {
-                      if (viewer.isOnboarding || !viewer.likerId) {
+                      if (viewer.shouldSetupLikerID) {
                         open()
                       } else {
                         setShowForm(!showForm)

diff --git a/src/components/Form/CommentForm/index.tsx b/src/components/Form/CommentForm/index.tsx
@@ -196,7 +196,7 @@ const CommentForm = ({
 export default (props: CommentFormProps) => {
   const viewer = useContext(ViewerContext)
 
-  if (viewer.isOnboarding || !viewer.likerId) {
+  if (viewer.shouldSetupLikerID) {
     return (
       <ModalSwitch modalId="likeCoinTermModal">
         {(open: any) => (

diff --git a/src/components/GlobalHeader/index.tsx b/src/components/GlobalHeader/index.tsx
@@ -61,10 +61,10 @@ export const GlobalHeader = ({ user }: { user: GlobalHeaderUser }) => {
                 {isMediumUp ? <SearchBar /> : <SearchButton />}
                 <NotificationButton />
                 <MeDigest user={user} />
-                {isDraft && (viewer.isActive || viewer.isOnboarding) && (
+                {isDraft && (viewer.isActive || viewer.shouldSetupLikerID) && (
                   <PublishButton allowed={viewer.isActive} />
                 )}
-                {!isDraft && (viewer.isActive || viewer.isOnboarding) && (
+                {!isDraft && (viewer.isActive || viewer.shouldSetupLikerID) && (
                   <WriteButton allowed={viewer.isActive} />
                 )}
               </>

diff --git a/src/components/Modal/Anchor/index.tsx b/src/components/Modal/Anchor/index.tsx
@@ -53,7 +53,7 @@ const Anchor = () => {
     viewer.isAuthed &&
     !isLikeCoinClosed &&
     isLikeCoinAllowPaths &&
-    (viewer.isOnboarding || !viewer.likerId)
+    viewer.shouldSetupLikerID
   const closeLikeCoinModal = () => {
     setIsLikeCoinClosed(true)
   }

diff --git a/src/components/Modal/BlockUserModal/index.tsx b/src/components/Modal/BlockUserModal/index.tsx
@@ -51,12 +51,12 @@ const BlocKUserModal: React.FC<ModalInstanceProps & Props> = ({
         <>
           <Modal.Content>
             <Translate
-              zh_hant={`屏蔽之後，${user.displayName} 將無法評論你的作品。`}
+              zh_hant={`封鎖之後，${user.displayName} 將無法評論你的作品。`}
               zh_hans={`屏蔽之后，${user.displayName} 将无法评论你的作品。`}
             />
             <br />
             <Translate
-              zh_hant="你可以在設置裏管理你的屏蔽用戶列表。"
+              zh_hant="你可以在設置裏管理你的封鎖用戶列表。"
               zh_hans="你可以在设置里管理你的屏蔽用户列表。"
             />
           </Modal.Content>