Update React Router

[dearshrewdwit]

Recommended to update router.

https://reactrouter.com/en/main/routers/picking-a-router#using-v64-data-apis

[dogezen]

The new react-router API does some "magic" in terms of loading data / attaching actions to routes:

https://reactrouter.com/en/main/start/tutorial#creating-contacts

This may be quite confusing / complex and removes some flexibility (ie. what if I have multiple forms on the same view?)

[dogezen]

Key things to review with the novel approach:

• adding routes / nested routes seems quite straightforward in the new approach
• the loader mechanism seems relatively straightforward -> need to review the examples to see if they use fetch or just some dummy data and come up with an example that uses fetch in the loader
• the actions mechanism (ie Form action) seems less straightforward and flexible (ie. forcing you to have just one form?) need to review a) how to have multiple actions; b) how to control forms directly without using their Form control (so that you can do validation, errors, etc)
• unclear from the tutorial how to do navigation (going from one route to the next; and how to pass data across)
• unclear from tutorial how to pass state from the PARENT component into NESTED routes?

[vherus]

Thanks Carlo, currently investigating this. Some considerations:

• Currently there is 1 day allocated for routing, this will almost certainly need to be extended to cover the new features
• The team dev sim will need a bit of refactoring to include a new routing approach
• For creating a router, there are two approaches I can see being viable. One is passing an object into the createBrowserRouter function as in the documentation linked in the comments above, the second is closer to how we're currently using the package:

createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<Root />}
      <Route index element={<PageOne />} />
      <Route path="/two" element={<PageTwo />} />
    </Route>
  )
)

[vherus]

Common Cohort 10 survey feedback showed students were frustrated with challenges being close together. The HTML & JS Dom units both contain 2 challenges very close together:

• Twitter then Spotify 2 days later for HTML
• Green Grocers then Brewery Tours 2 days later for JS Dom

There are two potential things we could consider to free up time to expand the routing content:

1. Remove the Green Grocers challenge from JS dom, which would offer an extra 2 days to put into React
2. Brewery Tours is notoriously difficult for a lot of students. We could remove the Brewery Tours challenge, replacing it with Green Grocers, which offers an extra 3 days for React

[vherus]

Current plan:

• Stop JSDom after Green Grocers, freeing up 5 days

• Go straight into React

• Extend Routing to 2 days

• Repurpose DOM todo list as a React exercise

• Break Address Book down into individual exercises, more explicitly define requirements

• New challenge is to build the team dev sim dashboard (create, display, edit posts), include designs and style guides as requirements. Blank repo, students build from scratch

• Outline new sequence first, start at the end (challenge)

Use https://jsonplaceholder.typicode.com/ as an API

[dearshrewdwit]

To do list app that i used with experis - https://github.com/boolean-uk/react-tasks-with-local-api

Exercise was to update this implementation to use Fetch API to manage CRUD via a RESTful API

Solution - https://github.com/boolean-uk/react-tasks-with-local-api/tree/with-fetch

[vherus]

New challenge: https://github.com/boolean-uk/react-cohort-dashboard-challenge