From 37bad5fd950bbe94c044e86012bc95a7ae31ad74 Mon Sep 17 00:00:00 2001
From: Eduard Heimbuch <eduard.heimbuch@cloudogu.com>
Date: Wed, 17 Jun 2020 11:44:21 +0200
Subject: [PATCH] fix race condition in annotate view

---
 .../src/repos/annotate/Annotate.tsx           |  2 +-
 scm-ui/ui-types/src/Annotate.ts               |  2 +-
 .../repos/sources/containers/AnnotateView.tsx | 36 +++++++++----------
 .../repos/sources/containers/contentType.ts   | 16 ++++-----
 4 files changed, 27 insertions(+), 29 deletions(-)

diff --git a/scm-ui/ui-components/src/repos/annotate/Annotate.tsx b/scm-ui/ui-components/src/repos/annotate/Annotate.tsx
index b7a67a6d8d..ab1cc69696 100644
--- a/scm-ui/ui-components/src/repos/annotate/Annotate.tsx
+++ b/scm-ui/ui-components/src/repos/annotate/Annotate.tsx
@@ -144,7 +144,7 @@ const Annotate: FC<Props> = ({ source, repository, baseDate }) => {
       {popover}
       <ReactSyntaxHighlighter
         showLineNumbers={false}
-        language={source.language}
+        language={source.language ? source.language : "text"}
         style={arduinoLight}
         renderer={defaultRenderer}
       >
diff --git a/scm-ui/ui-types/src/Annotate.ts b/scm-ui/ui-types/src/Annotate.ts
index b1c09ba49b..b7d64e45da 100644
--- a/scm-ui/ui-types/src/Annotate.ts
+++ b/scm-ui/ui-types/src/Annotate.ts
@@ -26,7 +26,7 @@ import { Person } from "./Person";
 
 export type AnnotatedSource = {
   lines: AnnotatedLine[];
-  language: string;
+  language?: string;
 };
 
 export type AnnotatedLine = {
diff --git a/scm-ui/ui-webapp/src/repos/sources/containers/AnnotateView.tsx b/scm-ui/ui-webapp/src/repos/sources/containers/AnnotateView.tsx
index c48925d1c7..de9954ba44 100644
--- a/scm-ui/ui-webapp/src/repos/sources/containers/AnnotateView.tsx
+++ b/scm-ui/ui-webapp/src/repos/sources/containers/AnnotateView.tsx
@@ -33,37 +33,35 @@ type Props = {
 };
 
 const AnnotateView: FC<Props> = ({ file, repository }) => {
-  const [annotation, setAnnotation] = useState<AnnotatedSource>(undefined);
-  const [error, setError] = useState<Error | undefined>(undefined);
+  const [annotation, setAnnotation] = useState<AnnotatedSource | undefined>(undefined);
   const [language, setLanguage] = useState<string | undefined>(undefined);
+  const [error, setError] = useState<Error | undefined>(undefined);
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    getContentType(file._links.self.href)
-      .then(result => {
-        setLanguage(result.language);
-      })
-      .catch(error => {
-        setError(error);
-      });
+    const languagePromise = getContentType((file._links.self as Link).href).then(result =>
+      setLanguage(result.language)
+    );
 
-    apiClient
+    const apiClientPromise = apiClient
       .get((file._links.annotate as Link).href)
       .then(response => response.json())
-      .then(content => {
-        setAnnotation(content);
-      })
-      .catch(error => {
-        setError(error);
-      });
+      .then(setAnnotation);
+
+    Promise.all([languagePromise, apiClientPromise])
+      .then(() => setLoading(false))
+      .catch(setError);
   }, [file]);
 
   if (error) {
     return <ErrorNotification error={error} />;
-  } else if (annotation && language) {
-    return <Annotate source={{ ...annotation, language }} repository={repository} />;
-  } else {
+  }
+
+  if (!annotation || loading) {
     return <Loading />;
   }
+
+  return <Annotate source={{ ...annotation, language }} repository={repository} />;
 };
 
 export default AnnotateView;
diff --git a/scm-ui/ui-webapp/src/repos/sources/containers/contentType.ts b/scm-ui/ui-webapp/src/repos/sources/containers/contentType.ts
index 121b979289..62926ac5e0 100644
--- a/scm-ui/ui-webapp/src/repos/sources/containers/contentType.ts
+++ b/scm-ui/ui-webapp/src/repos/sources/containers/contentType.ts
@@ -24,18 +24,18 @@
 
 import { apiClient } from "@scm-manager/ui-components";
 
-export function getContentType(url: string) {
+export type ContentType = {
+  type : string;
+  language?: string;
+}
+
+export function getContentType(url: string) : Promise<ContentType> {
   return apiClient
     .head(url)
     .then(response => {
       return {
-        type: response.headers.get("Content-Type"),
-        language: response.headers.get("X-Programming-Language")
+        type: response.headers.get("Content-Type") || "application/octet-stream",
+        language: response.headers.get("X-Programming-Language") || undefined
       };
     })
-    .catch(err => {
-      return {
-        error: err
-      };
-    });
 }