Skip to content

Commit

Permalink
first solution
Browse files Browse the repository at this point in the history
  • Loading branch information
Nazar committed Oct 23, 2023
1 parent d3a183a commit 7a5bb69
Show file tree
Hide file tree
Showing 6 changed files with 162 additions and 40 deletions.
131 changes: 94 additions & 37 deletions src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,61 +1,118 @@
import React, { 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 { TodoList } from './components/TodoList';

const findUserById = (id: number) => {
return usersFromServer.find(user => user.id === id) || null;
};

const todosWithUsers = todosFromServer.map(todo => ({
...todo,
user: findUserById(todo.userId),
}));

export const App: React.FC = () => {
const [title, setTitle] = useState('');
const [userId, setUserId] = useState(0);

const [hasTitleError, setHasTitleError] = useState(false);
const [hasUserError, setHasUserError] = useState(false);

const [newTodos, setNewTodos] = useState<Todo[]>(todosWithUsers);

const handleTitleInput = ((e: React.ChangeEvent<HTMLInputElement>) => {
setTitle(e.target.value);
setHasTitleError(false);
});

const handleUserSelect = (e: React.ChangeEvent<HTMLSelectElement>) => {
setUserId(+e.target.value);
setHasUserError(false);
};

const handleSubmit = ((e: React.ChangeEvent<HTMLFormElement>) => {
e.preventDefault();

if (!title && !userId) {
setHasTitleError(!hasTitleError);
setHasUserError(!hasUserError);

return;
}

if (!title) {
setHasTitleError(!hasTitleError);

return;
}

if (!userId) {
setHasUserError(!hasUserError);

return;
}

const newTodo = {
id: Math.max(...newTodos.map(todo => todo.id)) + 1,
title,
userId,
completed: false,
user: findUserById(userId),
};

setNewTodos(prevState => [...prevState, newTodo]);
setTitle('');
setUserId(0);
});

export const App = () => {
return (
<div className="App">
<h1>Add todo form</h1>

<form action="/api/todos" method="POST">
<form
action="/api/todos"
method="POST"
onSubmit={handleSubmit}
>
<div className="field">
<input type="text" data-cy="titleInput" />
<span className="error">Please enter a title</span>
<input
type="text"
data-cy="titleInput"
placeholder="Enter a Title"
value={title}
onChange={handleTitleInput}
/>

{hasTitleError && <span className="error">Please enter a title</span>}
</div>

<div className="field">
<select data-cy="userSelect">
<select
data-cy="userSelect"
value={userId}
onChange={handleUserSelect}
>
<option value="0" disabled>Choose a user</option>
{usersFromServer.map(user => (
<option value={user.id} key={user.id}>{user.name}</option>
))}
</select>

<span className="error">Please choose a user</span>
{hasUserError && <span className="error">Please choose a user</span>}
</div>

<button type="submit" data-cy="submitButton">
Add
</button>
</form>

<section className="TodoList">
<article data-id="1" className="TodoInfo TodoInfo--completed">
<h2 className="TodoInfo__title">
delectus aut autem
</h2>

<a className="UserInfo" href="mailto:Sincere@april.biz">
Leanne Graham
</a>
</article>

<article data-id="15" className="TodoInfo TodoInfo--completed">
<h2 className="TodoInfo__title">delectus aut autem</h2>

<a className="UserInfo" href="mailto:Sincere@april.biz">
Leanne Graham
</a>
</article>

<article data-id="2" className="TodoInfo">
<h2 className="TodoInfo__title">
quis ut nam facilis et officia qui
</h2>

<a className="UserInfo" href="mailto:Julianne.OConner@kory.org">
Patricia Lebsack
</a>
</article>
</section>
<TodoList todos={newTodos} />
</div>
);
};
26 changes: 25 additions & 1 deletion src/components/TodoInfo/TodoInfo.tsx
Original file line number Diff line number Diff line change
@@ -1 +1,25 @@
export const TodoInfo = () => {};
import React from 'react';
import cn from 'classnames';

import { UserInfo } from '../UserInfo';
import { Todo } from '../../types/Todo';

interface Props {
todo: Todo,
}

export const TodoInfo: React.FC<Props> = ({ todo }) => (
<article
data-id={todo.id}
className={cn('TodoInfo', {
'TodoInfo--completed': todo.completed,
})}
>

<h2 className="TodoInfo__title">
{todo.title}
</h2>

{todo.user && <UserInfo user={todo.user} />}
</article>
);
17 changes: 16 additions & 1 deletion src/components/TodoList/TodoList.tsx
Original file line number Diff line number Diff line change
@@ -1 +1,16 @@
export const TodoList = () => {};
import React from 'react';

import { TodoInfo } from '../TodoInfo/TodoInfo';
import { Todo } from '../../types/Todo';

type Props = {
todos: Todo[];
};

export const TodoList: React.FC<Props> = ({ todos }) => (
<section className="TodoList">
{todos.map(todo => (
<TodoInfo key={todo.id} todo={todo} />
))}
</section>
);
13 changes: 12 additions & 1 deletion src/components/UserInfo/UserInfo.tsx
Original file line number Diff line number Diff line change
@@ -1 +1,12 @@
export const UserInfo = () => {};
import React from 'react';
import { User } from '../../types/User';

type Props = {
user: User;
};

export const UserInfo: React.FC<Props> = ({ user }) => (
<a className="UserInfo" href={`mailto:${user.email}`}>
{user.name}
</a>
);
9 changes: 9 additions & 0 deletions src/types/Todo.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { User } from './User';

export interface Todo {
id: number,
title: string,
completed: boolean,
userId: number,
user: User | null,
}
6 changes: 6 additions & 0 deletions src/types/User.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
export interface User {
id: number,
name: string,
username: string,
email: string,
}

0 comments on commit 7a5bb69

Please sign in to comment.