Develop #780
Develop #780
Conversation
| import { TodosProvider } from './Context'; | ||
| import USER_ID from './helpers/USER_ID'; | ||
|
|
||
| // components |
| const { setIsFocused } = useContext(FormFocusContext); | ||
| const { | ||
| todos, | ||
| filter, | ||
| setFilter, | ||
| dispatch, | ||
| } = useContext(TodosContext); | ||
| const { setApiError } = useContext(ApiErrorContext); |
There was a problem hiding this comment.
Create hooks for your contexts, so you don't need to pass a context every time.
As example:
const useTodos = () => useContext(TodosContext);
src/Components/Form/Form.tsx
Outdated
| <input | ||
| data-cy={forCypress} | ||
| type="text" | ||
| className={className} | ||
| placeholder={placeholder} | ||
| onChange={onInputChange} | ||
| ref={ref} | ||
| value={value} | ||
| onBlur={onBlur} | ||
| onKeyUp={onKeyUp} | ||
| /> |
There was a problem hiding this comment.
Hint:
- if you don't need at this level props and just want to pass them to the next component you can use the
spreadsyntax. Example:
function Profile(props) {
return (
<div className="card">
<Avatar {...props} />
</div>
);
}https://react.dev/learn/passing-props-to-a-component
- also, in this case, you can reuse props type
In your case get onSubmit from props and pass other props to the next component
src/Components/Header/Header.tsx
Outdated
| import { emptyInputError } from '../../types/apiErrorsType'; | ||
| import { getActiveTodos } from '../../helpers/getTodos'; | ||
|
|
||
| // Component |
There was a problem hiding this comment.
Don't leave redundant comments, remove all of them
| patchTodo(id, data) | ||
| .then((patchedTodo) => { |
There was a problem hiding this comment.
Don't do async operations in forEach. You can use await in for of loop or even better with map collect all your requests and use Promise.all
| type TodosContextType = { | ||
| todos: TodosListType, | ||
| dispatch: React.Dispatch<Actions>, | ||
| filter: FiltersType, | ||
| setFilter: React.Dispatch<React.SetStateAction<FiltersType>> | ||
| tempTodo: Todo | null, | ||
| setTempTodo: React.Dispatch<React.SetStateAction<Todo | null>> | ||
| }; | ||
|
|
||
| type ApiErrorContextType = { | ||
| apiError: ApiErrorType, | ||
| setApiError: React.Dispatch<React.SetStateAction<ApiErrorType>> | ||
| }; | ||
|
|
||
| type FormFocusContextType = { | ||
| isFocused: boolean, | ||
| setIsFocused: React.Dispatch<React.SetStateAction<boolean>> | ||
| }; |
There was a problem hiding this comment.
Create a separate file for each context so it will be easy to maintain them
| <FormFocusContext.Provider value={{ isFocused, setIsFocused }}> | ||
| <ApiErrorContext.Provider value={{ apiError, setApiError }}> | ||
| <TodosContext.Provider value={todosContextValue}> | ||
| {children} | ||
| </TodosContext.Provider> | ||
| </ApiErrorContext.Provider> | ||
| </FormFocusContext.Provider> |
There was a problem hiding this comment.
Split contexts, you can wrap like this in main component
src/helpers/getTodos.ts
Outdated
| default: | ||
| return todos; |
There was a problem hiding this comment.
| default: | |
| return todos; | |
| case FiltersType.ALL: | |
| default: | |
| return todos; |
You can combine cases
| export type Actions = { | ||
| type: 'LOAD', | ||
| payload: TodosListType, | ||
| } | { | ||
| type: 'POST', | ||
| payload: Todo, | ||
| } | { | ||
| type: 'DELETE', | ||
| payload: number, | ||
| } | { | ||
| type: 'PATCH', | ||
| payload: Todo, | ||
| } | { | ||
| type: 'ALL_ACTIVE', | ||
| payload: null, | ||
| } | { | ||
| type: 'IS_SPINNING', | ||
| payload: number, | ||
| } | { | ||
| type: 'REMOVE_SPINNING', | ||
| payload: number, | ||
| }; |
There was a problem hiding this comment.
It's not readable, create a type for each action and then combine them with union type
| @@ -0,0 +1,5 @@ | |||
| export type EmptyInputErrorType = 'REQUIRED'; | |||
|
|
|||
| export const emptyInputError: EmptyInputErrorType = 'REQUIRED'; | |||
There was a problem hiding this comment.
It's too much, if you set some string it gets only this string as type so you don't need to create another type for constant
Yep!!! I was trying to work with Bulma's additional styles, so the editing tests failed. Okay. |
DEMO LINK