Refactoring the home view

ui/src/App.tsx

@@ -5,7 +5,7 @@ import {
     Route,
 } from "react-router-dom";
 
-import Home from "./views/Home"
+import Home from "./views/home"
 import Repo from "./views/Repo"
 import Deployment from "./views/Deployment"
 import Settings from "./views/Settings"

ui/src/views/home/RepoList.tsx

@@ -0,0 +1,59 @@
+import { shallowEqual } from 'react-redux'
+import { List, Typography } from 'antd'
+import moment from "moment"
+
+import { useAppSelector } from '../../redux/hooks'
+import { 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>
+        )
+    }
+
+    return (
+        <List
+            dataSource={repos}
+            renderItem={repo => { 
+                // deployments is undeinfed if there is no deployments of the repository.
+                const deployment = (repo.deployments)? repo.deployments[0] : null
+
+                return (
+                    <List.Item>
+                      <List.Item.Meta
+                            title={<a href={`/${repo.namespace}/${repo.name}`}>{repo.namespace} / {repo.name}</a>}
+                            description={<Description deployment={deployment}/>}
+                      />
+                    </List.Item>
+                )
+            }}
+        />
+    )
+}
+
+interface DescriptionProps {
+    deployment: Deployment | null
+}
+
+function Description(props: DescriptionProps): JSX.Element {
+    if (!props.deployment) {
+        return <></>
+    }
+
+    return (
+        <Paragraph style={{marginTop: "10px", marginBottom: 0}}>
+            <UserAvatar user={props.deployment.deployer} /> deployed <DeploymentRefCode deployment={props.deployment}/> to the <Text strong>{props.deployment.env}</Text> environment {moment(props.deployment.createdAt).fromNow()} <DeploymentStatusBadge deployment={props.deployment}/>
+        </Paragraph>
+    )
+}

ui/src/views/Home.tsx → ui/src/views/home/index.tsx

@@ -1,23 +1,23 @@
 import { useEffect } from 'react'
 import { shallowEqual } from 'react-redux'
-import { Input, Breadcrumb } from 'antd'
 import { Helmet } from "react-helmet"
+import { Input, Breadcrumb, Button } from 'antd'
+import { RedoOutlined } from "@ant-design/icons"
 
-import { useAppSelector, useAppDispatch } from '../redux/hooks'
-import { homeSlice, listRepos, perPage, sync, homeSlice as slice } from '../redux/home'
-import { RequestStatus } from '../models'
-import { subscribeEvents } from "../apis"
+import { useAppSelector, useAppDispatch } from '../../redux/hooks'
+import { homeSlice, listRepos, perPage, sync, homeSlice as slice } from '../../redux/home'
+import { RequestStatus } from '../../models'
+import { subscribeEvents } from "../../apis"
 
-import Main from './main'
-import SyncButton from "../components/SyncButton"
-import RepoList from '../components/RepoList'
-import Pagination from '../components/Pagination'
+import Main from '../main'
+import RepoList from './RepoList'
+import Pagination from '../../components/Pagination'
 
 const { Search } = Input
 const { actions } = homeSlice
 
 export default function Home(): JSX.Element {
-    const { loading, repos, page, syncing } = useAppSelector(state => state.home, shallowEqual)
+    const { repos, page, syncing } = useAppSelector(state => state.home, shallowEqual)
     const dispatch = useAppDispatch()
 
     useEffect(() => {
@@ -57,20 +57,6 @@ export default function Home(): JSX.Element {
         f()
     }
 
-    if (loading) {
-        return (
-            <Main>
-                <div >
-                    <Breadcrumb>
-                        <Breadcrumb.Item>
-                            <a href="/">Repositories</a>
-                        </Breadcrumb.Item>
-                    </Breadcrumb>
-                </div>
-            </Main>
-        )
-    }
-
     return (
         <Main>
             <Helmet>
@@ -84,13 +70,19 @@ export default function Home(): JSX.Element {
                 </Breadcrumb>
             </div>
             <div style={{textAlign: "right"}}>
-                <SyncButton loading={syncing === RequestStatus.Pending} onClickSync={onClickSync}></SyncButton>
+                <Button
+                    loading={syncing === RequestStatus.Pending}
+                    icon={<RedoOutlined />}
+                    onClick={onClickSync}
+                >
+                    Sync
+                </Button>
             </div>
             <div style={{"marginTop": "20px"}}>
                 <Search placeholder="Search repository ..." onSearch={search} size="large" enterButton />
             </div>
             <div style={{"marginTop": "20px"}}>
-                <RepoList repos={repos}></RepoList>
+                <RepoList />
             </div>
             <div style={{marginTop: "20px", textAlign: "center"}}>
                 <Pagination 
@@ -102,4 +94,4 @@ export default function Home(): JSX.Element {
             </div>
         </Main>
     )
-}
+}