fix: fix atta box missing attachmentParams

SolidZORO · Jun 4, 2020 · ba160a2 · ba160a2
1 parent 6fdd9f6
commit ba160a2
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 28 deletions.
diff --git a/packages/leaa-dashboard/src/components/AttachmentBox/AttachmentBox.tsx b/packages/leaa-dashboard/src/components/AttachmentBox/AttachmentBox.tsx
@@ -21,7 +21,7 @@ interface IProps {
   attachments?: Attachment[];
   value?: number | undefined;
   onChange?: (checked: boolean) => void;
-  attachmentParams?: IAttachmentParams;
+  attachmentParams: IAttachmentParams;
   onSubmitCallback?: (v: any) => void;
   type?: 'list' | 'card';
   title?: React.ReactNode;
@@ -59,27 +59,25 @@ interface IProps {
 export const AttachmentBox = (props: IProps) => {
   const { t, i18n } = useTranslation();
 
-  const isAjaxCancelled = useRef(false);
-
   const type = props.type || 'list';
   const cardHeight = props.cardHeight || 230;
   const listHeight = props.listHeight || 130;
 
   const [attachments, setAttachments] = useState<Attachment[]>([]);
   const [listLoading, setListLoading] = useState(false);
-  const [attachmentParams, setAttachmentParams] = useState<IAttachmentParams>();
+  const [attachmentParams, setAttachmentParams] = useState<IAttachmentParams>(props.attachmentParams);
 
-  const onFetchList = () => {
-    if (!props.attachmentParams || !props.attachmentParams.moduleId) return;
+  const onFetchList = (attaParams: IAttachmentParams) => {
+    if (!attaParams || !attaParams.moduleId) return;
 
     setListLoading(true);
 
     const params: ICrudListQueryParams = {
       search: {
-        module_id: props.attachmentParams.moduleId,
-        module_name: props.attachmentParams.moduleName,
-        type_name: props.attachmentParams.typeName,
-        type_platform: props.attachmentParams.typePlatform,
+        module_id: attaParams.moduleId,
+        module_name: attaParams.moduleName,
+        type_name: attaParams.typeName,
+        type_platform: attaParams.typePlatform,
       },
       sort: [
         ['status', 'DESC'],
@@ -90,24 +88,18 @@ export const AttachmentBox = (props: IProps) => {
     ajax
       .get(`${envConfig.API_URL}/${envConfig.API_VERSION}/attachments`, { params: genCrudRequestQuery(params) })
       .then((res: IHttpRes<ICrudListRes<Attachment>>) => {
-        if (!isAjaxCancelled.current) {
-          setAttachments(_.orderBy(res.data.data.data, ['status', 'sort'], ['desc', 'asc']) || []);
-        }
+        setAttachments(_.orderBy(res.data.data.data, ['status', 'sort'], ['desc', 'asc']) || []);
       })
       .catch((err: IHttpError) => errorMsg(err.response?.data?.message || err.message))
-      .finally(() => !isAjaxCancelled.current && setListLoading(false));
+      .finally(() => setListLoading(false));
   };
 
   useEffect(() => {
-    if (props.attachmentParams?.moduleId && !attachmentParams) {
+    if (props.attachmentParams?.moduleId && !attachmentParams.moduleId) {
       setAttachmentParams(props.attachmentParams);
-      onFetchList();
+      onFetchList(props.attachmentParams);
     }
 
-    return () => {
-      isAjaxCancelled.current = true;
-    };
-
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.attachmentParams]);
 

diff --git a/...hboard/src/components/AttachmentBox/_components/AttachmentDropzone/AttachmentDropzone.tsx b/...hboard/src/components/AttachmentBox/_components/AttachmentDropzone/AttachmentDropzone.tsx
@@ -1,5 +1,5 @@
 import cx from 'classnames';
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
 import { PlusOutlined } from '@ant-design/icons';
 
@@ -13,7 +13,7 @@ import style from './style.module.less';
 
 interface IProps {
   value?: number | undefined;
-  attachmentParams?: IAttachmentParams;
+  attachmentParams: IAttachmentParams;
   onDropzoneAttasCallback?: (attachment: Attachment[]) => void;
   type?: 'list' | 'card';
   cardHeight?: number;
@@ -24,6 +24,8 @@ interface IProps {
 export const AttachmentDropzone = (props: IProps) => {
   const cardHeight = (props.type === 'card' && props.cardHeight) || undefined;
 
+  const [attachmentParams, setAttachmentParams] = useState<IAttachmentParams>(props.attachmentParams);
+
   const onUploadFileList = async (fileList: File[]) => {
     const signature = await getUploadSignature();
 
@@ -36,7 +38,7 @@ export const AttachmentDropzone = (props: IProps) => {
       // eslint-disable-next-line no-await-in-loop
       await uploadFile(file, {
         signature,
-        attachmentParams: props.attachmentParams,
+        attachmentParams,
         ignoreMsg: true,
         onCallback: {
           onUploadSuccess: (res: IHttpRes<Attachment>) => uploadeds.push(res.data.data),
@@ -48,11 +50,24 @@ export const AttachmentDropzone = (props: IProps) => {
   };
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  const onDrop = useCallback(async (acceptedFiles) => onUploadFileList(acceptedFiles), [props.attachments]);
+  const onDrop = useCallback(async (acceptedFiles) => onUploadFileList(acceptedFiles), [
+    props.attachments,
+    props.attachmentParams,
+  ]);
 
   const { getRootProps, getInputProps } = useDropzone({ onDrop, accept: 'image/*' });
   const isEmpty = props.attachments && props.attachments.length === 0;
 
+  useEffect(() => {
+    if (props.attachmentParams?.moduleId && !attachmentParams.moduleId) {
+      setAttachmentParams(props.attachmentParams);
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.attachmentParams]);
+
+  // console.log(attachmentParams);
+
   return (
     <div
       {...getRootProps()}

diff --git a/packages/leaa-dashboard/src/components/SelectCategoryIdByTree/SelectCategoryIdByTree.tsx b/packages/leaa-dashboard/src/components/SelectCategoryIdByTree/SelectCategoryIdByTree.tsx
@@ -46,7 +46,7 @@ export const SelectCategoryIdByTree = (props: IProps) => {
         if (!isAjaxCancelled.current) setTree(res.data?.data);
       })
       .catch((err: IHttpError) => errorMsg(err.response?.data?.message || err.message))
-      .finally(() => !isAjaxCancelled.current && setTreeLoading(false));
+      .finally(() => setTreeLoading(false));
   };
 
   const onChange = (v?: string | string[] | null) => {

diff --git a/packages/leaa-dashboard/src/components/TagSearchBox/TagSearchBox.tsx b/packages/leaa-dashboard/src/components/TagSearchBox/TagSearchBox.tsx
@@ -62,7 +62,7 @@ export const TagSearchBox = forwardRef((props: IProps, ref: React.Ref<any>) => {
         // console.log(err.response?.data?.message || err.message);
         errorMsg(err.response?.data?.message || err.message);
       })
-      .finally(() => !isAjaxCancelled.current && setLoading(false));
+      .finally(() => setLoading(false));
   };
 
   // eslint-disable-next-line react-hooks/exhaustive-deps

diff --git a/packages/leaa-dashboard/src/utils/attachment.util.tsx b/packages/leaa-dashboard/src/utils/attachment.util.tsx
@@ -25,8 +25,6 @@ export const getUploadSignature = async () => {
   return ajax
     .get(`${envConfig.API_URL}/${envConfig.API_VERSION}/attachments/signature`)
     .then((res: IHttpRes<ISignatureResult>) => {
-      console.log(res.data.data);
-
       if (res.data?.data && !_.isEmpty(res.data.data)) return res.data.data;
 
       return undefined;