TODO application

Question

The assignment was the following:

Users can add at a new Item/Card with Title and Description. Everytime an item is created, it is automatically placed in the TODO column
At any point in time items can be moved from TODO column to In Progress but they cannot be moved back.
At any point in time items can be moved from In Progress to Done.
Items description and title can be edited only while they are in TODO or In Progress state.
Items that have been DONE can no longer be moved or edited.
At most 30 items can be created

In the following I present you my solution. It works as it should. However, I am still thankful for any head-up you can give me. Be it optically, functional, and for effectiveness.

import logo from './logo.svg';
import './App.css';
import Wrapper from "./components/Wrapper";
import React from 'react';

function App() {
  return (
    <div className="App">
      <Wrapper />
    </div>
  );
}

export default App;

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

import "./Wrapper.css";
import React, { useState } from "react";
import Column from "./Column";

function Wrapper(props) {
    
    const [tasks1, setTasks1] = useState([]);
    const [tasks2, setTasks2] = useState([]);
    const [tasks3, setTasks3] = useState([]);
    
    const deleteTicketbyId = (inputID, state) => {
        
        switch (state) {
            case "1":
                var newTasks = tasks1.filter(entry => entry.id !== inputID);
                setTasks1(newTasks);
                break;
            case "2":
                var newTasks = tasks2.filter(entry => entry.id !== inputID);
                setTasks2(newTasks);
                break;
            case "3":
                var newTasks = tasks3.filter(entry => entry.id !== inputID);
                setTasks3(newTasks);
                break;
        }
    }
    
    function getTicketByID(inputID, state) {
        switch (state) {
            case "1":
                return tasks1.find(x => x.id ===inputID);
                break;
            case "2":
                return tasks2.find(x => x.id ===inputID);
                break;
            case "3":
                return tasks3.find(x => x.id ===inputID);
                break;
        }
    }
    
    function advanceTicket(inputID, state, i_Title, i_Content) {
        
        const currElement = getTicketByID(inputID, state);
        const newState = String(Number(state)+1);
        
        currElement.title = i_Title;
        currElement.content = i_Content;
        
        addTicket(currElement, newState);
        deleteTicketbyId(inputID, state);
    }
    
    function addTicket(newElement, state) {
        switch (state) {
            case "1":
                setTasks1([...tasks1, newElement]);
                break;
            case "2":
                setTasks2([...tasks2, newElement]);
                break;
            case "3":
                setTasks3([...tasks3, newElement]);
                break;
        }
    }
    
    const addEmptyTicket = () => {
        
        console.log(tasks1.length + " " + tasks2.length + " " + tasks3.length);
        
        if((tasks1.length + tasks2.length + tasks3.length) < 30){
            const newTask = {
                id: Date.now(),
                title: "Enter title here",
                content: "enter description here",
            };
        
            setTasks1([...tasks1, newTask]);
        }else{
            alert("A new ticket can not be created. The limit is set at 30!");
        }
        
    };
    
    return(<div className="wrapper">
        <h1>Welcome to Andy's To-Do App</h1>
        <hr />
        <div className="wrapperChildren">
            <Column title="To-Do" state="1" isFirst="true" newEmpty={ addEmptyTicket } deleteFrom={deleteTicketbyId} tasks={ tasks1 } advancveTo={ advanceTicket } />
            <Column title="In Progress" state="2" tasks={ tasks2 } deleteFrom={deleteTicketbyId} advancveTo={ advanceTicket } />
            <Column title="Done" state="3" tasks={ tasks3 } deleteFrom={deleteTicketbyId} advancveTo={ advanceTicket } />
        </div>
    </div>);
}

export default Wrapper;


.wrapper {
    height: 100%;
    background-color: #35465c;
    border: 10px inset silver;
}

.wrapper h1 {
    font-weight: bold;
    color: #bfbfbf;
    font-style: favorit;
}

.wrapperChildren {
    display: flex;
    height: 100vh;
}

hr {
    margin: 5px;
}

import "./Column.css";
import React, { useState } from "react";
import Ticket from "./Ticket";

function Column(props){
    
    return (
        <div className="column">
            <p>{props.title}</p>
            <hr />
            <div className="taskList">
                {
                    props.tasks.map((task) => (
                        <Ticket 
                            key={task.id} 
                            id={task.id} 
                            title={task.title} 
                            content={task.content}
                            deleteFrom={props.deleteFrom} 
                            advancveTo={ props.advancveTo }
                            state={ props.state }
                        />
                    ))
                }
            </div>
        {   props.isFirst && <div className="buttonSection"><button className="columnButton"
                onClick={props.newEmpty}>
                    + New Task
            </button></div>
        }
        </div>);
}

export default Column;

.column {
    background-color: #f3f5f7;
    height: auto;
    width: 300px;
    margin: 10px;
    border-radius: 5px;
    border: 2px solid gray;
    position:relative;
}

.column p {
    font-size: 18px;
    font-weight: bold;
    font-style: favorit;
    color: #304261;
}

.column .taskList {
    overflow-y: 'scroll';
    height: 400px;
}

.buttonSection {
    position: absolute;
    bottom: 0;
    justify-content: center;
    width: calc(100% - 10px);
    padding: 5px;
    background-color: #f3f5f7;
}

.column .columnButton {
    width: 240px;
    background: rgba(0,0,0,0.0);
    border: 1px solid grey;
    border-radius: 3px;
    font-size: 16px;
    width: 240px;
}

import React, { useState, useEffect } from "react";
import "./Ticket.css";

