Lessons from phase 2 project

As a beginner, consistent exposure is very important

I started this project back in March intending to create weather app for ski resorts. I did make pretty good progress but a car accident in March caused me to take a pretty long hiatus. When I went back to work on this project, I realized things move fast in the tech world and that I might have been little too ambitious.

React has been updated a few times and I couldn't even initiate npm start . After spending days on stack overflow, I was able to find a workaround by utilizing <React.StrictMode> , only for it to crash again a few days later (possibly due to update in NavLinks) while I was on work trip. I had enough at that point and decided to just start the project over.

These series of events did teach me a pretty valuable lesson, though. In that as a beginner, I need to constantly be coding, even if it's staring at a screen for few hours on a given day because my brain just refuses to work that day. If I was able to just keep tabs on the project, I could've avoided the update and competency issues and also avoided spending another month just brushing up on materials I've already completed to re-learn REACT.

Don't use external API on these projects

Since I used internal database on last project, I decided to use an external API for the phase 2 project. I found a manageable looking API https://www.refugerestrooms.org/api/docs/#!/restrooms and decided to use that. Presenting data was not that much of a problem.

I looked through the API and found that search function is operated by query parameter. To easily organize the query, I decided to create a query context component

import React, { createContext, useState} from "react";

const QueryContext = createContext();


function QueryProvider({ children }) {
    const [ query, setQuery ] = useState("seattle")


  return <QueryContext.Provider value={{ query, setQuery }}>{children}</QueryContext.Provider>;
}

export { QueryContext, QueryProvider };

...and pass in city names as query down in App component.

 const { query, setQuery } = useContext(QueryContext)

  useEffect(()=>{
      fetch(`https://www.refugerestrooms.org/api/v1/restrooms/search?page=1&per_page=10&offset=0&ada=true&unisex=true&query=${query}`)
      .then(res=>res.json())
      .then(data=>setBathrooms(data))
  },[ query ])

Default was not that important but since I'm based out of Seattle, I just set it to Seattle. With pretty basic display set up, I was able to confirm things were working.

Problem was that I had to have 2 CRUD components per the requirement. This was when I found out that you can't POST to external API without proper authorization.

Workaround

To work around this problem, I created an additional internal data base, db.json, where the posted data will be stored. My plan was to create 2 other components, Post and Pending, former of which will contain POST request and later will render posted data on the page.

I passed down this code to Pending at first to render

 const [ pendings, setPendings ] = useState([])

 useEffect(()=>{
      fetch(`http://localhost:8000/bathrooms`)
      .then(res=>res.json())
      .then(data=>setPendings(data))
  },[ Pendings ])

and used

        fetch("http://localhost:8000/bathrooms", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify(newBathroom)
            })
            .then(r => r.json())
             .then(data => setPendings(data))

But Quickly I learned that this was causing an error because (I think) the POST request was throwing the codes in loop, causing the pending page to re-render over and over again.

After a few days of trying different ways of restructuring the same code, I finally came up with a workaround of creating another state newPendings that will separate two codes. In the end they looked like this.

 const [ newPendings, setNewPendings ] = useState([])

useEffect(()=>{
      fetch(`http://localhost:8000/bathrooms`)
      .then(res=>res.json())
      .then(data=>setPendings(data))
  },[ newPendings ])

   fetch("http://localhost:8000/bathrooms", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify(newBathroom)
            })
            .then(r => r.json())
             .then(data => setNewPendings(data))

Solved?

After utilizing another state variable, code was working as intended. However I'm still not sure what actually caused an issue and would like to find that out. Also I'm almost sure that what I did was just a workaround and not the "right" solution. I'd like to find that out as well.