Separate the state from the repoRollback view (#405)

* Separate the state from the repoRollback view

* Add the todo comment

* Separate the state from the repo view

Author: Noah Lee

ui/src/App.tsx

@@ -6,7 +6,7 @@ import {
 } from "react-router-dom";
 
 import Home from "./views/home"
-import Repo from "./views/Repo"
+import Repo from "./views/repo"
 import Deployment from "./views/deployment"
 import Settings from "./views/settings"
 import Members from "./views/members"

ui/src/views/Repo.tsx renamed to ui/src/views/repo/index.tsx

@@ -4,24 +4,24 @@ import { shallowEqual } from "react-redux";
 import { useEffect } from "react";
 import { Helmet } from "react-helmet"
 
-import { useAppSelector, useAppDispatch } from '../redux/hooks'
-import { init, activate, repoSlice as slice } from '../redux/repo'
+import { useAppSelector, useAppDispatch } from '../../redux/hooks'
+import { init, activate, repoSlice as slice } from '../../redux/repo'
 
-import ActivateButton from "../components/ActivateButton"
-import Main from './main'
-import RepoHome from './repoHome'
-import RepoLock from "./repoLock"
-import RepoDeploy from './repoDeploy'
-import RepoRollabck from './RepoRollback'
-import RepoSettings from "./repoSettings"
+import ActivateButton from "../../components/ActivateButton"
+import Main from '../main'
+import RepoHome from '../repoHome'
+import RepoLock from "../repoLock"
+import RepoDeploy from '../repoDeploy'
+import RepoRollabck from '../repoRollback'
+import RepoSettings from "../repoSettings"
 
 interface Params {
     namespace: string
     name: string
     tab: string
 }
 
-export default function Repo(): JSX.Element {
+export default (): JSX.Element => {
     const { namespace, name, tab } = useParams<Params>()
     const { display, repo } = useAppSelector(state => state.repo, shallowEqual)
     const dispatch = useAppDispatch()
@@ -39,23 +39,51 @@ export default function Repo(): JSX.Element {
         dispatch(activate())
     }
 
-    const active = (repo?.active)? true : false
-    
     if (!display) {
-        return <Main>
-            <div />
-        </Main>
+        return (
+            <Main>
+                <div />
+            </Main>
+        )
     } else if (display && !repo) {
-        return <Main>
-            <Result
-                style={{paddingTop: '120px'}}
-                status="warning"
-                title="The page is not found."
-                subTitle="Please check the URL."
-            />
-        </Main>
+        return (
+            <Main>
+                <Result
+                    style={{paddingTop: '120px'}}
+                    status="warning"
+                    title="The page is not found."
+                    subTitle="Please check the URL."
+                />
+            </Main>
+        )
     }
 
+    return (
+        <Repo 
+            namespace={namespace}
+            name={name}
+            tab={tab}
+            active={(repo?.active)? true : false}
+            onClickActivate={onClickActivate}
+        />
+    )
+}
+
+interface RepoProps {
+    namespace: string
+    name: string
+    tab: string
+    active: boolean
+    onClickActivate(): void
+}
+
+function Repo({
+    namespace,
+    name,
+    tab,
+    active,
+    onClickActivate
+}: RepoProps): JSX.Element {
     const styleActivateButton: React.CSSProperties = {
         display: (!active)? "" : "none",
         marginTop: "20px", 

ui/src/components/RollbackForm.tsx renamed to ui/src/views/repoRollback/RollbackForm.tsx

@@ -1,10 +1,12 @@
 import { Form, Select, Button, Avatar } from 'antd'
 import moment from 'moment'
 
-import { Deployment, Env } from "../models"
-import DeploymentRefCode from './DeploymentRefCode'
+import { Deployment, Env } from "../../models"
+import DeploymentRefCode from '../../components/DeploymentRefCode'
 
-interface RollbackFormProps {
+// TODO: Remove the set functions and
+// change it so that the component returns a value when submitting.
+export interface RollbackFormProps {
     envs: Env[]
     onSelectEnv(env: Env): void
     deployments: Deployment[]

ui/src/views/RepoRollback.tsx renamed to ui/src/views/repoRollback/index.tsx

@@ -3,34 +3,34 @@ import { useParams } from "react-router-dom";
 import { PageHeader, Result, Button } from 'antd'
 import { shallowEqual } from "react-redux";
 
-import { useAppDispatch, useAppSelector } from "../redux/hooks"
+import { useAppDispatch, useAppSelector } from "../../redux/hooks"
 import { 
     repoRollbackSlice, 
     fetchConfig, 
     fetchDeployments, 
     searchCandidates, 
     fetchUser,
     rollback,
-} from "../redux/repoRollback"
-
-import { Deployment, RequestStatus, Env } from '../models'
-import RollbackForm from "../components/RollbackForm";
+} from "../../redux/repoRollback"
+import { Deployment, RequestStatus, Env } from "../../models"
+import RollbackForm, { RollbackFormProps } from "./RollbackForm"
 
 const { actions } = repoRollbackSlice
 
-export interface Params {
-    namespace: string
-    name: string
-}
+export default ():JSX.Element => {
+    const { namespace, name } = useParams<{
+        namespace: string
+        name: string
+    }>()
 
-export default function RepoHome(): JSX.Element {
-    const { namespace, name } = useParams<Params>()
     const {
         display,
         config,
         envs,
         deployments, 
-        deploying } = useAppSelector(state => state.repoRollback, shallowEqual)
+        deploying 
+    } = useAppSelector(state => state.repoRollback, shallowEqual)
+
     const dispatch = useAppDispatch()
 
     useEffect(() => {
@@ -82,6 +82,29 @@ export default function RepoHome(): JSX.Element {
         )
     }
 
+    return (
+        <RepoRollback 
+            envs={envs}
+            onSelectEnv={onSelectEnv}
+            deployments={deployments}
+            onSelectDeployment={onSelectDeployment}
+            onClickRollback={onClickRollback}
+            deploying={deploying === RequestStatus.Pending}
+        />
+    )
+}
+
+interface RepoRollbackProps extends RollbackFormProps {}
+
+function RepoRollback({
+    envs,
+    onSelectEnv,
+    deployments,
+    onSelectDeployment,
+    onClickRollback,
+    deploying
+}: RepoRollbackProps): JSX.Element {
+
     return (
         <div>
             <div>
@@ -96,7 +119,7 @@ export default function RepoHome(): JSX.Element {
                     deployments={deployments}
                     onSelectDeployment={onSelectDeployment}
                     onClickRollback={onClickRollback}
-                    deploying={deploying === RequestStatus.Pending} 
+                    deploying={deploying} 
                 />
             </div>
         </div>