function Ticket(props){
    
    const [title, setTitle] = useState(props.title);
    const [content, setContent] = useState(props.content);
    
    const updateTitle = (e) => {
        const newTitle = e.target.value;
        setTitle(newTitle);
    }
    
    const updateContent = (e) => {
        const newContent = e.target.value;
        setContent(newContent);
    }
    
    const deleteTicket = () => {
        props.deleteFrom(props.id, props.state);
    }
    
    const advanceTicket = () => {
        props.advancveTo(props.id, props.state, title, content);
    }
    
    return (
        <div className="ticket">
            <input type="text" id="ticketInput" defaultValue={props.title} name="title" onChange={ updateTitle } readOnly={props.state==="3"} />
            <hr />
            <textarea id="ticketArea" name="w3review" defaultValue={props.content} onChange={ updateContent } readOnly={props.state==="3"} />
            <div className="buttonPanel">
                <button className="ticketButton" onClick={ deleteTicket }>Delete</button>
                {props.state !== "3" && <button className="ticketButton" onClick={ advanceTicket }> Advance </button>}
            </div>
        </div>
    );
}

export default Ticket;


.ticket {
    background-color: #2b2d2f;
    color: #000000;
    margin: 0 5px 10px;
    border-radius: 5px;
    padding: 5px;
}

input {
    border: none;
    background: rgba(0,0,0,0.0);
    color: #ffffff;
    width: auto;
}

textarea {
    border: none;
    background: rgba(0,0,0,0.0);
    color: #ffffff;
    width: 100%;
    margin: 0 0 5px;
    display: inline-block;
}

.buttonPanel{
    display: flex;
    justify-content: center;
}

.ticketButton {
    background: rgba(0,0,0,0.0);
    color: red;
    border: 1px solid red;
    display: inline-block;
    position: relative;
    margin: 5px;
}

Can you link me a tutorial on how to do that? And sorry about the presentation, I don't know how to do it better. Yes, I use CSS files. I — Andrew Bailey
– Andrew Bailey, Commented Oct 25, 2024 at 0:24
Users do mistakes, the "cannot be moved back" in point 2 is kind of bad. Same in point 5. — Sinatr
– Sinatr, Commented Oct 25, 2024 at 12:05
@folengateis There's no "HTML" here, just JSX, which is typically kept in each React component. — ggorlen
– ggorlen, Commented Oct 26, 2024 at 15:40
@ggorlen if it's a react thing ok. glad i'm not a maintainer in such projects — folen gateis
– folen gateis, Commented Oct 26, 2024 at 15:52

mdfst13 · Accepted Answer · 2024-10-24 15:51:41Z

4

A quick review

Functionality, as @Mast stated, this should be at least integrated with localStorage so that the data survives closing the browser
Practices, Avoid console.log, at least wrap it with some debug mode checking functionality
Design, having 'todo', 'in progress', and 'done' as hardcoded arrays, functions, and indexes is a super inflexible design. I don't know what the right React.js approach is to have these items appear in the correct column, but this isn't it
Spelling, advancveTo -> advanceTo
CSS, font-style: favorit; is not valid CSS

edited Oct 24, 2024 at 15:51

mdfst13

22.4k6 gold badges34 silver badges70 bronze badges

answered Oct 24, 2024 at 11:26

konijn

34.4k5 gold badges71 silver badges267 bronze badges

Add a comment |

Joseph · Accepted Answer · 2024-10-24 13:49:34Z

getTicketByID and deleteTicketById can be simplified and have less boilerplate. Whenever you see switch, it's almost always replaceable by a lookup. Doing it this way, you separate the lookup from the logic.

const noop = () => {}

const tasksByState = {
  '1': () => tasks1,
  '2': () => tasks2,
  '3': () => tasks3,
}

const setTasksByState = {
  '1': () => setTasks1,
  '2': () => setTasks2,
  '3': () => setTasks3,
}

const deleteTicketById = (inputID, state) => {
  const tasks = tasksByState[state] ?? []
  const newTasks = tasks.filter(x => x.id !==inputID)
  const setTasks = setTasksByState[state] ?? noop
  setTasks(newTasks)
}

const getTicketById = (inputID, state) => {
  const tasks = tasksByState[state] ?? []
  return tasks.find(x => x.id ===inputID)
}

Also , your code has task lists, operations, and markup for three columns hardcoded in various places. Should you add a fourth column, you'd be editing in several places. Consider starting off with the following data structure, and build from there:

const columns = [
  {
    title: 'To do',
    tasks: [],
  },
  {
    title: 'In progress',
    tasks: [],
  },
  {
    title: 'Done',
    tasks: [],
  },
  // Maybe a fourth column...
]

Doing it this way, you can easily add a fourth column. Your code wouldn't have to hardcode state lookups everywhere, as accessing the columns would only need an array index. You can reorder columns by just changing their position in the array. You can build markup by just looping through this array instead of hardcoding columns in the markup. If you have to uniquely identify each column, you can provide an ID property to each.

fotijr · Accepted Answer · 2024-10-24 17:02:44Z

A few quick notes:

As others have said, it'd be better to have one array of tasks and manage a "status" property, instead of moving tasks between arrays. You could still have getters for the different statuses, like const inProgress = () => tasks.filter(t => t.status === 'in-progress');.

If you do keep the separate arrays, improve your variable naming. tasks1 helps no one, but todoTasks, inProgressTasks, doneTasks will make your code much more readable.

Use string interpolation. So this:

console.log(tasks1.length + " " + tasks2.length + " " + tasks3.length);

becomes

console.log(`${tasks1.length} ${tasks2.length} ${tasks3.length}`);

In the logging example, it may not seem like a big difference (although it's shorter). But it's a good go-to approach and will make your code much cleaner, even as you do more complex string building/formatting.

Stack Exchange Network

TODO application

3 Answers 3

You must log in to answer this question.

Hot Network Questions

TODO application

3 Answers 3

You must log in to answer this question.

Related

Hot Network Questions