ADM-777:[frontend]feat: add should refresh data step state

au-heartbeat · Feb 2, 2024 · ac1cfcb · ac1cfcb
1 parent 2013e5d
commit ac1cfcb
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 2 deletions.
diff --git a/frontend/__tests__/context/stepperSlice.test.ts b/frontend/__tests__/context/stepperSlice.test.ts
@@ -20,6 +20,7 @@ describe('stepper reducer', () => {
       {
         stepNumber: 0,
         timeStamp: 0,
+        shouldRefreshData: true,
       },
       nextStep(),
     );
@@ -32,6 +33,7 @@ describe('stepper reducer', () => {
       {
         stepNumber: 0,
         timeStamp: 0,
+        shouldRefreshData: true,
       },
       backStep(),
     );
@@ -44,6 +46,7 @@ describe('stepper reducer', () => {
       {
         stepNumber: 2,
         timeStamp: 0,
+        shouldRefreshData: true,
       },
       backStep(),
     );
@@ -57,6 +60,7 @@ describe('stepper reducer', () => {
       {
         stepNumber: 2,
         timeStamp: 0,
+        shouldRefreshData: true,
       },
       updateTimeStamp(mockTime),
     );

diff --git a/frontend/src/containers/MetricsStep/DeploymentFrequencySettings/SingleSelection/index.tsx b/frontend/src/containers/MetricsStep/DeploymentFrequencySettings/SingleSelection/index.tsx
@@ -1,9 +1,11 @@
 import { getEmojiUrls, removeExtraEmojiName } from '@src/constants/emojis/emoji';
 import { Autocomplete, Box, ListItemText, TextField } from '@mui/material';
+import { shouldRefreshData } from '@src/context/stepper/StepperSlice';
 import { EmojiWrap, StyledAvatar } from '@src/constants/emojis/style';
 import React, { useEffect, useState } from 'react';
 import { Z_INDEX } from '@src/constants/commons';
 import { FormControlWrapper } from './style';
+import { useAppSelector } from '@src/hooks';
 
 interface Props {
   options: string[];
@@ -18,6 +20,7 @@ export const SingleSelection = ({ options, label, value, id, onGetSteps, onUpDat
   const labelId = `single-selection-${label.toLowerCase().replace(' ', '-')}`;
   const [selectedOptions, setSelectedOptions] = useState(value);
   const [inputValue, setInputValue] = useState<string>(value);
+  const shouldRefresh = useAppSelector(shouldRefreshData);
 
   const handleSelectedOptionsChange = (value: string) => {
     setSelectedOptions(value);
@@ -29,7 +32,7 @@ export const SingleSelection = ({ options, label, value, id, onGetSteps, onUpDat
   };
 
   useEffect(() => {
-    if (onGetSteps && !!selectedOptions) {
+    if (onGetSteps && !!selectedOptions && shouldRefresh) {
       onGetSteps(selectedOptions);
     }
   }, []);

diff --git a/frontend/src/context/stepper/StepperSlice.tsx b/frontend/src/context/stepper/StepperSlice.tsx
@@ -5,11 +5,13 @@ import type { RootState } from '@src/store';
 export interface StepState {
   stepNumber: number;
   timeStamp: number;
+  shouldRefreshData: boolean;
 }
 
 const initialState: StepState = {
   stepNumber: 0,
   timeStamp: 0,
+  shouldRefreshData: true,
 };
 
 export const stepperSlice = createSlice({
@@ -21,9 +23,11 @@ export const stepperSlice = createSlice({
       state.timeStamp = initialState.timeStamp;
     },
     nextStep: (state) => {
+      state.shouldRefreshData = true;
       state.stepNumber += 1;
     },
     backStep: (state) => {
+      state.shouldRefreshData = false;
       state.stepNumber = state.stepNumber === ZERO ? ZERO : state.stepNumber - 1;
     },
     updateTimeStamp: (state, action) => {
@@ -36,5 +40,6 @@ export const { resetStep, nextStep, backStep, updateTimeStamp } = stepperSlice.a
 
 export const selectStepNumber = (state: RootState) => state.stepper.stepNumber;
 export const selectTimeStamp = (state: RootState) => state.stepper.timeStamp;
+export const shouldRefreshData = (state: RootState) => state.stepper.shouldRefreshData;
 
 export default stepperSlice.reducer;
diff --git a/frontend/src/hooks/useGetPipelineToolInfoEffect.ts b/frontend/src/hooks/useGetPipelineToolInfoEffect.ts
@@ -7,6 +7,7 @@ import {
 } from '@src/context/config/configSlice';
 import { pipelineToolClient, IGetPipelineToolInfoResult } from '@src/clients/pipeline/PipelineToolClient';
 import { updatePipelineSettings } from '@src/context/Metrics/metricsSlice';
+import { shouldRefreshData } from '@src/context/stepper/StepperSlice';
 import { useEffect, useState, useRef, useCallback } from 'react';
 import { useAppDispatch, useAppSelector } from '@src/hooks';
 
@@ -30,6 +31,7 @@ export const useGetPipelineToolInfoEffect = (): IUseVerifyPipeLineToolStateInter
   const isProjectCreated = useAppSelector(selectIsProjectCreated);
   const restoredPipelineTool = useAppSelector(selectPipelineTool);
   const dateRange = useAppSelector(selectDateRange);
+  const shouldRefresh = useAppSelector(shouldRefreshData);
 
   const getPipelineToolInfo = useCallback(async () => {
     const params = {
@@ -55,7 +57,7 @@ export const useGetPipelineToolInfoEffect = (): IUseVerifyPipeLineToolStateInter
   ]);
 
   useEffect(() => {
-    if (!apiTouchedRef.current && !isLoading) {
+    if (!apiTouchedRef.current && !isLoading && shouldRefresh) {
       apiTouchedRef.current = true;
       getPipelineToolInfo();
     }