Merge pull request #1403 from thematters/develop

Release: v3.13.0

.env.local.example

@@ -5,11 +5,11 @@
 #
 ###
 
-NEXT_PUBLIC_SITE_DOMAIN=http://localhost:3000
+NEXT_PUBLIC_SITE_DOMAIN=https://web-develop.matters.news
 NEXT_PUBLIC_ASSET_DOMAIN=https://assets-develop.matters.news
-NEXT_PUBLIC_API_URL=http://matters-server-develop.ap-southeast-1.elasticbeanstalk.com/graphql
-NEXT_PUBLIC_WS_URL=ws://matters-server-develop.ap-southeast-1.elasticbeanstalk.com/graphql
-NEXT_PUBLIC_OAUTH_URL=http://server-stage.matters.news/oauth
+NEXT_PUBLIC_API_URL=https://server-develop.matters.news/graphql
+NEXT_PUBLIC_WS_URL=wss://server-develop.matters.news/graphql
+NEXT_PUBLIC_OAUTH_URL=https://server-develop.matters.news/oauth
 NEXT_PUBLIC_SEGMENT_KEY=3gE20MjzN9qncFqlKV0pDvNO7Cp2gWU3
 NEXT_PUBLIC_FB_APP_ID=823885921293850
 NEXT_PUBLIC_SENTRY_DSN=

.github/workflows/deploy.yml

@@ -100,7 +100,7 @@ jobs:
 
       - name: Deploy to EB (develop)
         if: github.ref == 'refs/heads/develop'
-        uses: einaregilsson/beanstalk-deploy@v10
+        uses: einaregilsson/beanstalk-deploy@v11
         with:
           aws_access_key: ${{ secrets.AWS_ACCESS_KEY_ID }}
           aws_secret_key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
@@ -121,7 +121,7 @@ jobs:
 
       - name: Deploy to EB (production)
         if: github.ref == 'refs/heads/master'
-        uses: einaregilsson/beanstalk-deploy@v10
+        uses: einaregilsson/beanstalk-deploy@v11
         with:
           aws_access_key: ${{ secrets.AWS_ACCESS_KEY_ID }}
           aws_secret_key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "matters-web",
-  "version": "3.12.1",
+  "version": "3.13.0",
   "description": "codebase of Matters' website",
   "sideEffects": false,
   "author": "Matters <[email protected]>",
@@ -24,7 +24,7 @@
     "analyze": "BUNDLE_ANALYZE=both next build",
     "analyze:server": "BUNDLE_ANALYZE=server next build",
     "analyze:browser": "BUNDLE_ANALYZE=browser next build",
-    "gen:type": "npm run gen:clean && apollo client:codegen __generated__ --target=typescript --includes 'src/**/*.{ts,tsx}' --endpoint 'https://server-stage.matters.news/graphql'",
+    "gen:type": "npm run gen:clean && apollo client:codegen __generated__ --target=typescript --includes 'src/**/*.{ts,tsx}' --endpoint 'https://server-develop.matters.news/graphql'",
     "gen:type:prod": "npm run gen:clean && apollo client:codegen __generated__ --target=typescript --includes 'src/**/*.{ts,tsx}' --endpoint 'https://server.matters.news/graphql'",
     "gen:watch": "npm run gen:type -- --watch",
     "gen:watch:prod": "npm run gen:type:prod -- --watch",
@@ -67,7 +67,7 @@
     "isomorphic-unfetch": "^3.0.0",
     "jump.js": "^1.0.2",
     "lodash": "^4.17.19",
-    "next": "^9.4.4",
+    "next": "^9.5.1",
     "next-with-apollo": "^5.1.0",
     "nprogress": "^0.2.0",
     "number-precision": "^1.5.0",
@@ -89,7 +89,7 @@
     "validator": "^13.1.1"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-optional-chaining": "^7.10.4",
+    "@babel/plugin-proposal-optional-chaining": "^7.11.0",
     "@svgr/webpack": "^5.4.0",
     "@testing-library/react": "^10.4.7",
     "@types/autosize": "^3.0.7",
@@ -98,7 +98,7 @@
     "@types/fingerprintjs2": "^2.0.0",
     "@types/grecaptcha": "^3.0.1",
     "@types/helmet": "0.0.47",
-    "@types/jest": "^26.0.7",
+    "@types/jest": "^26.0.8",
     "@types/jump.js": "^1.0.3",
     "@types/lodash": "^4.14.158",
     "@types/nprogress": "0.2.0",
@@ -144,7 +144,7 @@
     "styled-jsx-plugin-postcss": "^2.0.1",
     "stylelint": "^13.6.1",
     "stylelint-config-prettier": "^8.0.2",
-    "stylelint-config-recess-order": "^2.0.4",
+    "stylelint-config-recess-order": "^2.1.0",
     "stylelint-config-standard": "^20.0.0",
     "stylelint-prettier": "^1.1.2",
     "ts-jest": "^25.5.1",

