New Fullscreen component

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

@@ -21,87 +21,54 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from "react";
-import { WithTranslation, withTranslation } from "react-i18next";
+import React, { FC, useEffect, useState } from "react";
 import { apiClient, ErrorNotification, Loading, SyntaxHighlighter } from "@scm-manager/ui-components";
 import { File, Link } from "@scm-manager/ui-types";
 
-type Props = WithTranslation & {
+type Props = {
   file: File;
   language: string;
 };
 
-type State = {
-  content: string;
-  error?: Error;
-  loaded: boolean;
-  currentFileRevision: string;
-};
+const SourcecodeViewer: FC<Props> = ({ file, language }) => {
+  const [content, setContent] = useState("");
+  const [error, setError] = useState<Error | undefined>(undefined);
+  const [loading, setLoading] = useState(true);
+  const [currentFileRevision, setCurrentFileRevision] = useState("");
 
-class SourcecodeViewer extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
+  useEffect(() => {
+    function fetchContent() {
+      getContent((file._links.self as Link).href)
+        .then(content => {
+          setLoading(false);
+          setContent(content);
+          setCurrentFileRevision(file.revision);
+        })
+        .catch(error => {
+          setLoading(false);
+          setError(error);
+        });
+    }
 
-    this.state = {
-      content: "",
-      loaded: false,
-      currentFileRevision: ""
-    };
-  }
-
-  componentDidMount() {
-    this.fetchContentIfChanged();
-  }
-
-  componentDidUpdate() {
-    this.fetchContentIfChanged();
-  }
-
-  private fetchContentIfChanged() {
-    const { file } = this.props;
-    const { currentFileRevision } = this.state;
     if (file.revision !== currentFileRevision) {
-      this.fetchContent();
+      fetchContent();
     }
+  });
+
+  if (loading) {
+    return <Loading />;
   }
 
-  fetchContent = () => {
-    const { file } = this.props;
-    getContent((file._links.self as Link).href)
-      .then(content => {
-        this.setState({
-          content,
-          loaded: true,
-          currentFileRevision: file.revision
-        });
-      })
-      .catch(error => {
-        this.setState({
-          error,
-          loaded: true
-        });
-      });
-  };
-
-  render() {
-    const { content, error, loaded } = this.state;
-    const language = this.props.language;
-
-    if (error) {
-      return <ErrorNotification error={error} />;
-    }
-
-    if (!loaded) {
-      return <Loading />;
-    }
-
-    if (!content) {
-      return null;
-    }
-
-    return <SyntaxHighlighter language={getLanguage(language)} value={content} />;
+  if (error) {
+    return <ErrorNotification error={error} />;
   }
-}
+
+  if (!content) {
+    return null;
+  }
+
+  return <SyntaxHighlighter language={getLanguage(language)} value={content} />;
+};
 
 export function getLanguage(language: string) {
   return language.toLowerCase();
@@ -111,4 +78,4 @@ export function getContent(url: string) {
   return apiClient.get(url).then(response => response.text());
 }
 
-export default withTranslation("repos")(SourcecodeViewer);
+export default SourcecodeViewer;