Context AP with import of Custom Hook

# Inside .htaccess

SetEnvIf Host projectname\.com$ TYPO3_CONTEXT=Production
SetEnvIf Host projectname\.test$ TYPO3_CONTEXT=Development

# or you can just force it by using

SetEnv TYPO3_CONTEXT Development

import { createContext, useState } from "react";
import { faker } from "@faker-js/faker";



//1. create the context
const PostContext = createContext();


// 2. create  the Provider function that returns the provider
function PostProvider({children}){


  // 3. add all state and functions we need
  const [posts, setPosts] = useState(() =>
    Array.from({ length: 30 }, () => createRandomPost())
  );

  const [searchQuery, setSearchQuery] = useState("");

  // Derived state. These are the posts that will actually be displayed
  const searchedPosts = searchQuery.length > 0 ? posts.filter((post) => `${post.title} ${post.body}`.toLowerCase().includes(searchQuery.toLowerCase())) : posts;

  function handleAddPost(post) {
    setPosts((posts) => (
      [...posts, post]
    ))
  }

  function handleClearPosts() {
    setPosts([]);
  }

  function createRandomPost() {
    return {
      title: `${faker.hacker.adjective()} ${faker.hacker.noun()}`,
      body: faker.hacker.phrase(),
    };
  }


   // 4. return all values we need to the provider
   // the values represent all state and functions we have above using an object
   // then we call each key inside the wrapped component where each state or function is needed

  return(
    <PostContext.Provider value={{
      posts: searchedPosts, // the derived state that holds the posts
      query: searchQuery, // the query
      querySetter: setSearchQuery, // query setter function
      addPostHandler: handleAddPost, // add post function
      clearPostHander: handleClearPosts, // clear posts function
    }}>
      {children}
    </PostContext.Provider>
  )

  
} // close the PostProvider function


// 5.export the postContext to use AND the Provider to wrap all components
export {PostContext, PostProvider} 

import { createContext } from "react";
import useFetch from '../hooks/useFetch' // import the useFetch hook


const BASE_URL = 'http://localhost:8000';


const CitiesContext = createContext();



function CitiesProvider({children}){

    // fetch hook for cities => see useFetchCties file
    const {data: cities, loading, error} = useFetch(`${BASE_URL}/cities`);  


    return(
      <CitiesContext.Provider value={{
          cities: cities,
          loading: loading,
          error: error
      }}>

        {children}
      </CitiesContext.Provider>
    )
}

export {CitiesContext, CitiesProvider}

//FavColor.jsx

import React,{useState} from 'react';

const fav=()=>{

const[color,setColor]=useState("red");
  
  return(
<>
    <h1>fav color is {color}</h1>
    <button     type="button"  onClick={()=>setColor("blue")} className="btn1">
    Blue
    </button>

<button type="button"  onClick={()=>setColor("red")}  className="btn2">Red</button>



    </>
  )
}

export default fav;


//App.jsx
import React from 'react';
import FavColor from './FavColor';

export function App() {
  return (
    <div className='App'>
    <FavColor  />

    </div>
  );
}

// use Fetch hook file
import { useState, useEffect } from "react";


const useFetchCities = (url) => { // need this url placeholder to put into where the fetch hook is being called


 const [cities, setCities] = useState([]);
 const [loading, setLoading] = useState(false);
 const [error, setError] = useState(null);



//fetch for local url => move later to a hook
 useEffect(() => {
      const citiesData = async(url) => {
        setLoading(true)
        try {
          const response = await fetch(url);
          if(!response.ok) return
          
          if(response.status === 200){
            const data = await response.json();
            setCities(data)
            
          }
        
        } catch (error) {
          setError(error)
          setLoading(true)
        }finally{
          setLoading(false)
        }
      }
      citiesData(url)
 
 }, [url]);


 return {cities, loading, error}
}


export default useFetchCities;






//import the hook into another file

// fetch hook for cities => see useFetchCties file
const {cities, loading, error} = useFetchCities(`${BASE_URL}/cities`);

// removes all duplicates of a key in a json array, in this case we create a new const that loops over a cities json array and checks for countries with the same name. it will return only the first instance of that country object where there are multiple of the same country

const countriesUnique = new Set(
  cities.map(city =>
    JSON.stringify({ country: city.country, emoji: city.emoji }),
  ),
)
const countries = [...countriesUnique].map(each => JSON.parse(each))
console.log(countries)