From e92462857325928a74f0c573eedde803974fb0df Mon Sep 17 00:00:00 2001
From: robertu <4065233+robertu7@users.noreply.github.com>
Date: Tue, 21 Feb 2023 14:53:12 +0700
Subject: [PATCH 1/7] feat(ptr): setup global pull to refresh webpage

---
 package-lock.json                        | 28 ++++++-
 package.json                             |  2 +
 src/common/styles/vendors/ptr.css        | 48 ++++++++++++
 src/components/GlobalStyles/index.tsx    |  4 +
 src/components/Hook/index.ts             |  1 +
 src/components/Hook/usePullToRefresh.tsx | 95 ++++++++++++++++++++++++
 src/components/Layout/index.tsx          | 26 +++++--
 src/components/PullToRefresh/index.tsx   | 39 ++++++++++
 src/components/index.tsx                 |  1 +
 9 files changed, 235 insertions(+), 9 deletions(-)
 create mode 100644 src/common/styles/vendors/ptr.css
 create mode 100644 src/components/Hook/usePullToRefresh.tsx
 create mode 100644 src/components/PullToRefresh/index.tsx

diff --git a/package-lock.json b/package-lock.json
index ce3e26a145..b548db8e0e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "matters-web",
-  "version": "4.15.0",
+  "version": "4.16.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "matters-web",
-      "version": "4.15.0",
+      "version": "4.16.0",
       "license": "Apache-2.0",
       "dependencies": {
         "@apollo/react-common": "^3.1.3",
@@ -67,6 +67,7 @@
         "nprogress": "^0.2.0",
         "number-precision": "^1.6.0",
         "path-to-regexp": "^6.2.1",
+        "pulltorefreshjs": "^0.1.22",
         "react": "^17.0.2",
         "react-beautiful-dnd": "^13.1.1",
         "react-copy-to-clipboard": "^5.1.0",
@@ -109,6 +110,7 @@
         "@types/jump.js": "^1.0.4",
         "@types/lodash": "^4.14.191",
         "@types/nprogress": "0.2.0",
+        "@types/pulltorefreshjs": "^0.1.5",
         "@types/react": "^18.0.26",
         "@types/react-beautiful-dnd": "^13.1.3",
         "@types/react-copy-to-clipboard": "^5.0.4",
@@ -19310,6 +19312,12 @@
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
       "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
     },
+    "node_modules/@types/pulltorefreshjs": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/@types/pulltorefreshjs/-/pulltorefreshjs-0.1.5.tgz",
+      "integrity": "sha512-/VRTgBettvBg1KI8mGnA9oeWs359tTXQ7qsxLuXnksL88jvK6ZNMStG5T9x9vUO9O7jLsgREB0cElz/BWFfdew==",
+      "dev": true
+    },
     "node_modules/@types/qs": {
       "version": "6.9.5",
       "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.5.tgz",
@@ -37395,6 +37403,11 @@
       "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==",
       "dev": true
     },
+    "node_modules/pulltorefreshjs": {
+      "version": "0.1.22",
+      "resolved": "https://registry.npmjs.org/pulltorefreshjs/-/pulltorefreshjs-0.1.22.tgz",
+      "integrity": "sha512-haxNVEHnS4NCQA7NeG7TSV69z4uqy/N7nfPRuc4dPWe8H6ygUrMjdNeohE+6v0lVVX/ukSjbLYwPUGUYtFKfvQ=="
+    },
     "node_modules/pump": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
@@ -59171,6 +59184,12 @@
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
       "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
     },
+    "@types/pulltorefreshjs": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/@types/pulltorefreshjs/-/pulltorefreshjs-0.1.5.tgz",
+      "integrity": "sha512-/VRTgBettvBg1KI8mGnA9oeWs359tTXQ7qsxLuXnksL88jvK6ZNMStG5T9x9vUO9O7jLsgREB0cElz/BWFfdew==",
+      "dev": true
+    },
     "@types/qs": {
       "version": "6.9.5",
       "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.5.tgz",
@@ -73367,6 +73386,11 @@
         }
       }
     },
+    "pulltorefreshjs": {
+      "version": "0.1.22",
+      "resolved": "https://registry.npmjs.org/pulltorefreshjs/-/pulltorefreshjs-0.1.22.tgz",
+      "integrity": "sha512-haxNVEHnS4NCQA7NeG7TSV69z4uqy/N7nfPRuc4dPWe8H6ygUrMjdNeohE+6v0lVVX/ukSjbLYwPUGUYtFKfvQ=="
+    },
     "pump": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
