Add Creating Pdfs in Reactjs App

resources/js/components/pages/pdf/CreatePdfComponent.jsx

@@ -1,13 +1,15 @@
-import React, { useEffect, } from 'react'
+import React, { useEffect, useState, } from 'react'
 import { useNavigate, } from 'react-router-dom'
 import { useDispatch, useSelector, } from 'react-redux'
 import moment from 'moment'
-import { getPdf, } from "../../../redux/actions/pdfActions"
+import { createPdf, } from "../../../redux/actions/pdfActions"
 
 import "./CreatePdfComponent.scss"
 
 export default function CreatePdfComponent() {
   const navigate = useNavigate()
+  const [name, setName] = useState("")
+  const [birthday, setBirthday] = useState("")
 
   const dispatch = useDispatch()
   const state = useSelector(state => ({
@@ -22,9 +24,32 @@ export default function CreatePdfComponent() {
     }
   }, [state.auth,])
 
+  useEffect(() => {
+    if (
+      !state.pdf.loading && 
+      !state.pdf.error && 
+      state.pdf.data
+    ) {
+      console.log("pdf", state.pdf.data)
+      return navigate("/pdf/"+state.pdf.data.id)
+    }
+  }, [state.pdf,])
+
   const handleSubmitForm = (e) => {
     e.preventDefault()
     // dispatch create pdf.
+    dispatch(createPdf({ name, birthday, }))
+
+    setName("")
+    setBirthday("")
+  }
+
+  const handleNameChange = (e) => {
+    setName(e.target.value)
+  }
+
+  const handleBirthdayChange = (e) => {
+    setBirthday(e.target.value)
   }
 
   const parseDate = date => moment(date).format('YYYY-MM-DD hh:mm')
@@ -44,7 +69,7 @@ export default function CreatePdfComponent() {
         <form 
           method="post" 
           onSubmit={handleSubmitForm}
-          class="form"
+          className="form"
         >
           {state.pdf.error ?
             <div className="alert alert-warning alert-dismissible fade show" role="alert">
@@ -59,6 +84,7 @@ export default function CreatePdfComponent() {
               name="name"
               id="nameInput"
               placeholder="Name..."
+              onChange={handleNameChange}
             />
           </div>
           <div className="form-group">
@@ -69,6 +95,7 @@ export default function CreatePdfComponent() {
               name="birthday"
               id="birthdayInput"
               placeholder="Birthday..."
+              onChange={handleBirthdayChange}
             />
           </div>
           <input

resources/js/redux/actions/pdfActions.js

@@ -32,3 +32,34 @@ export const getPdf = id => {
     })
   }
 }
+
+export const createPdf = ({ name, birthday, }) => {
+  return async dispatch => {
+    const http = new HttpService()
+
+    dispatch({ type: pdf.CREATE_PDF_PENDING, })
+
+    const tokenId = "user-token"
+    const path = 'pdf/'
+    await new Promise((resolve, reject) => {
+      http.getData(http.domain+'/sanctum/csrf-cookie').then( 
+        http.postData(path, { name, birthday }, tokenId).then(res => {
+          resolve(dispatch({
+            type: pdf.CREATE_PDF_SUCCESS,
+            payload: res.data.data,
+          }))
+        }, error => {
+          reject(dispatch({ 
+            type : pdf.CREATE_PDF_ERROR, 
+            payload: error,
+          }))
+        })
+      ).catch(error => {
+        reject(dispatch({ 
+          type : pdf.GET_PDF_ERROR, 
+          payload: error,
+        }))
+      })
+    })
+  }
+}

resources/js/redux/reducers/pdfReducer.js

@@ -10,19 +10,22 @@ export default function pdfReducer (state = initState, action) {
   switch (action.type) {
 
     case pdf.GET_PDF_ERROR:
+    case pdf.CREATE_PDF_ERROR:
       return {
         ...state,
         error: action.payload,
         loading: false,
       }
 
     case pdf.GET_PDF_PENDING:
+    case pdf.CREATE_PDF_PENDING:
       return {
         ...state,
         loading: true,
       }
 
     case pdf.GET_PDF_SUCCESS:
+    case pdf.CREATE_PDF_SUCCESS:
       return {
         ...state,
         data: action.payload,

resources/js/redux/types.js

@@ -30,4 +30,7 @@ export const pdf = {
   GET_PDF_SUCCESS: 'GET_PDF_SUCCESS',
   GET_PDF_ERROR: 'GET_PDF_ERROR',
   GET_PDF_PENDING: 'GET_PDF_PENDING',
+  CREATE_PDF_SUCCESS: 'CREATE_PDF_SUCCESS',
+  CREATE_PDF_ERROR: 'CREATE_PDF_ERROR',
+  CREATE_PDF_PENDING: 'CREATE_PDF_PENDING',
 }