FetchData
├── button.tsx
├── location.tsx
├── weather.tsx

import React, { useState, useEffect } from "react";
import fetchWeatherData from "./weather"; // Import the function to fetch weather data
 
interface WeatherProps {
    location: string;
}
 
const WeatherButtons: React.FC<WeatherProps> = ({ location }) => {
    const [weatherData, setWeatherData] = useState<any>(null); // Create state to hold weather data and initialize it to null
    const [requestType, setRequestType] = useState<string>(""); // Create state to hold the type of request to make and initialize it to an empty string
 
    useEffect(() => {
        if (requestType) { // If a request type has been selected
            fetchWeatherData(location, requestType).then((data: any) => // Call the function to fetch weather data
                setWeatherData(data) // Set the weather data to the response from the API
            );
        }
    }, [requestType, location]); // Run the effect when either request type or location changes
 
    return (
        <div className="text-2xl">
            <button
                className="weather-current-weather-button"
                onClick={() => setRequestType("current")} // When the button is clicked, set the request type to "current"
            >
                Current Weather
            </button>
            {weatherData && ( // If weather data exists
                <div className="weather-json-bg">
          <pre className="weather-button-pre-wrap">
            {JSON.stringify(weatherData, null, 2)} // Display the weather data as JSON
          </pre>
                </div>
            )}
        </div>
    );
};
 
export default WeatherButtons;
 
 

import React, { createContext, useState } from "react";
 
export const LocationContext = createContext<any>(null); // Create a context object to hold location data
 
export const LocationProvider: React.FC = ({ children }) => { // Create a provider component for the context
    const [location, setLocation] = useState<string>("New York"); // Create state to hold the current location and initialize it to "New York"
 
    const changeLocation = (newLocation: string) => {
        setLocation(newLocation); // Function to update the location
    };
 
    return (
        <LocationContext.Provider value={{ location, changeLocation }}>
            {children}
        </LocationContext.Provider>
    );
};
 
 
 

