Browse Source

fix for routing on provisioner

Jo Chuang 5 years ago
parent
commit
1cd714eb1a
1 changed files with 15 additions and 14 deletions
  1. 15 14
      dashboard/src/main/home/dashboard/Dashboard.tsx

+ 15 - 14
dashboard/src/main/home/dashboard/Dashboard.tsx

@@ -17,22 +17,23 @@ type PropsType = RouteComponentProps & {
   projectId: number | null;
   projectId: number | null;
 };
 };
 
 
-type TabType = "main" | "provisioner"
+const tabOptions = [
+  { label: "Project Overview", value: "overview" },
+  { label: "Provisioner Status", value: "provisioner" },
+];
+// TODO: rethink this typing, should be coupled with tabOptions
+type TabType = "overview" | "provisioner"
 
 
 type StateType = {
 type StateType = {
   infras: InfraType[];
   infras: InfraType[];
   currentTab: TabType;
   currentTab: TabType;
 };
 };
 
 
-const tabOptions = [
-  { label: "Project Overview", value: "overview" },
-  { label: "Provisioner Status", value: "provisioner" },
-];
 
 
 class Dashboard extends Component<PropsType, StateType> {
 class Dashboard extends Component<PropsType, StateType> {
   state = {
   state = {
     infras: [] as InfraType[],
     infras: [] as InfraType[],
-    currentTab: "main" as TabType,
+    currentTab: "overview" as TabType,
   };
   };
 
 
   refreshInfras = () => {
   refreshInfras = () => {
@@ -56,13 +57,6 @@ class Dashboard extends Component<PropsType, StateType> {
 
 
   componentDidMount() {
   componentDidMount() {
     this.refreshInfras();
     this.refreshInfras();
-
-    if (
-      new URLSearchParams(this.props.location.search).get("tab") ===
-      "provisioner"
-    ) {
-      this.setState({ currentTab: "provisioner" });
-    }
   }
   }
 
 
   componentDidUpdate(prevProps: PropsType) {
   componentDidUpdate(prevProps: PropsType) {
@@ -76,6 +70,13 @@ class Dashboard extends Component<PropsType, StateType> {
   };
   };
 
 
   renderTabContents = () => {
   renderTabContents = () => {
+    const currentTab = new URLSearchParams(this.props.location.search).get("tab")
+    if (
+      currentTab && currentTab !== this.state.currentTab
+    ) {
+      this.setState({ currentTab: currentTab as TabType });
+    }
+
     if (this.state.currentTab === "provisioner") {
     if (this.state.currentTab === "provisioner") {
       return <Provisioner />;
       return <Provisioner />;
     } else {
     } else {
@@ -135,7 +136,7 @@ class Dashboard extends Component<PropsType, StateType> {
 
 
             <TabRegion
             <TabRegion
               currentTab={this.state.currentTab}
               currentTab={this.state.currentTab}
-              setCurrentTab={(x: TabType) => this.setState({ currentTab: x })}
+              setCurrentTab={(x: TabType) => this.props.history.push(`dashboard?tab=${x}`)}
               options={tabOptions}
               options={tabOptions}
             >
             >
               {this.renderTabContents()}
               {this.renderTabContents()}