Build eisenhower matrix with React, firebase and neumorphism ui . (Part two)

Component architecture of our project

Source code link

Right from where we left off. 

3.Displaying data and implementing a delete function:

• initialize useState hook of data type array to track to-dos data from firebase and update to-dos data. [todos, setTodos]
• Getting data from firebase: To get data we will be using getTodo function which takes a argument setTodos and uses onSnapshot function as callback. setTodos to update todos state whenever this function runs.

onSnapshot function : It takes to arguments database reference and callback function which creates and provides a document snapshot immediately with the current contents of the single document. Then, each time the contents change, another call updates the document snapshot.

• There are many unnecessary data which come when we call snapshot function, so to extract only useful data you can use :

 response.docs.map((docs) => {

          return { ...docs.data(), id: docs.id };

        } )

• wrap that with useEffect Hook, by using this Hook, you tell React that your component needs to do something after render. So in every render getTodo function will run. With dependency [ ].
• Create component DisplayMatrix to display todos , each todo will have delete button.
• For delete function, we can use deleteDoc function from firebase which requires document reference to delete that document.
• we can get document reference with doc function from firebase which is used to create a reference to a specific document within a collection.
• It will be taking three arguments first reference to your Firestore database instance, second the name of the collection in Firestore. In this case, it is "todos" collection, third the unique identifier of the specific document within the "todos" collection.

Some helpful css:

div{

display: grid;

   place-items: center;

}

li {

    list-style: none;

    display: flex;

    gap: 1rem;

}

li span{

    margin-top: 19px;

}

button svg {

    width: 29px;

    height: 24px;

    fill: red;

}