From 463a93553deedb6463e358551c83fe8b0cd137f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maren=20S=C3=BCwer?= <maren.suewer@cloudogu.com>
Date: Mon, 29 Oct 2018 09:32:30 +0100
Subject: [PATCH] refactoring content view

---
 .../components/content/DownloadViewer.js      | 38 ++-------
 .../src/repos/sources/containers/Content.js   | 77 +++++++++++++++----
 2 files changed, 69 insertions(+), 46 deletions(-)

diff --git a/scm-ui/src/repos/sources/components/content/DownloadViewer.js b/scm-ui/src/repos/sources/components/content/DownloadViewer.js
index d9a96fd886..b902c1f0b3 100644
--- a/scm-ui/src/repos/sources/components/content/DownloadViewer.js
+++ b/scm-ui/src/repos/sources/components/content/DownloadViewer.js
@@ -2,7 +2,7 @@
 import React from "react";
 import { translate } from "react-i18next";
 import type { File } from "@scm-manager/ui-types";
-import { DownloadButton, DateFromNow } from "@scm-manager/ui-components";
+import { DownloadButton } from "@scm-manager/ui-components";
 
 type Props = {
   t: string => string,
@@ -12,39 +12,13 @@ type Props = {
 
 class DownloadViewer extends React.Component<Props> {
   render() {
-    const { t, file, revision } = this.props;
+    const { t, file } = this.props;
     return (
       <div>
-        <article className="media">
-          <div className="content media-left">
-            <h4>{file.name}</h4>
-          </div>
-          <div className="media-content" />
-          <div className="media-right">
-            <DownloadButton
-              url={file._links.self.href}
-              displayName={t("sources.content.downloadButton")}
-            />
-          </div>
-        </article>
-        <table className="table">
-          <tbody>
-            <tr>
-              <td>{t("sources.description")}</td>
-              <td>{file.description}</td>
-            </tr>
-            <tr>
-              <td>{t("sources.lastModified")}</td>
-              <td>
-                <DateFromNow date={file.lastModified} />
-              </td>
-            </tr>
-            <tr>
-              <td>{t("sources.branch")}</td>
-              <td>{revision}</td>
-            </tr>
-          </tbody>
-        </table>
+        <DownloadButton
+          url={file._links.self.href}
+          displayName={t("sources.content.downloadButton")}
+        />
       </div>
     );
   }
diff --git a/scm-ui/src/repos/sources/containers/Content.js b/scm-ui/src/repos/sources/containers/Content.js
index 9506e637aa..68e02aece2 100644
--- a/scm-ui/src/repos/sources/containers/Content.js
+++ b/scm-ui/src/repos/sources/containers/Content.js
@@ -1,20 +1,23 @@
 // @flow
 import React from "react";
-import { translate } from "react-i18next";
+import { Interpolate, translate } from "react-i18next";
 import { apiClient } from "@scm-manager/ui-components";
 import { getSources } from "../modules/sources";
-import type {
-  Repository,
-  File
-} from "@scm-manager/ui-types";
+import type { Repository, File } from "@scm-manager/ui-types";
 import {
   ErrorNotification,
-  Loading
+  Loading,
+  DateFromNow
 } from "@scm-manager/ui-components";
 import { connect } from "react-redux";
 import ImageViewer from "../components/content/ImageViewer";
 import SourcecodeViewer from "../components/content/SourcecodeViewer";
 import DownloadViewer from "../components/content/DownloadViewer";
+import FileSize from "../components/FileSize";
+import AvatarWrapper from "../../components/changesets/AvatarWrapper";
+import classNames from "classnames";
+import AvatarImage from "../../components/changesets/AvatarImage";
+import ChangesetAuthor from "../../components/changesets/ChangesetAuthor";
 
 type Props = {
   t: string => string,
@@ -67,9 +70,47 @@ class Content extends React.Component<Props, State> {
       .catch(err => {});
   }
 
-  render() {
+  showHeader() {
+    const { file, revision, t } = this.props;
+    const date = <DateFromNow date={file.lastModified} />;
+    const fileSize = file.directory ? "" : <FileSize bytes={file.length} />;
+
+    return (
+      <div className="content">
+        <h4>{file.name}</h4>
+        <article className="media">
+          <div className="media-content">
+            <p>
+              {file.description.split("\n").map((item, key) => {
+                return (
+                  <span key={key}>
+                    {item}
+                    <br />
+                  </span>
+                );
+              })}
+            </p>
+          </div>
+          <div className="media-right">{date}</div>
+        </article>
+      </div>
+    );
+  }
+
+  showContent() {
     const { file, revision } = this.props;
     const contentType = this.state.contentType;
+    if (contentType.startsWith("image")) {
+      return <ImageViewer />;
+    } else if (contentType.startsWith("text")) {
+      return <SourcecodeViewer />;
+    } else {
+      return <DownloadViewer file={file} revision={revision} />;
+    }
+  }
+
+  render() {
+    const { file } = this.props;
     const error = this.state.error;
     const hasError = this.state.hasError;
 
@@ -79,15 +120,23 @@ class Content extends React.Component<Props, State> {
     if (hasError) {
       return <ErrorNotification error={error} />;
     }
-    if (contentType.startsWith("image")) {
-      return <ImageViewer />;
-    }
 
-    if (contentType.startsWith("text")) {
-      return <SourcecodeViewer />;
-    }
+    const header = this.showHeader();
+    const content = this.showContent();
+    const fileSize = file.directory ? "" : <FileSize bytes={file.length} />;
 
-    return <DownloadViewer file={file} revision={revision}/>;
+    return (
+      <div>
+        {header}
+        <nav className="panel">
+          <article className="panel-heading media">
+            <div className="media-content">{file.name}</div>
+            <div className="media-right">{fileSize}</div>
+          </article>
+          <div className="panel-block">{content}</div>
+        </nav>
+      </div>
+    );
   }
 }