diff --git a/package.json b/package.json
index ac7ba55773..f8c44d6a01 100644
--- a/package.json
+++ b/package.json
@@ -92,6 +92,7 @@
     "nprogress": "^0.2.0",
     "number-precision": "^1.6.0",
     "path-to-regexp": "^6.2.1",
+    "pulltorefreshjs": "^0.1.22",
     "react": "^17.0.2",
     "react-beautiful-dnd": "^13.1.1",
     "react-copy-to-clipboard": "^5.1.0",
@@ -134,6 +135,7 @@
     "@types/jump.js": "^1.0.4",
     "@types/lodash": "^4.14.191",
     "@types/nprogress": "0.2.0",
+    "@types/pulltorefreshjs": "^0.1.5",
     "@types/react": "^18.0.26",
     "@types/react-beautiful-dnd": "^13.1.3",
     "@types/react-copy-to-clipboard": "^5.0.4",
diff --git a/src/common/styles/vendors/ptr.css b/src/common/styles/vendors/ptr.css
new file mode 100644
index 0000000000..6ec5ac1138
--- /dev/null
+++ b/src/common/styles/vendors/ptr.css
@@ -0,0 +1,48 @@
+/* @styled-jsx=global */
+
+/* https://github.com/BoxFactura/pulltorefresh.js/blob/master/src/lib/styles.js */
+
+.ptr--ptr {
+  top: 0;
+  display: flex;
+  align-content: stretch;
+  align-items: flex-end;
+  width: 100%;
+  height: 0;
+  overflow: hidden;
+  text-align: center;
+  pointer-events: none;
+  transition: height 0.3s, min-height 0.3s;
+}
+
+.ptr--box {
+  flex-basis: 100%;
+  padding: var(--spacing-base);
+}
+
+.ptr--pull {
+  transition: none;
+}
+
+.ptr--text {
+  font-size: 0;
+  visibility: hidden;
+}
+
+.ptr--icon {
+  font-size: 0;
+  color: var(--color-grey-light);
+  transition: transform 0.3s;
+}
+
+/*
+When at the top of the page, disable vertical overscroll so passive touch
+listeners can take over.
+*/
+.ptr--top {
+  touch-action: pan-x pan-down pinch-zoom;
+}
+
+.ptr--release .ptr--icon {
+  transform: rotate(180deg);
+}
diff --git a/src/components/GlobalStyles/index.tsx b/src/components/GlobalStyles/index.tsx
index aca4e68841..6a05d1b546 100644
--- a/src/components/GlobalStyles/index.tsx
+++ b/src/components/GlobalStyles/index.tsx
@@ -7,6 +7,7 @@ import interactionStyles from '~/common/styles/utils/interaction.css'
 import linkStyles from '~/common/styles/utils/link.css'
 import motionStyles from '~/common/styles/utils/motion.css'
 import fresnelStyles from '~/common/styles/vendors/fresnel.css'
+import ptrStyles from '~/common/styles/vendors/ptr.css'
 import tippyStyles from '~/common/styles/vendors/tippy.css'
 import { useWindowResize } from '~/components'
 
