WHAT YOU’LL LEARN
Can I use this?
In order to follow this tutorial, you must use Webiny version 5.14.0 or greater.
Now that we have our New Pin modal dialog working as expected, we're can continue by creating the homepage. As seen in previous sections, the homepage lists all pins that were created by different users.
Like in the previous section, fetching the list of created pins can be easily done via the Apollo Client and its
useQuery React hook. A bit trickier part is rendering the pins in a mosaic layout, which is how the original Pinterest website does it.
Luckily, we can achieve this pretty easily with a small React library called
react-columned, which we'll need to add to our React application. Once we have that, we can start working on our homepage by adjusting the existing
Home React component.
For starters, let's add the mentioned
react-columned library with the following command:
Once we have that, we can start working on our homepage. The following is the final
Home React component that's responsible for rendering it, located in the
As we can see, the file contains the
Home React component, in which we're simply issuing the
ListPins GraphQL query, and then, based on the received data, rendering each pin as an image and link to the Pin Details page (more on this soon). And, in order to achieve the mentioned mosaic layout, the pins are wrapped with the
Columned component, imported from the added
Furthermore, note that, by default, the React application that's generated during the Full Stack Application scaffolding process uses
@webiny/react-router library, which is a plugins-based React application router. In other words, all of the application routes are defined via
RoutePlugin plugins, which is why we're exporting that instead of the actual
Home React component:
All of these plugins are then registered in the
pinterest-clone/app/code/src/plugins/index.ts plugins entrypoint file. For example, in case of the Homepage, we have the following:
At the moment, this file already includes all of the necessary imports. No further changes need to be made.
@webiny/react-router library is a thin wrapper around the popular React Router and its
react-router-dom library, which just adds a couple of minor features to it. For example, via the
ReactRouterOnLinkPlugin plugin, it gives developers the ability to execute a piece of code for every link that's rendered on the page.
One last thing before we move on. Let's replace the code in the existing
home.scss file with the following:
Not super important, but making this change this will make the pins listed on our homepage look a little bit nicer.
With this component in place, our homepage should look like the following:
At the moment, we could probably say that our homepage looks a bit bland and maybe boring. But we don't need to worry about that for now. The whole page will start looking much more lively as soon as we bring the missing cover image field and file upload functionality into the mix.
For now, our goal was to have our homepage show a list of pins created by different users, and we've certainly achieved that. This means we're ready for the final step, and that's creating the Pin Details page.