reformatting

dashboard/src/components/repo-selector/RepoList.tsx

@@ -1,24 +1,24 @@
-import React, { Component } from 'react';
-import styled from 'styled-components';
-import github from '../../assets/github.png';
+import React, { Component } from "react";
+import styled from "styled-components";
+import github from "assets/github.png";
 
-import api from '../../shared/api';
-import { RepoType, ActionConfigType } from '../../shared/types';
-import { Context } from '../../shared/Context';
+import api from "shared/api";
+import { RepoType, ActionConfigType } from "shared/types";
+import { Context } from "shared/Context";
 
-import Loading from '../Loading';
+import Loading from "../Loading";
 
 type PropsType = {
-  actionConfig: ActionConfigType | null,
-  setActionConfig: (x: ActionConfigType) => void,
-  userId?: number,
-  readOnly: boolean,
+  actionConfig: ActionConfigType | null;
+  setActionConfig: (x: ActionConfigType) => void;
+  userId?: number;
+  readOnly: boolean;
 };
 
 type StateType = {
-  repos: RepoType[],
-  loading: boolean,
-  error: boolean,
+  repos: RepoType[];
+  loading: boolean;
+  error: boolean;
 };
 
 export default class ActionConfEditor extends Component<PropsType, StateType> {
@@ -26,52 +26,70 @@ export default class ActionConfEditor extends Component<PropsType, StateType> {
     repos: [] as RepoType[],
     loading: true,
     error: false,
-  }
+  };
 
   componentDidMount() {
     let { currentProject } = this.context;
 
     // Get repos
     if (!this.props.userId && this.props.userId !== 0) {
-      api.getGitRepos('<token>', {
-      }, { project_id: currentProject.id }, (err: any, res: any) => {
-        if (err) {
-          this.setState({ loading: false, error: true });
-        } else {
-          var allRepos: any = [];
-          for (let i = 0; i < res.data.length; i++) {
-            var grid = res.data[i].id;
-            api.getGitRepoList('<token>', {}, { project_id: currentProject.id, git_repo_id: grid }, (err: any, res: any) => {
-              if (err) {
-                console.log(err);
-                this.setState({ loading: false, error: true });
-              } else {
-                res.data.forEach((repo: any, id: number) => {
-                  repo.GHRepoID = grid;
-                })
-                allRepos = allRepos.concat(res.data);
-                this.setState({ repos: allRepos, loading: false, error: false });
-              }
-            })
-          }
-          if (res.data.length < 1) {
-            this.setState({ loading: false, error: false });
+      api.getGitRepos(
+        "<token>",
+        {},
+        { project_id: currentProject.id },
+        (err: any, res: any) => {
+          if (err) {
+            this.setState({ loading: false, error: true });
+          } else {
+            var allRepos: any = [];
+            for (let i = 0; i < res.data.length; i++) {
+              var grid = res.data[i].id;
+              api.getGitRepoList(
+                "<token>",
+                {},
+                { project_id: currentProject.id, git_repo_id: grid },
+                (err: any, res: any) => {
+                  if (err) {
+                    console.log(err);
+                    this.setState({ loading: false, error: true });
+                  } else {
+                    res.data.forEach((repo: any, id: number) => {
+                      repo.GHRepoID = grid;
+                    });
+                    allRepos = allRepos.concat(res.data);
+                    this.setState({
+                      repos: allRepos,
+                      loading: false,
+                      error: false,
+                    });
+                  }
+                }
+              );
+            }
+            if (res.data.length < 1) {
+              this.setState({ loading: false, error: false });
+            }
           }
         }
-      });
+      );
     } else {
       let grid = this.props.userId;
-      api.getGitRepoList('<token>', {}, { project_id: currentProject.id, git_repo_id: grid }, (err: any, res: any) => {
-        if (err) {
-          console.log(err);
-          this.setState({ loading: false, error: true });
-        } else {
-          res.data.forEach((repo: any, id: number) => {
-            repo.GHRepoID = grid;
-          })
-          this.setState({ repos: res.data, loading: false, error: false });
+      api.getGitRepoList(
+        "<token>",
+        {},
+        { project_id: currentProject.id, git_repo_id: grid },
+        (err: any, res: any) => {
+          if (err) {
+            console.log(err);
+            this.setState({ loading: false, error: true });
+          } else {
+            res.data.forEach((repo: any, id: number) => {
+              repo.GHRepoID = grid;
+            });
+            this.setState({ repos: res.data, loading: false, error: false });
+          }
         }
-      })
+      );
     }
   }
 
@@ -81,16 +99,20 @@ export default class ActionConfEditor extends Component<PropsType, StateType> {
     updatedConfig.git_repo = x.FullName;
     updatedConfig.git_repo_id = x.GHRepoID;
     setActionConfig(updatedConfig);
-  }
+  };
 
   renderRepoList = () => {
     let { repos, loading, error } = this.state;
     if (loading) {
-      return <LoadingWrapper><Loading /></LoadingWrapper>
+      return (
+        <LoadingWrapper>
+          <Loading />
+        </LoadingWrapper>
+      );
     } else if (error || !repos) {
-      return <LoadingWrapper>Error loading repos.</LoadingWrapper>
+      return <LoadingWrapper>Error loading repos.</LoadingWrapper>;
     } else if (repos.length == 0) {
-      return <LoadingWrapper>No connected repos found.</LoadingWrapper>
+      return <LoadingWrapper>No connected repos found.</LoadingWrapper>;
     }
 
     return repos.map((repo: RepoType, i: number) => {
@@ -102,34 +124,23 @@ export default class ActionConfEditor extends Component<PropsType, StateType> {
           onClick={() => this.setRepo(repo)}
           readOnly={this.props.readOnly}
         >
-          <img src={github} />{repo.FullName}
+          <img src={github} />
+          {repo.FullName}
         </RepoName>
       );
     });
-  }
+  };
 
   renderExpanded = () => {
     if (this.props.readOnly) {
-      return (
-        <ExpandedWrapperAlt>
-          {this.renderRepoList()}
-        </ExpandedWrapperAlt>
-      );
+      return <ExpandedWrapperAlt>{this.renderRepoList()}</ExpandedWrapperAlt>;
     } else {
-      return (
-        <ExpandedWrapper>
-          {this.renderRepoList()}
-        </ExpandedWrapper>
-      );
+      return <ExpandedWrapper>{this.renderRepoList()}</ExpandedWrapper>;
     }
-  }
+  };
 
   render() {
-    return (
-      <>
-        {this.renderExpanded()}
-      </>
-    );
+    return <>{this.renderExpanded()}</>;
   }
 }
 
