|
| 1 | +import React, { useState, useEffect } from "react" |
| 2 | +import { getUsersData, getUserTodos, getUserPosts } from "./utils" |
| 3 | +import './App.css' |
| 4 | +import Users from './Components/Users' |
| 5 | +import TodosPosts from "./Components/TodosPosts"; |
| 6 | +import User from "./Components/User"; |
| 7 | +import AddUser from "./Components/AddUser"; |
| 8 | +import LoadingSpinner from "./Components/LoadingSpinner"; |
| 9 | + |
| 10 | +function App() { |
| 11 | + const [users, setUsers] = useState([]); |
| 12 | + const [search, setSearch] = useState("") |
| 13 | + const [showTP, setShowTP] = useState(false) |
| 14 | + const [showAddUser, setShowAddUser] = useState(false) |
| 15 | + const [chosenUserId, setChosenUserId] = useState(0) |
| 16 | + const [userTodos, setUserTodos] = useState([]) |
| 17 | + const [userPosts, setUserPosts] = useState([]) |
| 18 | + |
| 19 | + useEffect(() => { |
| 20 | + const fetchData = async () => { |
| 21 | + const users_info = await getUsersData() |
| 22 | + setUsers(users_info) |
| 23 | + } |
| 24 | + fetchData() |
| 25 | + }, []); |
| 26 | + |
| 27 | + // filter the users according to username and email and pass it on to Users comp |
| 28 | + const filteredUsers = users.filter(user => { |
| 29 | + const username = user.name.toLocaleLowerCase() |
| 30 | + const useremail = user.email.toLocaleLowerCase() |
| 31 | + const searchLowerCase = search.toLocaleLowerCase() |
| 32 | + return username.includes(searchLowerCase) || useremail.includes(searchLowerCase) |
| 33 | + }) |
| 34 | + |
| 35 | + // function to handle update user's info from User comp |
| 36 | + // only replace the updated user info instead the old info |
| 37 | + const handleUpdate = (updated_user) => { |
| 38 | + console.log(updated_user) |
| 39 | + setUsers(users.map(user => { |
| 40 | + return user.id === updated_user.id ? updated_user : user |
| 41 | + })) |
| 42 | + } |
| 43 | + |
| 44 | + const handleDelete = (id) => { |
| 45 | + setUsers(users.filter(user => user.id !== id)) |
| 46 | + if (chosenUserId === id && showTP) |
| 47 | + setShowTP(false) |
| 48 | + } |
| 49 | + |
| 50 | + const showFillAddUser = () => { |
| 51 | + setShowTP(false) |
| 52 | + setShowAddUser(true) |
| 53 | + } |
| 54 | + |
| 55 | + const hideFillAddUser = () => { |
| 56 | + setShowAddUser(false) |
| 57 | + setChosenUserId(0) |
| 58 | + } |
| 59 | + |
| 60 | + // function to transfer to User comp to handle the showing of todos and posts |
| 61 | + const showTodosPosts = async (id) => { |
| 62 | + const chosenUser = users.find(user => user.id === id) |
| 63 | + setUserTodos(chosenUser.todosUser) |
| 64 | + setUserPosts(chosenUser.postsUser) |
| 65 | + |
| 66 | + if (chosenUserId === id && showTP) { |
| 67 | + // if its the same user that we click on, we want to close his section of todos and posts |
| 68 | + // and setTheChosenUserId to 0 to indicate no user todos/posts chosen |
| 69 | + setShowTP(false) |
| 70 | + setChosenUserId(0) |
| 71 | + } |
| 72 | + else { // if its another user or the same as before (but with his section closed), we want to open his section of todos and posts |
| 73 | + setShowTP(true) |
| 74 | + setShowAddUser(false) |
| 75 | + // this is the id of the current user that his todos and posts are presented |
| 76 | + setChosenUserId(id) |
| 77 | + } |
| 78 | + } |
| 79 | + |
| 80 | + // function to update user's todo to "completed: true" and update all the users |
| 81 | + const updateUsers = (user_id, todo_id) => { |
| 82 | + // console.log(user_id, todo_id) |
| 83 | + setUsers(users.map(user => { |
| 84 | + if (user.id === user_id) { |
| 85 | + const updated_todos = user.todosUser.todos.map(todo => { |
| 86 | + if (todo.id !== todo_id) |
| 87 | + return todo |
| 88 | + else |
| 89 | + return {...todo, completed: true} |
| 90 | + }) |
| 91 | + return {...user, todosUser: {userId: user.id, todos: updated_todos}} |
| 92 | + } |
| 93 | + return user |
| 94 | + })) |
| 95 | + } |
| 96 | + |
| 97 | + // function to recieve data object that could be either be todo or post |
| 98 | + // the function distinguishes between todo or post using `isTodo` property |
| 99 | + const addTodoOrPost = (data) => { |
| 100 | + setUsers(users.map(user => { |
| 101 | + if (user.id === data.userId) { |
| 102 | + if (data.isTodo) { // data is new Todo |
| 103 | + const {isTodo, ...newTodo} = data |
| 104 | + user.todosUser.todos.push(newTodo) |
| 105 | + } else { // data is new Post |
| 106 | + const {isTodo, ...newPost} = data |
| 107 | + user.postsUser.posts.push(newPost) |
| 108 | + } |
| 109 | + } |
| 110 | + return user |
| 111 | + })) |
| 112 | + } |
| 113 | + |
| 114 | + const addNewUser = (new_user) => { |
| 115 | + const new_users = users |
| 116 | + new_users.push(new_user) |
| 117 | + setUsers(new_users) |
| 118 | + } |
| 119 | + |
| 120 | + // update the todos and posts that are presented in the todos-list when users state is updated |
| 121 | + useEffect(() => { |
| 122 | + const chosenUser = users.find(user => user.id === chosenUserId) |
| 123 | + setUserTodos(chosenUser?.todosUser) |
| 124 | + setUserPosts(chosenUser?.postsUser) |
| 125 | + }, [users]); |
| 126 | + |
| 127 | + return ( |
| 128 | + <div> |
| 129 | + {/* {console.log(users)} */} |
| 130 | + { users.length != 0 ? <div className="full_app"> |
| 131 | + <div className="searchAndUsers"> |
| 132 | + <div className="searchInput"> |
| 133 | + <label>Search </label> |
| 134 | + <input onChange={e => setSearch(e.target.value)} type="text"></input> |
| 135 | + <button onClick={() => showFillAddUser()}>Add</button> <br/> |
| 136 | + </div> |
| 137 | + <div className="scrollBarUsers"> |
| 138 | + { |
| 139 | + filteredUsers.map(user => { |
| 140 | + return <User key={user.id} user_info={user} handleUpdate={handleUpdate} handleDelete={handleDelete} showTodosPosts={showTodosPosts} chosenUserId={chosenUserId} isNewUserOpen={showAddUser}/> |
| 141 | + }) |
| 142 | + } |
| 143 | + </div> |
| 144 | + </div> |
| 145 | + <div> |
| 146 | + { showTP && <TodosPosts userTodos={userTodos} userPosts={userPosts} updateUsers={updateUsers} addTodoOrPost={addTodoOrPost}/> } |
| 147 | + { showAddUser && <AddUser hideFillAddUser={hideFillAddUser} addNewUser={addNewUser}/> } |
| 148 | + </div> |
| 149 | + </div> : <LoadingSpinner />} |
| 150 | + </div> |
| 151 | + ) |
| 152 | +} |
| 153 | + |
| 154 | +export default App |
0 commit comments