From 097ebd35cff6c0198acdf680588609627543b96f Mon Sep 17 00:00:00 2001 From: Bahtijar Date: Wed, 1 Nov 2023 17:05:57 +0100 Subject: [PATCH 1/2] stage-1 --- src/App.tsx | 116 ++++++++++++++++++--------- src/components/TodoInfo/TodoInfo.tsx | 34 +++++++- src/components/TodoList/TodoList.tsx | 20 ++++- src/components/UserInfo/UserInfo.tsx | 16 +++- src/services/User.ts | 16 ++++ src/types/Todo.ts | 5 ++ src/types/User.ts | 7 ++ 7 files changed, 175 insertions(+), 39 deletions(-) create mode 100644 src/services/User.ts create mode 100644 src/types/Todo.ts create mode 100644 src/types/User.ts diff --git a/src/App.tsx b/src/App.tsx index 9646bf5c6f..dbdcfde419 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,25 +1,95 @@ +import { useState } from 'react'; import './App.scss'; -// import usersFromServer from './api/users'; -// import todosFromServer from './api/todos'; +import usersFromServer from './api/users'; +import todosFromServer from './api/todos'; +import { Todo } from './types/Todo'; +import { UserId } from './types/User'; +import { TodoList } from './components/TodoList'; export const App = () => { + const [title, setTitle] = useState(''); + const [selectedUserId, setSelectedUserId] = useState(0); + const [todos, setTodos] = useState(todosFromServer); + const [crntTodoId, setCrntTodoId] = useState( + todosFromServer + .map(item => item.id) + .reduce((a, c) => ((c > a) ? c : a), 0), + ); + const [hasTitleError, setHasTitleError] = useState(false); + const [hasSelectError, setHasSelectError] = useState(false); + + const handleTitle = (event: React.ChangeEvent) => { + setTitle(event.target.value); + setHasTitleError(false); + }; + + const handleSelectUser = (event: React.ChangeEvent) => { + setSelectedUserId(+event.target.value); + setHasSelectError(false); + }; + + const handleSabmit = (event: React.FormEvent) => { + event.preventDefault(); + + setHasTitleError(!title); + setHasSelectError(!selectedUserId); + + if (!title + || !selectedUserId) { + return; + } + + setCrntTodoId(p => p + 1); + setTodos(prevTodos => [ + ...prevTodos, + { + id: crntTodoId + 1, + title, + completed: false, + userId: selectedUserId, + }]); + + setTitle(''); + setSelectedUserId(0); + }; + return (

Add todo form

