fix fetch content multiple times for same file

scm-ui/ui-webapp/src/repos/containers/ChangesetsRoot.tsx

@@ -17,7 +17,7 @@ type Props = WithTranslation &
 class ChangesetsRoot extends React.Component<Props> {
   componentDidMount() {
     const { branches, baseUrl } = this.props;
-    if (branches?.length > 0 && this.isSelectedBranchIsNotABranch()) {
+    if (branches?.length > 0 && this.isSelectedBranchNotABranch()) {
       const defaultBranch = branches?.filter(b => b.defaultBranch === true)[0];
       this.props.history.push(`${baseUrl}/branch/${encodeURIComponent(defaultBranch.name)}/changesets/`);
     }
@@ -30,7 +30,7 @@ class ChangesetsRoot extends React.Component<Props> {
     return url;
   };
 
-  isSelectedBranchIsNotABranch = () => {
+  isSelectedBranchNotABranch = () => {
     const { branches, selectedBranch } = this.props;
     return branches?.filter(b => b.name === selectedBranch).length === 0;
   };
@@ -64,7 +64,7 @@ class ChangesetsRoot extends React.Component<Props> {
       <>
         <CodeActionBar
           branches={branches}
-          selectedBranch={!this.isSelectedBranchIsNotABranch() ? selectedBranch : undefined}
+          selectedBranch={!this.isSelectedBranchNotABranch() ? selectedBranch : undefined}
           onSelectBranch={this.onSelectBranch}
           switchViewLink={this.evaluateSwitchViewLink()}
         />

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

@@ -12,6 +12,7 @@ type State = {
   content: string;
   error?: Error;
   loaded: boolean;
+  currentFileRevision: string;
 };
 
 class SourcecodeViewer extends React.Component<Props, State> {
@@ -20,30 +21,44 @@ class SourcecodeViewer extends React.Component<Props, State> {
 
     this.state = {
       content: "",
-      loaded: false
+      loaded: false,
+      currentFileRevision: ""
     };
   }
 
   componentDidMount() {
+    const { file } = this.props;
+    const { currentFileRevision } = this.state;
+    if (file.revision !== currentFileRevision) {
+      this.fetchContent();
+    }
+  }
+
+  componentDidUpdate() {
+    const { file } = this.props;
+    const { currentFileRevision } = this.state;
+    if (file.revision !== currentFileRevision) {
+      this.fetchContent();
+    }
+  }
+
+  fetchContent = () => {
     const { file } = this.props;
     getContent(file._links.self.href)
-      .then(result => {
-        if (result.error) {
+      .then(content => {
         this.setState({
-            ...this.state,
-            error: result.error,
-            loaded: true
+          content,
+          loaded: true,
+          currentFileRevision: file.revision
         });
-        } else {
-          this.setState({
-            ...this.state,
-            content: result,
-            loaded: true
-          });
-        }
       })
-      .catch(err => {});
-  }
+      .catch(error => {
+        this.setState({
+          error,
+          loaded: true
+        });
+      });
+  };
 
   render() {
     const { content, error, loaded } = this.state;
@@ -70,17 +85,7 @@ export function getLanguage(language: string) {
 }
 
 export function getContent(url: string) {
-  return apiClient
-    .get(url)
-    .then(response => response.text())
-    .then(response => {
-      return response;
-    })
-    .catch(err => {
-      return {
-        error: err
-      };
-    });
+  return apiClient.get(url).then(response => response.text());
 }
 
 export default withTranslation("repos")(SourcecodeViewer);