check language for deciding which viewer to see

scm-ui/src/repos/sources/components/content/SourcecodeViewer.js

@@ -10,12 +10,11 @@ import { arduinoLight } from "react-syntax-highlighter/styles/hljs";
 type Props = {
   t: string => string,
   file: File,
-  contentType: string
+  language: string
 };
 
 type State = {
   content: string,
-  language: string,
   error: Error,
   hasError: boolean,
   loaded: boolean
@@ -27,7 +26,6 @@ class SourcecodeViewer extends React.Component<Props, State> {
 
     this.state = {
       content: "",
-      language: "",
       error: new Error(),
       hasError: false,
       loaded: false
@@ -36,22 +34,6 @@ class SourcecodeViewer extends React.Component<Props, State> {
 
   componentDidMount() {
     const { file } = this.props;
-    getProgrammingLanguage(file._links.self.href)
-      .then(result => {
-        if (result.error) {
-          this.setState({
-            ...this.state,
-            hasError: true,
-            error: result.error
-          });
-        } else {
-          this.setState({
-            ...this.state,
-            language: result.language
-          });
-        }
-      })
-      .catch(err => {});
     getContent(file._links.self.href)
       .then(result => {
         if (result.error) {
@@ -77,7 +59,7 @@ class SourcecodeViewer extends React.Component<Props, State> {
     const error = this.state.error;
     const hasError = this.state.hasError;
     const loaded = this.state.loaded;
-    const language = this.state.language;
+    const language = this.props.language;
 
     if (hasError) {
       return <ErrorNotification error={error} />;
@@ -107,17 +89,6 @@ export function getLanguage(language: string) {
   return language.toLowerCase();
 }
 
-export function getProgrammingLanguage(url: string) {
-  return apiClient
-    .head(url)
-    .then(response => {
-      return { language: response.headers.get("X-Programming-Language") };
-    })
-    .catch(err => {
-      return { error: err };
-    });
-}
-
 export function getContent(url: string) {
   return apiClient
     .get(url)

scm-ui/src/repos/sources/components/content/SourcecodeViewer.test.js

@@ -2,8 +2,7 @@
 import fetchMock from "fetch-mock";
 import {
   getContent,
-  getLanguage,
-  getProgrammingLanguage
+  getLanguage
 } from "./SourcecodeViewer";
 
 describe("get content", () => {
@@ -22,21 +21,6 @@ describe("get content", () => {
       done();
     });
   });
-
-  it("should return language", done => {
-    let headers = {
-      "X-Programming-Language": "JAVA"
-    };
-
-    fetchMock.head("/api/v2" + CONTENT_URL, {
-      headers
-    });
-
-    getProgrammingLanguage(CONTENT_URL).then(content => {
-      expect(content.language).toBe("JAVA");
-      done();
-    });
-  });
 });
 
 describe("get correct language type", () => {

scm-ui/src/repos/sources/containers/Content.js

@@ -33,8 +33,10 @@ type Props = {
 
 type State = {
   contentType: string,
+  language: string,
   error: Error,
-  hasError: boolean
+  hasError: boolean,
+  loaded: boolean
 };
 
 const styles = {
@@ -49,8 +51,10 @@ class Content extends React.Component<Props, State> {
 
     this.state = {
       contentType: "",
+      language: "",
       error: new Error(),
-      hasError: false
+      hasError: false,
+      loaded: false
     };
   }
 
@@ -62,12 +66,15 @@ class Content extends React.Component<Props, State> {
           this.setState({
             ...this.state,
             hasError: true,
-            error: result.error
+            error: result.error,
+            loaded: true
           });
         } else {
           this.setState({
             ...this.state,
-            contentType: result.type
+            contentType: result.type,
+            language: result.language,
+            loaded: true
           });
         }
       })
@@ -108,17 +115,15 @@ class Content extends React.Component<Props, State> {
   }
 
   showContent() {
-    const { file, revision } = this.props;
+    const { file } = this.props;
     const contentType = this.state.contentType;
-    if (contentType.startsWith("image")) {
+    const language = this.state.language;
+    if (contentType.startsWith("image/")) {
       return <ImageViewer file={file} />;
-    } else if (
-      contentType.startsWith("text") ||
-      contentType.startsWith("application")
-    ) {
-      return <SourcecodeViewer file={file} contentType={contentType} />;
+    } else if (language) {
+      return <SourcecodeViewer file={file} language={language}/>;
     } else {
-      return <DownloadViewer file={file} revision={revision} />;
+      return <DownloadViewer file={file} />;
     }
   }
 
@@ -126,8 +131,9 @@ class Content extends React.Component<Props, State> {
     const { file, classes } = this.props;
     const error = this.state.error;
     const hasError = this.state.hasError;
+    const loaded = this.state.loaded;
 
-    if (!file) {
+    if (!file || !loaded) {
       return <Loading />;
     }
     if (hasError) {
@@ -159,7 +165,10 @@ export function getContentType(url: string, state: any) {
   return apiClient
     .head(url)
     .then(response => {
-      return { type: response.headers.get("Content-Type") };
+      return {
+        type: response.headers.get("Content-Type"),
+        language: response.headers.get("X-Programming-Language")
+      };
     })
     .catch(err => {
       return { error: err };

scm-ui/src/repos/sources/containers/Content.test.js

@@ -12,7 +12,8 @@ describe("get content type", () => {
 
   it("should return content", done => {
     let headers = {
-      "Content-Type": "application/text"
+      "Content-Type": "application/text",
+      "X-Programming-Language": "JAVA"
     };
 
     fetchMock.head("/api/v2" + CONTENT_URL, {
@@ -21,6 +22,7 @@ describe("get content type", () => {
 
     getContentType(CONTENT_URL).then(content => {
       expect(content.type).toBe("application/text");
+      expect(content.language).toBe("JAVA");
       done();
     });
   });