-
+
- - Please enter a title + + + {hasTitleError + && (Please enter a title)}
- + {usersFromServer.map(user => ( + + ))} - Please choose a user + {hasSelectError + && (Please choose a user)}
-
- - - - - -
+
); }; diff --git a/src/components/TodoInfo/TodoInfo.tsx b/src/components/TodoInfo/TodoInfo.tsx index d164511fa8..ef6dff7e54 100644 --- a/src/components/TodoInfo/TodoInfo.tsx +++ b/src/components/TodoInfo/TodoInfo.tsx @@ -1 +1,33 @@ -export const TodoInfo = () => {}; +import React from 'react'; +import cn from 'classnames'; + +import { Todo } from '../../types/Todo'; +import { getUserById } from '../../services/User'; +import { User } from '../../types/User'; +import { UserInfo } from '../UserInfo'; + +type Props = { + todo: Todo, +}; + +export const TodoInfo: React.FC = ({ + todo, +}) => { + return ( + + ); +}; diff --git a/src/components/TodoList/TodoList.tsx b/src/components/TodoList/TodoList.tsx index c12fae07c0..cdbf259001 100644 --- a/src/components/TodoList/TodoList.tsx +++ b/src/components/TodoList/TodoList.tsx @@ -1 +1,19 @@ -export const TodoList = () => {}; +import React from 'react'; +import { Todo } from '../../types/Todo'; +import { TodoInfo } from '../TodoInfo'; + +type Props = { + todos: Todo[], +}; + +export const TodoList: React.FC = ({ + todos, +}) => { + return ( +
+ { + todos.map(todo => ()) + } +
+ ); +}; diff --git a/src/components/UserInfo/UserInfo.tsx b/src/components/UserInfo/UserInfo.tsx index f7bf0410ec..ae1988e3f0 100644 --- a/src/components/UserInfo/UserInfo.tsx +++ b/src/components/UserInfo/UserInfo.tsx @@ -1 +1,15 @@ -export const UserInfo = () => {}; +import { User } from '../../types/User'; + +type Props = { + user: User, +}; + +export const UserInfo: React.FC = ({ + user, +}) => { + return ( + + {user.name} + + ); +}; diff --git a/src/services/User.ts b/src/services/User.ts new file mode 100644 index 0000000000..1689695743 --- /dev/null +++ b/src/services/User.ts @@ -0,0 +1,16 @@ +import { User, UserId, UserName } from '../types/User'; +import usersFromServer from '../api/users'; + +export const getUserById = ( + userId: UserId, + users: User[] = usersFromServer, +): User | undefined => { + return users.find(user => user.id === userId); +}; + +export const getUserByName = ( + userName: UserName, + users: User[] = usersFromServer, +): User | undefined => { + return users.find(user => user.name === userName); +}; diff --git a/src/types/Todo.ts b/src/types/Todo.ts new file mode 100644 index 0000000000..d5218d81be --- /dev/null +++ b/src/types/Todo.ts @@ -0,0 +1,5 @@ +import todosFromServer from '../api/todos'; + +const todo = todosFromServer[0]; + +export type Todo = typeof todo; diff --git a/src/types/User.ts b/src/types/User.ts new file mode 100644 index 0000000000..61950f14fb --- /dev/null +++ b/src/types/User.ts @@ -0,0 +1,7 @@ +import usersFromServer from '../api/users'; + +const user = usersFromServer[0]; + +export type User = typeof user; +export type UserId = typeof user.id; +export type UserName = typeof user.name; From 366ceb51f31c9c27ec8c14d1a5eb06abbd8c13ac Mon Sep 17 00:00:00 2001 From: Bahtijar Date: Wed, 1 Nov 2023 17:13:52 +0100 Subject: [PATCH 2/2] stage-2 --- src/App.tsx | 3 +-- src/components/TodoInfo/TodoInfo.tsx | 3 --- src/services/User.ts | 9 +-------- src/types/User.ts | 1 - 4 files changed, 2 insertions(+), 14 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index dbdcfde419..69806257ff 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -13,8 +13,7 @@ export const App = () => { const [todos, setTodos] = useState(todosFromServer); const [crntTodoId, setCrntTodoId] = useState( todosFromServer - .map(item => item.id) - .reduce((a, c) => ((c > a) ? c : a), 0), + .reduce((a, item) => ((item.id > a) ? item.id : a), 0), ); const [hasTitleError, setHasTitleError] = useState(false); const [hasSelectError, setHasSelectError] = useState(false); diff --git a/src/components/TodoInfo/TodoInfo.tsx b/src/components/TodoInfo/TodoInfo.tsx index ef6dff7e54..d3865f09ab 100644 --- a/src/components/TodoInfo/TodoInfo.tsx +++ b/src/components/TodoInfo/TodoInfo.tsx @@ -25,9 +25,6 @@ export const TodoInfo: React.FC = ({ - {/* - {user.name} - */} ); }; diff --git a/src/services/User.ts b/src/services/User.ts index 1689695743..561a270489 100644 --- a/src/services/User.ts +++ b/src/services/User.ts @@ -1,4 +1,4 @@ -import { User, UserId, UserName } from '../types/User'; +import { User, UserId } from '../types/User'; import usersFromServer from '../api/users'; export const getUserById = ( @@ -7,10 +7,3 @@ export const getUserById = ( ): User | undefined => { return users.find(user => user.id === userId); }; - -export const getUserByName = ( - userName: UserName, - users: User[] = usersFromServer, -): User | undefined => { - return users.find(user => user.name === userName); -}; diff --git a/src/types/User.ts b/src/types/User.ts index 61950f14fb..ffbddbfd97 100644 --- a/src/types/User.ts +++ b/src/types/User.ts @@ -4,4 +4,3 @@ const user = usersFromServer[0]; export type User = typeof user; export type UserId = typeof user.id; -export type UserName = typeof user.name;