<repo_name>TautvydasGec/TodoApp<file_sep>/src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route} from "react-router-dom";
import Welcome from './Welcome';
import App from './App';
import './index.css'
import './Welcome.css'

ReactDOM.render( 
  <React.StrictMode>
    <Router>
      <Route path="/" exact component={ Welcome }></Route>
      <Route path="/app" exact component={ App }></Route>
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
);<file_sep>/src/Welcome.js
import React from 'react'
import { Link } from "react-router-dom";
import './Welcome.css'

export default function Welcome() {
  return (
    <div className = "Welcome">
      <h1>Hello and Welcome to the Todo app</h1>
      <Link to="/app"><button className = "app-button">App</button></Link>
    </div>
  )
}
<file_sep>/src/Task.js
import React from 'react'


export default function Task({ task, toggleComplete, handleDelete }) {

  function handleCheckClick() {
    toggleComplete(task.id)
  }

  function handleCheckDelete(){
    handleDelete(task.id)
  }

  return (
    <div>
      <label className= {task.complete?"task-container done":"task-container"} >
        <input 
          type="checkbox" 
          checked={task.complete} 
          onChange={handleCheckClick}
        />
        <div className="task-name">{task.name}</div>
        <div>{task.date}</div>
        {task.late? <span role="img" aria-label="red dot">&#128308;</span> : <div></div>} {/*if a task is late a red indicator is shown 
        for styling purposes in default an empty span tag is generated*/}
      <button className="btn delete-btn" onClick={handleCheckDelete}>Delete</button>
      </label>
    </div>
  )
}
<file_sep>/src/App.js
import React, { useState, useRef, useEffect } from 'react';
import TodoList from './TodoList';
import uuid from 'uuid/dist/v4';
import './App.css';

const LOCAL_STORAGE_KEY = 'todoApp.task';

function App() {
  const [tasks, setTasks] = useState([])
  const taskNameRef = useRef()
  const dueDateRef = useRef()

  /*Loading tasks*/
  useEffect(() => {
		const storedTasks = JSON.parse(
			localStorage.getItem(LOCAL_STORAGE_KEY)
		);
		storedTasks && setTasks(storedTasks);
  }, []);
  
  /*Saving tasks*/
	useEffect(() => {
		localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(tasks));
	}, [tasks]);

  /*List functions*/
  function handleAdd(e) {
    const name = taskNameRef.current.value
    const date = dueDateRef.current.value
    if (name ==="") return //does not allow empty task
    setTasks(prevTasks => {
      return [{ id: uuid(),
                name: name,
                complete: false,
                date: date===""? "Date not specified" : date,
                late: Date.parse(date)-Date.parse(new Date()) < 0 ? true : false, //date check should also happen every day, or every time the webpage is loaded
                timeAdded: Date.parse(new Date()) //used for "Latest added" sort
              },...prevTasks]
    })

    dueDateRef.current.value = null
    taskNameRef.current.value = null
  }

  function toggleComplete(id) {
		const newTasks = [...tasks];
		const task = newTasks.find((task) => task.id === id);
		task.complete = !task.complete;
    setTasks(newTasks);
  }
  
  function handleDelete(id){
		const newTasks = tasks.filter((task) => task.id !== id);
		setTasks(newTasks);
  }

  /*sort functions*/
  function sortByName(){
    const newTasks = [...tasks];
    newTasks.sort((a, b) => a.name.localeCompare(b.name));
    setTasks(newTasks);
  }

  function sortByDate(){
    const newTasks = [...tasks];
    newTasks.sort((a, b) => a.date.localeCompare(b.date));
    setTasks(newTasks);
  }

  function sortByTimeAdded(){
    const newTasks = [...tasks];
    newTasks.sort((a, b) => b.timeAdded-a.timeAdded);
    setTasks(newTasks);
  }

  return ( 
    <div className = "App">
      <div className = "input-container">      
        <input ref={taskNameRef} type="text" />
        <input type="date" ref ={dueDateRef} />
        <button className="btn add-btn" onClick={handleAdd}>Add</button>
      </div>
      <div className = "sort-container">
        <button className="btn" onClick={sortByName}>Sort By Name</button>
        <button className="btn" onClick={sortByDate}>Sort By Date</button>
        <button className="btn" onClick={sortByTimeAdded}>Sort By Latest Added</button>
      </div>
      <TodoList tasks={tasks} toggleComplete = {toggleComplete} handleDelete={handleDelete}/>
    </div>
  );
}

export default App;<file_sep>/README.md
# TodoApp
Todo App made with ReactJs

For preview [click here](https://relaxed-stonebraker-4132c2.netlify.app/)
<file_sep>/src/TodoList.js
import React from 'react';
import Task from './Task';

export default function TodoList({ tasks, toggleComplete, handleDelete }) {

    return (
        tasks.map(task =>{
            return (<Task key={task.id} toggleComplete={toggleComplete} handleDelete={handleDelete} task={task} />)
        })
    )
}