From 018bbf5cb589120541202029c8799b18b480da87 Mon Sep 17 00:00:00 2001
From: noah <noah.lee@buzzvil.com>
Date: Wed, 6 Apr 2022 19:16:44 +0900
Subject: [PATCH 1/2] Separate the state from the view

---
 ui/src/views/Repo.tsx                         |  2 +-
 .../repoLock}/LockList.tsx                    |  6 +-
 .../{RepoLock.tsx => repoLock/index.tsx}      | 59 +++++++++++++------
 3 files changed, 44 insertions(+), 23 deletions(-)
 rename ui/src/{components => views/repoLock}/LockList.tsx (95%)
 rename ui/src/views/{RepoLock.tsx => repoLock/index.tsx} (72%)

diff --git a/ui/src/views/Repo.tsx b/ui/src/views/Repo.tsx
index 81cf7687..63f50fec 100644
--- a/ui/src/views/Repo.tsx
+++ b/ui/src/views/Repo.tsx
@@ -10,7 +10,7 @@ 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 RepoLock from "./repoLock"
 import RepoDeploy from './RepoDeploy'
 import RepoRollabck from './RepoRollback'
 import RepoSettings from "./repoSettings"
diff --git a/ui/src/components/LockList.tsx b/ui/src/views/repoLock/LockList.tsx
similarity index 95%
rename from ui/src/components/LockList.tsx
rename to ui/src/views/repoLock/LockList.tsx
index 2dd7cc60..1bd6a7fc 100644
--- a/ui/src/components/LockList.tsx
+++ b/ui/src/views/repoLock/LockList.tsx
@@ -6,10 +6,10 @@ import {
 import { LockOutlined, UnlockOutlined } from "@ant-design/icons"
 import moment from 'moment'
 
-import { Env, Lock } from "../models"
-import UserAvatar from './UserAvatar'
+import { Env, Lock } from "../../models"
+import UserAvatar from '../../components/UserAvatar'
 
-interface LockListProps {
+export interface LockListProps {
     envs: Env[]
     locks: Lock[]
     onClickLock(env: string): void
diff --git a/ui/src/views/RepoLock.tsx b/ui/src/views/repoLock/index.tsx
similarity index 72%
rename from ui/src/views/RepoLock.tsx
rename to ui/src/views/repoLock/index.tsx
index 4bcdca00..40fa0b05 100644
--- a/ui/src/views/RepoLock.tsx
+++ b/ui/src/views/repoLock/index.tsx
@@ -4,18 +4,18 @@ import { useParams } from "react-router-dom";
 import { PageHeader, Button } from 'antd'
 import { Result } from "antd"
 
-import { useAppSelector, useAppDispatch } from "../redux/hooks"
-import { fetchConfig, listLocks, lock, unlock, repoLockSlice as slice, setAutoUnlock} from "../redux/repoLock"
-import LockList from '../components/LockList'
+import { useAppSelector, useAppDispatch } from "../../redux/hooks"
+import { fetchConfig, listLocks, lock, unlock, repoLockSlice as slice, setAutoUnlock} from "../../redux/repoLock"
+import LockList, { LockListProps } from "./LockList"
 
-interface Params {
-    namespace: string
-    name: string
-}
+export default (): JSX.Element => {
+    const { namespace, name } = useParams<{
+        namespace: string
+        name: string
+    }>()
 
-export default function RepoLock(): JSX.Element {
-    const { namespace, name } = useParams<Params>()
     const { display, config, locks } = useAppSelector(state => state.repoLock, shallowEqual)
+
     const dispatch = useAppDispatch()
 
     useEffect(() => {
@@ -29,6 +29,18 @@ export default function RepoLock(): JSX.Element {
         // eslint-disable-next-line 
     }, [dispatch])
 
+    const onClickLock = (env: string) => {
+        dispatch(lock(env))
+    }
+
+    const onClickUnlock = (env: string) => {
+        dispatch(unlock(env))
+    }
+
+    const onChangeExpiredAt = (env: string, expiredAt: Date) => {
+        dispatch(setAutoUnlock({env, expiredAt}))
+    }
+
     if (!display) {
         return <></>
     } 
@@ -50,17 +62,26 @@ export default function RepoLock(): JSX.Element {
         )
     }
 
-    const onClickLock = (env: string) => {
-        dispatch(lock(env))
-    }
+    return (
+        <RepoLock 
+            envs={(config)? config.envs : []}
+            locks={locks}
+            onClickLock={onClickLock}
+            onClickUnlock={onClickUnlock}
+            onChangeExpiredAt={onChangeExpiredAt}
+        />
+    )
+}
 
-    const onClickUnlock = (env: string) => {
-        dispatch(unlock(env))
-    }
+interface RepoLockProps extends LockListProps {}
 
-    const onChangeExpiredAt = (env: string, expiredAt: Date) => {
-        dispatch(setAutoUnlock({env, expiredAt}))
-    }
+function RepoLock({
+    envs,
+    locks,
+    onChangeExpiredAt,
+    onClickLock,
+    onClickUnlock
+}: RepoLockProps): JSX.Element {
 
     return <div>
         <div>
@@ -68,7 +89,7 @@ export default function RepoLock(): JSX.Element {
         </div>
         <div style={{padding: "16px 24px"}}>
             <LockList
-                envs={(config)? config.envs:[]}
+                envs={envs}
                 locks={locks}
                 onClickLock={onClickLock}
                 onClickUnlock={onClickUnlock}

From 46216861e6361835d15442013e84bf5ffdf614be Mon Sep 17 00:00:00 2001
From: noah <noah.lee@buzzvil.com>
Date: Wed, 6 Apr 2022 20:19:59 +0900
Subject: [PATCH 2/2] Disalbe lint for 'no-empty-interface'

---
 ui/.eslintrc.js                     | 1 +
 ui/src/views/repoSettings/index.tsx | 1 -
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/.eslintrc.js b/ui/.eslintrc.js
index c327641d..709d3e31 100644
--- a/ui/.eslintrc.js
+++ b/ui/.eslintrc.js
@@ -10,6 +10,7 @@ module.exports = {
     ],
     rules: {
       "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-empty-interface": "off"
     },
   };
   
\ No newline at end of file
diff --git a/ui/src/views/repoSettings/index.tsx b/ui/src/views/repoSettings/index.tsx
index df85df6a..75cb7ced 100644
--- a/ui/src/views/repoSettings/index.tsx
+++ b/ui/src/views/repoSettings/index.tsx
@@ -50,7 +50,6 @@ export default (): JSX.Element => {
     )
 }
 
-// eslint-disable-next-line
 interface RepoSettingsProps extends SettingFormProps {}
 
 function RepoSettings({