import React, { useState } from 'react';
import { useUpdateEmployeeMutation } from "./employeesApiSlice";
function EditEmployee(props) {
    const [updateEmployee] = useUpdateEmployeeMutation();
    
    const [updatedFirstName, setUpdatedFirstName] = useState(props.employee.firstName);
    const [updatedLastName, setUpdatedLastName] = useState(props.employee.lastName);
    const [updatedPosition, setUpdatedPosition] = useState(props.employee.position);
    const jobPositions = ['Labor', 'Worker', 'Supervisor', 'Manager', 'HR', 'Director', 'CEO']
        .map((jobPosition, i) => (
            <Col key={i}>
                <Form.Group className="mb-3" controlId={jobPosition.toLowerCase()}>
                    <Form.Check
                        type="radio"
                        name="position"
                        label={jobPosition}
                        value={jobPosition.toLowerCase()}
                        defaultChecked={props.employee.position.toLowerCase() === jobPosition.toLowerCase()}
                        onChange={e => setUpdatedPosition(e.target.value)}
                    />
                </Form.Group>
            </Col>
    ));
    function handleSaveChanges() {
        const employee = {
            firstName: updatedFirstName,
            lastName: updatedLastName,
            position: updatedPosition
        }
        updateEmployee(props.employee.id, employee)
    }
    return (
        <>
           <Form>
              <Form.Group className="mb-3" controlId="formFirstName">
                 <Form.Label>First Name</Form.Label>
                 <Form.Control type="text" defaultValue={updatedFirstName} onChange={e => setUpdatedFirstName(e.target.value)} />
              </Form.Group>
              <Form.Group className="mb-3" controlId="formLastName">
                 <Form.Label>Last Name</Form.Label>
                 <Form.Control type="text" defaultValue={updatedLastName} onChange={e => setUpdatedLastName(e.target.value)} />
              </Form.Group>
              <Container>
                 <Row>
                    {jobPositions}
                 </Row>
              </Container>
           </Form>
                
           <Button variant="success" onClick={() => handleSaveChanges()}>
               Save Changes
           </Button>
       </>
    );
}
export default EditEmployee;

import { apiSlice } from "../../app/api/apiSlice";
export const employeesApiSlice = apiSlice.injectEndpoints({
    tagTypes: ['Employees'],
    endpoints: (builder) => ({
        getEmployees: builder.query({
            query: () => ({
                url:'/employee'
            }),
            providesTags:['Employees'],
            keepUnusedDataFor: 2
        }),
        updateEmployee: builder.mutation({
            query: (id, employee) => ({
                url: `/employee/${id}`,
                method: 'PUT',
                body: employee
            }),
            invalidatesTags: ['Employees']
        }),
        addEmployee: builder.mutation({
            query: (employee) => ({
                url: `/employee`,
                method: 'POST',
                body: employee
            }),
            invalidatesTags: ['Employees']
        })
    }),
});
export const {
    useGetEmployeesQuery,
    useUpdateEmployeeMutation,
    useAddEmployeeMutation
} = employeesApiSlice;

updateEmployee: builder.mutation({
  query: ({ id, employee }) => ({
    url: `/employee/${id}`,
    method: 'PUT',
    body: employee
  }),
  invalidatesTags: ['Employees']
}),

function handleSaveChanges() {
  const employee = {
    firstName: updatedFirstName,
    lastName: updatedLastName,
    position: updatedPosition
  };
  updateEmployee({ id: props.employee.id, employee });
}