Our Home View isn’t done yet; two out of three item lists are yet to be done, at least on the client-side. We’re talking about the most viewed items and the randomly picked ones; let’s add them to the loop. Basically, we have two ways to do this:
- Adding two more Angular components very similar to the QuizListComponent one
- Extending our QuizListComponent and make it configurable, thus making it able to handle all the three item listings
Adding two more components will be rather easy; we can clone the quiz-list.component.ts file a couple of times, and change the inner method of the two new files to make it fetch the relevant data from the /quiz/ByTitle and /quiz/Random server-side APIs already available through our QuizController. Once done, we can define a different selector for each one of them, add the required stuff in the AppModule and HomeComponent templates, and we will be done.
However, this is also a horrible approach. We will restrain ourselves from cloning any part of our code unless there’s really no other way to get the things done; we’re using Angular because we want to build versatile and reusable components, and we will stick to this path as much as we can. We also don’t want to spawn unnecessary components, as it will be a pain to keep them in sync each and every time we have to apply a definition update, a member rename, an interface change, or any other source code modification that will affect either of them.
For these reasons, we’ll definitely choose the second option. It's worth mentioning it's also will be just as easy, once we know how to properly do it.
Regarding that choice, it can be easily noted that we already started with the right foot; we called it QuizListComponent instead of LatestQuizzesComponent, because we never really wanted to restrict it to a single API call.
We can say that we already knew that we would be choosing the second option right from the start; that’s hardly a surprise. Though, since we’re fully committed to building reusable components.