[feat] implement routing to plant page

[SashankBalusu]

What's new in this PR 🧑‍🌾

Description

• when user clicks on a plant they are routed to a new page. In that page they either see just the plant object if they were in all plants or the plant object and the user plant row from db if in my plants
• Refactored backend calls in view-plants to be solely present in the api folder
• Created backend functions to fetch userplants table by id and user id

Screenshots

How to review

• can look through view-plants first and then the dynamic routing files under [plantId] and [userPlantId]
• changes to backend files are in userPlants and plants

Next steps

Relevant links

Online sources

Related PRs

CC: @ccatherinetan

[ccatherinetan]

looking great! the functionality is fantastic 🤩 A couple big changes to consider

1. Create an OwnedPlant type and track a state of OwnedPlant[] instead of a map of UUIDs
2. split handlePlantCardClick into 2 functions that take in a OwnedPlant and a Plant to handle clicking on User PlantCards and PlantCards respectively
3. remove InlineDiv and handle clicks all within PlantCard

[ccatherinetan]

looking so great!! some final things but otherwise ready to merge!

[ccatherinetan]

can we directly just move fetchUserPlants into the useEffect instead of using fetchData as another wrapper?

so it could look like

useEffect(() => {
  const fetchUserPlants = async () => {
    const fetchedUserPlants = await getUserPlantsByUserId(user_id);

    const ownedPlants: OwnedPlant[] = await Promise.all(
      fetchedUserPlants.map(async userPlant => {
        const plant = await getMatchingPlantForUserPlant(userPlant);
        return {
          userPlantId: userPlant.id,
          plant,
        };
      }),
    );

    setOwnedPlants(ownedPlants);
  }, []); // eventually when ProfileContext is connected, userId would be in the dependency list.

See IJP for an example of using queries in the useEffect

[ccatherinetan]

note: since the queries (both getUserPlantsByUserId and getMatchingPlantForUserPlant) throw an error on error, we may want to use a try / catch block here and wherever a query is called to handle the error, i.e. console.error() it in the future (see IJP's example above)