Die gleiche Komponente mit unterschiedlichem Inhalt rendern

[alicie232]

Hallo zusammen,

ich hänge hier an einer vermeintlich einfachen Sache, hab aber ein Brett vorm Kopf.

Man sagt ja, die Komponenten sollen dumm sein, damit sie wiederverwendbar sind. Ich habe eine Komponente TaskList.js, die mir das Array aus meiner db.js anzeigt: eine Liste mit Aufgaben für jeden Wochentag + tägliche Aufgaben.

Auf einer Seite (aktuell HomePage.js) lasse ich mir die Aufgaben für jeden Tag (weekday: täglich aka 42 aka die Antwort auf alles, ihr versteht? ;) ) und die Aufgaben passend zum Wochentag (z.B. montags nur die für Montag) anzeigen. Das klappt auch prima mit diesem useState (und noch viel mehr magic, lebt alles in der App.js):

  const [todos, setTodos] = useState(() => {
    const todaysTodos = taskTemplates.filter(todo => todo.weekday === new Date().getDay() || todo.weekday === 42);

    if (todosFromLocal === null) {
      return todaysTodos;
    } else {
      return todosFromLocal;
    }
  });

App.js

const templatesFromLocal = loadFromLocalStorage('TaskTemplates');
const todosFromLocal = loadFromLocalStorage(new Date().toLocaleDateString());

export default function App() {
  const [isOpen, setIsOpen] = useState(false);
  const [taskTemplates] = useState(() => {
    return templatesFromLocal ?? dailyTodos;
  });
  const [todos, setTodos] = useState(() => {
    const todaysTodos = taskTemplates.filter(todo => todo.weekday === new Date().getDay() || todo.weekday === 42);

    if (todosFromLocal === null) {
      return todaysTodos;
    } else {
      return todosFromLocal;
    }
  });

  function handleTodos(event) {
    const todoId = event.target.dataset.todoid;
    const taskId = event.target.dataset.taskid;

    updateTodo(todoId, taskId);
  }

  function insertNewTodo(category, newTodo) {
    setTodos(todos => {
      return todos.map(todo => {
        if (todo.weekday === category) {
          return {
            ...todo,
            tasks: [...todo.tasks, newTodo],
          };
        }
        return todo;
      });
    });
    setIsOpen(false);
  }

  function updateTodo(todoId, taskId) {
    setTodos(todos => {
      return todos.map(todo => {
        if (todo.id === todoId && todo.tasks.length !== 0) {
          return {
            ...todo,
            tasks: todo.tasks.map(task =>
              task.id === taskId
                ? {
                    ...task,
                    isChecked: !task.isChecked,
                    checkedAt: !task.isChecked ? new Date().toLocaleDateString() : '',
                  }
                : task
            ),
          };
        }
        return todo;
      });
    });
  }

  function handleDeleteTodo(id) {
    setTodos(todos => {
      return todos.map(todo => {
        return {
          ...todo,
          tasks: todo.tasks.filter(task => task.id !== id),
        };
      });
    });
  }

  function handleCloseForm() {
    setIsOpen(false);
  }

  useEffect(() => {
    writeToLocalStorage('TaskTemplates', taskTemplates);
  }, [taskTemplates]);

  useEffect(() => {
    writeToLocalStorage(new Date().toLocaleDateString(), todos);
  }, [todos]);

Ich möchte auf einer neuen Seite alle Aufgaben (also das ganze Array) anzeigen lassen, damit der User auch sehen kann, was an anderen Tagen zu tun ist und z.B. auch die mit dem Formular neu angelegten Aufgaben kontrollieren kann.
Auf dieser Seite sollen die Optionen wie abhaken und löschen auch möglich sein, alles in der Komponente TaskList vorhanden.

Aktuell bin ich soweit, dass mir alles Tage angezeigt werde, indem ich einen neuen useSate geschrieben habe und allTodos an eine an anderer Stelle gerenderte TaskList übergebe::

 const [allTodos, setAllTodos] = useState(() => {
    if (templatesFromLocal === null) {
      return dailyTodos;
    } else {
      return templatesFromLocal;
    }
  });

Das Problem:
Wie "synchronisiere" ich diese zweite Liste mit der ersten? Wo muss die setAllTodos Funktion hin?
Ist der Ansatz überhaupt richtig?

Das Ziel:
Auf einer neuen Seite "Alle Aufgaben" die Komponente TaskList mit dem gesamten Inhalt des Arrays aus db.js rendern, anstatt gefiltert wie auf der Seite "Aktuelle Aufgaben". Änderungen (hinzufügen, löschen) sollen hier auch möglich sein und angezeigt werden.

Ausprobiert habe ich

• einen neuen useState "allTodos"
• die setAllTodos Funktion überall dort zu wiederholen, wo auch setTodos ausgeführt wird. Das führt jedoch nur dazu, dass die Liste mit allen Todos überschrieben wird und ich wieder nur zwei Einträge angezeigt bekomme.

(Über meine aktuellen Versuche habe ich keinen PullRequest online, da ich ziemlich viel ausprobiert habe und befürchte, dass es eher verwirrend ist. )

Ich hoffe die Links funktionieren, hier gehts zu meinem Repo: Capstone-Project

Sollten Fragen dazu offen sein, gerne einfach fragen :)

