Doctor delete

.env.example

@@ -5,3 +5,4 @@ REACT_APP_RAILS_SIGNUP=/signup
 REACT_APP_RAILS_LOGOUT=/logout
 REACT_APP_RAILS_CURRENT_USER=/api/v1/current_user
 REACT_APP_RAILS_APPOINTMENT_ENDPOINT=/api/v1/appointments
+

src/redux/doctors/doctorSlice.js

@@ -1,49 +1,60 @@
-import { createSlice } from '@reduxjs/toolkit';
+import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
+import axios from '../../axios';
+
+const URL = process.env.REACT_APP_RAILS_BASE_URL + process.env.REACT_APP_RAILS_DOCTOR_ENDPOINT;
+
+export const fetchdoctors = createAsyncThunk('doctors/fetch', async () => {
+  const response = await axios.get(URL);
+  return response.data;
+});
+
+export const deleteDoctor = createAsyncThunk('doctors/delete', async (doctorId) => {
+  const response = await axios.delete(`${URL}/${doctorId}`);
+  return response.data;
+});
 
 const initialState = {
   doctors: [],
-  isLoading: false,
+  loading: false,
   error: null,
 };
 
-const URL = process.env.REACT_APP_RAILS_BASE_URL + process.env.REACT_APP_RAILS_DOCTOR_ENDPOINT;
-
-const doctorsSlice = createSlice({
+const doctorSlice = createSlice({
   name: 'doctors',
   initialState,
-  reducers: {
-    setdoctors: (state, action) => {
-      // eslint-disable-next-line no-param-reassign
-      state.doctors = action.payload;
-    },
-
-    setLoading: (state, action) => {
-      // eslint-disable-next-line no-param-reassign
-      state.isLoading = action.payload;
-    },
-    setError: (state, action) => {
-      // eslint-disable-next-line no-param-reassign
-      state.error = action.payload;
-    },
+  reducers: {},
+  extraReducers: (builder) => {
+    builder
+      .addCase(fetchdoctors.pending, (state) => ({
+        ...state,
+        loading: true,
+      }))
+      .addCase(fetchdoctors.fulfilled, (state, action) => ({
+        ...state,
+        loading: false,
+        doctors: action.payload,
+      }))
+      .addCase(fetchdoctors.rejected, (state) => ({
+        ...state,
+        loading: false,
+      }))
+      .addCase(deleteDoctor.pending, (state) => ({
+        ...state,
+        loading: true,
+      }))
+      .addCase(deleteDoctor.fulfilled, (state, action) => {
+        const updatedDoctors = state.doctors.filter((doctor) => doctor.id !== action.payload);
+        return {
+          ...state,
+          loading: false,
+          doctors: updatedDoctors,
+        };
+      })
+      .addCase(deleteDoctor.rejected, (state) => ({
+        ...state,
+        loading: false,
+      }));
   },
 });
 
-export const { setdoctors, setLoading, setError } = doctorsSlice.actions;
-
-export const fetchdoctors = () => async (dispatch) => {
-  dispatch(setLoading(true));
-  try {
-    const response = await fetch(URL);
-    if (!response.ok) {
-      throw new Error('Failed to fetch doctors');
-    }
-    const data = await response.json();
-    dispatch(setdoctors(data));
-  } catch (error) {
-    dispatch(setError(error.message));
-  } finally {
-    dispatch(setLoading(false));
-  }
-};
-
-export default doctorsSlice.reducer;
+export default doctorSlice.reducer;

src/routes/AddDoc.jsx

@@ -82,7 +82,7 @@ const AddDoc = () => {
         Accept: '*/*',
       },
     }).then(() => {
-      navigate('/appointment-list');
+      navigate('/doctors');
     }),
     {
       pending: 'Creating...',

src/routes/DeleteDoc.jsx

@@ -1,9 +1,51 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useNavigate } from 'react-router-dom'; // Import useNavigate
+import { fetchdoctors, deleteDoctor } from '../redux/doctors/doctorSlice';
 
-const DeleteDoc = () => (
-  <div className="flex-1 h-screen px-8 py-32">
-    Should be a page that deletes a doc from the whole list
-  </div>
-);
+const DeleteDoctor = () => {
+  const doctorsDispatch = useDispatch();
+  const { doctors } = useSelector((store) => store.doctors);
+  const navigate = useNavigate(); // Initialize the navigate function
 
-export default DeleteDoc;
+  const handleDelete = async (doctorId) => {
+    await doctorsDispatch(deleteDoctor(doctorId));
+
+    // You can remove the doctor from the Redux state immediately after dispatching
+    const updatedDoctors = doctors.filter((doctor) => doctor.id !== doctorId);
+    doctorsDispatch({ type: 'doctors/setdoctors', payload: updatedDoctors });
+
+    // Redirect to the /doctors page
+    navigate('/doctors'); // Use navigate to navigate
+  };
+
+  useEffect(() => {
+    doctorsDispatch(fetchdoctors());
+  }, [doctorsDispatch]);
+
+  return (
+    <>
+      <div className="flex w-full justify-center">
+        <div className="flex items-center w-[90%] flex-col">
+          <h3 className="text-2xl my-8 font-bold uppercase text-zinc-800">Delete Doctors</h3>
+          <div className="flex w-[90%] flex-col items-center">
+            {doctors.map((doctor) => (
+              <div className="flex w-[100%] my-2.5 justify-between border p-3 rounded-sm items-center" key={doctor.id}>
+                <h3>{doctor.name}</h3>
+                <button
+                  type="button"
+                  className="p-2 w-[100px] bg-[#4ecca3] rounded-sm font-bold text-white"
+                  onClick={() => handleDelete(doctor.id)}
+                >
+                  Delete
+                </button>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default DeleteDoctor;