refactor: expired file message

src/components/FileBox/index.tsx

@@ -1,7 +1,8 @@
-import { FC, ReactElement } from "react";
+import { FC, ReactElement, useEffect, useState } from "react";
 import clsx from "clsx";
 
 import { useAppSelector } from "@/app/store";
+import useExpiredResMap from "@/hooks/useExpiredResMap";
 import { formatBytes, fromNowTime, getFileIcon } from "@/utils";
 import IconDownload from "@/assets/icons/download.svg";
 import {
@@ -79,11 +80,36 @@ const FileBox: FC<Props> = ({
   from_uid,
   content
 }) => {
+  const [fetchError, setFetchError] = useState(false);
+  const { isExpired, setExpired } = useExpiredResMap();
   const fromUser = useAppSelector((store) => store.users.byId[from_uid]);
   const icon = getFileIcon(file_type, name, "icon w-9 h-12");
-  if (!content || !name) return null;
+  const expired = isExpired(content);
+  useEffect(() => {
+    const tryFetch = async (url: string) => {
+      try {
+        let statusNum = (await fetch(url)).status;
+        if (statusNum >= 400) {
+          setFetchError(true);
+        }
+      } catch (e) {
+        setFetchError(true);
+      }
+    };
+    if (!expired && content) {
+      tryFetch(content);
+    }
+  }, [content, expired]);
+  useEffect(() => {
+    if (fetchError) {
+      setExpired(content);
+    }
+  }, [fetchError, content]);
+
+  if (!content || expired || fetchError) return null;
+
   const previewContent = renderPreview({ file_type, content, name });
-  const withPreview = preview && previewContent;
+  const withPreview = preview && previewContent && !fetchError && !expired;
 
   return (
     <div