Add forecast days selector component

src/components/ForecastDaysSelector.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ToggleButton, ToggleButtonGroup } from '@mui/material';
+import { ForecastDaysSelectorProps } from '../domain/types/ForecastDaysSelectorProps';
+
+export const ForecastDaysSelector: React.FC<ForecastDaysSelectorProps> = ({ forecastDays, onForecastDaysChange }) => {
+  return (
+    <ToggleButtonGroup
+      color="primary"
+      value={forecastDays}
+      exclusive
+      onChange={onForecastDaysChange}
+      aria-label="forecast days"
+      style={{ marginBottom: '1rem' }}
+    >
+      <ToggleButton value={3} aria-label="3 days">3 Days</ToggleButton>
+      <ToggleButton value={7} aria-label="7 days">7 Days</ToggleButton>
+      <ToggleButton value={14} aria-label="14 days">14 Days</ToggleButton>
+    </ToggleButtonGroup>
+  );
+};

src/components/Widget.tsx

@@ -3,21 +3,19 @@ import { useQuery } from '@apollo/client';
 import { useCityAutocomplete } from '../hooks/useCityAutocomplete';
 import { GET_FORECAST_FROM_COORDS_QUERY } from '../graphql/queries';
 import { SuggestedCity } from '../domain/types/SuggestedCity';
-import Autocomplete from '@mui/material/Autocomplete';
-import TextField from '@mui/material/TextField';
-import Alert from '@mui/material/Alert';
-import { useTheme } from "@mui/material";
-import CircularProgress from '@mui/material/CircularProgress';
+import { useTheme, Autocomplete, Alert, TextField, CircularProgress } from "@mui/material";
 import { ResponsiveChartContainer, LinePlot, ChartsXAxis, ChartsYAxis, ChartsLegend, ChartsGrid, ChartsReferenceLine, ChartsTooltip } from '@mui/x-charts';
 import dayjs from 'dayjs';
 import { WeatherData } from './../domain/types/WeatherData';
+import { ForecastDaysSelector } from './ForecastDaysSelector';
 import { DEFAULT_WIDGET_PARAMS } from '../infrastructure/constants';
 
 export const Widget: React.FC = () => {
+  const [forecastDays, setForecastDays] = useState(DEFAULT_WIDGET_PARAMS.days);
   const [queryParams, setQueryParams] = useState({
     latitude: DEFAULT_WIDGET_PARAMS.latitude,
     longitude: DEFAULT_WIDGET_PARAMS.longitude,
-    days: DEFAULT_WIDGET_PARAMS.days
+    days: forecastDays
   });
   const { palette } = useTheme();
   console.log('palette', palette);
@@ -47,6 +45,14 @@ export const Widget: React.FC = () => {
     }
   }
 
+  const handleForecastDaysChange = (_event: React.MouseEvent<HTMLElement>, value: number) => {
+    setForecastDays(value);
+    setQueryParams(prev => ({
+      ...prev,
+      days: value
+    }));
+  };
+
   const [chartData, setChartData] = useState({
     xAxisData: [],
     seriesData: [] as number[][]
@@ -95,6 +101,12 @@ export const Widget: React.FC = () => {
           Error loading forecast: {errorForecast.message}
         </Alert>
       )}
+
+      <ForecastDaysSelector
+        forecastDays={forecastDays}
+        onForecastDaysChange={handleForecastDaysChange}
+      />
+
       {data && (
         <ResponsiveChartContainer
           xAxis={[{

src/domain/types/ForecastDaysSelectorProps.ts

@@ -0,0 +1,4 @@
+export type ForecastDaysSelectorProps = {
+  forecastDays: number;
+  onForecastDaysChange: (_event: React.MouseEvent<HTMLElement>, value: number) => void;
+}

src/infrastructure/constants.ts

@@ -3,7 +3,7 @@ import { SuggestedCity } from '../domain/types/SuggestedCity';
 export const DEFAULT_WIDGET_PARAMS = {
   latitude: 60.16952,
   longitude: 24.93545,
-  days: 1,
+  days: 3,
   theme: 'dark'
 };