From 38926c3cc006de8dfc0f0d039343424296c39e69 Mon Sep 17 00:00:00 2001
From: noah <noah.lee@buzzvil.com>
Date: Wed, 18 May 2022 09:55:24 +0900
Subject: [PATCH] Fix to move the state into the redux

---
 ui/src/redux/activities.tsx       | 57 ++++++++++++++++++-------------
 ui/src/views/activities/index.tsx | 48 +++++++++++---------------
 2 files changed, 52 insertions(+), 53 deletions(-)

diff --git a/ui/src/redux/activities.tsx b/ui/src/redux/activities.tsx
index 752a9c6d..c5fed000 100644
--- a/ui/src/redux/activities.tsx
+++ b/ui/src/redux/activities.tsx
@@ -1,4 +1,4 @@
-import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
 
 import { searchDeployments as _searchDeployments } from '../apis';
 import { Deployment } from '../models';
@@ -7,50 +7,59 @@ export const perPage = 30;
 
 interface ActivitiesState {
   loading: boolean;
+  startDate?: Date;
+  endDate?: Date;
+  productionOnly: boolean;
   deployments: Deployment[];
   page: number;
 }
 
 const initialState: ActivitiesState = {
   loading: false,
+  productionOnly: false,
   deployments: [],
   page: 1,
 };
 
 export const searchDeployments = createAsyncThunk<
   Deployment[],
-  {
-    start?: Date;
-    end?: Date;
-    productionOnly: boolean;
-  },
+  void,
   {
     state: { activities: ActivitiesState };
   }
->(
-  'activities/searchDeployments',
-  async ({ start, end, productionOnly }, { getState, rejectWithValue }) => {
-    const { page } = getState().activities;
-    try {
-      return await _searchDeployments(
-        [],
-        false,
-        productionOnly,
-        start,
-        end,
-        page,
-        perPage
-      );
-    } catch (e) {
-      return rejectWithValue(e);
-    }
+>('activities/searchDeployments', async (_, { getState, rejectWithValue }) => {
+  const { startDate, endDate, productionOnly, page } = getState().activities;
+  try {
+    return await _searchDeployments(
+      [],
+      false,
+      productionOnly,
+      startDate,
+      endDate,
+      page,
+      perPage
+    );
+  } catch (e) {
+    return rejectWithValue(e);
   }
-);
+});
 
 export const activitiesSlice = createSlice({
   name: 'activities',
   initialState,
   reducers: {
+    setSearchOptions: (
+      state: ActivitiesState,
+      action: PayloadAction<{
+        startDate: Date;
+        endDate: Date;
+        productionOnly: boolean;
+      }>
+    ) => {
+      state.startDate = action.payload.startDate;
+      state.endDate = action.payload.endDate;
+      state.productionOnly = action.payload.productionOnly;
+    },
     increasePage: (state) => {
       state.page = state.page + 1;
     },
diff --git a/ui/src/views/activities/index.tsx b/ui/src/views/activities/index.tsx
index 681a541d..0d0d9803 100644
--- a/ui/src/views/activities/index.tsx
+++ b/ui/src/views/activities/index.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { shallowEqual } from 'react-redux';
 import { Helmet } from 'react-helmet';
 
@@ -29,47 +29,37 @@ export default (): JSX.Element => {
   const dispatch = useAppDispatch();
 
   useEffect(() => {
-    dispatch(
-      searchDeployments({
-        productionOnly: false,
-      })
-    );
+    dispatch(searchDeployments());
 
     // eslint-disable-next-line
   }, [dispatch]);
 
-  const [searchOptions, setSearchOptions] = useState<SearchActivitiesValues>(
-    {}
-  );
-
-  const search = () =>
-    dispatch(
-      searchDeployments({
-        start: searchOptions.period
-          ? searchOptions.period[0].toDate()
-          : undefined,
-        end: searchOptions.period
-          ? searchOptions.period[1].toDate()
-          : undefined,
-        productionOnly: searchOptions.productionOnly
-          ? searchOptions.productionOnly
-          : false,
-      })
-    );
+  const onClickSearch = ({
+    period,
+    productionOnly,
+  }: SearchActivitiesValues) => {
+    if (period) {
+      console.debug('Set search options.', period, productionOnly);
+      dispatch(
+        actions.setSearchOptions({
+          startDate: period[0].toDate(),
+          endDate: period[1].toDate(),
+          productionOnly: productionOnly ? true : false,
+        })
+      );
+    }
 
-  const onClickSearch = (values: SearchActivitiesValues) => {
-    setSearchOptions(values);
-    search();
+    dispatch(searchDeployments());
   };
 
   const onClickPrev = () => {
     dispatch(actions.decreasePage());
-    search();
+    dispatch(searchDeployments());
   };
 
   const onClickNext = () => {
     dispatch(actions.increasePage());
-    search();
+    dispatch(searchDeployments());
   };
 
   return (