Refactor WeatherDetailsContainer mounting logic

ThuHtooSan · Jan 15, 2024 · ecc619f · ecc619f
1 parent ac16e85
commit ecc619f
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 9 deletions.
diff --git a/src/components/WeatherDetailsContainer/WeatherDetailsContainer.tsx b/src/components/WeatherDetailsContainer/WeatherDetailsContainer.tsx
@@ -12,6 +12,8 @@ const WeatherDetailsContainer = ({
   currentWeather,
   forecastData,
 }: WeatherDetailsContainerProps) => {
+  if (!currentWeather) return;
+
   const { weather, main, clouds, visibility, wind, dt, sys, name } =
     currentWeather;
   return (
@@ -26,10 +28,12 @@ const WeatherDetailsContainer = ({
         <BasicWeatherDetails {...{ weather, main, sys, name }} />
         <AdvancedWeatherDetails {...{ visibility, wind, clouds }} />
       </div>
-      <div className='forecasts'>
-        <WeatherForecast list={forecastData.list} />
-        <WeatherSource dt={dt} />
-      </div>
+      {forecastData && (
+        <div className='forecasts'>
+          <WeatherForecast list={forecastData.list} />
+        </div>
+      )}
+      <WeatherSource dt={dt} />
     </motion.div>
   );
 };

diff --git a/src/components/WeatherDetailsContainer/WeatherDetailsContainer.types.ts b/src/components/WeatherDetailsContainer/WeatherDetailsContainer.types.ts
@@ -2,6 +2,6 @@ import { CurrentWeather } from '../../types';
 import { RefactoredForecastData } from '../../types/Forecasts';
 
 export type WeatherDetailsContainerProps = {
-  currentWeather: CurrentWeather;
-  forecastData: RefactoredForecastData;
+  currentWeather: CurrentWeather | null;
+  forecastData: RefactoredForecastData | null;
 };
diff --git a/src/components/WeatherSource/weather-source.scss b/src/components/WeatherSource/weather-source.scss
@@ -3,6 +3,7 @@
 
 .source-info {
   @include flex-row;
+  width: 100%;
   justify-content: space-between;
   padding: 20px 10px;
   font-size: 0.8rem;

diff --git a/src/pages/Weather/Weather.tsx b/src/pages/Weather/Weather.tsx
@@ -8,6 +8,7 @@ import { OpenWeatherMapErrorResponse } from '../../types/ErrorResponses';
 
 const Weather = () => {
   const { state, dispatch } = useAppContext();
+  const { current, forecast } = state.weather;
   const [searchParams, _] = useSearchParams();
   let { city, country, lat, lon } = Object.fromEntries(searchParams.entries());
   lat = Number(lat).toFixed(2);
@@ -73,13 +74,14 @@ const Weather = () => {
   useEffect(() => {
     fetchWeather();
   }, [state.configs.unit, lat, lon, city]);
+
   return (
     <>
       <Spinner title='Fetching weather' />
-      {!!state.weather.current && !!state.weather.forecast && (
+      {!state.loading && (
         <WeatherDetailsContainer
-          currentWeather={state.weather.current}
-          forecastData={state.weather.forecast}
+          currentWeather={current}
+          forecastData={forecast}
         />
       )}
     </>