about issue #38

[vishal5251]

Yoo! we have to add a separate page, so what it gonna contain and what we gonna add on dashboard to hit that particular page.

[yash22arora]

Hi! So The first thing we need is a component for a single to-do list. Just like we have a single Note. Later on we'll map an array of objects to render multiple to-do lists. But firstly, we need a single component.
There would be a tab added in the side nav "To-Dos" which will open up the page for the to-do lists.
The to-do component shall contain the following:

1. Header text, to specify the category.
2. list items with radio buttons that can be checked/ unchecked.
3. A feature to add items in a to-do list.

The data shall be hardcoded for now. I'll set up a basic folder structure in a few hours. And a route where you can test your component. Till then, try to formulate the UI of a single to-do list.
Like this:

[yash22arora]

I have set up a basic folder structure and ToDo route for you /dashboard/todo. You need to write to code in ToDo.js under /Components/ToDo
Create a separate CSS file ToDo.css under assets/css please.
Feel free to ask any further question :). Happy coding!

[vishal5251]

thanks!

[yash22arora]

IMPORTANT @vishal5251 , Please Work in the dev branch. Generate a PR to be merged under dev branch NOT in main.

[vishal5251]

okay okay

[yash22arora]

Setup Servatom/notefy as upstream,

To pull, use git pull upstream dev
And while generating the PR, make sure you create if for Servatom:dev

[vishal5251]

don't assign to anyone I'm doing this. I'm on the half to complete.

[yash22arora]

Yes yes dont worry ;)

[vishal5251]

there is something to which I'm stuck for so long could you help me fixing this issue.

[vishal5251]

when I write into the component it re-renders after every single character change.

import { React, useState, useEffect } from "react";
import { MdAddCircleOutline } from "react-icons/md";

function Todo() {
  const [addNote, setAddNote] = useState([]);
  const [noteText, setNoteText] = useState("");
  const [model, setModel] = useState(false);
  const days = [
    "Sunday",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday",
  ];
  const today = days[new Date().getDay()];

  useEffect(() => {
          AddNotes();
      
  }, [model])

  const AddNotes = () => {

      if (model) {
        console.log(noteText, model)
        const changeHandler = (e) => {
            setNoteText(e.target.value);
          };
      
          const saveHandler = () => {
            if (noteText) {
              setAddNote(addNote.push(noteText));
              setModel(false);
              setNoteText("");
            }
          };
      return (
        <div className="note addnote">
          <textarea
            placeholder="Add a new note"
            onChange={changeHandler}
            value={noteText}
          />
          <div className="note-footer">
            <button className="saveBtn" onClick={saveHandler}>
              Save
            </button>
          </div>
        </div>
      );
    } else return "";
  };

  const toggleModel = () => {
      setModel(true);
  }

  return (
    <div>
      <h1>{today}</h1>
      <div id="todos">
        {/* {addNote.map((note) => {
          return <input type="checkbox" value={note} />;
        })} */}
      </div>
      <AddNotes />
      <div>
        <MdAddCircleOutline className="icons" onClick={toggleModel} />
      </div>
    </div>
  );
}

export default Todo;

[vishal5251]

I'd pushed, you can see now. After removing this re-rendering thing I'll finish with css part.

[vishal5251]

Hello if you did that tell me I'll do the css part.

[yash22arora]

Hi @vishal5251 , actually our server is down at the moment so we cant test it.
Also, we are expecting a different kind of UI. I have made this dummy UI:

• We give the user the freedom to decide the category or title of the to-do list.
• The list items shall be input fields with radio buttons.
• And at the end of the list, there should be an empty input with some placeholder.

But for now, we are not working on this feature for some time, as the backend is not ready. We are closing the PR for now and giving the hacktoberfest-accepted label. Thanks for your contributions. Keep contributing!

[vishal5251]

Your welcome, but hey I want to know why that component re-renders again n again while typing the task. Please if you figure it out ping me here.