classwork 69

src/containers/Checkout/ContactData/ContactData.tsx

 import Button from "@/components/UI/Button/Button";
-import axiosBase from "@/config/axiosBase";
-import { useState } from "react";
-import { ICustomer } from "@/interfaces/checkout";
-import { useLocation } from "react-router-dom";
 import Spinner from "@/components/UI/Spinner/Spinner";
+import { useAppDispatch, useAppSelector } from "@/store/hooks";
+import { postContactData, setCustomer } from "@/store/slice/contactData.slice";
+import { useEffect } from "react";
 import "./ContactData.css";
 
 const ContactData = () => {
-  const location = useLocation()
+  const dispatch = useAppDispatch()
 
-  const [loading, setLoading] = useState<boolean>(false)
-  const [customer, setCustomer] = useState<ICustomer>({
-    name: '',
-    email: '',
-    street: '',
-    postal: ''
-  })
+  const {
+    burger: {
+      ingredients
+    }, 
+    contactData: {
+      loading, 
+      customer,
+      error
+    }
+  } = useAppSelector(state => state)
+
+  useEffect(() => {
+    if(error) {
+      console.log(error)
+    }
+  }, [error])
 
   const onChangeCustomer = (e: React.FormEvent<HTMLInputElement>) => {
       const {value, name} = e.currentTarget
-      setCustomer(prevState => ({...prevState, [name]: value}))
+      dispatch(setCustomer({value, name}))
   }
 
   const onOrder = async (e: React.SyntheticEvent<HTMLFormElement>) => {
     e.preventDefault()
-    setLoading(true)
 
     const data = {
       contact: customer,
-      ingredients: location.state?.ingredients
-    }
-
-    try {
-      await axiosBase.post('orders.json', data) 
-    } catch (error) {
-      console.error(error)
+      ingredients: ingredients
     }
 
-    setLoading(false)
+    dispatch(postContactData(data))
   }
 
   if(loading) return <Spinner/>

src/interfaces/checkout.ts

+import { Ingredients } from "./Ingredients"
+
 export interface ICustomer {
     name: string
     email: string
     street: string
     postal: string
 }
+
+export interface IConactData {
+    contact: ICustomer,
+    ingredients: Ingredients
+}
\ No newline at end of file

src/store/index.ts

 import { configureStore } from "@reduxjs/toolkit";
 import { burgerSlice } from "./slice/burger.slice";
+import { contactDataSlice } from "./slice/contactData.slice";
 
 export const store = configureStore({
     reducer: {
-        burger: burgerSlice.reducer
+        burger: burgerSlice.reducer,
+        contactData: contactDataSlice.reducer
     }
 })
 

src/store/slice/contactData.slice.ts

+import axiosBase from "@/config/axiosBase";
+import { IConactData, ICustomer } from "@/interfaces/checkout";
+import { createAsyncThunk, createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+interface IState {
+    loading: boolean
+    error: string | null
+    customer: ICustomer
+}
+
+const initialState: IState = {
+    loading: false,
+    error: null,
+    customer: {
+        name: '',
+        email: '',
+        street: '',
+        postal: ''
+    }
+}
+
+export const postContactData = createAsyncThunk(
+    'contact/postContactData',
+    async (data: IConactData) => {
+        try {
+            await axiosBase.post('orders.json', data) 
+        } catch {
+            throw new Error('Unknown error')
+        }
+    }
+)
+
+export const contactDataSlice = createSlice({
+    name: 'contact',
+    initialState,
+    reducers: {
+        setCustomer: (state, action: PayloadAction<{name: string, value: string}>): void => {
+            const {name, value} = action.payload;
+            
+            switch (name) {
+                case 'name':
+                    state.customer.name = value
+                    break
+                case 'email': 
+                    state.customer.email = value
+                    break
+                case 'postal':
+                    state.customer.postal = value
+                    break
+                case 'street': 
+                    state.customer.street = value
+                    break
+                default:
+                    break;
+            }
+        }
+    },
+    extraReducers(builder) {
+        builder
+            .addCase(postContactData.pending, (state) => {
+                state.loading = true
+                state.error = null
+            })
+            .addCase(postContactData.rejected, (state, action) => {
+                state.loading = false
+                state.error = action.error.message || ''
+            })
+            .addCase(postContactData.fulfilled, (state) => {
+                state.loading = false
+                state.error = null
+            })
+    },
+})
+
+export const {setCustomer} = contactDataSlice.actions
\ No newline at end of file