Refactorying the activities view

Author: noah

ui/src/App.tsx

@@ -10,7 +10,7 @@ import Repo from "./views/repo"
 import Deployment from "./views/deployment"
 import Settings from "./views/settings"
 import Members from "./views/members"
-import Activities from "./views/Activities"
+import Activities from "./views/activities"
 
 function App(): JSX.Element {
     return (

ui/src/components/ActivityHistory.tsx renamed to ui/src/views/activities/ActivityHistory.tsx

@@ -1,15 +1,15 @@
 import { Timeline, Typography } from 'antd'
 import moment from "moment"
 
-import { Deployment } from "../models"
-import DeploymentStatusBadge from "./DeploymentStatusBadge"
-import UserAvatar from './UserAvatar'
-import DeploymentRefCode from './DeploymentRefCode'
-import { getStatusColor } from "./partials"
+import { Deployment } from "../../models"
+import DeploymentStatusBadge from "../../components/DeploymentStatusBadge"
+import UserAvatar from '../../components/UserAvatar'
+import DeploymentRefCode from '../../components/DeploymentRefCode'
+import { getStatusColor } from "../../components/partials"
 
 const { Text } = Typography
 
-interface ActivityHistoryProps {
+export interface ActivityHistoryProps {
     deployments: Deployment[]
 }
 

ui/src/components/SearchActivities.tsx renamed to ui/src/views/activities/SearchActivities.tsx

@@ -1,7 +1,7 @@
 import { Row, Col, Form, DatePicker, Button, Switch } from "antd"
 import moment from "moment"
 
-interface SearchActivitiesProps {
+export interface SearchActivitiesProps {
     onChangePeriod(start: Date, end: Date): void
     onClickSearch(): void
 }

ui/src/views/Activities.tsx renamed to ui/src/views/activities/index.tsx

@@ -2,18 +2,19 @@ import { useEffect } from "react"
 import { shallowEqual } from 'react-redux'
 import { Helmet } from "react-helmet"
 
-import { useAppSelector, useAppDispatch } from "../redux/hooks"
-import { perPage, activitiesSlice, searchDeployments } from "../redux/activities"
+import { useAppSelector, useAppDispatch } from "../../redux/hooks"
+import { perPage, activitiesSlice, searchDeployments } from "../../redux/activities"
 
-import Main from "./Main"
-import SearchActivities from "../components/SearchActivities"
-import ActivityHistory from "../components/ActivityHistory"
-import Pagination from "../components/Pagination"
-import Spin from '../components/Spin'
+import Main from "../main"
+import SearchActivities, { SearchActivitiesProps } from "./SearchActivities"
+import ActivityHistory, { ActivityHistoryProps } from "./ActivityHistory"
+import Pagination, { PaginationProps } from "../../components/Pagination"
+import Spin from "../../components/Spin"
+import { deploy } from "../../redux/repoDeploy"
 
 const { actions } = activitiesSlice
 
-export default function Activities(): JSX.Element {
+export default ():JSX.Element => {
     const { 
         loading,
         deployments,
@@ -40,6 +41,39 @@ export default function Activities(): JSX.Element {
 
     return (
         <Main>
+            <Activities 
+                onChangePeriod={onChangePeriod}
+                onClickSearch={onClickSearch}
+                loading={loading}
+                deployments={deployments}
+                disabledPrev={page <= 1}
+                disabledNext={deployments.length != perPage}
+                onClickPrev={onClickPrev}
+                onClickNext={onClickNext}
+            />
+        </Main>
+    )
+}
+
+interface ActivitiesProps extends SearchActivitiesProps, ActivityHistoryProps, PaginationProps  {
+    loading: boolean
+}
+
+function Activities({
+    // Properties to search.
+    onChangePeriod,
+    onClickSearch,
+    // Properties for the deployment history.
+    loading,
+    deployments,
+    // Pagination for the pagination.
+    disabledPrev,
+    disabledNext,
+    onClickPrev,
+    onClickNext
+}: ActivitiesProps): JSX.Element {
+    return (
+        <>
             <Helmet>
                 <title>Activities</title>
             </Helmet>
@@ -64,11 +98,11 @@ export default function Activities(): JSX.Element {
             </div>
             <div style={{marginTop: 30, textAlign: "center"}}>
                 <Pagination 
-                    page={page} 
-                    isLast={deployments.length !== perPage} 
+                    disabledPrev={disabledPrev}
+                    disabledNext={disabledNext}
                     onClickPrev={onClickPrev} 
                     onClickNext={onClickNext} />
             </div>
-        </Main>
+        </>
     )
-}
+}