diff --git a/src/App.tsx b/src/App.tsx index a399287bd..0d0d38638 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,157 +1,56 @@ -/* eslint-disable jsx-a11y/control-has-associated-label */ -import React from 'react'; +import React, { useEffect, useRef } from 'react'; +import { Filter } from './types/Filter'; +import { TodoList } from './components/TodoList'; +import { Header } from './components/Header'; +import { Footer } from './components/Footer'; +import { ErrorNotification } from './components/ErrorNotification'; +import { TodoItem } from './components/TodoItem'; +import { useTodoContext } from './components/context/TodoContext'; export const App: React.FC = () => { + const { state } = useTodoContext(); + const { todos, filter, tempTodo } = state; + const textField = useRef(null); + + const completedTodos = todos.filter(todo => todo.completed); + const activeTodos = todos.filter(todo => !todo.completed); + + const filteredTodos = () => { + switch (filter) { + case Filter.Completed: + return completedTodos; + case Filter.Active: + return activeTodos; + default: + return todos; + } + }; + + useEffect(() => { + if (textField.current) { + textField.current.focus(); + } + }, [todos.length]); + 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 - - - -
+ {tempTodo && }
- {/* 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 */} - -
+ {todos.length > 0 && ( +
+ )}
+ +
); }; diff --git a/src/UserWarning.tsx b/src/UserWarning.tsx new file mode 100644 index 000000000..fa25838e6 --- /dev/null +++ b/src/UserWarning.tsx @@ -0,0 +1,15 @@ +import React from 'react'; + +export const UserWarning: React.FC = () => ( +
+

+ Please get your userId {' '} + + here + {' '} + and save it in the app 

const USER_ID = ...
+ All requests to the API must be sent with this + userId. +

+
+); diff --git a/src/api/todos.ts b/src/api/todos.ts new file mode 100644 index 000000000..8aad3cf6a --- /dev/null +++ b/src/api/todos.ts @@ -0,0 +1,24 @@ +import { Todo } from '../types/Todo'; +import { client } from '../utils/fetchClient'; + +export const USER_ID = 1011; + +export const getTodos = () => { + return client.get(`/todos?userId=${USER_ID}`); +}; + +export const addTodo = ({ title, completed, userId }: Omit) => { + return client.post('/todos', { + title, + completed, + userId, + }); +}; + +export const deleteTodo = (todoId: number) => { + return client.delete(`/todos/${todoId}`); +}; + +export const updateTodo = (todo: Todo) => { + return client.patch(`/todos/${todo.id}`, todo); +}; diff --git a/src/components/ErrorNotification/ErrorNotification.tsx b/src/components/ErrorNotification/ErrorNotification.tsx new file mode 100644 index 000000000..71fbbcfa3 --- /dev/null +++ b/src/components/ErrorNotification/ErrorNotification.tsx @@ -0,0 +1,42 @@ +import React, { useEffect } from 'react'; +import classNames from 'classnames'; +import { useTodoContext } from '../context/TodoContext'; + +export const ErrorNotification: React.FC = () => { + const { state, dispatch } = useTodoContext(); + const { errorText } = state; + + useEffect(() => { + if (errorText) { + const timer = setTimeout(() => { + dispatch({ type: 'SET_ERROR', payload: null }); + }, 3000); + + return () => clearTimeout(timer); + } + + return () => {}; + }, [errorText, dispatch]); + + if (!errorText) { + return null; + } + + return ( +
+
+ ); +}; diff --git a/src/components/ErrorNotification/index.js b/src/components/ErrorNotification/index.js new file mode 100644 index 000000000..8cb478792 --- /dev/null +++ b/src/components/ErrorNotification/index.js @@ -0,0 +1 @@ +export * from './ErrorNotification'; diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx new file mode 100644 index 000000000..67ad74d34 --- /dev/null +++ b/src/components/Footer/Footer.tsx @@ -0,0 +1,75 @@ +import React from 'react'; +import classNames from 'classnames'; +import { Filter } from '../../types/Filter'; +import { Error } from '../../types/Error'; +import { useTodoContext } from '../context/TodoContext'; +import { Todo } from '../../types/Todo'; + +type Props = { + activeTodos: Todo[]; + completedTodos: Todo[]; +}; + +export const Footer: React.FC = ({ activeTodos, completedTodos }) => { + const { state, dispatch } = useTodoContext(); + const { filter } = state; + + const handleClearCompleted = async () => { + const completedIds = completedTodos.map(todo => todo.id); + + dispatch({ type: 'SET_DELETING_IDS', payload: completedIds }); + + try { + dispatch({ type: 'CLEAR_COMPLETED' }); + } catch { + dispatch({ + type: 'SET_ERROR', + payload: Error.unableToDelete, + }); + setTimeout(() => { + dispatch({ type: 'SET_ERROR', payload: null }); + }, 3000); + } finally { + dispatch({ type: 'SET_DELETING_IDS', payload: [] }); + } + }; + + return ( + + ); +}; diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js new file mode 100644 index 000000000..ddcc5a9cd --- /dev/null +++ b/src/components/Footer/index.js @@ -0,0 +1 @@ +export * from './Footer'; diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx new file mode 100644 index 000000000..5ead3719c --- /dev/null +++ b/src/components/Header/Header.tsx @@ -0,0 +1,89 @@ +import React from 'react'; +import classNames from 'classnames'; +import { Todo } from '../../types/Todo'; +import { Error } from '../../types/Error'; +import { useTodoContext } from '../context/TodoContext'; + +type Props = { + completedTodos: Todo[]; + textField: React.RefObject; +}; + +export const Header: React.FC = ({ completedTodos, textField }) => { + const { state, dispatch } = useTodoContext(); + const { todos, query, isLoading } = state; + + const handleSubmit = (event: React.FormEvent) => { + event.preventDefault(); + + if (!query.trim()) { + dispatch({ type: 'SET_ERROR', payload: Error.titleShouldNotBeEmpty }); + setTimeout(() => { + dispatch({ type: 'SET_ERROR', payload: null }); + }, 3000); + + return; + } + + const newTodo: Todo = { + id: Date.now(), + title: query.trim(), + completed: false, + }; + + dispatch({ type: 'SET_LOADING', payload: true }); + dispatch({ type: 'SET_TEMP_TODO', payload: newTodo }); + + try { + dispatch({ type: 'ADD_TODO', payload: newTodo }); + dispatch({ type: 'SET_QUERY', payload: '' }); + } catch (error) { + dispatch({ type: 'SET_ERROR', payload: Error.unableToAdd }); + setTimeout(() => { + dispatch({ type: 'SET_ERROR', payload: null }); + }, 3000); + } finally { + dispatch({ type: 'SET_LOADING', payload: false }); + dispatch({ type: 'SET_TEMP_TODO', payload: null }); + } + }; + + const handleToggleAll = () => { + const areAllCompleted = todos.every(todo => todo.completed); + + dispatch({ type: 'TOGGLE_ALL', payload: !areAllCompleted }); + }; + + return ( +
+ {todos.length > 0 && ( +
+ ); +}; diff --git a/src/components/Header/index.js b/src/components/Header/index.js new file mode 100644 index 000000000..266dec8a1 --- /dev/null +++ b/src/components/Header/index.js @@ -0,0 +1 @@ +export * from './Header'; diff --git a/src/components/TodoItem/TodoItem.tsx b/src/components/TodoItem/TodoItem.tsx new file mode 100644 index 000000000..379bfb818 --- /dev/null +++ b/src/components/TodoItem/TodoItem.tsx @@ -0,0 +1,174 @@ +import React, { useState, useEffect, useRef } from 'react'; +import classNames from 'classnames'; +import { Error } from '../../types/Error'; +import { Todo } from '../../types/Todo'; +import { useTodoContext } from '../context/TodoContext'; + +type Props = { + todo: Todo; + isLoading?: boolean; +}; + +export const TodoItem: React.FC = ({ + todo, + isLoading: externalLoading = false, +}) => { + const { dispatch, state } = useTodoContext(); + const { deletingTodoIds } = state; + const [isLoading, setIsLoading] = useState(false); + const [isEditing, setIsEditing] = useState(false); + const [editedTodoTitle, setEditedTodoTitle] = useState(todo.title); + const inputRef = useRef(null); + + useEffect(() => { + if (isEditing) { + inputRef.current?.focus(); + } + }, [isEditing]); + + const handleDelete = () => { + setIsLoading(true); + try { + dispatch({ type: 'DELETE_TODO', payload: todo.id }); + } catch { + dispatch({ + type: 'SET_ERROR', + payload: Error.unableToDelete, + }); + setTimeout(() => { + dispatch({ type: 'SET_ERROR', payload: null }); + }, 3000); + } finally { + setIsLoading(false); + } + }; + + const handleToggle = () => { + setIsLoading(true); + try { + dispatch({ + type: 'UPDATE_TODO', + payload: { ...todo, completed: !todo.completed }, + }); + } catch { + dispatch({ + type: 'SET_ERROR', + payload: Error.unableToUpdate, + }); + setTimeout(() => { + dispatch({ type: 'SET_ERROR', payload: null }); + }, 3000); + } finally { + setIsLoading(false); + } + }; + + const handleEdit = (newTitle: string) => { + setIsLoading(true); + if (newTitle.trim() === todo.title) { + setIsEditing(false); + setIsLoading(false); + + return; + } + + if (newTitle.trim() === '') { + handleDelete(); + + return; + } + + try { + dispatch({ + type: 'UPDATE_TODO', + payload: { ...todo, title: newTitle.trim() }, + }); + setIsEditing(false); + } catch { + inputRef.current?.focus(); + dispatch({ + type: 'SET_ERROR', + payload: Error.unableToUpdate, + }); + setTimeout(() => { + dispatch({ type: 'SET_ERROR', payload: null }); + }, 3000); + } finally { + setIsLoading(false); + } + }; + + return ( +
+ + + {!isEditing ? ( + <> + setIsEditing(true)} + > + {todo.title} + + + + + ) : ( +
{ + e.preventDefault(); + handleEdit(editedTodoTitle); + }} + > + setEditedTodoTitle(e.target.value)} + onKeyUp={e => { + if (e.key === 'Escape') { + setEditedTodoTitle(todo.title); + setIsEditing(false); + } + }} + onBlur={() => handleEdit(editedTodoTitle)} + ref={inputRef} + /> +
+ )} + +
+
+
+
+
+ ); +}; diff --git a/src/components/TodoItem/index.js b/src/components/TodoItem/index.js new file mode 100644 index 000000000..21f4abac3 --- /dev/null +++ b/src/components/TodoItem/index.js @@ -0,0 +1 @@ +export * from './TodoItem'; diff --git a/src/components/TodoList/TodoList.tsx b/src/components/TodoList/TodoList.tsx new file mode 100644 index 000000000..dd087c29c --- /dev/null +++ b/src/components/TodoList/TodoList.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { Todo } from '../../types/Todo'; +import { TodoItem } from '../TodoItem/TodoItem'; + +type Props = { + todos: Todo[]; +}; + +export const TodoList: React.FC = ({ todos }) => { + return ( + <> + {todos.map(todo => ( + + ))} + + ); +}; diff --git a/src/components/TodoList/index.js b/src/components/TodoList/index.js new file mode 100644 index 000000000..f239f4345 --- /dev/null +++ b/src/components/TodoList/index.js @@ -0,0 +1 @@ +export * from './TodoList'; diff --git a/src/components/context/TodoContext.tsx b/src/components/context/TodoContext.tsx new file mode 100644 index 000000000..b35e70ad6 --- /dev/null +++ b/src/components/context/TodoContext.tsx @@ -0,0 +1,142 @@ +import React, { createContext, useContext, useReducer, useEffect } from 'react'; +import { + TodoContextType, + TodoState, + TodoAction, +} from '../../types/TodoContextType'; +import { Filter } from '../../types/Filter'; +import { useLocalStorage } from '../../hooks/useLocalStorage'; +import { Todo } from '../../types/Todo'; + +const initialState: TodoState = { + todos: [], + filter: Filter.All, + errorText: null, + query: '', + isLoading: false, + tempTodo: null, + deletingTodoIds: [], +}; + +const TodoContext = createContext(undefined); + +export const todoReducer = ( + state: TodoState, + action: TodoAction, +): TodoState => { + switch (action.type) { + case 'ADD_TODO': + return { + ...state, + todos: [...state.todos, action.payload], + }; + + case 'DELETE_TODO': + return { + ...state, + todos: state.todos.filter(todo => todo.id !== action.payload), + }; + + case 'UPDATE_TODO': + return { + ...state, + todos: state.todos.map(todo => + todo.id === action.payload.id ? action.payload : todo, + ), + }; + + case 'TOGGLE_TODO': + return { + ...state, + todos: state.todos.map(todo => + todo.id === action.payload + ? { ...todo, completed: !todo.completed } + : todo, + ), + }; + + case 'TOGGLE_ALL': + return { + ...state, + todos: state.todos.map(todo => ({ + ...todo, + completed: action.payload, + })), + }; + + case 'CLEAR_COMPLETED': + return { + ...state, + todos: state.todos.filter(todo => !todo.completed), + }; + + case 'SET_FILTER': + return { + ...state, + filter: action.payload, + }; + + case 'SET_ERROR': + return { + ...state, + errorText: action.payload, + }; + + case 'SET_QUERY': + return { + ...state, + query: action.payload, + }; + + case 'SET_LOADING': + return { + ...state, + isLoading: action.payload, + }; + + case 'SET_TEMP_TODO': + return { + ...state, + tempTodo: action.payload, + }; + + case 'SET_DELETING_IDS': + return { + ...state, + deletingTodoIds: action.payload, + }; + + default: + return state; + } +}; + +export const TodoProvider: React.FC<{ children: React.ReactNode }> = ({ + children, +}) => { + const [savedTodos, setSavedTodos] = useLocalStorage('todos', []); + const [state, dispatch] = useReducer(todoReducer, { + ...initialState, + todos: savedTodos, + }); + + useEffect(() => { + setSavedTodos(state.todos); + }, [state.todos, setSavedTodos]); + + return ( + + {children} + + ); +}; + +export const useTodoContext = () => { + const context = useContext(TodoContext); + + if (!context) { + throw new Error('useTodoContext must be used within a TodoProvider'); + } + + return context; +}; diff --git a/src/hooks/useLocalStorage.ts b/src/hooks/useLocalStorage.ts new file mode 100644 index 000000000..f074fb6c6 --- /dev/null +++ b/src/hooks/useLocalStorage.ts @@ -0,0 +1,24 @@ +import { useState, useEffect } from 'react'; + +export function useLocalStorage( + key: string, + initialValue: T, +): [T, (value: T) => void] { + const [storedValue, setStoredValue] = useState(() => { + try { + const item = window.localStorage.getItem(key); + + return item ? JSON.parse(item) : initialValue; + } catch (error) { + return initialValue; + } + }); + + useEffect(() => { + try { + window.localStorage.setItem(key, JSON.stringify(storedValue)); + } catch (error) {} + }, [key, storedValue]); + + return [storedValue, setStoredValue]; +} diff --git a/src/index.tsx b/src/index.tsx index a9689cb38..96936a7e2 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,11 +1,12 @@ import { createRoot } from 'react-dom/client'; - -import './styles/index.css'; -import './styles/todo-list.css'; -import './styles/filters.css'; - +import 'bulma/css/bulma.css'; +import '@fortawesome/fontawesome-free/css/all.css'; +import './styles/index.scss'; import { App } from './App'; +import { TodoProvider } from './components/context/TodoContext'; -const container = document.getElementById('root') as HTMLDivElement; - -createRoot(container).render(); +createRoot(document.getElementById('root') as HTMLDivElement).render( + + + , +); diff --git a/src/styles/index.scss b/src/styles/index.scss index a34eec7c6..bccd80c8b 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -20,6 +20,6 @@ body { pointer-events: none; } -@import './todoapp'; -@import './todo'; -@import './filter'; +@import "./todoapp"; +@import "./todo"; +@import "./filter"; diff --git a/src/styles/todo.scss b/src/styles/todo.scss index 4576af434..c7f93ff6b 100644 --- a/src/styles/todo.scss +++ b/src/styles/todo.scss @@ -15,13 +15,13 @@ &__status-label { cursor: pointer; - background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E'); + background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center left; } &.completed &__status-label { - background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E'); + background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E"); } &__status { @@ -92,8 +92,58 @@ .overlay { position: absolute; - inset: 0; + top: 0; + left: 0; + right: 0; + height: 58px; opacity: 0.5; } } + +.item-enter { + max-height: 0; +} + +.item-enter-active { + overflow: hidden; + max-height: 58px; + transition: max-height 0.3s ease-in-out; +} + +.item-exit { + max-height: 58px; +} + +.item-exit-active { + overflow: hidden; + max-height: 0; + transition: max-height 0.3s ease-in-out; +} + +.temp-item-enter { + max-height: 0; +} + +.temp-item-enter-active { + overflow: hidden; + max-height: 58px; + transition: max-height 0.3s ease-in-out; +} + +.temp-item-exit { + max-height: 58px; +} + +.temp-item-exit-active { + transform: translateY(-58px); + max-height: 0; + opacity: 0; + transition: 0.3s ease-in-out; + transition-property: opacity, max-height, transform; +} + +.has-error .temp-item-exit-active { + transform: translateY(0); + overflow: hidden; +} diff --git a/src/styles/todoapp.scss b/src/styles/todoapp.scss index e289a9458..ad28bcb2f 100644 --- a/src/styles/todoapp.scss +++ b/src/styles/todoapp.scss @@ -1,5 +1,6 @@ + .todoapp { - font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 300; color: #4d4d4d; @@ -8,8 +9,7 @@ &__content { margin-bottom: 20px; background: #fff; - box-shadow: - 0 2px 4px 0 rgba(0, 0, 0, 0.2), + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1); } @@ -49,7 +49,7 @@ } &::before { - content: '❯'; + content: "❯"; transform: translateY(2px) rotate(90deg); line-height: 0; } @@ -69,7 +69,7 @@ border: none; background: rgba(0, 0, 0, 0.01); - box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03); + box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03); &::placeholder { font-style: italic; @@ -97,8 +97,7 @@ text-align: center; border-top: 1px solid #e6e6e6; - box-shadow: - 0 1px 1px rgba(0, 0, 0, 0.2), + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6, @@ -122,6 +121,7 @@ appearance: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + transition: opacity 0.3s; &:hover { text-decoration: underline; @@ -130,5 +130,9 @@ &:active { text-decoration: none; } + + &:disabled { + visibility: hidden; + } } } diff --git a/src/types/Error.ts b/src/types/Error.ts new file mode 100644 index 000000000..d26c1a0ac --- /dev/null +++ b/src/types/Error.ts @@ -0,0 +1,8 @@ +export enum Error { + none = '', + unableToLoad = 'Unable to load todos', + titleShouldNotBeEmpty = 'Title should not be empty', + unableToAdd = 'Unable to add a todo', + unableToDelete = 'Unable to delete a todo', + unableToUpdate = 'Unable to update a todo', +} diff --git a/src/types/Filter.ts b/src/types/Filter.ts new file mode 100644 index 000000000..66887875b --- /dev/null +++ b/src/types/Filter.ts @@ -0,0 +1,5 @@ +export enum Filter { + All = 'All', + Active = 'Active', + Completed = 'Completed', +} diff --git a/src/types/Todo.ts b/src/types/Todo.ts new file mode 100644 index 000000000..f9e06b381 --- /dev/null +++ b/src/types/Todo.ts @@ -0,0 +1,5 @@ +export interface Todo { + id: number; + title: string; + completed: boolean; +} diff --git a/src/types/TodoContextType.ts b/src/types/TodoContextType.ts new file mode 100644 index 000000000..492917248 --- /dev/null +++ b/src/types/TodoContextType.ts @@ -0,0 +1,31 @@ +import { Todo } from './Todo'; +import { Filter } from './Filter'; + +export type TodoState = { + todos: Todo[]; + filter: Filter; + errorText: string | null; + query: string; + isLoading: boolean; + tempTodo: Todo | null; + deletingTodoIds: number[]; +}; + +export type TodoAction = + | { type: 'ADD_TODO'; payload: Todo } + | { type: 'DELETE_TODO'; payload: number } + | { type: 'UPDATE_TODO'; payload: Todo } + | { type: 'TOGGLE_TODO'; payload: number } + | { type: 'TOGGLE_ALL'; payload: boolean } + | { type: 'CLEAR_COMPLETED' } + | { type: 'SET_FILTER'; payload: Filter } + | { type: 'SET_ERROR'; payload: string | null } + | { type: 'SET_QUERY'; payload: string } + | { type: 'SET_LOADING'; payload: boolean } + | { type: 'SET_TEMP_TODO'; payload: Todo | null } + | { type: 'SET_DELETING_IDS'; payload: number[] }; + +export type TodoContextType = { + state: TodoState; + dispatch: React.Dispatch; +}; diff --git a/src/utils/fetchClient.ts b/src/utils/fetchClient.ts new file mode 100644 index 000000000..708ac4c17 --- /dev/null +++ b/src/utils/fetchClient.ts @@ -0,0 +1,46 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ +const BASE_URL = 'https://mate.academy/students-api'; + +// returns a promise resolved after a given delay +function wait(delay: number) { + return new Promise(resolve => { + setTimeout(resolve, delay); + }); +} + +// To have autocompletion and avoid mistypes +type RequestMethod = 'GET' | 'POST' | 'PATCH' | 'DELETE'; + +function request( + url: string, + method: RequestMethod = 'GET', + data: any = null, // we can send any data to the server +): Promise { + const options: RequestInit = { method }; + + if (data) { + // We add body and Content-Type only for the requests with data + options.body = JSON.stringify(data); + options.headers = { + 'Content-Type': 'application/json; charset=UTF-8', + }; + } + + // DON'T change the delay it is required for tests + return wait(100) + .then(() => fetch(BASE_URL + url, options)) + .then(response => { + if (!response.ok) { + throw new Error(); + } + + return response.json(); + }); +} + +export const client = { + get: (url: string) => request(url), + post: (url: string, data: any) => request(url, 'POST', data), + patch: (url: string, data: any) => request(url, 'PATCH', data), + delete: (url: string) => request(url, 'DELETE'), +};