src/common/enums/route.ts

@@ -17,6 +17,7 @@ type ROUTE_KEY =
   | 'TAG_DETAIL'
   | 'USER_ARTICLES'
   | 'USER_COMMENTS'
+  | 'USER_TAGS'
   | 'USER_FOLLOWERS'
   | 'USER_FOLLOWEES'
   | 'ARTICLE_DETAIL'
@@ -74,6 +75,7 @@ export const ROUTES: Array<{
   // User
   { key: 'USER_ARTICLES', pathname: '/[userName]' },
   { key: 'USER_COMMENTS', pathname: '/[userName]/comments' },
+  { key: 'USER_TAGS', pathname: '/[userName]/tags' },
   { key: 'USER_FOLLOWERS', pathname: '/[userName]/followers' },
   { key: 'USER_FOLLOWEES', pathname: '/[userName]/followees' },
 

src/common/utils/analytics.ts

@@ -18,7 +18,7 @@ export const analytics = {
 
 type EventArgs =
   | [] // identify user
-  | ['page_view'] // pageview
+  | ['page_view', PageViewProp] // pageview
   | ['pull_to_refresh']
   | ['click_feed', ClickFeedProp]
   | ['click_button', ClickButtonProp]
@@ -28,6 +28,10 @@ type EventArgs =
   | ['view_add_credit_dialog', ViewDialogProp]
   | ['view_donation_dialog', ViewDialogProp]
 
+interface PageViewProp {
+  page_referrer: string
+}
+
 type ClickFeedProp =
   | ArticleFeedProp
   | CommentFeedProp
@@ -134,7 +138,7 @@ type ArticleFeedType =
   | 'user_article'
   | 'wallet'
 
-type CommentFeedType = 'follow-comment'
+type CommentFeedType = 'follow-comment' | 'user_comment'
 
 type UserFeedType =
   | 'all_authors'
@@ -165,3 +169,4 @@ type TagFeedType =
   | 'search'
   | 'search_tag'
   | 'tags' // tag feed on home page
+  | 'user_tag'

src/common/utils/route.ts

@@ -48,6 +48,10 @@ type ToPathArgs =
       page: 'userComments'
       userName: string
     }
+  | {
+      page: 'userTags'
+      userName: string
+    }
   | {
       page: 'userFollowers'
       userName: string
@@ -131,6 +135,15 @@ export const toPath = (args: ToPathArgs): { href: Url; as: string } => {
         as: `/@${args.userName}/comments`,
       }
     }
+    case 'userTags': {
+      return {
+        href: {
+          pathname: PATHS.USER_TAGS,
+          query: { userName: args.userName },
+        },
+        as: `/@${args.userName}/tags`,
+      }
+    }
     case 'userFollowers': {
       return {
         href: {

src/components/Analytics/PageViewTracker/index.tsx

@@ -0,0 +1,44 @@
+import Router from 'next/router'
+import { useContext, useEffect, useRef } from 'react'
+
+import { ViewerContext } from '~/components'
+
+import { analytics } from '~/common/utils'
+
+const PageViewTracker = () => {
+  const viewer = useContext(ViewerContext)
+  const referrer = useRef('')
+
+  // first load
+  useEffect(() => {
+    if (!viewer.privateFetched) {
+      return
+    }
+
+    analytics.identifyUser()
+    analytics.trackPage()
+    referrer.current = window.location.pathname
+  }, [viewer.privateFetched])
+
+  // subsequent changes
+  useEffect(() => {
+    const trackPage = () => {
+      if (!viewer.privateFetched) {
+        return
+      }
+
+      analytics.trackPage('page_view', { page_referrer: referrer.current })
+      referrer.current = window.location.pathname
+    }
+
+    Router.events.on('routeChangeComplete', trackPage)
+
+    return () => {
+      Router.events.off('routeChangeComplete', trackPage)
+    }
+  }, [viewer.privateFetched])
+
+  return null
+}
+
+export default PageViewTracker

src/components/Analytics/index.ts

@@ -1,4 +1,5 @@
 import gql from 'graphql-tag'
+import _get from 'lodash/get'
 
 import { ANALYTIC_TYPES, ANALYTICS, GA_TRACKING_ID } from '~/common/enums'
 import { deferTry } from '~/common/utils'
@@ -9,7 +10,6 @@ import { AnalyticsUser } from './__generated__/AnalyticsUser'
 
 declare global {
   interface Window {
-    analytics: SegmentAnalytics.AnalyticsJS & { [key: string]: any }
     gtag: any
     firebaseAnalytics: firebase.analytics.Analytics & {
       logEvent: (
@@ -35,15 +35,19 @@ const handleAnalytics = ({
 
   // if we have an event of type track or page
   if (type === ANALYTIC_TYPES.TRACK || type === ANALYTIC_TYPES.PAGE) {
-    window.analytics[type](...args)
     // GA & firebase tracking
     if (type === ANALYTIC_TYPES.PAGE) {
       const path = window.location.pathname
+      const referrer = _get(args[1], 'page_referrer')
+
       window.gtag('config', GA_TRACKING_ID, {
         page_location: path,
+        page_referrer: referrer,
       })
 
-      window.firebaseAnalytics.logEvent('page_view')
+      window.firebaseAnalytics.logEvent('page_view', {
+        page_referrer: referrer,
+      })
     } else {
       window.firebaseAnalytics.logEvent(args[0], args[1])
     }
@@ -53,22 +57,13 @@ const handleAnalytics = ({
   if (type === ANALYTIC_TYPES.IDENTIFY) {
     // logged in
     if (user && 'id' in user && 'info' in user) {
-      const { info, id, userName } = user as AnalyticsUser
-      window.analytics.identify(
-        id,
-        {
-          email: info.email,
-          username: userName,
-        },
-        ...args
-      )
+      const { id } = user as AnalyticsUser
       window.gtag('config', GA_TRACKING_ID, {
         user_id: id,
       })
       window.firebaseAnalytics.setUserId(id, { global: true })
     } else {
       // visitor
-      window.analytics.identify(args)
     }
   }
 }

src/components/Empty/EmptyTag.tsx

@@ -1,8 +1,12 @@
 import { Empty, IconHashTag, Translate } from '~/components'
 
-export const EmptyTag = () => (
+export const EmptyTag = ({
+  description,
+}: {
+  description?: React.ReactNode
+}) => (
   <Empty
     icon={<IconHashTag size="xxl" />}
-    description={<Translate id="TAG_NOT_FOUND" />}
+    description={description || <Translate id="TAG_NOT_FOUND" />}
   />
 )

src/components/Head/index.tsx

@@ -52,7 +52,7 @@ export const Head: React.FC<HeadProps> = (props) => {
       <meta
         name="viewport"
         key="viewport"
-        content="width=device-width, initial-scale=1.0, viewport-fit=cover"
+        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, viewport-fit=cover"
       />
       <title>{head.title}</title>
       <meta name="description" key="description" content={head.description} />
@@ -170,7 +170,6 @@ export const Head: React.FC<HeadProps> = (props) => {
 
       {/* DNS */}
       <link rel="dns-prefetch" href="https://www.gstatic.com" />
-      <link rel="dns-prefetch" href="https://cdn.segment.com" />
       <link rel="dns-prefetch" href="https://sentry.matters.one" />
     </NextHead>
   )

src/components/Layout/SideNav/index.tsx

@@ -106,7 +106,7 @@ const SideNav = () => {
             placement="right-start"
             appendTo={process.browser ? document.body : undefined}
             offset={[-24, 24]}
-            zIndex={Z_INDEX.OVER_GLOBAL_HEADER}
+            zIndex={Z_INDEX.OVER_STICKY_TABS}
             onShown={hidePopperOnClick}
           >
             <NavListItem

src/components/Root/index.tsx

@@ -14,10 +14,11 @@ import {
   usePublicQuery,
   ViewerProvider,
 } from '~/components'
+import PageViewTracker from '~/components/Analytics/PageViewTracker'
 import { QueryError } from '~/components/GQL'
+import SplashScreen from '~/components/SplashScreen'
 
 import { PATHS } from '~/common/enums'
-import { analytics } from '~/common/utils'
 
 import { ROOT_QUERY_PRIVATE, ROOT_QUERY_PUBLIC } from './gql'
 
@@ -48,7 +49,10 @@ const DynamicFingerprint = dynamic(() => import('~/components/Fingerprint'), {
  */
 // Sentry
 import('@sentry/browser').then((Sentry) => {
-  Sentry.init({ dsn: process.env.NEXT_PUBLIC_SENTRY_DSN || '' })
+  Sentry.init({
+    dsn: process.env.NEXT_PUBLIC_SENTRY_DSN || '',
+    ignoreErrors: ['Timeout', 'Network error'],
+  })
 })
 
 const Root = ({
@@ -58,14 +62,6 @@ const Root = ({
   client: ApolloClient<InMemoryCache>
   children: React.ReactNode
 }) => {
-  useEffect(() => {
-    analytics.trackPage()
-  })
-
-  useEffect(() => {
-    analytics.identifyUser()
-  }, [])
-
   const router = useRouter()
   const isInAbout = router.pathname === PATHS.ABOUT
   const isInMigration = router.pathname === PATHS.MIGRATION
@@ -94,6 +90,9 @@ const Root = ({
     fetchPrivateViewer()
   }, [!!data])
 
+  /**
+   * Render
+   */
   if (loading) {
     return null
   }
@@ -108,6 +107,9 @@ const Root = ({
 
   return (
     <ViewerProvider viewer={viewer} privateFetched={privateFetched}>
+      <SplashScreen />
+      <PageViewTracker />
+
       <LanguageProvider>
         <FeaturesProvider official={official}>
           {shouldApplyLayout ? <Layout>{children}</Layout> : children}