Using React Router add pagination and make sure that public buildings are accessible by link

[dumax315]

I did a lot of thinking about how this should work in the context of Relay and user data. I decided that each page (directory, building viewer, building maker) should have the user buttons as children components (this is different then in the past where I moved some components outside of the routes).

Here is an example of what I had in my last project:

<Header>
  {user != null ?
    <UserButtons user={user} logout={logout} />
    :
    <AuthButtons setToken={setToken} />
  }
</Header>

<Routes>
  <Route index element={<Boards />} />
  <Route path="Kudos-Board/:boardId/posts" element={<Posts />} />
</Routes>
<Footer />

This is different from how the new project will have anything that requires data inside of a route. I'm doing this because I believe in relay's mission to only need 1 request per page load and I want to see it out.

[dumax315]

Dev story (not an important read)

I was un-able to use useRefetchableFragment due to issues with the scheme that is generated by type-graphql. This would have triggered the closest Suspense any part with Refetchable data to de render. I think that is something I want. Instead I used LoadQuery which updates the Relay cache when complete. This results in no loading indication, but there is no reason that I couldn't manually show a loading indication so I think it is a non issue.