fix: lint and added README modifications

README.md

@@ -5,7 +5,7 @@ More than a normal promodoro app.
 ## Features :
 ### Done:
 - Choice of your own work/pause time, it's set to 25 minutes to work and 5 minutes break time by default
-- Create a todo
+- Create and remove a todo
 - Database CRUD operations for the todos
 
 ### In progress:

frontend/src/App.tsx

@@ -1,6 +1,6 @@
-import Navbar from "./components/Navbar.tsx";
-import TimerFormHandler from "./components/Form/TimerFormHandler.tsx";
-import ListTodosContainer from "./components/Todos/ListTodosContainer.tsx";
+import Navbar from './components/Navbar.tsx';
+import TimerFormHandler from './components/Form/TimerFormHandler.tsx';
+import ListTodosContainer from './components/Todos/ListTodosContainer.tsx';
 
 function App() {
 

frontend/src/components/Todos/GetTodo.tsx

@@ -1,6 +1,7 @@
 import '../../styles/ListTodos.scss';
-import { Dispatch, FormEvent, SetStateAction, useState } from "react";
-import axios from "axios";
+import { Dispatch, FormEvent, SetStateAction, useState } from 'react';
+import axios from 'axios';
+import { ReceivedTodoApiType } from '../../types.ts';
 
 const placeHolderRandom = () => {
   const array = [
@@ -46,26 +47,26 @@ const GetTodo = (
   }: {
     todosLength: number;
     setTodosLength: Dispatch<SetStateAction<number>>;
-    todos: any;
-    setTodos: Dispatch<SetStateAction<any>>
+    todos: ReceivedTodoApiType | undefined;
+    setTodos: Dispatch<SetStateAction<ReceivedTodoApiType | undefined>>
   }
 ) => {
   const [inputValue, setInputValue] = useState('');
 
   const onSubmit = async (event: FormEvent) => {
     event.preventDefault();
 
-    if (inputValue === '' || inputValue === undefined) {
+    if (inputValue === '' || inputValue === undefined || !todos) {
       setInputValue('');
       return;
     }
     const newTodo = {
-      "title": inputValue,
-      "description": "",
-      "startDate": "",
-      "endDate": ""
+      'title': inputValue,
+      'description': '',
+      'startDate': '',
+      'endDate': ''
     };
-    const createdTodo = await axios.post("http://localhost:8080/todo", newTodo).then(res => res.data);
+    const createdTodo = await axios.post('http://localhost:8080/todo', newTodo).then(res => res.data);
     setTodosLength(todosLength + 1);
     const updatedTodos = { ...todos };
     updatedTodos.todo = [...updatedTodos.todo, createdTodo.created];

frontend/src/components/Todos/ListTodosContainer.tsx

@@ -1,8 +1,9 @@
 import '../../styles/ListTodos.scss';
 import { Dispatch, SetStateAction, useEffect, useState } from 'react';
-import axios from "axios";
-import GetTodo from "./GetTodo.tsx";
-import { TodoType, ReceivedTodoApiType } from "../../types.ts";
+import axios from 'axios';
+import GetTodo from './GetTodo.tsx';
+import { ReceivedTodoApiType } from '../../types.ts';
+import TodoUnity from './TodoUnity.tsx';
 
 const todoValues = {
   pixelGap: 15,
@@ -32,65 +33,6 @@ const TodosListHeader = ({
   );
 };
 
-const TodoUnity = (
-  {
-    settingsOpened,
-    index,
-    todo,
-    hideList,
-    openTodoSettings,
-    todos,
-    setTodos,
-    setTodosLength,
-    todosLength
-  }:{
-    settingsOpened: boolean[];
-    index: number;
-    todo: any;
-    hideList: boolean;
-    openTodoSettings: any;
-    todos: any;
-    setTodos: Dispatch<SetStateAction<any>>
-    setTodosLength: Dispatch<SetStateAction<number>>
-    todosLength: number
-  }) => {
-  const [deleteButtonIsClicked, setDeleteButtonIsClicked] = useState(false);
-
-  const removeTodo = async () => {
-    await axios.delete(`http://localhost:8080/todo/${todo.id}`);
-    setTodosLength(todosLength - 1)
-    todos.todo.forEach((t: TodoType) => {
-      console.log(t.id);
-    })
-    todos.todo = todos.todo.filter((t: TodoType) => t.id !== todo.id);
-    setTodos(todos);
-  }
-
-  return (
-    <div
-      className={'todo-text-element'}
-      style={{
-        overflow: 'hidden',
-        height: todo.title.length >= 50 ? '75px' : settingsOpened[index] ? '150px' : '50px',
-        display: hideList ? 'none' : '',
-      }}
-      onClick={() => {
-        console.log(deleteButtonIsClicked);
-        if (!deleteButtonIsClicked) {
-          openTodoSettings(index)
-        }
-      }}
-    >
-      <div
-        className={"todo-delete-button"}
-        onMouseOver={() => setDeleteButtonIsClicked(true)}
-        onClick={removeTodo}
-        onMouseLeave={() => setDeleteButtonIsClicked(false)}>x</div>
-      <p>{todo.title}</p>
-    </div>
-  )
-};
-
 const ListTodosContainer = () => {
   const [heightBlurBg, setHeightBlurBg] = useState<number>(0);
   const [hideList, setHideList] = useState<boolean>(false);
@@ -156,6 +98,7 @@ const ListTodosContainer = () => {
     };
     expandBlurBg();
   }, [heightBlurBg, todosLength, todoClickedCount]);
+
   const openTodoSettings = (key: number) => {
     settingsOpened[key] = !settingsOpened[key];
     setSettingsOpened(settingsOpened);

frontend/src/components/Todos/TodoUnity.tsx

@@ -0,0 +1,64 @@
+import { Dispatch, SetStateAction, useState } from 'react';
+import axios from 'axios';
+import { ReceivedTodoApiType, TodoType } from '../../types.ts';
+
+const TodoUnity = (
+  {
+    settingsOpened,
+    index,
+    todo,
+    hideList,
+    openTodoSettings,
+    todos,
+    setTodos,
+    setTodosLength,
+    todosLength
+  }:{
+    settingsOpened: boolean[];
+    index: number;
+    todo: TodoType;
+    hideList: boolean;
+    openTodoSettings: (index: number) => void;
+    todos: ReceivedTodoApiType;
+    setTodos: Dispatch<SetStateAction<ReceivedTodoApiType | undefined>>
+    setTodosLength: Dispatch<SetStateAction<number>>
+    todosLength: number
+  }) => {
+  const [deleteButtonIsClicked, setDeleteButtonIsClicked] = useState(false);
+
+  const removeTodo = async () => {
+    await axios.delete(`http://localhost:8080/todo/${todo.id}`);
+    setTodosLength(todosLength - 1)
+    todos.todo.forEach((t: TodoType) => {
+      console.log(t.id);
+    })
+    todos.todo = todos.todo.filter((t: TodoType) => t.id !== todo.id);
+    setTodos(todos);
+  }
+
+  return (
+    <div
+      className={'todo-text-element'}
+      style={{
+        overflow: 'hidden',
+        height: todo.title.length >= 50 ? '75px' : settingsOpened[index] ? '150px' : '50px',
+        display: hideList ? 'none' : '',
+      }}
+      onClick={() => {
+        console.log(deleteButtonIsClicked);
+        if (!deleteButtonIsClicked) {
+          openTodoSettings(index)
+        }
+      }}
+    >
+      <div
+        className={'todo-delete-button'}
+        onMouseOver={() => setDeleteButtonIsClicked(true)}
+        onClick={removeTodo}
+        onMouseLeave={() => setDeleteButtonIsClicked(false)}>x</div>
+      <p>{todo.title}</p>
+    </div>
+  )
+};
+
+export default TodoUnity;

frontend/src/lib/todos.ts

@@ -1,4 +1,4 @@
-import axios from "axios";
+import axios from 'axios';
 
 class Todos {
   public async getTodos() {