@@ -56,6 +57,9 @@ export const GlobalStyles = () => {
       <style jsx global>
         {tippyStyles}
       </style>
+      <style jsx global>
+        {ptrStyles}
+      </style>
       <style jsx global>
         {fresnelStyles}
       </style>
diff --git a/src/components/Hook/index.ts b/src/components/Hook/index.ts
index 0ec3561d46..e41c1feaf6 100644
--- a/src/components/Hook/index.ts
+++ b/src/components/Hook/index.ts
@@ -10,6 +10,7 @@ export * from './useImmersiveMode'
 export * from './useInterval'
 export * from './useNativeEventListener'
 export * from './useOutsideClick'
+export * from './usePullToRefresh'
 export * from './useRoute'
 export * from './useStep'
 export * from './useTargetNetwork'
diff --git a/src/components/Hook/usePullToRefresh.tsx b/src/components/Hook/usePullToRefresh.tsx
new file mode 100644
index 0000000000..10a5981139
--- /dev/null
+++ b/src/components/Hook/usePullToRefresh.tsx
@@ -0,0 +1,95 @@
+import { useEffect } from 'react'
+import ReactDOMServer from 'react-dom/server'
+
+import { ReactComponent as IconPullToRefresh } from '@/public/static/icons/24px/pull-to-refresh.svg'
+import { analytics, sleep } from '~/common/utils'
+import { IconSpinner16, withIcon } from '~/components'
+
+import { useEventListener } from './useEventListener'
+
+/**
+ * Core of Pull to Refresh
+ *
+ * Usage:
+ *
+ * ```tsx
+ * usePullToRefresh.Register()
+ * usePullToRefresh.Handler(refetch)
+ * ```
+ *
+ */
+
+const PTR_START = 'startPullToRefresh'
+const PTR_END = 'endPullToRefresh'
+const PTR_TIMEOUT = 3000
+
+/**
+ * React Hook to register Pull To Refresh
+ */
+const Register = (selector = 'body', timeout = PTR_TIMEOUT) => {
+  let PTR: any
+
+  const initPTR = (ptr: any) => {
+    PTR = ptr
+
+    PTR.init({
+      mainElement: selector,
+      triggerElement: selector,
+      distReload: 56,
+      onRefresh: (cb: () => void) => {
+        // start refresh
+        window.dispatchEvent(new CustomEvent(PTR_START, {}))
+        analytics.trackEvent('pull_to_refresh')
+
+        // end refresh
+        let polling = true
+
+        const onEnd = () => {
+          if (polling) {
+            cb()
+            polling = false
+          }
+          window.removeEventListener(PTR_END, onEnd)
+        }
+
+        window.addEventListener(PTR_END, onEnd)
+        sleep(timeout).then(onEnd)
+      },
+      getStyles: () => ``, // remove default styles
+      iconArrow: ReactDOMServer.renderToString(
+        withIcon(IconPullToRefresh)({ size: 'md' })
+      ),
+      iconRefreshing: ReactDOMServer.renderToString(
+        <IconSpinner16 size="md" />
+      ),
+    })
+  }
+
+  useEffect(() => {
+    import('pulltorefreshjs').then(initPTR)
+
+    return () => {
+      if (PTR) {
+        PTR.destroyAll()
+      }
+    }
+  }, [])
+}
+
+/**
+ * React Hook to handle `PTR_START` event from `usePullToRefresh.Register`
+ */
+const Handler = (onPull: () => any) => {
+  useEventListener(PTR_START, async () => {
+    if (onPull) {
+      await onPull()
+    }
+
+    window.dispatchEvent(new CustomEvent(PTR_END, {}))
+  })
+}
+
+export const usePullToRefresh = {
+  Register,
+  Handler,
+}
diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
index 3b791c5be0..ce76941810 100644
--- a/src/components/Layout/index.tsx
+++ b/src/components/Layout/index.tsx
@@ -2,7 +2,14 @@ import { useQuery } from '@apollo/react-hooks'
 import classNames from 'classnames'
 import dynamic from 'next/dynamic'
 
-import { Head, Media, SearchBar, useRoute } from '~/components'
+import {
+  Head,
+  Media,
+  PullToRefresh,
+  SearchBar,
+  usePullToRefresh,
+  useRoute,
+} from '~/components'
 import CLIENT_PREFERENCE from '~/components/GQL/queries/clientPreference'
 import { ClientPreferenceQuery } from '~/gql/graphql'
 
@@ -107,16 +114,21 @@ const Main: React.FC<React.PropsWithChildren<MainProps>> = ({
     hasOnboardingTasks: showOnboardingTasks,
   })
 
+  usePullToRefresh.Register()
+  usePullToRefresh.Handler(() => window.location.reload())
+
   return (
     <>
       <article className={articleClasses}>
-        {children}
+        <PullToRefresh>
+          {children}
 
-        {showOnboardingTasks && (
-          <Media lessThan="xl">
-            <DynamicOnboardingTasksNavBar />
-          </Media>
-        )}
+          {showOnboardingTasks && (
+            <Media lessThan="xl">
+              <DynamicOnboardingTasksNavBar />
+            </Media>
+          )}
+        </PullToRefresh>
       </article>
 
       <aside className="l-col-three-right">
diff --git a/src/components/PullToRefresh/index.tsx b/src/components/PullToRefresh/index.tsx
new file mode 100644
index 0000000000..14712af02e
--- /dev/null
+++ b/src/components/PullToRefresh/index.tsx
@@ -0,0 +1,39 @@
+import { usePullToRefresh } from '~/components'
+
+interface PullToRefreshProps {
+  timeout?: number
+  refresh?: () => any
+}
+
+/**
+ * Pull to Refresh wrapper with built-in register & handler
+ *
+ * Usage:
+ *
+ *
+ * ```tsx
+ * // use built-in handler
+ * <PullToRefresh refresh={refetch}>...</PullToRefresh>
+ *
+ *
+ * // use custom handler
+ * const ComponentA = () => {
+ *   usePullToRefresh.Handler(refetch)
+ *
+ *   return <PullToRefresh>...</PullToRefresh>
+ * }
+ * ```
+ *
+ */
+export const PullToRefresh: React.FC<
+  React.PropsWithChildren<PullToRefreshProps>
+> = ({ timeout, refresh, children }) => {
+  usePullToRefresh.Register('[data-ptr]', timeout)
+  usePullToRefresh.Handler(() => {
+    if (refresh) {
+      refresh()
+    }
+  })
+
+  return <div data-ptr>{children}</div>
+}
diff --git a/src/components/index.tsx b/src/components/index.tsx
index c0af6beff8..8d6eadbd7c 100644
--- a/src/components/index.tsx
+++ b/src/components/index.tsx
@@ -21,6 +21,7 @@ export * from './Media'
 export * from './Menu'
 export * from './PageHeader'
 export * from './Popper'
+export * from './PullToRefresh'
 export * from './ResponsiveImage'
 export * from './Slides'
 export * from './Spacer'

From 08cfc96773b41748787a6b5a14a4d77b3ca9d3c7 Mon Sep 17 00:00:00 2001
From: robertu <4065233+robertu7@users.noreply.github.com>
Date: Tue, 21 Feb 2023 16:08:20 +0700
Subject: [PATCH 2/7] feat(displayname): allow admin to use reserved names

---
 src/common/utils/form/validate.ts                         | 8 ++++++--
 src/components/Context/Viewer/index.tsx                   | 3 +++
 src/components/Forms/WalletAuthForm/Select.tsx            | 3 ++-
 .../DropdownActions/EditProfileDialog/Content.tsx         | 5 ++++-
 4 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/common/utils/form/validate.ts b/src/common/utils/form/validate.ts
index f2565d0c5e..2d50e1f129 100644
--- a/src/common/utils/form/validate.ts
+++ b/src/common/utils/form/validate.ts
@@ -150,7 +150,11 @@ export const validateComparedUserName = (
   }
 }
 
-export const validateDisplayName = (value: string, lang: Language) => {
+export const validateDisplayName = (
+  value: string,
+  lang: Language,
+  isAdmin?: boolean
+) => {
   if (!value) {
     return translate({ id: 'required', lang })
   }
@@ -172,7 +176,7 @@ export const validateDisplayName = (value: string, lang: Language) => {
   }
 
   const invalidNameIndex = RESERVED_NAMES.indexOf(value.toLowerCase())
-  if (invalidNameIndex >= 0) {
+  if (invalidNameIndex >= 0 && !isAdmin) {
     return translate({
       zh_hant: `不能使用「${RESERVED_NAMES[invalidNameIndex]}」`,
       zh_hans: `不能使用 “${RESERVED_NAMES[invalidNameIndex]}”`,
diff --git a/src/components/Context/Viewer/index.tsx b/src/components/Context/Viewer/index.tsx
index 58f5721949..28f8eb7c2c 100644
--- a/src/components/Context/Viewer/index.tsx
+++ b/src/components/Context/Viewer/index.tsx
@@ -68,6 +68,9 @@ const ViewerFragments = {
     private: gql`
       fragment ViewerUserPrivate on User {
         id
+        status {
+          role
+        }
         articles(input: { first: 0 }) {
           totalCount
         }
diff --git a/src/components/Forms/WalletAuthForm/Select.tsx b/src/components/Forms/WalletAuthForm/Select.tsx
index f5d0e7c3d9..e8ea3c62e0 100644
--- a/src/components/Forms/WalletAuthForm/Select.tsx
+++ b/src/components/Forms/WalletAuthForm/Select.tsx
@@ -223,7 +223,8 @@ const Select: React.FC<FormProps> = ({
               >
                 <FormattedMessage
                   defaultMessage="Install MetaMask"
-                  description="src/components/Forms/WalletAuthForm/Select.tsx" />
+                  description="src/components/Forms/WalletAuthForm/Select.tsx"
+                />
               </TextIcon>
             }
             htmlHref={EXTERNAL_LINKS.METAMASK}
diff --git a/src/components/UserProfile/DropdownActions/EditProfileDialog/Content.tsx b/src/components/UserProfile/DropdownActions/EditProfileDialog/Content.tsx
index c12495ba44..84236f7473 100644
--- a/src/components/UserProfile/DropdownActions/EditProfileDialog/Content.tsx
+++ b/src/components/UserProfile/DropdownActions/EditProfileDialog/Content.tsx
@@ -19,6 +19,7 @@ import {
   LanguageContext,
   Translate,
   useMutation,
+  ViewerContext,
 } from '~/components'
 import {
   EditProfileDialogUserPrivateFragment,
@@ -78,6 +79,8 @@ const EditProfileDialogContent: React.FC<FormProps> = ({
     { showToast: false }
   )
   const { lang } = useContext(LanguageContext)
+  const viewer = useContext(ViewerContext)
+  const isAdmin = viewer.status?.role === 'admin'
 
   const formId = 'edit-profile-form'
 
@@ -117,7 +120,7 @@ const EditProfileDialogContent: React.FC<FormProps> = ({
     },
     validate: ({ displayName, description }) =>
       _pickBy({
-        displayName: validateDisplayName(displayName, lang),
+        displayName: validateDisplayName(displayName, lang, isAdmin),
         description: validateDescription(description, lang),
       }),
     onSubmit: async (

From 84eaa8b9817a4f33ab1bcead195716c047074218 Mon Sep 17 00:00:00 2001
From: robertu <4065233+robertu7@users.noreply.github.com>
Date: Tue, 21 Feb 2023 16:27:02 +0700
Subject: [PATCH 3/7] fix(providers): remove public providers

---
 src/common/utils/wallet.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/common/utils/wallet.ts b/src/common/utils/wallet.ts
index 815fc5d145..6d186d1b6b 100644
--- a/src/common/utils/wallet.ts
+++ b/src/common/utils/wallet.ts
@@ -3,7 +3,6 @@ import { goerli, mainnet, polygon, polygonMumbai } from 'wagmi/chains'
 import { MetaMaskConnector } from 'wagmi/connectors/metaMask'
 import { WalletConnectConnector } from 'wagmi/connectors/walletConnect'
 import { alchemyProvider } from 'wagmi/providers/alchemy'
-import { publicProvider } from 'wagmi/providers/public'
 
 import { WalletErrorType } from '~/common/enums'
 
@@ -21,7 +20,7 @@ const defaultChains: Chain[] = isProd
 
 export const { provider: wagmiProvider, chains } = configureChains(
   defaultChains,
-  [alchemyProvider({ apiKey: alchemyId }), publicProvider()]
+  [alchemyProvider({ apiKey: alchemyId })]
 )
 
 export const wagmiClient = createClient({

From d185f65747220e1bbab7dcc0faca827713cb4113 Mon Sep 17 00:00:00 2001
From: robertu <4065233+robertu7@users.noreply.github.com>
Date: Tue, 21 Feb 2023 19:50:01 +0700
Subject: [PATCH 4/7] fix(user): fetch `subscribedCircles` on <UserTabs>

---
 src/components/Forms/WalletAuthForm/Select.tsx    |  3 ++-
 src/views/User/Articles/UserArticles.tsx          | 15 ++++++---------
 src/views/User/Articles/gql.ts                    |  3 ---
 src/views/User/Comments/UserComments.tsx          |  9 ++++-----
 src/views/User/Comments/gql.ts                    |  3 ---
 .../User/Subscriptions/UserSubscriptions.tsx      |  2 +-
 src/views/User/Tags/UserTags.tsx                  | 11 +++++------
 src/views/User/UserTabs/gql.ts                    | 12 ++++++++++++
 src/views/User/UserTabs/index.tsx                 | 15 ++++++++++-----
 9 files changed, 40 insertions(+), 33 deletions(-)
 create mode 100644 src/views/User/UserTabs/gql.ts

diff --git a/src/components/Forms/WalletAuthForm/Select.tsx b/src/components/Forms/WalletAuthForm/Select.tsx
index f5d0e7c3d9..e8ea3c62e0 100644
--- a/src/components/Forms/WalletAuthForm/Select.tsx
+++ b/src/components/Forms/WalletAuthForm/Select.tsx
@@ -223,7 +223,8 @@ const Select: React.FC<FormProps> = ({
               >
                 <FormattedMessage
                   defaultMessage="Install MetaMask"
-                  description="src/components/Forms/WalletAuthForm/Select.tsx" />
+                  description="src/components/Forms/WalletAuthForm/Select.tsx"
+                />
               </TextIcon>
             }
             htmlHref={EXTERNAL_LINKS.METAMASK}
diff --git a/src/views/User/Articles/UserArticles.tsx b/src/views/User/Articles/UserArticles.tsx
index f3a95433c7..30b089c277 100644
--- a/src/views/User/Articles/UserArticles.tsx
+++ b/src/views/User/Articles/UserArticles.tsx
@@ -75,9 +75,7 @@ const UserArticles = () => {
   const { data, loading, error, fetchMore, client } =
     usePublicQuery<UserArticlesPublicQuery>(
       query,
-      {
-        variables: { userName },
-      },
+      { variables: { userName } },
       { publicQuery }
     )
 
@@ -85,7 +83,6 @@ const UserArticles = () => {
   const connectionPath = 'user.articles'
   const user = data?.user
   const { edges, pageInfo } = user?.articles || {}
-  const hasSubscriptions = (user?.subscribedCircles.totalCount || 0) > 0
 
   // private data
   const loadPrivate = (publicData?: UserArticlesPublicQuery) => {
@@ -134,7 +131,7 @@ const UserArticles = () => {
   if (loading) {
     return (
       <>
-        <UserTabs hasSubscriptions={hasSubscriptions} />
+        <UserTabs />
         <Spinner />
       </>
     )
@@ -143,7 +140,7 @@ const UserArticles = () => {
   if (error) {
     return (
       <>
-        <UserTabs hasSubscriptions={hasSubscriptions} />
+        <UserTabs />
         <QueryError error={error} />
       </>
     )
@@ -152,7 +149,7 @@ const UserArticles = () => {
   if (!user || user?.status?.state === 'archived') {
     return (
       <>
-        <UserTabs hasSubscriptions={hasSubscriptions} />
+        <UserTabs />
         <EmptyArticle />
       </>
     )
@@ -203,7 +200,7 @@ const UserArticles = () => {
     return (
       <>
         <CustomHead />
-        <UserTabs hasSubscriptions={hasSubscriptions} />
+        <UserTabs />
         <EmptyArticle />
       </>
     )
@@ -217,7 +214,7 @@ const UserArticles = () => {
     <>
       <CustomHead />
 
-      <UserTabs hasSubscriptions={hasSubscriptions} />
+      <UserTabs />
 
       <ArticleSummaryInfo user={user} />
 
diff --git a/src/views/User/Articles/gql.ts b/src/views/User/Articles/gql.ts
index 979b548dd9..95dd1714c5 100644
--- a/src/views/User/Articles/gql.ts
+++ b/src/views/User/Articles/gql.ts
@@ -29,9 +29,6 @@ const fragment = gql`
         }
       }
     }
-    subscribedCircles(input: { first: 0 }) {
-      totalCount
-    }
     status {
       state
       articleCount
diff --git a/src/views/User/Comments/UserComments.tsx b/src/views/User/Comments/UserComments.tsx
index 420451766c..db2780549c 100644
--- a/src/views/User/Comments/UserComments.tsx
+++ b/src/views/User/Comments/UserComments.tsx
@@ -51,12 +51,11 @@ const UserComments = () => {
     variables: { userName },
   })
   const user = data?.user
-  const hasSubscriptions = (user?.subscribedCircles?.totalCount || 0) > 0
 
   if (loading) {
     return (
       <>
-        <UserTabs hasSubscriptions={hasSubscriptions} />
+        <UserTabs />
         <Spinner />
       </>
     )
@@ -65,7 +64,7 @@ const UserComments = () => {
   if (error) {
     return (
       <>
-        <UserTabs hasSubscriptions={hasSubscriptions} />
+        <UserTabs />
         <QueryError error={error} />
       </>
     )
@@ -74,7 +73,7 @@ const UserComments = () => {
   if (!user || user?.status?.state === 'archived') {
     return (
       <>
-        <UserTabs hasSubscriptions={hasSubscriptions} />
+        <UserTabs />
         <EmptyComment />
       </>
     )
@@ -92,7 +91,7 @@ const UserComments = () => {
         description={user.info.description}
         image={user.info.profileCover || IMAGE_LOGO_192.src}
       />
-      <UserTabs hasSubscriptions={hasSubscriptions} />
+      <UserTabs />
       <BaseUserComments user={user} />
     </>
   )
diff --git a/src/views/User/Comments/gql.ts b/src/views/User/Comments/gql.ts
index fd529f4c14..1b45e04e01 100644
--- a/src/views/User/Comments/gql.ts
+++ b/src/views/User/Comments/gql.ts
@@ -14,9 +14,6 @@ export const USER_ID = gql`
       status {
         state
       }
-      subscribedCircles(input: { first: 0 }) {
-        totalCount
-      }
     }
   }
 `
diff --git a/src/views/User/Subscriptions/UserSubscriptions.tsx b/src/views/User/Subscriptions/UserSubscriptions.tsx
index c15b705f24..3bf3d48a7d 100644
--- a/src/views/User/Subscriptions/UserSubscriptions.tsx
+++ b/src/views/User/Subscriptions/UserSubscriptions.tsx
@@ -134,7 +134,7 @@ const Subscriptions = () => {
     <>
       <CustomHead />
 
-      <UserTabs hasSubscriptions />
+      <UserTabs />
 
       <section className="subtitle">
         <Title type="feed" is="h2">
diff --git a/src/views/User/Tags/UserTags.tsx b/src/views/User/Tags/UserTags.tsx
index b765943aa3..7b63c2b162 100644
--- a/src/views/User/Tags/UserTags.tsx
+++ b/src/views/User/Tags/UserTags.tsx
@@ -43,7 +43,6 @@ const UserTags = () => {
   const user = data?.user
   const connectionPath = 'user.maintainedTags'
   const { edges, pageInfo } = user?.maintainedTags || {}
-  const hasSubscriptions = (user?.subscribedCircles.totalCount || 0) > 0
 
   // load next page
   const loadMore = async () => {
@@ -69,7 +68,7 @@ const UserTags = () => {
   if (loading) {
     return (
       <>
-        <UserTabs hasSubscriptions={hasSubscriptions} />
+        <UserTabs />
         <Spinner />
       </>
     )
@@ -78,7 +77,7 @@ const UserTags = () => {
   if (error) {
     return (
       <>
-        <UserTabs hasSubscriptions={hasSubscriptions} />
+        <UserTabs />
         <QueryError error={error} />
       </>
     )
@@ -87,7 +86,7 @@ const UserTags = () => {
   if (!user || user?.status?.state === 'archived') {
     return (
       <>
-        <UserTabs hasSubscriptions={hasSubscriptions} />
+        <UserTabs />
         <EmptyTag
           description={
             <Translate
@@ -134,7 +133,7 @@ const UserTags = () => {
     return (
       <>
         <CustomHead />
-        <UserTabs hasSubscriptions={hasSubscriptions} />
+        <UserTabs />
         <EmptyTag
           description={
             <Translate
@@ -153,7 +152,7 @@ const UserTags = () => {
     <>
       <CustomHead />
 
-      <UserTabs hasSubscriptions={hasSubscriptions} />
+      <UserTabs />
 
       <section className="container">
         <InfiniteScroll hasNextPage={pageInfo.hasNextPage} loadMore={loadMore}>
diff --git a/src/views/User/UserTabs/gql.ts b/src/views/User/UserTabs/gql.ts
new file mode 100644
index 0000000000..757e9cb573
--- /dev/null
+++ b/src/views/User/UserTabs/gql.ts
@@ -0,0 +1,12 @@
+import gql from 'graphql-tag'
+
+export const USER_TABS_PUBLIC = gql`
+  query UserTabsPublic($userName: String!) {
+    user(input: { userName: $userName }) {
+      id
+      subscribedCircles(input: { first: 0 }) {
+        totalCount
+      }
+    }
+  }
+`
diff --git a/src/views/User/UserTabs/index.tsx b/src/views/User/UserTabs/index.tsx
index a9ca805147..d208945407 100644
--- a/src/views/User/UserTabs/index.tsx
+++ b/src/views/User/UserTabs/index.tsx
@@ -1,14 +1,19 @@
 import { toPath } from '~/common/utils'
-import { Tabs, Translate, useRoute } from '~/components'
+import { Tabs, Translate, usePublicQuery, useRoute } from '~/components'
+import { UserTabsPublicQuery } from '~/gql/graphql'
 
-type UserTabsProps = {
-  hasSubscriptions?: boolean
-}
+import { USER_TAGS_PUBLIC } from '../Tags/gql'
 
-const UserTabs: React.FC<UserTabsProps> = ({ hasSubscriptions }) => {
+const UserTabs = () => {
   const { isInPath, getQuery } = useRoute()
   const userName = getQuery('name')
 
+  const { data } = usePublicQuery<UserTabsPublicQuery>(USER_TAGS_PUBLIC, {
+    variables: { userName },
+  })
+
+  const hasSubscriptions = (data?.user?.subscribedCircles.totalCount || 0) > 0
+
   const userSubscriptonsPath = toPath({
     page: 'userSubscriptons',
     userName,

From 70c90c891350f86e4c79af8773e29890733acbf1 Mon Sep 17 00:00:00 2001
From: robertu <4065233+robertu7@users.noreply.github.com>
Date: Wed, 22 Feb 2023 16:07:10 +0700
Subject: [PATCH 5/7] feat(auth): redirect authed user to homepage

---
 src/views/Auth/Universal/index.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/views/Auth/Universal/index.tsx b/src/views/Auth/Universal/index.tsx
index bd192936da..3dd19e3423 100644
--- a/src/views/Auth/Universal/index.tsx
+++ b/src/views/Auth/Universal/index.tsx
@@ -1,5 +1,7 @@
 import dynamic from 'next/dynamic'
+import { useContext, useEffect } from 'react'
 
+import { PATHS } from '~/common/enums'
 import {
   Head,
   Layout,
@@ -8,6 +10,7 @@ import {
   useRoute,
   useStep,
   VerificationLinkSent,
+  ViewerContext,
   WagmiProvider,
 } from '~/components'
 import { AuthResultType } from '~/gql/graphql'
@@ -61,7 +64,8 @@ type Step =
   | 'complete'
 
 const UniversalAuth = () => {
-  const { getQuery } = useRoute()
+  const viewer = useContext(ViewerContext)
+  const { getQuery, router } = useRoute()
   const email = getQuery('email')
   const code = getQuery('code')
   const displayName = getQuery('displayName')
@@ -72,6 +76,12 @@ const UniversalAuth = () => {
       : 'select-login-method'
   const { currStep, forward } = useStep<Step>(initStep)
 
+  useEffect(() => {
+    if (!viewer.id) return
+
+    router.push(PATHS.HOME)
+  }, [viewer.id])
+
   return (
     <Layout.Main smBgColor="grey-lighter">
       <Head title={{ id: 'authEntries' }} />

From da7a428bcf2aa9072f7205c8e88fb40f687a94ac Mon Sep 17 00:00:00 2001
From: robertu <4065233+robertu7@users.noreply.github.com>
Date: Thu, 23 Feb 2023 15:52:35 +0700
Subject: [PATCH 6/7] fix(icon): fix active search icon of <NavListItem>

---
 src/components/Layout/NavBar/NavListItem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Layout/NavBar/NavListItem.tsx b/src/components/Layout/NavBar/NavListItem.tsx
index 296fea6671..5da2bee002 100644
--- a/src/components/Layout/NavBar/NavListItem.tsx
+++ b/src/components/Layout/NavBar/NavListItem.tsx
@@ -39,10 +39,10 @@ const NavListItem = ({
         {...props}
         onClick={onClick}
       >
+        {active ? activeIcon : icon}
         <VisuallyHidden>
           <span>{name}</span>
         </VisuallyHidden>
-        {active ? activeIcon : icon}
       </Button>
 
       <style jsx>{styles}</style>

From 155afb6a41c70cd9a18d50dca5f4eacc2ee83ac5 Mon Sep 17 00:00:00 2001
From: xdj <xudongjie@laixi.pro>
Date: Thu, 23 Feb 2023 17:56:12 +0800
Subject: [PATCH 7/7] chore(release): v4.17.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index f8c44d6a01..4da5536251 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "matters-web",
-  "version": "4.16.0",
+  "version": "4.17.0",
   "description": "codebase of Matters' website",
   "sideEffects": false,
   "author": "Matters <hi@matters.news>",