Creating Front End Components

This document is outlining the process of creating a react component and hooking it up to the backend. The front end is comprised of React components, some of which are used many times throughout the app, for example the navigation bar up top that is generally on each url. Each component will have a corresponding store file for storing state information, api file for making api requests, and probably their own styles as well. For this instruction set I will using the Participant Component

Step one - Create the Component

`import React, { useContext } from "react" import { participantStoreContext } from "../stores/ParticipantStore" import { observer } from "mobx-react-lite"

const Participants = observer(() => { const participants = useContext(participantStoreContext)

return (

{participants.map(participant => (

{participant}

))}

) })

export default Participants `

Here is a straightforward component called Participants. There is not much to it, all it does is return a list of participants to the dom. Theres no styling here, that part is not particularly relevant to this set of instruction. The things of note here are that it is importing the participantStoreContext from the file ../stores/ParticipantStore

Step Two - Create the Store

The ParticipantStore file looks something like this:

import { createContext } from "react"
import participantApi from "../api/participantApi"

export class ParticipantStore {
  constructor(rootStore) {
    this.rootStore = rootStore
  }

  participants = observable([])

  @action setParticipant(participant, index) {
    this.participants[index] = participant
  }

  getParticipants = flow(function*() {
    try {
      const data = yield participantApi.getParticipants()
      console.log(data);
      if (data) {
        data.forEach((datum, index) => {
          this.setParticipant(datum, index)
        })
      }
    } catch (error) {
      // TODO: Handle errors
    }
  })
}

// uncomment this line to have the store on the dom and testable
// var store = (window.store = new ParticipantStore())

export const ParticipantStoreContext = createContext(new ParticipantStore())

And you will also need to put your new store in the RootStore so that it can be actually used on the DOM. RootStore looks like this:

import { AuthStore } from "./AuthStore"
import { ParticipantStore } from "./ParticipantStore"

export class RootStore {
  // If creating a new store dont forget to add it here.
  authStore = new AuthStore(this)
  participantStore = new ParticipantStore(this)
}

export const rootStoreContext = createContext(new RootStore())