🚽 Wiring up the flushDb call

src/client/actions/settings.actions.tsx

@@ -2,8 +2,13 @@ import axios from "axios";
 import {
   SETTINGS_OBJECT_FETCHED,
   SETTINGS_OBJECT_DELETED,
+  SETTINGS_CALL_IN_PROGRESS,
+  SETTINGS_DB_FLUSH_SUCCESS,
 } from "../constants/action-types";
-import { SETTINGS_SERVICE_BASE_URI } from "../constants/endpoints";
+import {
+  IMPORT_SERVICE_BASE_URI,
+  SETTINGS_SERVICE_BASE_URI,
+} from "../constants/endpoints";
 
 export const saveSettings =
   (settingsPayload, settingsObjectId?) => async (dispatch) => {
@@ -48,5 +53,19 @@ export const deleteSettings = () => async (dispatch) => {
 };
 
 export const flushDb = () => async (dispatch) => {
-  
-}
+  dispatch({
+    type: SETTINGS_CALL_IN_PROGRESS,
+  });
+
+  const flushDbResult = await axios({
+    url: `${IMPORT_SERVICE_BASE_URI}/flushDb`,
+    method: "POST",
+  });
+
+  if (flushDbResult) {
+    dispatch({
+      type: SETTINGS_DB_FLUSH_SUCCESS,
+      data: flushDbResult.data,
+    });
+  }
+};

src/client/components/SystemSettings/SystemSettingsForm.tsx

@@ -1,10 +1,18 @@
 import React, { ReactElement, useCallback } from "react";
 import { flushDb } from "../../actions/settings.actions";
+import { useDispatch, useSelector } from "react-redux";
 
 export const SystemSettingsForm = (settingsObject): ReactElement => {
   const { settings } = settingsObject;
 
-  // const flushDb = useC
+  const dispatch = useDispatch();
+  const isSettingsCallInProgress = useSelector(
+    (state: RootState) => state.settings.inProgress,
+  );
+  const flushDatabase = useCallback(() => {
+    dispatch(flushDb());
+  }, []);
+
   return (
     <div className="is-clearfix">
       <div className="mt-4">
@@ -34,7 +42,14 @@ export const SystemSettingsForm = (settingsObject): ReactElement => {
           </div>
         </article>
 
-        <button className="button is-danger" onClick={flushDb}>
+        <button
+          className={
+            isSettingsCallInProgress
+              ? "button is-danger is-loading"
+              : "button is-danger"
+          }
+          onClick={flushDatabase}
+        >
           <span className="icon">
             <i className="fas fa-eraser"></i>
           </span>

src/client/constants/action-types.ts

@@ -68,3 +68,4 @@ export const SETTINGS_CALL_IN_PROGRESS = "SETTINGS_CALL_IN_PROGRESS";
 export const SETTINGS_OBJECT_FETCHED = "SETTINGS_OBJECT_FETCHED";
 export const SETTINGS_CALL_FAILED = "SETTINGS_CALL_FAILED";
 export const SETTINGS_OBJECT_DELETED = "SETTINGS_OBJECT_DELETED";
+export const SETTINGS_DB_FLUSH_SUCCESS = "SETTINGS_DB_FLUSH_SUCCESS";

src/client/reducers/settings.reducer.ts

@@ -3,10 +3,12 @@ import {
   SETTINGS_OBJECT_FETCHED,
   SETTINGS_OBJECT_DELETED,
   SETTINGS_CALL_IN_PROGRESS,
+  SETTINGS_DB_FLUSH_SUCCESS,
 } from "../constants/action-types";
 const initialState = {
   data: {},
   inProgress: false,
+  DbFlushed: false,
 };
 
 function settingsReducer(state = initialState, action) {
@@ -31,6 +33,14 @@ function settingsReducer(state = initialState, action) {
         inProgress: false,
       };
 
+    case SETTINGS_DB_FLUSH_SUCCESS:
+      console.log(state);
+      return {
+        ...state,
+        DbFlushed: action.data,
+        inProgress: false,
+      };
+
     default:
       return { ...state };
   }