Skip to content

anshkush92/cosmocloud

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

34 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Test

Testing whether we are getting author commit email address on commiting

Interface

Create interface like this

Demo

  1. Link
  2. Video

Task

  • Create such component enter image description here
  • Should be able to render interface if some form of data is given enter image description here
  • User should be able to edit name of a field Original enter image description here

New enter image description here

  • User should be able to add more fields Original enter image description here

New enter image description here

  • User should be able to delete a field Original enter image description here

New - Person field got deleted enter image description here

  • Users should be able to add nested fields to object type. Original enter image description here

New enter image description here

  • There should be a save button which console the updated data - Enter key works as the save button enter image description here

Guideline

  1. Assume a Schema for this, how you will represent this data. Write that down.

Schema for the above interface - Follows recursion as you can see that the nested rows have items[] enter image description here

  1. Write down how you will handle this, what components you will create. C - represents the component that I have divided into enter image description here

To understand the component structure better, I have marked which components refers to which in the code. C1 - C1 - row like this for every other component

enter image description here 4. Start small. Create a component which can render this data. First I started with creating all the components, then combining it together with the help of the redux

  1. Add editable input field and update the data I used redux to manage the state of the app, and use the reducers to change the state of the row

  2. Add a way to add more rows To add more rows, first we have have to know the parentIndex where we have to add the child, we find the parentIndex by recursion. After we know the index, we just have to push the child/nested Row in the parent items[].

enter image description here

  1. Add a way to delete rows To delete the row, we need to find the ID of the row which we have to delete in the tree, which can be easily done through recursion enter image description here

  2. Add a way to update the data in the rows To update the data, we find need to find the ID of the row to which we want to perform the update which can be easily done through recursion, then the data is updated with the help of the reducers enter image description here