refs 120355: refactor

packages/remark-attachment-refs/src/client/components/AttachmentList.tsx

@@ -1,3 +1,5 @@
+import { useCallback } from 'react';
+
 import { IAttachmentHasId } from '@growi/core';
 import { Attachment } from '@growi/ui/dist/components/Attachment';
 
@@ -22,14 +24,14 @@ export const AttachmentList = ({
   error,
   attachments,
 }: Props): JSX.Element => {
-  const renderNoAttachmentsMessage = () => {
+  const renderNoAttachmentsMessage = useCallback(() => {
     let message;
 
     if (refsContext.options?.prefix != null) {
       message = `${refsContext.options.prefix} and descendant pages have no attachments`;
     }
     else {
-      message = `${refsContext.options?.pagePath} has no attachments`;
+      message = `${refsContext.pagePath} has no attachments`;
     }
 
     return (
@@ -40,9 +42,9 @@ export const AttachmentList = ({
         </small>
       </div>
     );
-  };
+  }, [refsContext]);
 
-  const renderContents = () => {
+  const renderContents = useCallback(() => {
     if (isLoading) {
       return (
         <div className="text-muted">
@@ -70,7 +72,7 @@ export const AttachmentList = ({
       : attachments.map((attachment) => {
         return <AttachmentLink key={attachment._id} attachment={attachment} inUse={false} />;
       });
-  };
+  }, [refsContext, isLoading, attachments]);
 
   return <div className={styles['attachment-refs']}>{renderContents()}</div>;
 

packages/remark-attachment-refs/src/client/components/ExtractedAttachments.tsx

@@ -56,7 +56,7 @@ export const ExtractedAttachments = React.memo(({
       imageClasses,
       imageStyles,
     };
-  }, []);
+  }, [refsContext]);
 
   const getClassesAndStylesForGrid = useCallback(() => {
     const { options } = refsContext;
@@ -83,7 +83,7 @@ export const ExtractedAttachments = React.memo(({
       imageClasses,
       imageStyles,
     };
-  }, []);
+  }, [refsContext]);
 
   /**
    * wrapper method for getClassesAndStylesForGrid/getClassesAndStylesForNonGrid
@@ -124,7 +124,7 @@ export const ExtractedAttachments = React.memo(({
         <img src={attachment.filePathProxied} alt={alt} className={imageClasses.join(' ')} style={imageStyles} />
       </div>
     );
-  }, []);
+  }, [refsContext]);
 
   const renderCarousel = useCallback(() => {
     const { options } = refsContext;
@@ -155,7 +155,7 @@ export const ExtractedAttachments = React.memo(({
         ) }
       </ModalGateway>
     );
-  }, []);
+  }, [refsContext]);
 
   const { options } = refsContext;
   const grid = options?.grid;

packages/remark-attachment-refs/src/client/stores/refs.tsx

@@ -4,7 +4,7 @@ import useSWR, { SWRResponse } from 'swr';
 
 export const useSWRxRef = (
     pagePath: string, fileNameOrId: string, isImmutable?: boolean,
-): SWRResponse<IAttachmentHasId, Error> => {
+): SWRResponse<IAttachmentHasId | null, Error> => {
   return useSWR(
     ['/_api/attachment-refs/ref', pagePath, fileNameOrId, isImmutable],
     ([endpoint, pagePath, fileNameOrId]) => {
@@ -13,7 +13,8 @@ export const useSWRxRef = (
           pagePath,
           fileNameOrId,
         },
-      }).then(result => result.data.attachment);
+      }).then(result => result.data.attachment)
+        .catch(() => null);
     },
     {
       keepPreviousData: true,