From b3a79ba686413df5bc9468ff5bbce814b04acb83 Mon Sep 17 00:00:00 2001
From: Aminejv <elouartinra@hotmail.com>
Date: Mon, 29 Nov 2021 08:40:21 +0100
Subject: [PATCH] feat(TextObjectPreview): cache file's fetched content

---
 components/core/MarkdownFrame.js                   | 13 ++++++++++---
 components/core/ObjectPreview/TextObjectPreview.js | 13 +++++++++++--
 components/core/SlateMediaObject.js                |  2 +-
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/components/core/MarkdownFrame.js b/components/core/MarkdownFrame.js
index c2339d46..70f8e68d 100644
--- a/components/core/MarkdownFrame.js
+++ b/components/core/MarkdownFrame.js
@@ -6,6 +6,7 @@ import * as Strings from "~/common/strings";
 import { css } from "@emotion/react";
 import { Markdown } from "~/components/system/components/Markdown";
 import { H1, H2, H3, H4, P1, UL, OL, LI, A } from "~/components/system/components/Typography";
+import { useCache, useIsomorphicLayoutEffect } from "~/common/hooks";
 
 const STYLES_ASSET = (theme) => css`
   padding: 120px calc(32px + 16px + 8px);
@@ -133,12 +134,18 @@ const STYLES_INTENT = (theme) => css`
   );
 `;
 
-export default function MarkdownFrame({ url, date }) {
-  const [content, setContent] = React.useState("");
+export default function MarkdownFrame({ cid, url, date }) {
+  const [cache, setCache] = useCache();
+  const cachedContent = cache[cid] || "";
+
+  const [content, setContent] = React.useState(cachedContent);
+
+  useIsomorphicLayoutEffect(() => {
+    if (cachedContent) return;
 
-  React.useEffect(() => {
     fetch(url).then(async (res) => {
       const content = await res.text();
+      setCache(content);
       setContent(content);
     });
   }, []);
diff --git a/components/core/ObjectPreview/TextObjectPreview.js b/components/core/ObjectPreview/TextObjectPreview.js
index 56066ba4..f8f0dcec 100644
--- a/components/core/ObjectPreview/TextObjectPreview.js
+++ b/components/core/ObjectPreview/TextObjectPreview.js
@@ -5,7 +5,7 @@ import * as Styles from "~/common/styles";
 import * as Utilities from "~/common/utilities";
 
 import { P3 } from "~/components/system";
-import { useIsomorphicLayoutEffect } from "~/common/hooks";
+import { useCache, useIsomorphicLayoutEffect } from "~/common/hooks";
 import { css } from "@emotion/react";
 
 import FilePlaceholder from "~/components/core/ObjectPreview/placeholders/File";
@@ -29,12 +29,21 @@ const STYLES_TEXT_PREVIEW = (theme) =>
   });
 
 export default function TextObjectPreview({ url, file, ...props }) {
-  const [{ content, error }, setState] = React.useState({ content: "", error: undefined });
+  const [cache, setCache] = useCache();
+  const cachedContent = cache[file.cid] || "";
+
+  const [{ content, error }, setState] = React.useState({
+    content: cachedContent,
+    error: undefined,
+  });
 
   useIsomorphicLayoutEffect(() => {
+    if (cachedContent) return;
+
     fetch(url)
       .then(async (res) => {
         const content = await res.text();
+        setCache({ key: file.cid, value: content });
         setState({ content });
       })
       .catch((e) => {
diff --git a/components/core/SlateMediaObject.js b/components/core/SlateMediaObject.js
index c01b2f78..602be0d8 100644
--- a/components/core/SlateMediaObject.js
+++ b/components/core/SlateMediaObject.js
@@ -198,7 +198,7 @@ export default class SlateMediaObject extends React.Component {
     }
 
     if (Validations.isMarkdown(file.filename, type)) {
-      return <MarkdownFrame date={file.createdAt} url={url} />;
+      return <MarkdownFrame date={file.createdAt} cid={file?.cid} url={url} />;
     }
 
     if (Validations.isPreviewableImage(type)) {