cassie walked me through a web editor issue that i was having a lot of trouble with. i learned a ton, so i’m documenting the process here.
we wanted to change sketch routes so that sketch URLs included the sketch username because that just makes more sense!
cassie explained the difference between these:
- the server-side routes—which live in
server.routes.js—render html. when a user initiates a session, they get data via these routes.
- the client-side routes—which live in
routes.jsx—render a react.js view. when a user doesn’t need a whole new session but just needs some data populated from a small portion of the editor, the interaction usually just makes an ajax request. an ajax request means that the entire page doesn’t have to refresh, so the new content gets loaded more quickly.
there is another set of server-side routes: the api routes, which are internal to the server-side. these endpoints serve JSON data, which is then used to populate react views on the front-end. we didn’t mess with api routes for this PR, but they’re important to know about.
in order to create our sensible new sketch routes, we edited 7 files in total but these were the 2 most important ones:
so, in order, here’s how we did things:
- create a server-side route—
/username/sketches/id—the response calls the function
renderIndex()which renders the whole app
- create a client-side route
- then, we had to make sure that all the places in the web editor where you’d click to navigate to a particular sketch—from the sketch list, or to clone a project, or to share a project, or to create a new project, or to save a project—used the correct route to get the sketch you wanted. this is the kind of navigating within the app, as opposed to getting data from the server, that happens via ajax requests. here’s a photo of a link in the sketch list view so you have a sense of what i mean:
- here’s how we changed the route in the SketchList.jsx file:line 28 says: “if props.username is not undefined (so, it exists), then use it to build the route in line 68. otherwise, use props.user.username to build the route.”
- rinse and repeat for other places within the front-end where sketches are accessible from. review the pr to see them in detail.
things i found challenging:
- knowing which react components had access to which props
- the significance of step 2/the client-side route
- wrapping my head around the api routes and how the JSON files at their endpoints ultimately get back to the front-end