Clear currently fetched weather data when making a new search

ThuHtooSan · Jan 15, 2024 · 4949846 · 4949846
1 parent 16c9162
commit 4949846
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 1 deletion.
diff --git a/src/components/SearchBar/SearchBar.tsx b/src/components/SearchBar/SearchBar.tsx
@@ -3,8 +3,10 @@ import { icon } from '@fortawesome/fontawesome-svg-core/import.macro';
 import { useEffect, useRef, useState } from 'react';
 import './search-bar.scss';
 import { useNavigate } from 'react-router-dom';
+import { useAppContext } from '../../hooks';
 
 const SearchBar = () => {
+  const { dispatch } = useAppContext();
   const navigate = useNavigate();
   const [input, setInput] = useState('');
   const inputRef = useRef<HTMLInputElement>(null!);
@@ -20,6 +22,7 @@ const SearchBar = () => {
     if (e.key === 'Enter') {
       navigate(`/weather?city=${input.trim()}`);
       setInput('');
+      dispatch({ type: 'RESET_WEATHER' });
     }
   };
 

diff --git a/src/state/reducer.tsx b/src/state/reducer.tsx
@@ -166,6 +166,11 @@ const reducer = (state: State, action: Action): State => {
         ...state,
         error: null,
       };
+    case 'RESET_WEATHER':
+      return {
+        ...state,
+        weather: { current: null, forecast: null },
+      };
     default: {
       return state;
     }

diff --git a/src/state/reducer.types.tsx b/src/state/reducer.types.tsx
@@ -27,7 +27,12 @@ export type Action =
   | FetchFailureAction;
 
 type NoPayloadActions = {
-  type: 'RESTORE_UNIT' | 'TOGGLE_UNIT' | 'FETCH_START' | 'DISMISS_ERROR';
+  type:
+    | 'RESTORE_UNIT'
+    | 'TOGGLE_UNIT'
+    | 'FETCH_START'
+    | 'DISMISS_ERROR'
+    | 'RESET_WEATHER';
 };
 
 type FetchWeatherDataSuccessAction = {