TC Contentful - modal component

Challenge Objectives

• Implement a modal component with modal trigger reusing existing codebase.

Project Background

Topcoder is utilizing Contentful (a headless CMS) to deliver high-quality content and provide a flexible platform to manage that content. In this challenge, you will help in the process by fulfilling the requirements listed below.

Technology Stack

NodeJS, Javascript, ReactJS, Contentful, CMS, Linux, Mac

Prerequisites

• This challenge requires preregistered Contentful account

• Linux or Mac based OS

Working on Contentful challenges

Before starting to work on the challenge please take some time to get familiar with the basics of setup, configuration, import/export of Contentful space and types. We have helpful documentation on the topics here.

 

To jumpstart the work process we have exports of TC community space here. Note that you will need to import “tc-core.json” which configures the core TC components in your space. It has all custom component types Topcoder is using.

 

The general preparation steps to work on Contentful related challenge are:

 

1. Register your Contentful account and obtain/note its credentials.

2. Import the TC custom types “tc-core.json” stored in the file to your space.

3. Setup community-app locally. Some tips:

   1. Use node version 8.11.2

   2. Ask for help in TC Slack channels when some difficulties arise

4. Provide Contentful credentials as environment variables to work against your space.

5. Complete challenge requirements as per specification below.

6. Test your work using the example routes `http://local.topcoder-dev.com:3000/examples/contentful/<:type>/<:id>`

7. Export your space(via Contentful cli) to file and include it with submission.

 

Most core components do have mounted routes to ease the develop/test work with them. See this file for details.

General Requirements(All Major)

• If You make changes to code it should pass project linting as configured. After your work `npm run lint` should complete without errors.

• We should be able to import the export file(should be provided with submission) in TC Contentful space without any errors using the `contentful space import` command.

• New developed components should be placed in the app’s contentful folder.

Individual Requirements(All Major)

• Our markdown renderer supports custom tags that get rendered to components in runtime. We need to implement/add support for modal windows which get triggered by a click on text, button or icon embedded in the markdown. Therefore we need a new custom tag to be supported with the following structure:

<Modal id=”contentfulEntryId”><TEXT>|<BUTTON>|<ICON></Modal>

• <Modal> should be a wrapper container component that will need to fetch the Contentful entry(and its children if needed) by the provided “contentfulEntryId” using the existing ContetfultLoader. When loaded then render the modal and its trigger binding a click/touch event on it. In other words, what is inside the <Modal> tag is the trigger’s HTML. Modal content itself is fetched from Contetful via its id.

• The presentational modal component itself should reuse the Modal from topcoder-react-ui-kit. There are many examples in the codebase how to use it. For instance here. Check them and reuse accordingly. Actually, you need to just wrap what’s loaded form Contentful in the modal. Pseudocode is:

  • <Modal> container loads the entry(and its children) from Contentful via its id.

  • Wraps the loaded model in Modal component from topcoder-react-ui-kit.

  • Renders all children of the modal which themselves are also Contentful components. Those are restricted to viewport, banner or content block types. See how viewport wraps components for instance and reuses them. Modal should do same to reuse exisitng codebase not invent the weel.

• See the modal model for details after importing  “tc-core.json”  in your space.

• Your modal should have a X icon in the top right corner that closes it when clicked. The BaseModal supports closing when clicked on the overlay but does not has a close icon as it just wraps the provided content and renders it.

• Ask in the forum for any hints and questions you have.

Testing the submission

It will be most easy to test your work by creating a content block embedding the modal functionality in your space and use the examples path to test. http://local.topcoder-dev.com:3000/examples/contentful/<:type>/<:id>

Please, demo modals with all 3 types of content. Banner, ContentBlock and Viewport.

Final Submission Guidelines

• Patch to latest commit in develop branch of community-app.

• Verification document with steps on how to verify your submission.

• Deployment guide. Be specific!