Avoid refetch of markdown content (#1823)

* Update react-query to 3.25.1
* Avoid refetching of markdown content on toggle between source and md view

gradle/changelog/mdcontent.yaml

@@ -0,0 +1,2 @@
+- type: Fixed
+  description: Refetching of content on switching between source and md view ([#1823](https://github.com/scm-manager/scm-manager/pull/1823))

scm-ui/ui-api/package.json

@@ -30,7 +30,7 @@
     "gitdiff-parser": "^0.1.2",
     "query-string": "5",
     "react": "^17.0.1",
-    "react-query": "^3.12.2"
+    "react-query": "^3.25.1"
   },
   "babel": {
     "presets": [

scm-ui/ui-webapp/src/repos/sources/components/content/MarkdownViewer.tsx

@@ -22,36 +22,18 @@
  * SOFTWARE.
  */
 import React, { FC } from "react";
-import { File } from "@scm-manager/ui-types";
-import { ErrorNotification, Loading, MarkdownView } from "@scm-manager/ui-components";
-import replaceBranchWithRevision from "../../ReplaceBranchWithRevision";
-import { useLocation } from "react-router-dom";
-import { useFileContent } from "@scm-manager/ui-api";
+import { MarkdownView } from "@scm-manager/ui-components";
 
 type Props = {
-  file: File;
+  content: string;
+  permalink: string;
   basePath: string;
 };
 
-const MarkdownViewer: FC<Props> = ({ file, basePath }) => {
-  const { isLoading, error, data: content } = useFileContent(file);
-  const location = useLocation();
-
-  if (!content || isLoading) {
-    return <Loading />;
-  }
-
-  if (error) {
-    return <ErrorNotification error={error} />;
-  }
-
-  const permalink = replaceBranchWithRevision(location.pathname, file.revision);
-
-  return (
-    <div className="p-2">
-      <MarkdownView content={content} basePath={basePath} permalink={permalink} enableAnchorHeadings={true} />
-    </div>
-  );
-};
+const MarkdownViewer: FC<Props> = ({ content, basePath, permalink }) => (
+  <div className="p-2">
+    <MarkdownView content={content} basePath={basePath} permalink={permalink} enableAnchorHeadings={true} />
+  </div>
+);
 
 export default MarkdownViewer;

scm-ui/ui-webapp/src/repos/sources/components/content/SwitchableMarkdownViewer.tsx

@@ -24,10 +24,12 @@
 import React, { FC, useState } from "react";
 import styled from "styled-components";
 import MarkdownViewer from "./MarkdownViewer";
-import SourcecodeViewer from "./SourcecodeViewer";
 import { File } from "@scm-manager/ui-types";
-import { Button } from "@scm-manager/ui-components";
+import { Button, ErrorNotification, Loading, SyntaxHighlighter } from "@scm-manager/ui-components";
 import { useTranslation } from "react-i18next";
+import { useFileContent } from "@scm-manager/ui-api";
+import replaceBranchWithRevision from "../../ReplaceBranchWithRevision";
+import { useLocation } from "react-router-dom";
 
 const ToggleButton = styled(Button)`
   max-width: 1rem;
@@ -43,13 +45,24 @@ type Props = {
 };
 
 const SwitchableMarkdownViewer: FC<Props> = ({ file, basePath }) => {
+  const { isLoading, error, data: content } = useFileContent(file);
   const { t } = useTranslation("repos");
+  const location = useLocation();
   const [renderMarkdown, setRenderMarkdown] = useState(true);
 
   const toggleMarkdown = () => {
     setRenderMarkdown(!renderMarkdown);
   };
 
+  if (isLoading) {
+    return <Loading />;
+  }
+  if (error) {
+    return <ErrorNotification error={error} />;
+  }
+
+  const permalink = replaceBranchWithRevision(location.pathname, file.revision);
+
   return (
     <div className="is-relative">
       <ToggleButton
@@ -64,9 +77,9 @@ const SwitchableMarkdownViewer: FC<Props> = ({ file, basePath }) => {
         <i className="fab fa-markdown" />
       </ToggleButton>
       {renderMarkdown ? (
-        <MarkdownViewer file={file} basePath={basePath} />
+        <MarkdownViewer content={content || ""} basePath={basePath} permalink={permalink} />
       ) : (
-        <SourcecodeViewer file={file} language={"MARKDOWN"} />
+        <SyntaxHighlighter language="MARKDOWN" value={content || ""} permalink={permalink} />
       )}
     </div>
   );

yarn.lock

@@ -16437,10 +16437,10 @@ react-popper@^2.2.4:
     react-fast-compare "^3.0.1"
     warning "^4.0.2"
 
-react-query@^3.12.2:
-  version "3.16.0"
-  resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.16.0.tgz#8de1556aabb3d200d0f8eeb74ce2b0b3dd0a0a51"
-  integrity sha512-YOvI8mO9WG+r4XsyJinjlDMiV5IewUWUcTv2J7z6bIP3KOFvgT6k6HM8vQouz4hPnme7Ktq9j5e7LarUqgJXFQ==
+react-query@^3.25.1:
+  version "3.25.1"
+  resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.25.1.tgz#221ff17406518a7689378dcbbdc986b0ba2c3919"
+  integrity sha512-tGZkap921d9dJD2F8+NpEu3djLRP+tpZKHKhQvqUMYMfWT5R18iRtGAG5ZeUMlRKuhzNaZx3cHiYj3DsyZ1SWw==
   dependencies:
     "@babel/runtime" "^7.5.5"
     broadcast-channel "^3.4.1"
@@ -20060,8 +20060,10 @@ watchpack@^1.7.4:
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.7.5.tgz#1267e6c55e0b9b5be44c2023aed5437a2c26c453"
   integrity sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==
   dependencies:
+    chokidar "^3.4.1"
     graceful-fs "^4.1.2"
     neo-async "^2.5.0"
+    watchpack-chokidar2 "^2.0.1"
   optionalDependencies:
     chokidar "^3.4.1"
     watchpack-chokidar2 "^2.0.1"