Challenge Overview
Project Background
The community-app is developed to replace legacy parts of Topcoder platform, and to implement new features, and even client-oriented offers. It is developed for the community by the community. The CMS-related subproject aims to provide user-friendly and flexible way for Topcoder teams to create and edit complex pages on Topcoder website, without much help from the dev team.
Technology Stack
-
React.js
-
Contentful
Code access
Community-app: https://github.com/topcoder-platform/community-app
Topcoder-react-lib: https://github.com/topcoder-platform/topcoder-react-lib
You need to use the develop branch in both repositories.
Individual requirements
The custom renderer should be named as “Looker” and should be responsible to fetch and display content from the following endpoint:
https://api.topcoder.com/v4/looks/{lookerId}/run/json
The custom renderer should support the following properties:
-
lookerId - [Number] the ID to be used in the API call.
-
property - [String | Optional] indicating which property from the response to return as plain text. If the API response is an array, return the property from the first object in the array.
-
table - [Array | Optional] indicating that the renderer should return the API response in a table format. Each object in the array corresponds to a table column and can have the following properties:
-
headerName: [String | Optional] custom header name.
-
property: [String | Optional] indicates which property from the API to use.
-
styles: [Object | Optional] custom CSS styles.
-
-
render - [Function | Optional] custom render method that will take raw API response as input.
One of “property”, “table” or “render” should be provided.
Example use cases:
With “property” property:
<Looker lookerId=”1143” property=”user.count” />
With “table” property:
<Looker
lookerId=”1146”
table={[
{
headerName: “Copilot”,
property: “copilot.handle”
},
{
headerName: “Completed challenges”,
property: “challenge.count”
}
]}
/>
With “render” property:
<Looker lookerId=”1143” render={(data) => (<div>{data[0][“user.count”]}</div>)} />
Important Notes
-
All redux actions, services, reducers should be created in the topcoder-react-lib.
-
We are going to use this custom renderer inside content front Contentful (similar to how inline buttons etc currently work)
Verification Video
Submit a link to an unlisted YouTube video (you may use other services as well) showing an example of using the new Markdown renderer in Contentful.
What To Submit
-
A git patch for the latest commit in the develop branch of each repo. Make sure to mention the exact commit you used so the reviewers can apply your patch.
-
A link to your verification video.
Should you have any doubt, feel free to ask in the challenge forum!