Replace redux code by context API

[swh00tw]

Run e2e tests manually ( feel free to add any item which should be checked ):
https://www.notion.so/jchiroto/E2E-Test-RunBook-16001fb1d7cc4674b2e3b81e3ae24719

• Move all Redux global states to Context Providers ( CourseSearchingPorvider, CourseTableProvider, DisplayTagsProvider, UserProvider )
• Move API fetchers under /queries files, and move global states setters out of those fetchers for better reusability and better compatibility if we want to adopt frameworks like SWR.

-------------------- BEFORE --------------------
async function fetcher(){
    const { data } = axios.get(...)
    setState(data)
    return data
}

// in component
useEffect(()=>{
    fetcher();
})
-------------------- AFTER --------------------
async function fetcher(){                      // ✅ better reusability because it did not involve any set states inside, 
    const { data } = axios.get(...)            // and easier to work with frameworks like `SWR`
    return data
}

// in component
useEffect(()=>{
    const data = await fetcher();
    setState(data);
})

• Also remove try...catch... block in fetchers:

  • because we already wrap the function in try...catch... block outside, so I found it redundant for adding another try...catch... inside.
  • neater code.
  • if we use useSWR hook in future, it already has stuffs like isError & onError callback in syntax like this

  const { data, error } = useSWR(key, fetcher, {
      onSuccess: ()=>{},
      onError: ()=>{},
      ...
  })
  

• For Hover Course Feature, I found using Context API can't fully replace Redux "performance-wisely" because if there are any states changes in Context Provider, it will force re-render to whole sub-tree and the client become so laggy (discussion 1, discussion 2) (Redux doesn't because it utilize useSelector and it will only re-render component using this hook). So I think if the set states operation happen frequently and the computation is expensive like our hover feature, it's not good to replace redux by context API. So I found a light-weighted library called Valtio (article), it also provide render-optimized feature like redux, and the performance looks good.

  

• Also unify global states' name to camelCase instead of snake_naming_case

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://gray-river-017c6bf1e-79.westus2.azurestaticapps.net

[jc-hiroto]

I've gone through the codes and I will test it tmr.
Nice work! Don't forget to get enough sleep 😪

[jc-hiroto]

Since we've gotten rid of redux, there will be more context providers in the future.
To prevent pyramid of doom, I suggest we can solve this based on one of the solutions here.

but ignore this comment, LOL

This is what Redux solves. – coreyward Jul 24, 2018 at 17:33

[jc-hiroto]

tested without issues.