Create a Content Management System (CMS)

Let’s consider the following scenario for this project. The administrators of your organization would like to maintain all the organization’s content, including blog posts and image posts, in your organization’s application.

The posts have the following shape:

interface IBlogPost {
    id: number;
    title: string;
    description: string;
    viewCount: number;
    publishedAt: string;
}

interface IImagePost {
    id: number;
    imageUrl: string;
    caption: string;
    comments: Array<string>;
    publishedAt: string;
}

The administrators’ requirements for how the content should be organized are as follows:

  • For the blog posts, the administrators should be able to search by title and description. For image posts, they should be able to search by captions.

Hint: Think about using a generic search function that can accept an array of these properties.

  • The administrators should be able to sort on any property of either data type, both in ascending and descending order. Instead of a dropdown, there should be a checkbox for every combination of the property to sort by and the sort direction. This can help the admins quickly find and click the exact sort that they want. Furthermore, the administrators would like to filter for null and undefined properties explicitly.

Hint: This will require a bit more work than rendering just two radio buttons.

  • Think about how you can leverage Object.keys() to acheive the desired UI. The administrators don’t really understand the concept of ‘truthy’ and ‘falsy’ and would like the labels for the filters to be renamed to is provided and is not provided. This feature will allow them to quickly find and fix data that has missing values.

Hint: This requires nothing more than a text refactor.

  • You can assume that the string for the publishedAt property should conform to the ISO 8601 standard, and so you may use new Date(aBlogPost.publishedAt) and new Date(aImagePost.publishedAt). However, wrap these conversions in a try / catch statement to prepare for the possibility that the API could sometimes incorrectly format the datetime strings.

Hint: Defining a utility function that can do this may be useful here since it can be reused throughout the application.