App.jsx refactored to use useReducer(). History state management added

src/App.jsx

@@ -1,28 +1,48 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { createBrowserRouter, RouterProvider, Outlet } from "react-router-dom";
-import { useState, useEffect } from "react";
-import Results from "./Components/Results";
-import Form from "./Components/Form";
+import { useReducer, useEffect } from "react";
 import Header from "./Components/Header";
 import Footer from "./Components/Footer";
 import History from "./Pages/History";
 import About from "./Pages/About";
 import Contact from "./Pages/Contact";
-import "./App.scss";
 import Home from "./Pages/Home";
 import Sidebar from "./Components/Sidebar";
+import "./App.scss";
+
 const queryClient = new QueryClient();
 
+const initialState = {
+  data: null,
+  requestParams: {},
+  isLoading: false,
+  history: [],
+};
+
+function reducer(state, action) {
+  switch (action.type) {
+    case 'SET_DATA':
+      return { ...state, data: action.payload };
+    case 'SET_REQUEST_PARAMS':
+      return { ...state, requestParams: action.payload };
+    case 'SET_LOADING':
+      return { ...state, isLoading: action.payload };
+    case 'ADD_TO_HISTORY':
+      return { ...state, history: [...state.history, action.payload] };
+    default:
+      throw new Error();
+  }
+}
+
 const App = () => {
-  const [data, setData] = useState(null);
-  const [requestParams, setRequestParams] = useState({});
-  const [isLoading, setIsLoading] = useState(false);
+  const [state, dispatch] = useReducer(reducer, initialState);
+  const { data, requestParams, isLoading, history } = state;
 
   useEffect(() => {
     const fetchData = async () => {
       if (!requestParams.url) return;
 
-      setIsLoading(true);
+      dispatch({ type: 'SET_LOADING', payload: true });
       try {
         const response = await fetch(requestParams.url, {
           method: requestParams.method,
@@ -38,22 +58,22 @@ const App = () => {
         if (!response.ok) throw new Error("Network response was not ok.");
 
         const newData = await response.json();
-        setData(newData);
+        dispatch({ type: 'SET_DATA', payload: newData });
+        dispatch({
+          type: 'ADD_TO_HISTORY',
+          payload: { ...requestParams, results: newData },
+        });
       } catch (error) {
-        console.error(
-          "There has been a problem with your fetch operation:",
-          error
-        );
-        setData(null);
+        console.error("There has been a problem with your fetch operation:", error);
+        dispatch({ type: 'SET_DATA', payload: null });
       } finally {
-        setIsLoading(false);
+        dispatch({ type: 'SET_LOADING', payload: false });
       }
     };
 
     fetchData();
   }, [requestParams]);
 
-
   const Layout = () => {
     return (
       <div className="page">
@@ -64,7 +84,7 @@ const App = () => {
           </div>
           <div className="content__container">
             <QueryClientProvider client={queryClient}>
-              <Outlet />
+              <Outlet context={{ state, dispatch }} />
             </QueryClientProvider>
           </div>
         </div>
@@ -80,11 +100,11 @@ const App = () => {
       children: [
         {
           path: "/",
-          element: <Home data={data} setData={setData} requestParams={requestParams} setRequestParams={setRequestParams} isLoading={isLoading} />,
-        },
+          element: <Home data={data} dispatch={dispatch} requestParams={requestParams} isLoading={isLoading} />,
+        },        
         {
           path: "/history",
-          element: <History />,
+          element: <History history={history} dispatch={dispatch} />,
         },
         {
           path: "/about",

src/Pages/History/index.jsx

@@ -1,9 +1,21 @@
-import React from 'react'
+import './History.scss';
+
+const History = ({ history, dispatch }) => {
+  const handleClick = (requestParams) => {
+    dispatch({ type: 'SET_REQUEST_PARAMS', payload: requestParams });
+  };
 
-const History = () => {
   return (
-    <div>History</div>
-  )
+    <div>
+      <h2>History</h2>
+      {history.map((entry, index) => (
+        <div key={index} onClick={() => handleClick(entry)}>
+          <p><b>Method:</b> {entry.method}</p>
+          <p><b>URL:</b> {entry.url}</p>
+        </div>
+      ))}
+    </div>
+  );
 }
 
-export default History
+export default History;

src/Pages/Home/index.jsx

@@ -5,14 +5,19 @@ import Results from "@/Components/Results";
 const Home = ({
   data,
   requestParams,
-  setRequestParams,
+  dispatch, // Updated to receive dispatch
   isLoading,
 }) => {
+
+  const handleApiCall = (newRequestParams) => {
+    dispatch({ type: 'SET_REQUEST_PARAMS', payload: newRequestParams });
+  };
+
   return (
     <div className="home">
       <div className="home__container">
         <h1>RESTy</h1>
-        <Form handleApiCall={setRequestParams} />
+        <Form handleApiCall={handleApiCall} />
       </div>
       <Results
         data={data}