Merge pull request #3084 from thematters/fix/revise-article-rediretion

fix(article): revise article settings wont redirect to article page;
thematters · Jan 13, 2023 · 278efa6 · 278efa6 · vercel · Jan 13, 2023
2 parents e340edd + be5e51d
commit 278efa6
Show file tree

Hide file tree

Showing 10 changed files with 121 additions and 75 deletions.
diff --git a/src/components/Dialogs/LikeCoinDialog/SetupLikeCoin/Binding/index.tsx b/src/components/Dialogs/LikeCoinDialog/SetupLikeCoin/Binding/index.tsx
@@ -1,6 +1,6 @@
 import { useQuery } from '@apollo/react-hooks'
 import gql from 'graphql-tag'
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
 
 import { Dialog, Spinner, Translate } from '~/components'
 import { ViewerLikerIdQuery } from '~/gql/graphql'
@@ -23,15 +23,22 @@ const VIEWER_LIKER_ID = gql`
 `
 
 const Binding: React.FC<Props> = ({ prevStep, nextStep, windowRef }) => {
-  const [polling, setPolling] = useState(true)
-  const { data, error } = useQuery<ViewerLikerIdQuery>(VIEWER_LIKER_ID, {
-    pollInterval: polling ? 1000 : undefined,
-    errorPolicy: 'none',
-    fetchPolicy: 'network-only',
-    skip: typeof window === 'undefined',
-  })
+  const { data, error, startPolling, stopPolling } =
+    useQuery<ViewerLikerIdQuery>(VIEWER_LIKER_ID, {
+      errorPolicy: 'none',
+      fetchPolicy: 'network-only',
+      skip: typeof window === 'undefined',
+    })
   const likerId = data?.viewer?.liker.likerId
 
+  useEffect(() => {
+    startPolling(1000)
+
+    return () => {
+      stopPolling()
+    }
+  }, [])
+
   useEffect(() => {
     if (likerId) {
       nextStep()
@@ -44,7 +51,7 @@ const Binding: React.FC<Props> = ({ prevStep, nextStep, windowRef }) => {
     }
 
     if (error) {
-      setPolling(false)
+      stopPolling()
     }
   })
 

diff --git a/src/components/Forms/PaymentForm/ConnectStripeAccount/Onboarding.tsx b/src/components/Forms/PaymentForm/ConnectStripeAccount/Onboarding.tsx
@@ -1,6 +1,6 @@
 import { useQuery } from '@apollo/react-hooks'
 import gql from 'graphql-tag'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 
 import { Dialog, Spinner, Translate } from '~/components'
 import { ViewerStripeAccountQuery } from '~/gql/graphql'
@@ -25,17 +25,24 @@ const VIEWER_STRIPE_ACCOUNT = gql`
 
 const Onboarding: React.FC<Props> = ({ nextStep }) => {
   const [polling, setPolling] = useState(true)
-  const { data, error } = useQuery<ViewerStripeAccountQuery>(
-    VIEWER_STRIPE_ACCOUNT,
-    {
-      pollInterval: polling ? 1000 : undefined,
+  const { data, error, startPolling, stopPolling } =
+    useQuery<ViewerStripeAccountQuery>(VIEWER_STRIPE_ACCOUNT, {
       errorPolicy: 'none',
       fetchPolicy: 'network-only',
       skip: typeof window === 'undefined',
-    }
-  )
+    })
   const stripeAccount = data?.viewer?.wallet.stripeAccount?.id
 
+  useEffect(() => {
+    if (polling) {
+      startPolling(1000)
+    }
+
+    return () => {
+      stopPolling()
+    }
+  }, [polling])
+
   if (stripeAccount) {
     nextStep()
     return null

diff --git a/src/components/Forms/PaymentForm/Processing/index.tsx b/src/components/Forms/PaymentForm/Processing/index.tsx
@@ -2,7 +2,7 @@ import { useQuery } from '@apollo/react-hooks'
 import { ethers } from 'ethers'
 import gql from 'graphql-tag'
 import _get from 'lodash/get'
-import { useContext, useEffect, useState } from 'react'
+import { useContext, useEffect } from 'react'
 import { useAccount, useContractWrite, useNetwork } from 'wagmi'
 
 import {
@@ -76,14 +76,13 @@ const OthersProcessingForm: React.FC<Props> = ({
   closeDialog,
   windowRef,
 }) => {
-  const [polling, setPolling] = useState(true)
-  const { data, error } = useQuery<ViewerTxStateQuery>(VIEWER_TX_STATE, {
-    variables: { id: txId },
-    pollInterval: polling ? 1000 : undefined,
-    errorPolicy: 'none',
-    fetchPolicy: 'network-only',
-    skip: typeof window === 'undefined',
-  })
+  const { data, error, startPolling, stopPolling } =
+    useQuery<ViewerTxStateQuery>(VIEWER_TX_STATE, {
+      variables: { id: txId },
+      errorPolicy: 'none',
+      fetchPolicy: 'network-only',
+      skip: typeof window === 'undefined',
+    })
   const txState = _get(data, 'viewer.wallet.transactions.edges.0.node.state')
 
   const succeededFn = () => {
@@ -101,19 +100,27 @@ const OthersProcessingForm: React.FC<Props> = ({
     }
   }
 
-  if (txState === 'succeeded') {
-    if (currency === CURRENCY.HKD) {
-      setTimeout(() => {
-        succeededFn()
-      }, 3 * 1000)
+  useEffect(() => {
+    if (error) {
+      stopPolling()
     } else {
-      succeededFn()
+      startPolling(1000)
     }
-  }
 
-  if (error) {
-    setPolling(false)
-  }
+    return () => {}
+  }, [error])
+
+  useEffect(() => {
+    if (txState === 'succeeded') {
+      if (currency === CURRENCY.HKD) {
+        setTimeout(() => {
+          succeededFn()
+        }, 3 * 1000)
+      } else {
+        succeededFn()
+      }
+    }
+  }, [txState])
 
   return (
     <>

diff --git a/src/components/Forms/PaymentForm/SubscribeCircle/Processing/index.tsx b/src/components/Forms/PaymentForm/SubscribeCircle/Processing/index.tsx
@@ -1,6 +1,5 @@
 import { useQuery } from '@apollo/react-hooks'
-import _get from 'lodash/get'
-import { useState } from 'react'
+import { useEffect } from 'react'
 
 import { Dialog, Spinner, Translate } from '~/components'
 import { ViewerCircleStateQuery } from '~/gql/graphql'
@@ -13,27 +12,30 @@ interface Props {
 }
 
 const Processing: React.FC<Props> = ({ circleName, nextStep }) => {
-  const [polling, setPolling] = useState(true)
-  const { data, error } = useQuery<ViewerCircleStateQuery>(
-    VIEWER_CIRLCE_STATE,
-    {
+  const { data, error, startPolling, stopPolling } =
+    useQuery<ViewerCircleStateQuery>(VIEWER_CIRLCE_STATE, {
       variables: { name: circleName },
-      pollInterval: polling ? 1000 : undefined,
       errorPolicy: 'none',
       fetchPolicy: 'network-only',
       skip: typeof window === 'undefined',
-    }
-  )
+    })
   const isMember = data?.circle?.isMember
 
-  if (isMember) {
-    nextStep()
-    return null
-  }
+  useEffect(() => {
+    if (error) {
+      stopPolling()
+    } else {
+      startPolling(1000)
+    }
 
-  if (error) {
-    setPolling(false)
-  }
+    return () => {}
+  }, [error])
+
+  useEffect(() => {
+    if (isMember) {
+      nextStep()
+    }
+  }, [isMember])
 
   return (
     <Dialog.Message type={error ? 'error' : undefined} spacing="md">

diff --git a/src/views/ArticleDetail/EditMode/Header/index.tsx b/src/views/ArticleDetail/EditMode/Header/index.tsx
@@ -52,7 +52,7 @@ const EditModeHeader = ({
   const diff = measureDiffs(initText || '', currText || '') || 0
   const diffCount = `${diff}`.padStart(2, '0')
   const isOverDiffLimit = diff > MAX_ARTICLE_REVISION_DIFF
-  const isRevised = diff > 0
+  const isContentRevised = diff > 0
 
   // save or republish
   const { tags, collection, circle, accessType, license } = restProps
@@ -69,21 +69,21 @@ const EditModeHeader = ({
           circle: circle ? circle.id : null,
           accessType,
           license,
-          ...(isRevised ? { content } : {}),
+          ...(isContentRevised ? { content } : {}),
           first: null,
           iscnPublish: restProps.iscnPublish,
         },
       })
 
-      if (!isRevised) {
+      if (!isContentRevised) {
         onSaved()
       }
     } catch (e) {
       window.dispatchEvent(
         new CustomEvent(ADD_TOAST, {
           detail: {
             color: 'red',
-            content: isRevised ? (
+            content: isContentRevised ? (
               <Translate
                 zh_hant="發布失敗"
                 zh_hans="發布失敗"
@@ -149,7 +149,7 @@ const EditModeHeader = ({
         saving={loading}
         disabled={loading}
         confirmButtonText={
-          isRevised ? (
+          isContentRevised ? (
             <Translate zh_hant="立即發布" zh_hans="立即发布" en="Publish" />
           ) : (
             <Translate
@@ -160,7 +160,7 @@ const EditModeHeader = ({
           )
         }
         cancelButtonText={<Translate id="cancel" />}
-        onConfirm={isRevised ? undefined : onSave}
+        onConfirm={isContentRevised ? undefined : onSave}
         ConfirmStepContent={ConfirmStepContent}
       >
         {({ openDialog: openEditorSettingsDialog }) => (

diff --git a/src/views/ArticleDetail/EditMode/PublishState/PendingState.tsx b/src/views/ArticleDetail/EditMode/PublishState/PendingState.tsx
@@ -1,4 +1,5 @@
 import { useQuery } from '@apollo/react-hooks'
+import { useEffect } from 'react'
 
 import { Toast, Translate } from '~/components'
 import { EditModeArticleDraftsQuery, EditModeArticleQuery } from '~/gql/graphql'
@@ -16,13 +17,23 @@ const PendingState = ({
   >[0]
   id: string
 }) => {
-  useQuery<EditModeArticleDraftsQuery>(EDIT_MODE_ARTICLE_DRAFTS, {
-    variables: { id },
-    pollInterval: 1000 * 2,
-    errorPolicy: 'none',
-    fetchPolicy: 'network-only',
-    skip: typeof window === 'undefined',
-  })
+  const { startPolling, stopPolling } = useQuery<EditModeArticleDraftsQuery>(
+    EDIT_MODE_ARTICLE_DRAFTS,
+    {
+      variables: { id },
+      errorPolicy: 'none',
+      fetchPolicy: 'network-only',
+      skip: typeof window === 'undefined',
+    }
+  )
+
+  useEffect(() => {
+    startPolling(1000 * 2)
+
+    return () => {
+      stopPolling()
+    }
+  }, [])
 
   return (
     <Toast.Instance

diff --git a/src/views/ArticleDetail/EditMode/PublishState/PublishedState.tsx b/src/views/ArticleDetail/EditMode/PublishState/PublishedState.tsx
@@ -70,7 +70,7 @@ const PublishedState = ({ article, draft, cancel }: Props) => {
         <Translate
           zh_hant="修訂作品已發佈"
           zh_hans="修订作品已发布"
-          en="Your work has been republished"
+          en="Article republished"
         />
       }
       footerButtons={
@@ -83,7 +83,7 @@ const PublishedState = ({ article, draft, cancel }: Props) => {
           <Translate
             zh_hant="查看修訂作品"
             zh_hans="查看修订作品"
-            en="view republished work"
+            en="View republished article"
           />
         </Dialog.Footer.Button>
       }

diff --git a/src/views/ArticleDetail/EditMode/PublishState/index.tsx b/src/views/ArticleDetail/EditMode/PublishState/index.tsx
@@ -35,7 +35,7 @@ const PublishState = ({
 }: Props) => {
   const isPending = draft.publishState === 'pending'
   const isPublished = draft.publishState === 'published'
-  const isValidHash = typeof draft.mediaHash === 'string' && draft.mediaHash
+  const isValidHash = typeof draft.mediaHash === 'string' && !!draft.mediaHash
 
   if (!isPending && !isPublished) {
     return null

diff --git a/src/views/ArticleDetail/index.tsx b/src/views/ArticleDetail/index.tsx
@@ -480,9 +480,10 @@ const ArticleDetail = ({
 
   const onEditSaved = async () => {
     setEditMode(false)
+    exitEditMode()
+
     await refetchPublic()
     loadPrivate()
-    exitEditMode()
   }
 
   useEffect(() => {

diff --git a/src/views/Me/DraftDetail/PublishState/PendingState.tsx b/src/views/Me/DraftDetail/PublishState/PendingState.tsx
@@ -1,4 +1,5 @@
 import { useQuery } from '@apollo/react-hooks'
+import { useEffect } from 'react'
 
 import { Toast, Translate } from '~/components'
 import DRAFT_PUBLISH_STATE from '~/components/GQL/queries/draftPublishState'
@@ -8,13 +9,23 @@ import {
 } from '~/gql/graphql'
 
 const PendingState = ({ draft }: { draft: PublishStateDraftFragment }) => {
-  useQuery<DraftPublishStateQuery>(DRAFT_PUBLISH_STATE, {
-    variables: { id: draft.id },
-    pollInterval: 1000 * 2,
-    errorPolicy: 'none',
-    fetchPolicy: 'network-only',
-    skip: typeof window === 'undefined',
-  })
+  const { startPolling, stopPolling } = useQuery<DraftPublishStateQuery>(
+    DRAFT_PUBLISH_STATE,
+    {
+      variables: { id: draft.id },
+      errorPolicy: 'none',
+      fetchPolicy: 'network-only',
+      skip: typeof window === 'undefined',
+    }
+  )
+
+  useEffect(() => {
+    startPolling(1000 * 2)
+
+    return () => {
+      stopPolling()
+    }
+  }, [])
 
   return (
     <Toast.Instance