CRUD Functionality

[cmancuyas]

Hi Huwcarywn,

I new to react-redux. I can't figure out how to use crud on this boilerplate.

Can you add CRUD functionality?

Great boilerplate btw.

Thanks :)

[huwcarwyn]

What do you mean by this? To add a new model - I add the Model, the Repository Contract and the Repository. These extend the base repository that have all the CRUD methods you need.

To expose those via your api - create a controller where all the other api controllers are with all the CRUD methods, then route those methods accordingly.

[huwcarwyn]

I can work on adding an example for you if you'd like

[cmancuyas]

import React, { Component, Fragment } from 'react'
import { connect } from 'react-redux'
import { SubmissionError } from 'redux-form'

import { departmentActions, fetchDepartments } from 'store/actions'
import { getAllDepartments } from 'store/action-creators/department'
import { Table, AuthGuard } from 'components'

class DisplayAllDepartmentComponent extends Component {
componentDidMount() {
this.props.dispatch(fetchDepartments())
}

render() {
const { error, loading, departments } = this.props

if (error) {
  return <div>Error! {error.message}</div>
}

if (loading) {
  return <div>Loading...</div>
}

return (
  <ul>
    {departments.map(department => (
      <li key={department.id}>{department.name}</li>
    ))}
  </ul>
)

}
}

const getDepartmentValidationResponse = values => {
let errors = {}

return errors
}

const mapStateToProps = state => ({
currentUser: state.entities.users[state.session.currentUser],
departments: state.departments.items,
loading: state.departments.loading,
error: state.departments.error
})

const mapDispatchToProps = dispatch => ({
getAllDepartments: async departmentData => {
const response = await dispatch(getAllDepartments(departmentData))

if (response.status === 400) {
  throw new SubmissionError(
    'getAllDepartments',
    getDepartmentValidationResponse(response.data.data)
  )
}

dispatch({
  type: departmentActions.GETALL_DEPARMENTS,
  items: response.data.data
})

}
})

const mergeProps = (stateProps, dispatchProps, ownProps) => ({
...stateProps,
...dispatchProps,
...ownProps
})

export const DisplayAll = connect(
mapStateToProps,
mapDispatchToProps,
mergeProps
)(DisplayAllDepartmentComponent)

---

This is my code. I don't know where I will insert componentDidMount(). I only want to fetch the data in my DepartmentController(@index) and include it in a table with edit and delete functionality

public function index()
{
    $departments = Department::all();
    return response()->json($departments);
}

---

console is throwing me an error. the the dispatch is not a function

Thanks for your reply :)

[huwcarwyn]

I added a CRUD example as a pull request for you here

I can't help with specific issues here as this area is specifically for bugs/issues with the project not working.

[cmancuyas]

thanks a lot! the sample crud is enough for me :)