Adicionando funcionalidade edição de clientes

src/App.js

@@ -4,6 +4,7 @@ import TemplatePage from './templates/TemplatePage'
 import Home from './pages/Home'
 import CustomersList from './pages/customers/List'
 import CustomersRegister from './pages/customers/Register'
+import CustomersEdit from './pages/customers/Edit'
 
 import {
   BrowserRouter,
@@ -18,6 +19,7 @@ const App = () => {
         <TemplateDefault>
           <Routes>
             <Route path="/" element={<TemplatePage title="Página Inicial" component={<Home />} />}  />
+            <Route path="/customers/edit/:id" element={<TemplatePage title="Editar Cliente" component={<CustomersEdit />} />}  />
             <Route path="/customers/add" element={<TemplatePage title="Adicionar Cliente" component={<CustomersRegister />} />}  />
             <Route path="/customers" element={<TemplatePage title="Clientes" component={<CustomersList />}/>} />
           </Routes>

src/components/CustomersCard.js

@@ -23,6 +23,7 @@ const CustomersCard = ({
   email,
   avatar,
   onRemoveCustomer,
+  onEditCustomer,
 }) => {
   const [modalOpen, setModalOpen] = useState(false)
 
@@ -35,6 +36,10 @@ const CustomersCard = ({
     handleToggleModal()
   }
 
+  const handleEditCustomer = id => {
+    onEditCustomer(id)
+  }
+
   return (
     <>
       <Card sx={{ maxWidth: 345, margin:'0 auto'}}>
@@ -51,7 +56,7 @@ const CustomersCard = ({
           </Typography>
         </CardContent>
         <CardActions disableSpacing>
-          <IconButton aria-label="Editar usuário">
+          <IconButton aria-label="Editar usuário" onClick={() => handleEditCustomer(id)}>
             <EditIcon />
           </IconButton>
           <IconButton aria-label="Deletar usuário" onClick={() => handleToggleModal()}>

src/pages/customers/Edit.js

@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from 'react'
+import { useParams } from 'react-router-dom'
+import axios from 'axios'
+
+import {
+  TextField,
+  Stack,
+} from '@mui/material/'
+
+import Snackbar from '../../components/Snackbar'
+import ButtonLoading from '../../components/ButtonLoading'
+
+const Edit = () => {
+  const { id } = useParams()
+
+  const [form, setForm] = useState({
+    name: {
+      value: '',
+      error: false
+      },
+      job: {
+        value: '',
+        error: false
+      },
+  })
+
+  const [loading, setLoading] = React.useState(false)
+  const [openSnackbar, setOpenSnackbar] = useState(false)
+
+  useEffect(() => {
+    axios.get(`https://reqres.in/api/users/${id}`)
+    .then( response => {
+      const { data } = response.data
+      console.log(data)
+      setForm({
+        name: {
+        value: data.first_name,
+        error: false
+        },
+        job: {
+          value: data.job,
+          error: false
+        },
+      })
+    })
+  }, [])
+
+  console.log(form)
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target
+    setForm({
+      ...form,
+      [name]: {
+        value,
+      },
+    })
+  }
+
+
+  const handleRegisterButton = () => {
+    let hasError = false
+
+    let newFormState = {
+      ...form,
+    }
+
+    if(!form.name.value) {
+      hasError = true
+      newFormState.name = {
+        value: form.name.value,
+        error: true,
+        helperText: 'Campo obrigatório'
+      }
+    }
+
+    if(!form.job.value) {
+      hasError = true
+      newFormState.job = {
+        value: form.job.value,
+        error: true,
+        helperText: 'Campo obrigatório'
+      } 
+    }
+
+    if(hasError) {
+      return setForm(newFormState)
+    }else{
+      setLoading(true)
+    }
+
+    axios.patch(`https://reqres.in/api/users/${id}`, {
+      name: form.name.value,
+      job: form.job.value
+    }).then(() => {
+      setLoading(false)
+      setOpenSnackbar(true)
+    })
+  }
+
+  return (
+    <>
+      <Stack direction='column' maxWidth='400px' margin='0 auto'
+      spacing={{ xs: 2, sm: 3, md: 4 }}>
+        <TextField
+          name="name"
+          id="outlined-basic"
+          label="Digite o Nome:"
+          value={form.name.value}
+          error={form.name.error}
+          helperText={form.name.error? form.name.helperText : ''}
+          onChange={handleInputChange}
+        />
+        <TextField
+          name="job"
+          id="outlined-basic"
+          label="Digite o Cargo:"
+          value={form.job.value}
+          error={form.job.error}
+          helperText={form.job.error? form.job.helperText : ''}
+          onChange={handleInputChange}
+        />
+        <ButtonLoading text="Salvar Alterações" onClick={handleRegisterButton} loading={loading} />
+      </Stack>
+      <Snackbar open={openSnackbar} severity="success" text="Alterações Salvas com sucesso!" onClose={() => setOpenSnackbar(false)}/>
+    </>
+
+
+  )
+}
+
+export default Edit

src/pages/customers/List.js

@@ -1,11 +1,13 @@
 import React, { useState, useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
 import axios from 'axios'
 import Grid from '@mui/material/Grid'
 
 import CustomersCard from '../../components/CustomersCard'
 
 const Customers = () => {
   const [customers, setCustomers] = useState([])
+  const navigate = useNavigate()
 
   useEffect( () => {
     axios.get('https://reqres.in/api/users')
@@ -20,8 +22,11 @@ const Customers = () => {
     .then( () => {
       const newCustomersState = customers.filter(customer => customer.id !== id)
       setCustomers(newCustomersState)
-    }
-    )
+    })
+  }
+
+  const handleEditCustomer = id => {
+    navigate(`/customers/edit/${ id }`)
   }
 
   return (
@@ -37,6 +42,7 @@ const Customers = () => {
                 email={item.email} 
                 avatar={item.avatar}
                 onRemoveCustomer={handleRemoveCustomer}
+                onEditCustomer={handleEditCustomer}
               />
             </Grid>
           )