Chris d'Arcy Redux Eval

.eslintrc.json

@@ -1,3 +1,3 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": ["wesbos/typescript"]
 }

app/Store/hook.ts

@@ -0,0 +1,5 @@
+import { useDispatch, useSelector } from 'react-redux';
+import type { AppDispatch, RootState } from './store';
+
+export const useAppDispatch = useDispatch.withTypes<AppDispatch>();
+export const useAppSelector = useSelector.withTypes<RootState>();

app/Store/rootReducer.ts

@@ -0,0 +1,7 @@
+import { combineReducers } from '@reduxjs/toolkit';
+
+import forecastReducer from './slices/forecastSlice';
+
+export const rootReducer = combineReducers({
+  forecast: forecastReducer,
+});

app/Store/slices/forecastSlice.ts

@@ -0,0 +1,75 @@
+import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
+import { RootState } from '../store';
+import { WeatherData } from '@/types/forecastTypes';
+
+const APIKEY = process.env.NEXT_PUBLIC_OPEN_WEATHER_APIKEY;
+
+/**
+ * Fetches the weather forecast based on the provided search term.
+ * @param {string} searchTerm - The term to search for the forecast.
+ * @returns {Promise<WeatherData>} The weather forecast data.
+ * @throws {Error} If the fetch fails or the response is not ok.
+ */
+export const fetchForecast = createAsyncThunk(
+  'forecast/fetchForecast',
+  async (searchTerm: string): Promise<WeatherData> => {
+    try {
+      const response = await fetch(
+        `https://api.openweathermap.org/data/2.5/forecast?q=${searchTerm}&appid=${APIKEY}&units=imperial`,
+      );
+      if (!response.ok) {
+        throw new Error(`HTTP error! Status: ${response.status}`);
+      }
+      const data = (await response.json()) as WeatherData;
+      return data;
+    } catch (error) {
+      if (error instanceof Error) {
+        console.error('Fetch error:', error.message);
+      } else {
+        console.error('Unknown error:', error);
+      }
+      throw error;
+    }
+  },
+);
+
+type ForecastState = {
+  forecast: WeatherData | null;
+  status: 'idle' | 'loading' | 'succeeded' | 'failed';
+  error: string | null;
+};
+
+const initialState: ForecastState = {
+  forecast: null,
+  status: 'idle',
+  error: null,
+};
+
+const forecastSlice = createSlice({
+  name: 'forecast',
+  initialState,
+  reducers: {},
+  extraReducers: (builder) => {
+    builder
+      .addCase(fetchForecast.pending, (state) => {
+        state.status = 'loading';
+      })
+      .addCase(fetchForecast.fulfilled, (state, action) => {
+        state.status = 'succeeded';
+        state.forecast = action.payload;
+      })
+      .addCase(fetchForecast.rejected, (state, action) => {
+        state.status = 'failed';
+        state.error = action.error.message;
+      });
+  },
+});
+
+/**
+ * Selects the forecast from the state.
+ * @param {RootState} state - The root state.
+ * @returns {WeatherData | null} The forecast data.
+ */
+export const selectForecast = (state: RootState) => state.forecast;
+
+export default forecastSlice.reducer;

app/Store/store.ts

@@ -0,0 +1,9 @@
+import { configureStore } from '@reduxjs/toolkit';
+import { rootReducer } from './rootReducer';
+
+export const store = configureStore({
+  reducer: rootReducer,
+});
+
+export type AppDispatch = typeof store.dispatch;
+export type RootState = ReturnType<typeof store.getState>;

