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 ( - - ) -} \ 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 ( -
-
- - - Repositories - - -
-
- ) - } - return (
@@ -84,13 +70,19 @@ export default function Home(): JSX.Element {
- +
- +
) -} +} \ No newline at end of file