Add the state for the activities page

Author: noah

ui/src/apis/deployment.ts

@@ -157,7 +157,7 @@ export const searchDeployments = async (statuses: DeploymentStatusEnum[], owned:
     })
 
     const fromParam = (from)? `from=${from.toISOString()}` : ""
-    const toParam = (to)? `&to=to.toISOString()` : ""
+    const toParam = (to)? `&to=${to.toISOString()}` : ""
 
     const deployments: Deployment[] = await _fetch(`${instance}/api/v1/search/deployments?statuses=${ss.join(",")}&owned=${owned}&${fromParam}&${toParam}&page=${page}&per_page=${perPage}`, {
         headers,

ui/src/components/SearchActivities.tsx

@@ -2,7 +2,7 @@ import { Form, DatePicker, Button, Switch } from "antd"
 import moment from "moment"
 
 interface SearchActivitiesProps {
-    onChangePeriod(start: moment.Moment, end: moment.Moment): void
+    onChangePeriod(start: Date, end: Date): void
     onClickSearch(): void
 }
 
@@ -11,21 +11,27 @@ export default function SearchActivities(props: SearchActivitiesProps): JSX.Elem
         <Form
             layout="inline"
         >
-            <Form.Item label="Period" required>
+            <Form.Item label="Period">
                 <DatePicker.RangePicker 
                     format="YYYY-MM-DD HH:mm"
                     showTime={{
                         showSecond: false, 
                         defaultValue: [moment().hour(0).minute(0), moment().hour(23).minute(59)],
                     }}
-                    onChange={(_, dateStrings) => props.onChangePeriod(moment(dateStrings[0]), moment(dateStrings[1])) }
+                    onChange={(_, dateStrings) => props.onChangePeriod(new Date(dateStrings[0]), new Date(dateStrings[1])) }
                 />
             </Form.Item>
             <Form.Item label="Production">
                 <Switch size="small" />
             </Form.Item>
             <Form.Item >
-                <Button type="primary" onClick={props.onClickSearch}>Search</Button>
+                <Button 
+                    htmlType="submit" 
+                    type="primary" 
+                    onClick={props.onClickSearch}
+                >
+                    Search
+                </Button>
             </Form.Item>
         </Form>
     )

ui/src/redux/activities.tsx

@@ -0,0 +1,67 @@
+import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit"
+
+import { 
+    searchDeployments as _searchDeployments, 
+} from "../apis"
+import { Deployment, } from "../models"
+
+export const perPage = 30
+
+interface ActivitiesState {
+    start?: Date
+    end?: Date
+    loading: boolean
+    deployments: Deployment[]
+    page: number
+}
+
+const initialState: ActivitiesState = {
+    loading: false,
+    deployments: [],
+    page: 1,
+}
+
+export const searchDeployments = createAsyncThunk<Deployment[], void, { state: { activities: ActivitiesState } }>(
+    "activities/searchDeployments",
+    async (_, { getState, rejectWithValue }) => {
+        const {start, end, page} = getState().activities
+        try {
+            return await _searchDeployments([], false, start, end, page, perPage)
+        } catch (e) {
+            return rejectWithValue(e)
+        }
+    }
+)
+
+export const activitiesSlice = createSlice({
+    name: "activities",
+    initialState,
+    reducers: {
+        setStart: (state, action: PayloadAction<Date>) => {
+            state.start = action.payload
+        },
+        setEnd: (state, action: PayloadAction<Date>) => {
+            state.end = action.payload
+        },
+        increasePage: (state) => {
+            state.page = state.page + 1
+        },
+        decreasePage: (state) => {
+            state.page = state.page - 1
+        },
+    },
+    extraReducers: builder => {
+        builder
+            .addCase(searchDeployments.pending, (state) => {
+                state.loading = true
+                state.deployments = []
+            })
+            .addCase(searchDeployments.fulfilled, (state, action) => {
+                state.loading = false
+                state.deployments = action.payload
+            })
+            .addCase(searchDeployments.rejected, (state) => {
+                state.loading = false
+            })
+    }
+})

ui/src/redux/store.ts

@@ -11,6 +11,7 @@ import { repoSettingsSlice } from "./repoSettings"
 import { settingsSlice } from "./settings"
 import { deploymentSlice } from "./deployment"
 import { membersSlice } from "./members"
+import { activitiesSlice } from './activities'
 
 export const store =  configureStore({
   reducer: {
@@ -25,6 +26,7 @@ export const store =  configureStore({
     settings: settingsSlice.reducer,
     deployment: deploymentSlice.reducer,
     members: membersSlice.reducer,
+    activities: activitiesSlice.reducer,
   },
   middleware: (getDefaultMiddleware) => getDefaultMiddleware({
     serializableCheck: false

ui/src/views/Activities.tsx

@@ -1,11 +1,43 @@
+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 Main from "./Main"
 import SearchActivities from "../components/SearchActivities"
 import ActivityLogs from "../components/ActivityLogs"
 import Pagination from "../components/Pagination"
+import Spin from '../components/Spin'
+
+const { actions } = activitiesSlice
 
 export default function Activities(): JSX.Element {
+    const { 
+        loading,
+        deployments,
+        page,
+    } = useAppSelector(state => state.activities, shallowEqual)
+
+    const dispatch = useAppDispatch()
+
+    useEffect(() => {
+        dispatch(searchDeployments())
+        // eslint-disable-next-line 
+    }, [dispatch])
+
+    const onChangePeriod = (start: Date, end: Date) => {
+        dispatch(actions.setStart(start))
+        dispatch(actions.setEnd(end))
+    }
+
+    const onClickSearch = () => dispatch(searchDeployments())
+
+    const onClickPrev = () => dispatch(actions.decreasePage())
+
+    const onClickNext = () => dispatch(actions.increasePage())
+
     return (
         <Main>
             <Helmet>
@@ -15,15 +47,27 @@ export default function Activities(): JSX.Element {
             <div style={{marginTop: 30}}>
                 <h2>Search</h2>
                 <SearchActivities 
-                    onChangePeriod={() => console.log("period")}
-                    onClickSearch={() => console.log("search")}
+                    onChangePeriod={onChangePeriod}
+                    onClickSearch={onClickSearch}
                 />
             </div>
-            <div style={{marginTop: 30}}>
-                <ActivityLogs deployments={[]}/>
+            <div style={{marginTop: 50}}>
+                <h2>History</h2>
+                <div style={{marginTop: 30}}>
+                    {(loading)? 
+                        <div style={{textAlign: "center"}}>
+                            <Spin />
+                        </div> 
+                        :
+                        <ActivityLogs deployments={deployments}/>}
+                </div>
             </div>
             <div style={{marginTop: 30, textAlign: "center"}}>
-                <Pagination page={0} isLast={true} onClickPrev={() => {console.log('')}} onClickNext={() => {console.log('')}} />
+                <Pagination 
+                    page={page} 
+                    isLast={deployments.length !== perPage} 
+                    onClickPrev={onClickPrev} 
+                    onClickNext={onClickNext} />
             </div>
         </Main>
     )