diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index bf6e0a32..24d2507f 100644
--- a/ui/src/App.tsx
+++ b/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"
diff --git a/ui/src/components/SyncButton.tsx b/ui/src/components/SyncButton.tsx
deleted file mode 100644
index 92ce2069..00000000
--- a/ui/src/components/SyncButton.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Button } from "antd"
-import { RedoOutlined } from "@ant-design/icons"
-
-export interface SyncButtonProps {
- loading: boolean
- onClickSync(): void
-}
-
-export default function SyncButton(props: SyncButtonProps): JSX.Element {
- return (
- }
- onClick={props.onClickSync}>
- Sync
-
- )
-}
\ No newline at end of file
diff --git a/ui/src/views/home/RepoList.tsx b/ui/src/views/home/RepoList.tsx
new file mode 100644
index 00000000..1f71626e
--- /dev/null
+++ b/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 (
+
+
+
+ )
+ }
+
+ return (
+ {
+ // deployments is undeinfed if there is no deployments of the repository.
+ const deployment = (repo.deployments)? repo.deployments[0] : null
+
+ return (
+
+ {repo.namespace} / {repo.name}}
+ description={}
+ />
+
+ )
+ }}
+ />
+ )
+}
+
+interface DescriptionProps {
+ deployment: Deployment | null
+}
+
+function Description(props: DescriptionProps): JSX.Element {
+ if (!props.deployment) {
+ return <>>
+ }
+
+ return (
+
+ deployed to the {props.deployment.env} environment {moment(props.deployment.createdAt).fromNow()}
+
+ )
+}
\ No newline at end of file
diff --git a/ui/src/views/Home.tsx b/ui/src/views/home/index.tsx
similarity index 68%
rename from ui/src/views/Home.tsx
rename to ui/src/views/home/index.tsx
index 29f82cdd..9b3f7cbb 100644
--- a/ui/src/views/Home.tsx
+++ b/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 (
-
-
-
- )
- }
-
return (
@@ -84,13 +70,19 @@ export default function Home(): JSX.Element {
-
+ }
+ onClick={onClickSync}
+ >
+ Sync
+
-
+
)
-}
+}
\ No newline at end of file