app/components/Forecast.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import React from 'react';
+import { AlertTriangle } from 'lucide-react';
+import { selectForecast } from '../Store/slices/forecastSlice';
+import { useAppSelector } from '../Store/hook';
+import ShadChart from './ShadChart';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+
+/**
+ * Displays the weather forecast based on the selected city.
+ * Utilizes the Redux store to retrieve forecast data.
+ * @returns {JSX.Element} The rendered forecast component.
+ */
+function Forecast() {
+  const { forecast, status, error } = useAppSelector(selectForecast);
+  let city: string;
+
+  if (status === 'succeeded') {
+    city = forecast.city.name;
+  }
+
+  return (
+    <div className="mt-7">
+      {status === 'loading' && <p>Loading...</p>}
+      {status === 'failed' && (
+        <Alert variant="destructive">
+          <AlertTriangle />
+          <AlertTitle>{error}</AlertTitle>
+          <AlertDescription>
+            Sorry there was an error, please try searching again!
+          </AlertDescription>
+        </Alert>
+      )}
+      {status === 'succeeded' && (
+        <div className="w-screen px-24">
+          <h2 className=" text-center scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0">
+            {city}
+          </h2>
+          <div className="flex flex-col gap-12">
+            <ShadChart dataType="temp" forecastData={forecast.list} />
+            <ShadChart dataType="pressure" forecastData={forecast.list} />
+            <ShadChart dataType="humidity" forecastData={forecast.list} />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default Forecast;

app/components/ModeToggle.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import * as React from 'react';
+import { Moon, Sun } from 'lucide-react';
+import { useTheme } from 'next-themes';
+
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+
+/**
+ * A button to toggle between light and dark themes.
+ * Utilizes the Next.js theme provider.
+ * @returns {JSX.Element} The rendered button component.
+ */
+export function ModeToggle() {
+  const { setTheme } = useTheme();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon">
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme('light')}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme('dark')}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme('system')}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

app/components/ProviderClient.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import React, { ReactNode } from 'react';
+import { Provider } from 'react-redux';
+import { store } from '../Store/store';
+
+type ProviderClientProps = {
+  children: ReactNode[] | ReactNode;
+};
+
+/**
+ * A provider component that wraps children in a Redux Provider.
+ * @param {ProviderClientProps} props - The props for the provider component.
+ * @returns {JSX.Element} The rendered provider component.
+ */
+function ProviderClient({ children }: ProviderClientProps) {
+  return <Provider store={store}> {children} </Provider>;
+}
+
+export default ProviderClient;

app/components/ShadChart.tsx

@@ -0,0 +1,157 @@
+'use client';
+
+import React from 'react';
+import { CartesianGrid, Line, LineChart, ReferenceLine } from 'recharts';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from '@/components/ui/chart';
+import { ForecastDataPoint } from '@/types/forecastTypes';
+
+const options: Intl.DateTimeFormatOptions = {
+  weekday: 'short',
+  day: 'numeric',
+  month: 'short',
+  hour: 'numeric',
+  hour12: true,
+};
+
+const formatter = new Intl.DateTimeFormat('en-US', options);
+
+const chartConfig = {
+  temp: {
+    label: 'Temperature(℉)',
+    color: '#2563eb',
+  },
+  pressure: {
+    label: 'Pressure(hPa) ',
+  },
+  humidity: {
+    label: 'Humidity(%)',
+  },
+} satisfies ChartConfig;
+
+type ShadChartProps = {
+  forecastData: ForecastDataPoint[];
+  dataType: 'temp' | 'pressure' | 'humidity';
+};
+
+/**
+ * Renders a chart displaying forecast data for temperature, pressure, or humidity.
+ * @param {ShadChartProps} props - The properties for the chart component.
+ * @returns {JSX.Element} The rendered chart component.
+ */
+function ShadChart({ forecastData, dataType }: ShadChartProps) {
+  const tempForecasts = forecastData.map(
+    (foreCastEntry: ForecastDataPoint) => foreCastEntry.main.temp,
+  );
+  const pressureForecasts = forecastData.map(
+    (foreCastEntry: ForecastDataPoint) => foreCastEntry.main.pressure,
+  );
+  const humidityForecasts = forecastData.map(
+    (foreCastEntry: ForecastDataPoint) => foreCastEntry.main.humidity,
+  );
+
+  const tempAverage = Math.round(
+    tempForecasts.reduce((prev, curr) => prev + curr) / tempForecasts.length,
+  );
+  const pressureAverage = Math.round(
+    pressureForecasts.reduce((prev, curr) => prev + curr) /
+      pressureForecasts.length,
+  );
+  const humidityAverage = Math.round(
+    humidityForecasts.reduce((prev, curr) => prev + curr) /
+      humidityForecasts.length,
+  );
+
+  let averageLineValue: number;
+  let displayAverage: string;
+  if (dataType === 'temp') {
+    averageLineValue = tempAverage;
+    displayAverage = `${tempAverage} ℉`;
+  } else if (dataType === 'humidity') {
+    averageLineValue = humidityAverage;
+    displayAverage = `${humidityAverage} % `;
+  } else {
+    averageLineValue = pressureAverage;
+    displayAverage = `${pressureAverage} hPA`;
+  }
+
+  const chartData = forecastData.map((f) => {
+    const date = new Date(f.dt_txt);
+    const displayDate = formatter.format(date);
+    return {
+      temp: f.main.temp,
+      pressure: f.main.pressure,
+      humidity: f.main.humidity,
+      displayDate,
+    };
+  });
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{dataType.toUpperCase()}</CardTitle>
+        <CardDescription>5 Day Forecast</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <LineChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <ChartTooltip
+              cursor={false}
+              content={
+                <ChartTooltipContent
+                  formatter={(value, name, item, index, payload) =>
+                    `${value} at ${payload.displayDate}`
+                  }
+                />
+              }
+            />
+            <ReferenceLine
+              y={averageLineValue}
+              label="Avg"
+              stroke="red"
+              strokeDasharray="3 3"
+            />
+            <Line
+              dataKey={dataType}
+              type="natural"
+              stroke="var(--color-temp)"
+              strokeWidth={2}
+              dot={{
+                fill: 'var(--color-temp)',
+              }}
+              activeDot={{
+                r: 6,
+              }}
+            />
+          </LineChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2 text-sm">
+        <div className="leading-none text-muted-foreground">
+          {dataType.toUpperCase()} Average: {displayAverage}
+        </div>
+      </CardFooter>
+    </Card>
+  );
+}
+
+export default ShadChart;