@@ -139,14 +150,28 @@ const RepoName = styled.div`
   display: flex;
   width: 100%;
   font-size: 13px;
-  border-bottom: 1px solid ${(props: { lastItem: boolean, isSelected: boolean, readOnly: boolean }) => props.lastItem ? '#00000000' : '#606166'};
+  border-bottom: 1px solid
+    ${(props: { lastItem: boolean; isSelected: boolean; readOnly: boolean }) =>
+      props.lastItem ? "#00000000" : "#606166"};
   color: #ffffff;
   user-select: none;
   align-items: center;
   padding: 10px 0px;
-  cursor: ${(props: { lastItem: boolean, isSelected: boolean, readOnly: boolean }) => props.readOnly ? 'default' : 'pointer'};
-  pointer-events: ${(props: { lastItem: boolean, isSelected: boolean, readOnly: boolean }) => props.readOnly ? 'none' : 'auto'};
-  background: ${(props: { lastItem: boolean, isSelected: boolean, readOnly: boolean }) => props.isSelected ? '#ffffff22' : '#ffffff11'};
+  cursor: ${(props: {
+    lastItem: boolean;
+    isSelected: boolean;
+    readOnly: boolean;
+  }) => (props.readOnly ? "default" : "pointer")};
+  pointer-events: ${(props: {
+    lastItem: boolean;
+    isSelected: boolean;
+    readOnly: boolean;
+  }) => (props.readOnly ? "none" : "auto")};
+  background: ${(props: {
+    lastItem: boolean;
+    isSelected: boolean;
+    readOnly: boolean;
+  }) => (props.isSelected ? "#ffffff22" : "#ffffff11")};
   :hover {
     background: #ffffff22;
 
@@ -184,4 +209,4 @@ const ExpandedWrapperAlt = styled(ExpandedWrapper)`
   border: 1px solid #ffffff44;
   max-height: 275px;
   overflow-y: auto;
-`;
+`;