Separate the state from the views

ui/src/components/Pagination.tsx

@@ -1,6 +1,6 @@
 import { Button } from 'antd'
 
-interface PaginationProps {
+export interface PaginationProps {
     disabledPrev: boolean
     disabledNext: boolean
     onClickPrev(): void

ui/src/views/home/RepoList.tsx

@@ -1,27 +1,18 @@
-import { shallowEqual } from 'react-redux'
 import { List, Typography } from 'antd'
 import moment from "moment"
 
-import { useAppSelector } from '../../redux/hooks'
-import { Deployment } from '../../models'
+import { Repo, Deployment } from '../../models'
 import UserAvatar from '../../components/UserAvatar'
 import DeploymentStatusBadge from "../../components/DeploymentStatusBadge"
 import DeploymentRefCode from "../../components/DeploymentRefCode"
-import Spin from '../../components/Spin'
 
 const { Text, Paragraph } = Typography
 
-export default function RepoList(): JSX.Element {
-    const { loading, repos } = useAppSelector(state => state.home, shallowEqual)
-
-    if (loading) {
-        return (
-            <div style={{textAlign: "center"}}>
-                <Spin />
-            </div>
-        )
-    }
+export interface RepoListProps {
+    repos: Repo[]
+}
 
+export default function RepoList({repos}: RepoListProps): JSX.Element {
     return (
         <List
             dataSource={repos}

ui/src/views/home/index.tsx

@@ -10,14 +10,16 @@ import { RequestStatus } from '../../models'
 import { subscribeEvents } from "../../apis"
 
 import Main from '../main'
-import RepoList from './RepoList'
+import RepoList, { RepoListProps } from './RepoList'
 import Pagination from '../../components/Pagination'
+import Spin from '../../components/Spin'
 
 const { Search } = Input
 const { actions } = homeSlice
 
-export default function Home(): JSX.Element {
-    const { repos, page, syncing } = useAppSelector(state => state.home, shallowEqual)
+// Binding the state to the deployment page.
+export default ():JSX.Element => {
+    const { loading, repos, page, syncing } = useAppSelector(state => state.home, shallowEqual)
     const dispatch = useAppDispatch()
 
     useEffect(() => {
@@ -59,6 +61,43 @@ export default function Home(): JSX.Element {
 
     return (
         <Main>
+            <Home
+                loading={loading}
+                syncing={syncing}
+                page={page}
+                repos={repos}
+                search={search}
+                onClickSync={onClickSync}
+                onClickPrev={onClickPrev}
+                onClickNext={onClickNext}
+            />
+        </Main>
+    )
+}
+
+interface HomeProps extends RepoListProps {
+    loading: boolean
+    syncing: RequestStatus
+    page: number
+    search(q: string): void
+    onClickSync(): void
+    onClickPrev(): void
+    onClickNext(): void
+}
+
+function Home({
+    loading,
+    page,
+    syncing,
+    repos,
+    search,
+    onClickSync,
+    onClickPrev,
+    onClickNext,
+}: HomeProps): JSX.Element {
+
+    return (
+        <>
             <Helmet>
                 <title>Home</title>
             </Helmet>
@@ -82,7 +121,12 @@ export default function Home(): JSX.Element {
                 <Search placeholder="Search repository ..." onSearch={search} size="large" enterButton />
             </div>
             <div style={{"marginTop": "20px"}}>
-                <RepoList />
+                {(loading)? 
+                    <div style={{textAlign: "center"}}>
+                        <Spin />
+                    </div>
+                    :
+                    <RepoList repos={repos} />}
             </div>
             <div style={{marginTop: "20px", textAlign: "center"}}>
                 <Pagination 
@@ -92,6 +136,6 @@ export default function Home(): JSX.Element {
                     onClickNext={onClickNext} 
                 />
             </div>
-        </Main>
+        </>
     )
 }

ui/src/views/main/Content.tsx

@@ -1,22 +1,22 @@
-import { shallowEqual } from "react-redux"
 import { Row, Col, Result, Button} from "antd"
 
-import { useAppSelector, useAppDispatch } from "../../redux/hooks"
-import { mainSlice as slice } from "../../redux/main"
 import React from "react"
 
-export default function Content(props: React.PropsWithChildren<any>): JSX.Element {
-    const { 
-        available, 
-        authorized, 
-        expired,
-    } = useAppSelector(state => state.main, shallowEqual)
-    const dispatch = useAppDispatch()
+export interface ContentProps {
+    available: boolean 
+    authorized: boolean
+    expired: boolean
+    onClickRetry(): void
+}
+
+export default function Content({
+    available,
+    authorized,
+    expired,
+    children,
+    onClickRetry,
+}: React.PropsWithChildren<ContentProps>): JSX.Element {
 
-    const onClickRetry = () => {
-        dispatch(slice.actions.setAvailable(true))
-        dispatch(slice.actions.setExpired(false))
-    }
 
     let content: React.ReactNode
     if (!available) {
@@ -44,7 +44,7 @@ export default function Content(props: React.PropsWithChildren<any>): JSX.Elemen
             extra={[<Button key="console" type="primary" onClick={onClickRetry}>Retry</Button>]}
         />
     } else {
-        content = props.children
+        content = children
     }
 
     return (

ui/src/views/main/Header.tsx

@@ -1,22 +1,23 @@
 import { useState } from "react"
-import { shallowEqual } from "react-redux"
 import { Menu, Row, Col, Button, Drawer, Avatar, Dropdown, Badge, Space} from "antd"
 import { SettingFilled } from "@ant-design/icons"
 
-import { useAppSelector } from "../../redux/hooks"
-
+import { Deployment, User, Review } from "../../models"
 import RecentActivities from "../../components/RecentActivities"
 
 import Logo from "../../logo.svg"
 
-export default function Header(): JSX.Element {
-    const { 
-        authorized, 
-        user,
-        deployments,
-        reviews,
-    } = useAppSelector(state => state.main, shallowEqual)
+export interface HeaderProps {
+    user: User | undefined
+    deployments: Deployment[]
+    reviews: Review[]
+}
 
+export default function Header({
+    user,
+    deployments,
+    reviews,
+}: HeaderProps): JSX.Element {
     const activitiesCount = deployments.length + reviews.length
 
     const [ isRecentActivitiesVisible, setRecentActivitiesVisible ] = useState(false)
@@ -63,7 +64,7 @@ export default function Header(): JSX.Element {
                         reviews={reviews}
                     />
                 </Drawer>
-                {(authorized) ? 
+                {(user) ? 
                     <Dropdown 
                         overlay={(
                             <Menu>

ui/src/views/main/LicenseWarningFooter.tsx

@@ -1,11 +1,14 @@
 import moment from "moment"
-import { shallowEqual } from "react-redux"
 
-import { useAppSelector } from "../../redux/hooks"
+import { License } from "../../models"
 
-export default function LicenseWarningFooter(): JSX.Element {
-    const { license } = useAppSelector(state => state.main, shallowEqual)
+export interface LicenseWarningFooterProps {
+    license?: License
+}
 
+export default function LicenseWarningFooter({
+    license
+}: LicenseWarningFooterProps): JSX.Element {
     if (!license) {
         return <></>
     }

ui/src/views/main/index.tsx

@@ -16,18 +16,22 @@ import {
     mainSlice as slice 
 } from "../../redux/main"
 
-import MainHeader from "./Header"
-import MainContent from "./Content"
-import LicenseWarning from "./LicenseWarningFooter"
+import MainHeader, { HeaderProps } from "./Header"
+import MainContent, { ContentProps } from "./Content"
+import LicenseWarning, { LicenseWarningFooterProps } from "./LicenseWarningFooter"
 
 const { Header, Content, Footer } = Layout
 
-// eslint-disable-next-line
-export default function Main(props: React.PropsWithChildren<{}>) { 
+export default (props: React.PropsWithChildren<any>): JSX.Element => { 
     const { 
+        authorized,
+        available,
+        expired,
+        user,
         deployments,
         reviews,
     } = useAppSelector(state => state.main, shallowEqual)
+
     const dispatch = useAppDispatch()
 
     useEffect(() => {
@@ -48,6 +52,38 @@ export default function Main(props: React.PropsWithChildren<{}>) {
         }
     }, [dispatch])
 
+    const onClickRetry = () => {
+        dispatch(slice.actions.setAvailable(true))
+        dispatch(slice.actions.setExpired(false))
+    }
+
+    return (
+        <Main 
+            authorized={authorized}
+            available={available}
+            expired={expired}
+            user={user}
+            deployments={deployments}
+            reviews={reviews}
+            onClickRetry={onClickRetry}
+            children={props.children}
+        />
+    )
+}
+
+interface MainProps extends HeaderProps, ContentProps, LicenseWarningFooterProps {}
+
+function Main({
+    authorized,
+    available,
+    expired,
+    user,
+    deployments,
+    reviews,
+    license,
+    children,
+    onClickRetry
+}: React.PropsWithChildren<MainProps>) { 
     return (
         <Layout className="layout">
             <Helmet>
@@ -58,16 +94,27 @@ export default function Main(props: React.PropsWithChildren<{}>) {
                     <link rel="icon" href="/favicon.ico" />}
             </Helmet>
             <Header>
-                <MainHeader />
+                <MainHeader 
+                    user={user}
+                    deployments={deployments}
+                    reviews={reviews}
+                />
             </Header>
             <Content style={{ padding: "50px 50px" }}>
-                <MainContent>
-                    {props.children}
+                <MainContent
+                    authorized={authorized}
+                    available={available}
+                    expired={expired}
+                    onClickRetry={onClickRetry}
+                >
+                    {children}
                 </MainContent>
             </Content>
             <Footer style={{ textAlign: "center" }}>
                 <div>
-                    <LicenseWarning />
+                    <LicenseWarning 
+                        license={license}
+                    />
                 </div>
                 <div>
                     Gitploy ©{moment().format("YYYY")} Created by Gitploy.IO 

ui/src/views/members/MemberList.tsx

@@ -1,40 +1,31 @@
-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))
-    }
+export interface MemberListProps {
+    users: User[]
+    onChangeSwitch(user: User, checked: boolean): void
+    onClickDelete(user: User): void
+}
 
+export default function MemberList(props: MemberListProps): JSX.Element {
     return (
         <List
             itemLayout="horizontal"
-            dataSource={users}
+            dataSource={props.users}
             renderItem={(user) => (
                 <List.Item
                     actions={[
                         <Switch 
                             checkedChildren="Adm"  
                             unCheckedChildren="Mem"
                             checked={user.admin}
-                            onChange={(checked) => {onChangeSwitch(user, checked)}}
+                            onChange={(checked) => {props.onChangeSwitch(user, checked)}}
                         />,
                         <Button
                             type="primary"
                             danger
-                            onClick={() => {onClickDelete(user)}}
+                            onClick={() => {props.onClickDelete(user)}}
                         >
                             Delete
                         </Button>