Merge pull request #483 from thematters/develop

Release: v2.1.0

.vscode/settings.json

@@ -21,5 +21,6 @@
 
   "editor.codeActionsOnSave": {
     "source.fixAll.tslint": true
-  }
+  },
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

CHANGELOG.md

@@ -5,6 +5,18 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.1.0] - 2019-10-29
+
+### Added
+
+- Block User #481
+
+### Changed
+
+- Apollo with React Hooks! #450
+- Show userName in profile area #479
+- Error Codes: remove `USER_FOLLOW_FAILED`, add `ACTION_FAILED` #480
+
 ## [2.0.1] - 2019-10-21
 
 ### Changed

package.json

@@ -1,6 +1,6 @@
 {
   "name": "matters-web",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "codebase of Matters' website",
   "author": "",
   "engines": {
@@ -31,10 +31,9 @@
     "gen:fragmentTypes": "node bin/buildFragmentTypes.js"
   },
   "dependencies": {
-    "@apollo/react-testing": "^3.1.2",
     "@matters/apollo-upload-client": "^11.1.0",
-    "@sentry/browser": "^5.7.0",
-    "@tippy.js/react": "^3.0.1",
+    "@sentry/browser": "^5.7.1",
+    "@tippy.js/react": "^3.1.0",
     "@types/jump.js": "^1.0.2",
     "apollo-cache-inmemory": "^1.6.3",
     "apollo-cache-persist": "^0.1.1",
@@ -47,7 +46,7 @@
     "apollo-utilities": "^1.3.2",
     "body-scroll-lock": "^2.6.4",
     "classnames": "^2.2.6",
-    "date-fns": "^2.4.1",
+    "date-fns": "^2.5.0",
     "express": "^4.17.1",
     "formik": "^1.5.8",
     "graphql": "^14.5.8",
@@ -64,29 +63,31 @@
     "react": "^16.10.2",
     "react-apollo": "^3.1.2",
     "react-beautiful-dnd": "^11.0.5",
-    "react-content-loader": "^4.3.1",
+    "react-content-loader": "^4.3.2",
     "react-dom": "^16.10.2",
     "react-quill": "^1.3.3",
     "react-responsive": "^8.0.1",
     "react-waypoint": "^9.0.2",
     "subscriptions-transport-ws": "^0.9.16",
+    "use-debounce": "^3.1.0",
     "validator": "^11.1.0"
   },
   "devDependencies": {
+    "@apollo/react-testing": "3.1.2",
     "@testing-library/react": "^8.0.9",
     "@types/body-scroll-lock": "^2.6.1",
     "@types/classnames": "^2.2.9",
     "@types/dotenv": "^6.1.1",
     "@types/express": "^4.17.1",
     "@types/helmet": "0.0.44",
-    "@types/jest": "^24.0.18",
+    "@types/jest": "^24.0.19",
     "@types/lodash": "^4.14.144",
     "@types/next-server": "^8.1.2",
     "@types/nprogress": "0.2.0",
     "@types/quill": "^2.0.3",
-    "@types/react": "^16.9.5",
+    "@types/react": "^16.9.9",
     "@types/react-beautiful-dnd": "^11.0.3",
-    "@types/react-dom": "^16.9.1",
+    "@types/react-dom": "^16.9.2",
     "@types/react-responsive": "^8.0.1",
     "@types/segment-analytics": "0.0.32",
     "@types/styled-jsx": "^2.2.8",
@@ -97,8 +98,8 @@
     "babel-plugin-dynamic-import-node": "^2.3.0",
     "babel-plugin-module-resolver": "^3.2.0",
     "babel-polyfill": "^6.26.0",
-    "dotenv": "^8.1.0",
-    "husky": "^3.0.8",
+    "dotenv": "^8.2.0",
+    "husky": "^3.0.9",
     "identity-obj-proxy": "^3.0.0",
     "imagemin-mozjpeg": "^8.0.0",
     "imagemin-optipng": "^7.1.0",
@@ -108,7 +109,7 @@
     "next-compose-plugins": "^2.2.0",
     "next-offline": "^4.0.6",
     "next-optimized-images": "^2.5.3",
-    "nodemon": "^1.19.3",
+    "nodemon": "^1.19.4",
     "npm-run-all": "^4.1.5",
     "postcss-calc": "^7.0.1",
     "postcss-color-function": "^4.1.0",
@@ -118,12 +119,13 @@
     "postcss-preset-env": "^6.7.0",
     "prettier": "^1.18.2",
     "styled-jsx-plugin-postcss": "^2.0.1",
-    "svg-sprite-loader": "^4.1.3",
+    "svg-sprite-loader": "4.1.3",
     "ts-jest": "^24.1.0",
     "ts-node": "^8.4.1",
     "tslint": "^5.20.0",
     "tslint-config-prettier": "^1.18.0",
     "tslint-react": "^4.1.0",
+    "tslint-react-hooks": "^2.2.1",
     "typescript": "^3.6.4"
   },
   "_moduleAliases": {

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/errorCode.ts

@@ -4,7 +4,9 @@ export const ERROR_CODES = {
   NETWORK_ERROR: 'NETWORK_ERROR',
   INTERNAL_SERVER_ERROR: 'INTERNAL_SERVER_ERROR',
   BAD_USER_INPUT: 'BAD_USER_INPUT',
+
   ACTION_LIMIT_EXCEEDED: 'ACTION_LIMIT_EXCEEDED',
+  ACTION_FAILED: 'ACTION_FAILED',
 
   // Auth
   UNAUTHENTICATED: 'UNAUTHENTICATED',
@@ -34,11 +36,6 @@ export const ERROR_CODES = {
   USER_USERNAME_INVALID: 'USER_USERNAME_INVALID',
   USER_USERNAME_EXISTS: 'USER_USERNAME_EXISTS',
   USER_DISPLAYNAME_INVALID: 'USER_DISPLAYNAME_INVALID',
-  USER_FOLLOW_FAILED: 'USER_FOLLOW_FAILED',
-  USER_INVITE_FAILED: 'USER_INVITE_FAILED',
-  USER_INVITE_STATE_INVALID: 'USER_INVITE_STATE_INVALID',
-  USER_INVITE_EMAIL_REGISTERED: 'USER_INVITE_EMAIL_REGISTERED',
-  USER_INVITE_EMAIL_INVITED: 'USER_INVITE_EMAIL_INVITED',
 
   // Verification Code
   CODE_INVALID: 'CODE_INVALID',

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,11 @@ export const TEXT = {
     articleFingerprint: '作品指紋',
     copySuccess: '複製成功',
     copy: '複製',
+    block: '封鎖',
+    blockUser: '封鎖用戶',
+    unblockUser: '取消封鎖',
+    blockSuccess: '封鎖成功',
+    unblockSuccess: '已取消封鎖。該用戶現在可以評論你的作品。',
     pin: '喜歡回應',
     unpin: '取消精選',
     emptySearchResults: '沒有找到你搜索的內容',
@@ -161,11 +167,7 @@ export const TEXT = {
       USER_USERNAME_INVALID: 'Matters ID 不正確',
       USER_USERNAME_EXISTS: '該 Matters ID 已被其他使用者使用',
       USER_DISPLAYNAME_INVALID: '姓名不正確',
-      USER_FOLLOW_FAILED: '追蹤用戶失敗，請稍候重試',
-      // USER_INVITE_FAILED: '',
-      // USER_INVITE_STATE_INVALID: '',
-      // USER_INVITE_EMAIL_REGISTERED: '',
-      // USER_INVITE_EMAIL_INVITED: '',
+      ACTION_FAILED: '操作失敗，請稍候重試',
       CODE_INVALID: '驗證碼不正確',
       CODE_EXPIRED: '驗證碼已過期'
     } as { [key: string]: string }
@@ -293,6 +295,7 @@ export const TEXT = {
     setting: '设定',
     accountSetting: '账户设定',
     notificationSetting: '通知设定',
+    blockedSetting: '屏蔽用户',
     walletSetting: '钱包设定',
     uiSetting: '界面设定',
     userProfile: '个人简介',
@@ -302,6 +305,11 @@ export const TEXT = {
     articleFingerprint: '作品指纹',
     copySuccess: '复制成功',
     copy: '复制',
+    block: '屏蔽',
+    blockUser: '屏蔽用户',
+    unblockUser: '取消屏蔽',
+    blockSuccess: '屏蔽成功',
+    unblockSuccess: '已取消屏蔽。该用户现在可以评论你的作品。',
     pin: '喜欢回应',
     unpin: '取消精选',
     emptySearchResults: '没有找到你搜寻的内容',
@@ -333,11 +341,7 @@ export const TEXT = {
       USER_USERNAME_INVALID: 'Matters ID 不正确',
       USER_USERNAME_EXISTS: '该 Matters ID 已被其他用户使用',
       USER_DISPLAYNAME_INVALID: '姓名不正确',
-      USER_FOLLOW_FAILED: '追踪用户失败，请稍候重试',
-      // USER_INVITE_FAILED: '',
-      // USER_INVITE_STATE_INVALID: '',
-      // USER_INVITE_EMAIL_REGISTERED: '',
-      // USER_INVITE_EMAIL_INVITED: '',
+      ACTION_FAILED: '操作失败，请稍候重试',
       CODE_INVALID: '验证码不正确',
       CODE_EXPIRED: '验证码已过期'
     } as { [key: string]: string }

src/common/enums/time.ts

@@ -1 +1,5 @@
 export const POLL_INTERVAL = 1000 * 10
+
+export const INPUT_DEBOUNCE = 300
+
+export const APPRECIATE_DEBOUNCE = 1000

src/common/utils/route.ts

@@ -1,4 +1,3 @@
-import _get from 'lodash/get'
 import Router, { NextRouter } from 'next/router'
 import queryString from 'query-string'
 

src/components/Analytics/AnalyticsProvider.tsx

@@ -1,15 +1,16 @@
 import getConfig from 'next/config'
 import Router from 'next/router'
-import React, { FC, useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 
 import { analytics } from '~/common/utils'
 
 const {
   publicRuntimeConfig: { SEGMENT_KEY }
 } = getConfig()
 
-export const AnalyticsProvider: FC = ({ children }) => {
+export const AnalyticsProvider: React.FC = ({ children }) => {
   const [sessionStarted, setSessionStarted] = useState(false)
+
   useEffect(() => {
     // injects analytics var into global scope
     // ref: https://github.com/segmentio/analytics-react#%EF%B8%8F-step-1-copy-the-snippet
@@ -77,7 +78,7 @@ export const AnalyticsProvider: FC = ({ children }) => {
           analytics.load(SEGMENT_KEY || '3gE20MjzN9qncFqlKV0pDvNO7Cp2gWU3')
         }
     })()
-  })
+  }, [])
 
   useEffect(() => {
     // initial
@@ -89,7 +90,7 @@ export const AnalyticsProvider: FC = ({ children }) => {
     Router.events.on('routeChangeComplete', (path: string) => {
       analytics.trackPage({ path })
     })
-  })
+  }, [])
 
   return <>{children}</>
 }

src/components/ArticleDigest/Actions/Appreciation.tsx

@@ -1,5 +1,4 @@
 import gql from 'graphql-tag'
-import _get from 'lodash/get'
 
 import { Icon, TextIcon } from '~/components'
 
@@ -27,7 +26,7 @@ const Appreciation = ({
     icon={<Icon size={size} id={ICON_LIKE.id} viewBox={ICON_LIKE.viewBox} />}
     color="grey"
     weight="medium"
-    text={numAbbr(_get(article, 'appreciationsReceivedTotal', 0))}
+    text={numAbbr((article && article.appreciationsReceivedTotal) || 0)}
     size={size === 'small' ? 'sm' : 'xs'}
     spacing="xtight"
   />

src/components/ArticleDigest/Actions/CommentCount.tsx

@@ -1,5 +1,4 @@
 import gql from 'graphql-tag'
-import _get from 'lodash/get'
 import Link from 'next/link'
 
 import { Icon, TextIcon } from '~/components'
@@ -65,7 +64,7 @@ const CommentCount = ({
           }
           color="grey"
           weight="medium"
-          text={numAbbr(_get(article, 'commentCount', 0))}
+          text={numAbbr(article.commentCount || 0)}
           size={size === 'default' ? 'sm' : 'xs'}
           spacing="xxtight"
         />

src/components/ArticleDigest/Actions/ResponseCount.tsx

@@ -67,7 +67,7 @@ const ResponseCount = ({
           }
           color="grey"
           weight="medium"
-          text={numAbbr(_get(article, 'responseCount', 0))}
+          text={numAbbr(article.responseCount || 0)}
           size={size === 'small' ? 'sm' : 'xs'}
           spacing="xxtight"
         />

src/components/ArticleDigest/Actions/TopicScore.tsx

@@ -1,5 +1,4 @@
 import gql from 'graphql-tag'
-import _get from 'lodash/get'
 
 import { Icon, TextIcon, Translate } from '~/components'
 

src/components/ArticleDigest/Actions/index.tsx

@@ -154,9 +154,11 @@ const Actions = ({
           </span>
         )}
       </div>
+
       {hasDateTime && 'createdAt' in article && isResponseMode && (
         <DateTime date={article.createdAt} />
       )}
+
       <style jsx>{styles}</style>
     </footer>
   )