Merge pull request #4816 from thematters/fix/article-cover-upload-bug

fix(ArticleDetail): update assets
thematters · Sep 2, 2024 · eecdd36 · eecdd36
2 parents 2b59215 + 9cd563b
commit eecdd36
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 11 deletions.
diff --git a/src/components/Editor/SetCover/Uploader.tsx b/src/components/Editor/SetCover/Uploader.tsx
@@ -10,7 +10,7 @@ import {
   ASSET_TYPE,
   ENTITY_TYPE,
 } from '~/common/enums'
-import { sleep, validateImage } from '~/common/utils'
+import { validateImage } from '~/common/utils'
 import {
   DraftDetailStateContext,
   Icon,
@@ -55,13 +55,14 @@ const Uploader: React.FC<UploaderProps> = ({
 
   const [upload, { loading }] = useMutation<DirectImageUploadMutation>(
     DIRECT_IMAGE_UPLOAD,
+    undefined,
+    { showToast: false }
+  )
+  const [directImageUploadDone] = useMutation<DirectImageUploadDoneMutation>(
+    DIRECT_IMAGE_UPLOAD_DONE,
     {
       update: async (cache, { data }) => {
         if (data?.directImageUpload) {
-          // FIXME: newly uploaded images will return 404 in a short time
-          // https://community.cloudflare.com/t/new-uploaded-images-need-about-10-min-to-display-in-my-website/121568
-          await sleep(300)
-
           updateDraftAssets({
             cache,
             id: entityId,
@@ -72,11 +73,6 @@ const Uploader: React.FC<UploaderProps> = ({
     },
     { showToast: false }
   )
-  const [directImageUploadDone] = useMutation<DirectImageUploadDoneMutation>(
-    DIRECT_IMAGE_UPLOAD_DONE,
-    undefined,
-    { showToast: false }
-  )
   const { upload: uploadImage, uploading } = useDirectImageUpload()
 
   const { isInPath } = useRoute()

diff --git a/src/views/ArticleDetail/Edit/index.tsx b/src/views/ArticleDetail/Edit/index.tsx
@@ -1,7 +1,7 @@
 import { useQuery } from '@apollo/react-hooks'
 import _omit from 'lodash/omit'
 import dynamic from 'next/dynamic'
-import { useContext, useState } from 'react'
+import { useContext, useEffect, useState } from 'react'
 
 import {
   ASSET_TYPE,
@@ -86,6 +86,10 @@ const BaseEdit = ({ article }: { article: Article }) => {
 
   // cover
   const [assets, setAssets] = useState(article.assets || [])
+
+  useEffect(() => {
+    setAssets(article.assets || [])
+  }, [article.assets])
   const [cover, setCover] = useState<AssetFragment | undefined>(
     assets.find((asset) => asset.path === article.cover)
   )