{"version":3,"sources":["tables/UserTable.js","forms/AddUserForm.js","forms/EditUserForm.js","App.js","index.js"],"names":["UserTable","props","users","length","map","user","name","username","onClick","editRow","className","deleteUser","id","colSpan","AddUserForm","initialFormState","useState","setNewUser","handleInputChange","event","target","value","onSubmit","preventDefault","addUser","type","onChange","EditUserForm","currentUser","setUser","useEffect","updateUser","setEditing","App","setUsers","edit","setEdit","setCurrentUser","updatedUser","filter","ReactDOM","render","StrictMode","document","getElementById"],"mappings":"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","file":"static/js/main.6a3af08e.chunk.js","sourcesContent":["import React from 'react'\n\nconst UserTable = (props) => (\n  <table>\n    <thead>\n      <tr>\n        <th>Name</th>\n        <th>Username</th>\n        <th>Actions</th>\n      </tr>\n    </thead>\n    <tbody>\n    {props.users.length > 0 ? (\n        props.users.map((user) => (\n          <tr key={user.id}>\n            <td>{user.name}</td>\n            <td>{user.username}</td>\n            <td>\n            <button\n              onClick={() => {\n                props.editRow(user)\n              }}\n              className=\"button muted-button\"\n            >\n              Edit\n            </button>\n            <button\n              onClick={() => props.deleteUser(user.id)}\n              className=\"button muted-button\"\n             >\n              Delete\n            </button>\n            </td>\n         </tr>\n        ))\n    ) : (\n        <tr>\n          <td colSpan={3}>No users</td>\n        </tr>\n    )}\n      \n    </tbody>\n  </table>\n)\n\nexport default UserTable","import React, { useState } from 'react';\n\nconst AddUserForm = (props) => {\n  const initialFormState = {\n                            id: null,\n                            name: '', \n                            username: ''\n                          }\n\n  const [user, setNewUser] = useState(initialFormState);\n\n  const handleInputChange = (event) => {\n    const { name, value} = event.target;\n\n    setNewUser({ ...user, [name]: value })\n    \n  }\n  \n\n  return (\n    <form\n       onSubmit= {(event) => {\n        event.preventDefault();\n        if (!user.name || !user.username) return \n\n        props.addUser(user);\n        setNewUser(initialFormState);\n      }}\n    >\n      \n      <label>Name</label>\n      <input type=\"text\" name=\"name\" value={user.name} onChange={handleInputChange} />\n      <label>Username</label>\n      <input type=\"text\" name=\"username\" value={user.username} onChange={handleInputChange} />\n      <button>Add new user</button>\n    </form>\n  )\n}\n\nexport default AddUserForm","import React, { useState, useEffect } from 'react'\n\nconst EditUserForm = (props) => {\n  const [user, setUser] = useState(props.currentUser)\n\n  const handleInputChange = (event) => {\n    const { name, value } = event.target\n\n    setUser({ ...user, [name]: value })\n  }\n\n  useEffect(() => {\n  setUser(props.currentUser)\n  }, [props])\n\n  return (\n    <form\n      onSubmit={(event) => {\n        event.preventDefault()\n\n        props.updateUser(user.id, user)\n      }}\n    >\n      <label>Name</label>\n      <input\n        type=\"text\"\n        name=\"name\"\n        value={user.name}\n        onChange={handleInputChange}\n      />\n      <label>Username</label>\n      <input\n        type=\"text\"\n        name=\"username\"\n        value={user.username}\n        onChange={handleInputChange}\n      />\n      <button>Update user</button>\n      <button\n        onClick={() => props.setEditing(false)}\n        className=\"button muted-button\"\n      >\n        Cancel\n      </button>\n    </form>\n  )\n}\n\nexport default EditUserForm","import React from \"react\";\nimport {useState} from \"react\";\nimport UserTable from \"./tables/UserTable\";\nimport AddUserForm from \"./forms/AddUserForm\";\nimport EditUserForm from './forms/EditUserForm'\n\nconst App = () => {\n\n  const usersData = [\n    { id: 1, name: 'Tania', username: 'floppydiskette' },\n    { id: 2, name: 'Craig', username: 'siliconeidolon' },\n    { id: 3, name: 'Ben', username: 'benisphere' },\n  ]\n\n  const [users, setUsers] = useState(usersData)\n\n  const addUser = (user) => {\n  user.id = users.length + 1\n  setUsers([...users, user])\n}\n  const deleteUser = (id) => {\n    setUsers(users.filter((user) => user.id !== id));\n    setEdit(false);\n  }\n\n  const [edit, setEdit] = useState(false);\n\n  const initialFormState = { id: null, name: '', username: '' };\n  \n  const [currentUser, setCurrentUser] = useState(initialFormState);\n\n  const editRow = (user) => {\n  setEdit(true)\n\n  setCurrentUser({ id: user.id, name: user.name, username: user.username })\n}\n  const updateUser = (id, updatedUser) => {\n  setEdit(false)\n\n  setUsers(users.map((user) => (user.id === id ? updatedUser : user)))\n}\n  \n\n  return (\n    <div className=\"container\">\n      <header className=\"App-header\">\n        <h1>CRUD  App built with React Hooks</h1>\n      </header>\n      <div className=\"flex-row\">\n        <div className=\"flex-large\">\n        {edit ? (\n          <div>\n      <h2>Edit user</h2>\n      <EditUserForm\n        setEditing={setEdit}\n        currentUser={currentUser}\n        updateUser={updateUser}\n      />\n    </div>\n  ) : (\n    <div>\n      <h2>Add user</h2>\n      <AddUserForm addUser={addUser} />\n    </div>\n  )}\n</div>\n        <div className=\"flex-large\">\n          <h2>View users</h2>\n          <UserTable users={users} editRow={editRow} deleteUser={deleteUser} />\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default App;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\n\n\nReactDOM.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  document.getElementById('root')\n);\n\n\n"],"sourceRoot":""}