Refactoring the Members page (#394)

* Move the `MemberList` into the view

* Fix the props of Pagination

Author: Noah Lee

ui/src/App.tsx

@@ -9,7 +9,7 @@ import Home from "./views/Home"
 import Repo from "./views/Repo"
 import Deployment from "./views/Deployment"
 import Settings from "./views/Settings"
-import Members from "./views/Members"
+import Members from "./views/members"
 
 function App(): JSX.Element {
     return (

ui/src/components/MemberList.tsx

@@ -1,19 +1,17 @@
 import { Button } from 'antd'
 
 interface PaginationProps {
-    page: number
-    isLast: boolean
+    disabledPrev: boolean
+    disabledNext: boolean
     onClickPrev(): void
     onClickNext(): void
 }
 
 export default function Pagination(props: PaginationProps): JSX.Element {
-    const isFirst = props.page <= 1
-
     return (
         <div>
-            <Button disabled={isFirst} onClick={props.onClickPrev} style={{borderTopRightRadius: 0, borderBottomRightRadius: 0}}>Prev</Button>
-            <Button disabled={props.isLast} onClick={props.onClickNext} style={{borderTopLeftRadius: 0, borderBottomLeftRadius: 0}}>Next</Button>
+            <Button disabled={props.disabledPrev} onClick={props.onClickPrev} style={{borderTopRightRadius: 0, borderBottomRightRadius: 0}}>Prev</Button>
+            <Button disabled={props.disabledNext} onClick={props.onClickNext} style={{borderTopLeftRadius: 0, borderBottomLeftRadius: 0}}>Next</Button>
         </div>
     )
 }

ui/src/components/Pagination.tsx

@@ -57,8 +57,6 @@ export default function Home(): JSX.Element {
         f()
     }
 
-    const isLast = repos.length < perPage
-
     if (loading) {
         return (
             <Main>
@@ -95,7 +93,12 @@ export default function Home(): JSX.Element {
                 <RepoList repos={repos}></RepoList>
             </div>
             <div style={{marginTop: "20px", textAlign: "center"}}>
-                <Pagination page={page} isLast={isLast} onClickPrev={onClickPrev} onClickNext={onClickNext} ></Pagination>
+                <Pagination 
+                    disabledPrev={page <= 1} 
+                    disabledNext={repos.length < perPage} 
+                    onClickPrev={onClickPrev} 
+                    onClickNext={onClickNext} 
+                />
             </div>
         </Main>
     )

ui/src/views/Home.tsx

@@ -46,8 +46,6 @@ export default function RepoHome(): JSX.Element {
         // eslint-disable-next-line
     }, [dispatch])
 
-    const isLast = deployments.length < perPage
-
     const onChangeEnv = (env: string) => {
         dispatch(slice.actions.setEnv(env))
         dispatch(fetchDeployments())
@@ -85,7 +83,12 @@ export default function RepoHome(): JSX.Element {
                 }
             </div>
             <div style={{marginTop: "20px", textAlign: "center"}}>
-                <Pagination page={page} isLast={isLast} onClickPrev={onClickPrev} onClickNext={onClickNext} ></Pagination>
+                <Pagination 
+                    disabledPrev={page <= 1} 
+                    disabledNext={deployments.length < perPage} 
+                    onClickPrev={onClickPrev} 
+                    onClickNext={onClickNext} 
+                />
             </div>
         </div>
     )

ui/src/views/RepoHome.tsx

@@ -0,0 +1,51 @@
+import { shallowEqual } from "react-redux"
+import { List, Switch, Button, Avatar } from "antd"
+
+import { useAppSelector, useAppDispatch } from "../../redux/hooks"
+import { updateUser, deleteUser } from "../../redux/members"
+
+import { User } from "../../models"
+
+export default function MemberList(): JSX.Element {
+    const { users } = useAppSelector(state => state.members, shallowEqual)
+    const dispatch = useAppDispatch()
+
+    const onChangeSwitch = (user: User, checked: boolean) => {
+        dispatch(updateUser({user, admin: checked}))
+    }
+
+    const onClickDelete = (user: User) => {
+        dispatch(deleteUser(user))
+    }
+
+    return (
+        <List
+            itemLayout="horizontal"
+            dataSource={users}
+            renderItem={(user) => (
+                <List.Item
+                    actions={[
+                        <Switch 
+                            checkedChildren="Adm"  
+                            unCheckedChildren="Mem"
+                            checked={user.admin}
+                            onChange={(checked) => {onChangeSwitch(user, checked)}}
+                        />,
+                        <Button
+                            type="primary"
+                            danger
+                            onClick={() => {onClickDelete(user)}}
+                        >
+                            Delete
+                        </Button>
+                    ]}
+                >
+                    <List.Item.Meta 
+                        avatar={<Avatar src={user.avatar} />}
+                        title={user.login}
+                    />
+                </List.Item>
+            )}
+        />
+    )
+}

ui/src/views/members/MemberList.tsx

@@ -3,18 +3,16 @@ import { shallowEqual } from "react-redux"
 import { Input } from "antd"
 import { Helmet } from "react-helmet"
 
-import { useAppSelector, useAppDispatch } from "../redux/hooks"
-import { membersSlice as slice, fetchUsers, updateUser, deleteUser, perPage } from "../redux/members"
+import { useAppSelector, useAppDispatch } from "../../redux/hooks"
+import { membersSlice as slice, fetchUsers, perPage } from "../../redux/members"
 
-import { User } from "../models"
-
-import Main from './Main'
-import MemberList from "../components/MemberList"
-import Pagination from "../components/Pagination"
+import Main from '../Main'
+import MemberList from "./MemberList"
+import Pagination from "../../components/Pagination"
 
 const { Search } = Input
 
-export default function Member(): JSX.Element {
+export default function Members(): JSX.Element {
     const { users, page } = useAppSelector(state => state.members, shallowEqual)
     const dispatch = useAppDispatch()
 
@@ -27,14 +25,6 @@ export default function Member(): JSX.Element {
         dispatch(fetchUsers())
     }
 
-    const onChangeSwitch = (user: User, checked: boolean) => {
-        dispatch(updateUser({user, admin: checked}))
-    }
-
-    const onClickDelete = (user: User) => {
-        dispatch(deleteUser(user))
-    }
-
     const onClickPrev = () => {
         dispatch(slice.actions.decreasePage())
         dispatch(fetchUsers())
@@ -57,16 +47,12 @@ export default function Member(): JSX.Element {
                 <Search placeholder="Search user ..." onSearch={onSearch} enterButton />
             </div>
             <div style={{marginTop: "40px"}}>
-                <MemberList
-                    users={users}
-                    onChangeSwitch={onChangeSwitch}
-                    onClickDelete={onClickDelete}
-                />
+                <MemberList/>
             </div>
             <div style={{marginTop: "40px", textAlign: "center"}}>
                 <Pagination 
-                    page={page}
-                    isLast={users.length !== perPage}
+                    disabledPrev={page <= 1}
+                    disabledNext={users.length < perPage}
                     onClickPrev={onClickPrev}
                     onClickNext={onClickNext}
                 />