const fetchWeatherData = async (
  location: string,
  requestType: string
): Promise<any> => {
  const apiKey = process.env.NEXT_PUBLIC_WEATHER ?? ""; // Get the API key from the environment variables
  const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${location}&appid=${apiKey}`; // Construct the API URL using the location and API key
 
  const response = await fetch(apiUrl); // Make a request to the API
  const data = await response.json(); // Parse the response as JSON
  return data; // Return the data
};
 
export default fetchWeatherData;
 

import WeatherButtons from "../components/react/useEffect/FetchData/button";
import { LocationProvider } from "../components/react/useEffect/FetchData/location";
 
<LocationProvider>
  <WeatherButtons
    location="London"
    units="metric"
    theme="dark"
  />
</LocationProvider>

UserFetch
├── Data.tsx
├── UserFetch.tsx
 

import React, { useEffect, useState } from "react";
 
// Define the shape of the data object that will be returned by the hook
type Data<T> = {
  status: "loading" | "success" | "error";
  data?: T;
  error?: Error;
};
 
// Custom hook that fetches data from an API endpoint and returns the data object
export function useFetch<T>(url: string): Data<T> {
  // Create a state variable called 'data' and initialize it with { status: "loading" }
  const [data, setData] = useState<Data<T>>({ status: "loading" });
 
  // useEffect hook that runs when the URL changes
  useEffect(() => {
    // Define an asynchronous function called 'fetchData'
    const fetchData = async () => {
      try {
        // Fetch data from the API endpoint
        const response = await fetch(url);
        const result = await response.json();
 
        // Update the 'data' state variable with the fetched data
        setData({ status: "success", data: result });
      } catch (error) {
        // Update the 'data' state variable with the error object
        setData({ status: "error", error: error as Error });
      }
    };
 
    // Call the 'fetchData' function to fetch data from the API endpoint
    fetchData();
  }, [url]); // Only run the effect when the url changes
 
  // Return the 'data' object
  return data;
}

import React, { useState } from "react";
import { useFetch } from "./Data";
 
function UsersFetch() {
  // Create a state variable called 'url' and initialize it with the API endpoint URL
  const [url, setUrl] = useState("https://jsonplaceholder.typicode.com/users");
 
  // Call the 'useFetch' hook with the 'url' state variable
  const data = useFetch<Array<{ id: number; name: string }>>(url);
 
  // Render a button that changes the 'url' state variable when clicked
  return (
    <div>
      <button
        className="user-fetch-button"
        onClick={() => setUrl(url + "?_limit=5")}
      >
        Fetch only 5 users
      </button>
      {/* If the 'status' property of the 'data' object is 'loading', render a loading message */}
      {data.status === "loading" && <p>Loading...</p>}
      {/* If the 'status' property of the 'data' object is 'success', render a list of users */}
      {data.status === "success" && (
        <ul className="user-fetch-data-bg">
          {data.data?.map((user) => (
            <li key={user.id}>{user.name}</li>
          ))}
        </ul>
      )}
      {/* If the 'status' property of the 'data' object is 'error', render an error message */}
      {data.status === "error" && <p>Error: {data.error?.message}</p>}
    </div>
  );
}
 
export default UsersFetch;

Widget
├── ColorWidget.tsx
├── Widget.tsx

// This function creates a new widget element with the specified background color and adds it to the provided container element.
export function createWidget(color: string, container: HTMLElement) {
    // Create a new div element to serve as the widget.
    const widget = document.createElement("div");
    // Set the widget's background color.
    widget.style.background = color;
    // Set the widget's width and height.
    widget.style.width = "100px";
    widget.style.height = "100px";
    // Set the widget's border radius.
    widget.style.borderRadius = "25%";
    // Set the widget's margin.
    widget.style.margin = "10px";
    // Set the widget's border style and color.
    widget.style.border = "2px solid pink";
 
    // Create a new custom event to be dispatched periodically by the widget.
    const statusChangeEvent = new CustomEvent("statusChange", {
        detail: { status: "active" },
    });
 
    // Set an interval to dispatch the statusChangeEvent every 1000 milliseconds (1 second).
    setInterval(() => {
        widget.dispatchEvent(statusChangeEvent);
    }, 1000);
 
    // Add the widget to the container element.
    container.appendChild(widget);
 
    // Return an object with functions to add and remove event listeners, as well as to destroy the widget.
    return {
        addEventListener: widget.addEventListener.bind(widget),
        removeEventListener: widget.removeEventListener.bind(widget),
        destroy: () => container.removeChild(widget),
    };
}
 

import React, { useEffect, useRef, useState } from "react";
import { createWidget } from "./Widget";
 
interface ColorWidgetProps {
    initialColor: string;
}
 
const ColorWidget: React.FC<ColorWidgetProps> = ({ initialColor }) => {
    // useRef hook to create a reference to the container div element
    const containerRef = useRef<HTMLDivElement>(null);
 
    // useState hook to create a state variable for the color of the widget
    const [color, setColor] = useState(initialColor);
 
    // useEffect hook to run side-effects when the component mounts or the color state changes
    useEffect(() => {
        // Get the current value of the container reference
        const container = containerRef.current;
 
        // If the container exists, create a widget and add event listeners to it
        if (container) {
            // Create the widget with the given color and container
            const widget = createWidget(color, container);
 
            // Define a function to handle the "statusChange" event of the widget
            const handleStatusChange = (event: CustomEvent<{ status: string }>) => {
                console.log("The status is:", event.detail.status);
            };
 
            // Add an event listener to the widget to listen for "statusChange" events
            (widget as any).addEventListener("statusChange", handleStatusChange);
 
            // Return a cleanup function to remove the widget and event listeners when the component unmounts or the color changes
            return () => {
                widget.destroy();
                (widget as any).removeEventListener("statusChange", handleStatusChange);
            };
        }
    }, [color]);
 
    // Define a function to update the color state variable with a random hex color
    const changeColor = () => {
        setColor(
            `#${Math.floor(Math.random() * 0x1000000)
                .toString(16)
                .padStart(6, "0")}`
        );
    };
 
    // Render the ColorWidget component with a container div, a button to change the color, and the color widget itself
    return (
        <div className="color-widget">
            <div className="widget-container" ref={containerRef}></div>
            <button className="widget-button" onClick={changeColor}>
                Change Color
            </button>
        </div>
    );
};
 
export default ColorWidget;
 

import React, { useState, useEffect } from "react";
 
export const ConditionalEffect: React.FC = () => {
    // state variables for count and message
    const [count, setCount] = useState(0);
    const [message, setMessage] = useState("");
 
    // useEffect hook that runs whenever count changes
    useEffect(() => {
        // check if count is even or odd
        if (count % 2 === 0) {
            // set message to "Even" if count is even
            setMessage("Even");
        } else {
            // set message to "Odd" if count is odd
            setMessage("Odd");
        }
    }, [count]);
 
    // render the component with a button that increments count on click
    // also display the current message and count value
    return (
        <div>
            <button
                className="conditional-effect-button"
                onClick={() => setCount(count + 1)}
            >
                Conditional Effect
            </button>
            <p className="conditional-effect-text">{message}</p>
            <p className="conditional-effect-text">Count: {count}</p>
        </div>
    );
};
 

import React, { useState, useEffect } from "react";
 
export const Timer: React.FC = () => {
    // Set the initial state of seconds to 0 using useState hook
    const [seconds, setSeconds] = useState(0);
 
    useEffect(() => {
        // Set an interval to increment seconds state by 1 every 1000ms using setInterval
        const interval = setInterval(() => {
            setSeconds((seconds) => seconds + 1);
        }, 1000);
 
        // Clear the interval using clearInterval in the cleanup function
        return () => {
            clearInterval(interval);
        };
    }, []); // Effect only runs once (empty dependency array)
 
    return (
        <div>
            <p className="timer-text">
                You have been on this page for {seconds} seconds.
            </p>
        </div>
    );
};

import React, { useEffect, useState } from "react";
 
export function UpdateTItle() {
    const [count, setCount] = useState(0); // create a state variable 'count' and its update function 'setCount' with an initial value of 0
 
    useEffect(() => {
        // This is a side effect that runs when the component mounts, and whenever 'count' changes
        // It updates the document title with the current count
        document.title = `You clicked ${count} times`;
    }, [count]); // Only run the effect when 'count' changes
 
    return (
        <div>
            <p className="update-title-text">You clicked {count} times</p>
            <button
                className="update-title-button"
                onClick={() => setCount(count + 1)}
            >
                Click me
            </button>
        </div>
    );
}