diff --git a/.eslintrc.cjs b/.eslintrc.cjs index b51149cf5..84477da1a 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -5,7 +5,7 @@ module.exports = { }, extends: [ 'plugin:react/recommended', - "plugin:react-hooks/recommended", + 'plugin:react-hooks/recommended', 'airbnb-typescript', 'plugin:@typescript-eslint/eslint-recommended', 'plugin:@typescript-eslint/recommended', @@ -14,11 +14,11 @@ module.exports = { ], overrides: [ { - 'files': ['**/*.spec.jsx'], - 'rules': { + files: ['**/*.spec.jsx'], + rules: { 'react/jsx-filename-extension': ['off'], - } - } + }, + }, ], parser: '@typescript-eslint/parser', parserOptions: { @@ -34,18 +34,21 @@ module.exports = { 'import', 'react-hooks', '@typescript-eslint', - 'prettier' + 'prettier', ], rules: { // JS - 'semi': 'off', + semi: 'off', '@typescript-eslint/semi': ['error', 'always'], 'prefer-const': 2, curly: [2, 'all'], - 'max-len': ['error', { - ignoreTemplateLiterals: true, - ignoreComments: true, - }], + 'max-len': [ + 'error', + { + ignoreTemplateLiterals: true, + ignoreComments: true, + }, + ], 'no-redeclare': [2, { builtinGlobals: true }], 'no-console': 2, 'operator-linebreak': 0, @@ -57,7 +60,11 @@ module.exports = { 2, { blankLine: 'always', prev: '*', next: 'return' }, { blankLine: 'always', prev: ['const', 'let', 'var'], next: '*' }, - { blankLine: 'any', prev: ['const', 'let', 'var'], next: ['const', 'let', 'var'] }, + { + blankLine: 'any', + prev: ['const', 'let', 'var'], + next: ['const', 'let', 'var'], + }, { blankLine: 'always', prev: 'directive', next: '*' }, { blankLine: 'always', prev: 'block-like', next: '*' }, ], @@ -73,16 +80,16 @@ module.exports = { 'react/jsx-props-no-spreading': 0, 'react/state-in-constructor': [2, 'never'], 'react-hooks/rules-of-hooks': 2, - 'jsx-a11y/label-has-associated-control': ["error", { - assert: "either", - }], - 'jsx-a11y/label-has-for': [2, { - components: ['Label'], - required: { - some: ['id', 'nesting'], + 'jsx-a11y/label-has-for': [ + 2, + { + components: ['Label'], + required: { + some: ['id', 'nesting'], + }, + allowChildren: true, }, - allowChildren: true, - }], + ], 'react/jsx-uses-react': 'off', 'react/react-in-jsx-scope': 'off', @@ -91,7 +98,9 @@ module.exports = { '@typescript-eslint/explicit-module-boundary-types': 'off', '@typescript-eslint/no-unused-vars': ['error'], '@typescript-eslint/indent': ['error', 2], - '@typescript-eslint/ban-types': ['error', { + '@typescript-eslint/ban-types': [ + 'error', + { extendDefaults: true, types: { '{}': false, @@ -99,7 +108,13 @@ module.exports = { }, ], }, - ignorePatterns: ['dist', '.eslintrc.cjs', 'vite.config.ts', 'src/vite-env.d.ts', 'cypress'], + ignorePatterns: [ + 'dist', + '.eslintrc.cjs', + 'vite.config.ts', + 'src/vite-env.d.ts', + 'cypress', + ], settings: { react: { version: 'detect', diff --git a/README.md b/README.md index 903c876f9..0cc7cfb09 100644 --- a/README.md +++ b/README.md @@ -33,4 +33,4 @@ Implement a simple [TODO app](https://mate-academy.github.io/react_todo-app/) th - Implement a solution following the [React task guidelines](https://github.com/mate-academy/react_task-guideline#react-tasks-guideline). - Use the [React TypeScript cheat sheet](https://mate-academy.github.io/fe-program/js/extra/react-typescript). - Open another terminal and run tests with `npm test` to ensure your solution is correct. -- Replace `` with your GitHub username in the [DEMO LINK](https://.github.io/react_todo-app/) and add it to the PR description. +- Replace `` with your GitHub username in the [DEMO LINK](https://Krykunov.github.io/react_todo-app/) and add it to the PR description. diff --git a/src/App.tsx b/src/App.tsx index a399287bd..3b5380376 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,156 +1,26 @@ /* eslint-disable jsx-a11y/control-has-associated-label */ -import React from 'react'; +import React, { useContext } from 'react'; +import { StateContext } from './Store'; +import TodoItem from './components/TodoItem'; +import Footer from './components/Footer'; +import Header from './components/Header'; export const App: React.FC = () => { + const { todos, allTodos } = useContext(StateContext); + return (

todos

-
- {/* this button should have `active` class only if all todos are completed */} -
+
- {/* This is a completed todo */} -
- - - - Completed Todo - - - {/* Remove button appears only on hover */} - -
- - {/* This todo is an active todo */} -
- - - - Not Completed Todo - - - -
- - {/* This todo is being edited */} -
- - - {/* This form is shown instead of the title and remove button */} -
- -
-
- - {/* This todo is in loadind state */} -
- - - - Todo is being saved now - - - -
+ {todos.map(todo => ( + + ))}
- - {/* Hide the footer if there are no todos */} -
- - 3 items left - - - {/* Active link should have the 'selected' class */} - - - {/* this button should be disabled if there are no completed todos */} - -
+ {allTodos.length > 0 &&
}
); diff --git a/src/Store.tsx b/src/Store.tsx new file mode 100644 index 000000000..1faf30d69 --- /dev/null +++ b/src/Store.tsx @@ -0,0 +1,129 @@ +import React, { useEffect, useReducer } from 'react'; +import { Actions, Filters, Todo } from './types/Todo'; +import { filterTodos } from './utils/services'; +import { useLocalStorage } from './hooks/useLocalStorage'; + +type Action = + | { type: Actions.Filter; payload: Filters } + | { type: Actions.AddTodo; payload: Todo } + | { type: Actions.UpdateTodo; payload: Todo } + | { type: Actions.ToggleTodo; payload: number } + | { type: Actions.DeleteTodo; payload: number } + | { type: Actions.ToggleAllTodos } + | { type: Actions.ClearCompleted } + | { type: Actions.RenameTodo; payload: number | null }; + +interface State { + allTodos: Todo[]; + todos: Todo[]; + activeFilter: Filters; + renamingTodo: number | null; +} + +const reducer = (state: State, action: Action): State => { + let updatedTodos = state.allTodos; + + switch (action.type) { + case Actions.AddTodo: { + updatedTodos = [...state.allTodos, action.payload]; + break; + } + + case Actions.UpdateTodo: { + updatedTodos = state.allTodos.map(todo => + todo.id === action.payload.id + ? { ...todo, title: action.payload.title } + : todo, + ); + break; + } + + case Actions.DeleteTodo: { + updatedTodos = state.allTodos.filter(todo => todo.id !== action.payload); + break; + } + + case Actions.ClearCompleted: { + updatedTodos = state.allTodos.filter(todo => !todo.completed); + break; + } + + case Actions.ToggleTodo: { + updatedTodos = state.allTodos.map(todo => + todo.id === action.payload + ? { ...todo, completed: !todo.completed } + : todo, + ); + break; + } + + case Actions.ToggleAllTodos: { + const isAllCompleted = state.allTodos.every(todo => todo.completed); + + updatedTodos = state.allTodos.map(todo => ({ + ...todo, + completed: !isAllCompleted, + })); + break; + } + + case Actions.Filter: { + return { + ...state, + activeFilter: action.payload, + todos: filterTodos(state.allTodos, action.payload), + }; + } + + case Actions.RenameTodo: { + return { + ...state, + renamingTodo: action.payload, + }; + } + + default: + return state; + } + + return { + ...state, + allTodos: updatedTodos, + todos: filterTodos(updatedTodos, state.activeFilter), + }; +}; + +const initialState: State = { + allTodos: [], + todos: [], + activeFilter: Filters.All, + renamingTodo: null, +}; + +export const StateContext = React.createContext(initialState); +export const DispatchContext = + React.createContext | null>(null); + +type Props = { + children: React.ReactNode; +}; + +export const GlobalStateProvider: React.FC = ({ children }) => { + const [local, setLocal] = useLocalStorage('todos', []); + const [state, dispatch] = useReducer(reducer, { + ...initialState, + allTodos: local, + todos: local, + renamingTodo: initialState.renamingTodo, + }); + + useEffect(() => { + setLocal(state.allTodos); + }, [state.allTodos, setLocal]); + + return ( + + {children} + + ); +}; diff --git a/src/components/FilterButton.tsx b/src/components/FilterButton.tsx new file mode 100644 index 000000000..5e756fb2a --- /dev/null +++ b/src/components/FilterButton.tsx @@ -0,0 +1,42 @@ +import React from 'react'; + +import cn from 'classnames'; +import { Actions, Filters } from '../types/Todo'; +import { DispatchContext, StateContext } from '../Store'; + +type Props = { + filterItem: Filters; +}; + +const FilterButton: React.FC = ({ filterItem }) => { + const { activeFilter } = React.useContext(StateContext); + const dispatch = React.useContext(DispatchContext); + + const isSelectedFilter = activeFilter === filterItem; + + const filterName = filterItem.charAt(0).toUpperCase() + filterItem.slice(1); + + const handleFilterClick = () => { + if (!isSelectedFilter) { + if (dispatch) { + dispatch({ type: Actions.Filter, payload: filterItem }); + } + } + }; + + return ( + + {filterName} + + ); +}; + +export default FilterButton; diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx new file mode 100644 index 000000000..db3ec198c --- /dev/null +++ b/src/components/Footer.tsx @@ -0,0 +1,43 @@ +import React from 'react'; + +import { Actions, Filters } from '../types/Todo'; +import FilterButton from './FilterButton'; +import { DispatchContext, StateContext } from '../Store'; + +const Footer: React.FC = ({}) => { + const { allTodos } = React.useContext(StateContext); + const activeTodos = allTodos.filter(todo => !todo.completed); + const dispatch = React.useContext(DispatchContext); + + const handleClearCompleted = () => { + if (dispatch) { + dispatch({ type: Actions.ClearCompleted }); + } + }; + + return ( +
+ + {activeTodos.length} items left + + + + + +
+ ); +}; + +export default Footer; diff --git a/src/components/Form.tsx b/src/components/Form.tsx new file mode 100644 index 000000000..83c819312 --- /dev/null +++ b/src/components/Form.tsx @@ -0,0 +1,62 @@ +import React, { useContext, useEffect, useRef, useState } from 'react'; +import { DispatchContext, StateContext } from '../Store'; +import { Actions, Todo } from '../types/Todo'; + +const Form: React.FC = () => { + const [todoTitle, setTodoTitle] = useState(''); + const { allTodos } = React.useContext(StateContext); + + const { renamingTodo } = React.useContext(StateContext); + + const dispatch = useContext(DispatchContext); + + const titleField = useRef(null); + + useEffect(() => { + if (titleField.current && !renamingTodo) { + titleField.current.focus(); + } + }, [renamingTodo, allTodos]); + + const addTodo = () => { + const newTodo: Todo = { + id: Date.now(), + title: todoTitle.trim(), + completed: false, + }; + + if (dispatch) { + dispatch({ type: Actions.AddTodo, payload: newTodo }); + } + }; + + const handleTitleInput = (event: React.ChangeEvent) => { + setTodoTitle(event.target.value); + }; + + const handleFormSubmit = (event: React.FormEvent) => { + event.preventDefault(); + if (!todoTitle.trim()) { + return; + } + + addTodo(); + setTodoTitle(''); + }; + + return ( +
+ +
+ ); +}; + +export default Form; diff --git a/src/components/Header.tsx b/src/components/Header.tsx new file mode 100644 index 000000000..6621f18cb --- /dev/null +++ b/src/components/Header.tsx @@ -0,0 +1,36 @@ +import React, { useContext } from 'react'; +import cn from 'classnames'; +import Form from './Form'; +import { DispatchContext, StateContext } from '../Store'; +import { Actions } from '../types/Todo'; + +const Header: React.FC = () => { + const { allTodos } = useContext(StateContext); + const dispatch = useContext(DispatchContext); + + const isAllCompleted = allTodos.every(todo => todo.completed); + + const handleToggleAll = () => { + if (dispatch) { + dispatch({ type: Actions.ToggleAllTodos }); + } + }; + + return ( +
+ {allTodos.length > 0 && ( +
+ ); +}; + +export default Header; diff --git a/src/components/TodoItem.tsx b/src/components/TodoItem.tsx new file mode 100644 index 000000000..886e592c0 --- /dev/null +++ b/src/components/TodoItem.tsx @@ -0,0 +1,161 @@ +import cn from 'classnames'; + +import React, { + useCallback, + useContext, + useEffect, + useRef, + useState, +} from 'react'; +import { Actions, Todo } from '../types/Todo'; +import { DispatchContext, StateContext } from '../Store'; + +type Props = { + todo: Todo; +}; + +const TodoItem: React.FC = ({ todo }) => { + const [inputValue, setInputValue] = useState(''); + const { renamingTodo } = React.useContext(StateContext); + + const isRenaming = renamingTodo === todo.id; + + const todoField = useRef(null); + + const dispatch = useContext(DispatchContext); + + const handleRenamingTodo = useCallback( + (id: number | null) => { + if (dispatch) { + dispatch({ type: Actions.RenameTodo, payload: id }); + } + }, + [dispatch], + ); + + const handleDelete = () => { + if (dispatch) { + dispatch({ type: Actions.DeleteTodo, payload: todo.id }); + } + }; + + const handleToggle = () => { + if (dispatch) { + dispatch({ type: Actions.ToggleTodo, payload: todo.id }); + } + }; + + const updateTodo = () => { + if (dispatch) { + dispatch({ + type: Actions.UpdateTodo, + payload: { + ...todo, + title: inputValue.trim(), + }, + }); + } + }; + + const handleEditTodo = () => { + handleRenamingTodo(todo.id); + setInputValue(todo.title); + }; + + const handleChangeValue = (event: React.ChangeEvent) => { + setInputValue(event.target.value); + }; + + const handleSubmitChange = (event: React.FormEvent) => { + event.preventDefault(); + handleRenamingTodo(null); + if (inputValue === '') { + handleDelete(); + + return; + } + + if (inputValue !== todo.title) { + updateTodo(); + handleRenamingTodo(null); + + return; + } + }; + + useEffect(() => { + const handleEsc = (event: KeyboardEvent) => { + if (event.key === 'Escape') { + handleRenamingTodo(null); + + return; + } + }; + + window.addEventListener('keyup', handleEsc); + + return () => { + window.removeEventListener('keyup', handleEsc); + }; + }, [handleRenamingTodo]); + + useEffect(() => { + if (todoField.current) { + todoField.current.focus(); + } + }, [isRenaming]); + + return ( +
+ + + {!isRenaming && ( + + {todo.title} + + )} + + {isRenaming && ( + + + + )} + + {!isRenaming && ( + + )} +
+ ); +}; + +export default TodoItem; diff --git a/src/hooks/useLocalStorage.ts b/src/hooks/useLocalStorage.ts new file mode 100644 index 000000000..bb5cabc4f --- /dev/null +++ b/src/hooks/useLocalStorage.ts @@ -0,0 +1,29 @@ +import { useState } from 'react'; + +export const useLocalStorage = ( + key: string, + defaultValue: T, +): [T, (value: T) => void] => { + const [storedValue, setStoredValue] = useState(() => { + try { + const item = localStorage.getItem(key); + + return item ? JSON.parse(item) : defaultValue; + } catch (error) { + localStorage.removeItem(key); + + return defaultValue; + } + }); + + const setValue = (value: T) => { + try { + setStoredValue(value); + localStorage.setItem(key, JSON.stringify(value)); + } catch (error) { + alert('Unable to save todo'); + } + }; + + return [storedValue, setValue]; +}; diff --git a/src/index.tsx b/src/index.tsx index a9689cb38..4912b470d 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,11 +1,14 @@ import { createRoot } from 'react-dom/client'; -import './styles/index.css'; -import './styles/todo-list.css'; -import './styles/filters.css'; +import './styles/index.scss'; import { App } from './App'; +import { GlobalStateProvider } from './Store'; const container = document.getElementById('root') as HTMLDivElement; -createRoot(container).render(); +createRoot(container).render( + + + , +); diff --git a/src/styles/index.scss b/src/styles/index.scss index a34eec7c6..9d8c1901b 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -2,6 +2,10 @@ iframe { display: none; } +* { + box-sizing: border-box; +} + body { min-width: 230px; max-width: 550px; diff --git a/src/types/Todo.ts b/src/types/Todo.ts new file mode 100644 index 000000000..64a0e73dc --- /dev/null +++ b/src/types/Todo.ts @@ -0,0 +1,22 @@ +export interface Todo { + id: number; + title: string; + completed: boolean; +} + +export enum Filters { + All = 'all', + Active = 'active', + Completed = 'completed', +} + +export enum Actions { + AddTodo, + UpdateTodo, + DeleteTodo, + ClearCompleted, + ToggleTodo, + ToggleAllTodos, + Filter, + RenameTodo, +} diff --git a/src/utils/services.ts b/src/utils/services.ts new file mode 100644 index 000000000..38a27b457 --- /dev/null +++ b/src/utils/services.ts @@ -0,0 +1,12 @@ +import { Filters, Todo } from '../types/Todo'; + +export const filterTodos = (todos: Todo[], status: Filters): Todo[] => { + switch (status) { + case Filters.Active: + return todos.filter(todo => !todo.completed); + case Filters.Completed: + return todos.filter(todo => todo.completed); + default: + return todos; + } +};