[F-Kirchhoff]

Ich kann dir empfehlen, alle deine Todos in einem einzigen useState zu speichern, dieser gilt dann als deine "single source of truth", du kannst ihn ja zb. todos nennen. Diesen State kannst du dann an deine TaskList Componente weitergeben als prop. Gleichzeitig musst du die create, update und delete Funktionen auch weitergeben, damit die Komponente darauf Zugriff hat:

const [todos, setTodos] = useState( ... );

return (
  ...
  <TaskList todos = {todos} onCreate={insertNewTodo} onDelete = {handleDeleteTodo} onUpdate={handleUpdateTodo} />
...

Innerhalb der Tasklist Componente kannst du auf die Props zugreifen und sie verwenden:

function TaskList({todos, onCreate,onDelete,onUpdate}) {
  ...
  return <ul>
    {todos.map(todo => <li key = {todo.id}>todo.text</li>)}
  </ul>
}

Das tolle ist nun, dass du TaskLlist auch ein zweites mal verwenden kannst, du kannst dort dann aber ein anderes Array weitergeben als todos, zb ein neues Array namens dailyTodos:

const dailyTodos = todos.filter(todo => todo.weekday === category)

Je nachdem wo du die Homepage.js und AllTodos anzeigen lassen willst kannst du deine TaskList entsprechend aufrufen:

// renders all Todos in List
<TaskList todos = {todos} onCreate={insertNewTodo} onDelete = {handleDeleteTodo} onUpdate={handleUpdateTodo} />
...
// renders only Daily Todos
<TaskList todos = {dailyTodos} onCreate={insertNewTodo} onDelete = {handleDeleteTodo} onUpdate={handleUpdateTodo} />

Da ich nicht genau weiß wo du Homepage.js aufrufst und wie du dein Pagerouting machst kann es sein, dass du deinen State und die Update Funktionen erst an die Zwischenkomponenten weitergeben musst z.B.:

<Homepage todos = {todos} onCreate={insertNewTodo} onDelete = {handleDeleteTodo} onUpdate={handleUpdateTodo} /> 

Wenn noch etwas unklar ist schreibe mich gerne an.

[alicie232]

Vielen Dank lieber @F-Kirchhoff für die ausführliche Rückmeldung!
Mit diesem zusätzliche Hinweis von dir hat sich das Brett vorm Kopf gelöst 🤓

const [todos, setTodos] = useState(todosFromLocal)

...

<TaskList todos = {todos} /> 

<TaskList todos = {todos.filter(todo => todo.weekday === new Date().getDay()) } /> 
<TaskList todos = {todos.filter(todo => todo.done === false)} />