Admin: add and delete a sport (WIP)

This commit is contained in:
Sam
2018-04-30 21:38:09 +02:00
parent b69a55362d
commit e423c355b5
10 changed files with 256 additions and 47 deletions

View File

@ -16,17 +16,19 @@ class AdminMenu extends React.Component {
<div className="row">
<div className="col-md-2" />
<div className="col-md-8 card">
<ul className="admin-items">
<li>
<Link
to={{
pathname: '/admin/sports',
}}
>
Sports
</Link>
</li>
</ul>
<div className="card-body">
<ul className="admin-items">
<li>
<Link
to={{
pathname: '/admin/sports',
}}
>
Sports
</Link>
</li>
</ul>
</div>
</div>
<div className="col-md-2" />
</div>

View File

@ -1,8 +1,8 @@
import React from 'react'
import { connect } from 'react-redux'
import { getData } from '../../actions/index'
import AdminDetail from './generic/AdminDetail'
import { getData } from '../../../actions/index'
import AdminDetail from '../generic/AdminDetail'
class AdminSports extends React.Component {
componentDidMount() {

View File

@ -1,8 +1,8 @@
import React from 'react'
import { connect } from 'react-redux'
import { getData } from '../../actions/index'
import AdminPage from './generic/AdminPage'
import { getData } from '../../../actions/index'
import AdminPage from '../generic/AdminPage'
class AdminSports extends React.Component {
componentDidMount() {

View File

@ -3,7 +3,7 @@ import { Helmet } from 'react-helmet'
import { connect } from 'react-redux'
import { Link } from 'react-router-dom'
import { updateData } from '../../../actions/index'
import { deleteData, updateData } from '../../../actions/index'
class AdminDetail extends React.Component {
@ -18,6 +18,7 @@ class AdminDetail extends React.Component {
const {
message,
onDataUpdate,
onDataDelete,
results,
target,
} = this.props
@ -92,12 +93,12 @@ class AdminDetail extends React.Component {
<input
type="submit"
className="btn btn-danger btn-lg btn-block"
onClick={event => onDataDelete(event, target)}
value="Delete"
/>
</div>
)}
</form>
<Link to={`/admin/${target}`}>Back to the list</Link>
</div>
</div>
<div className="col-md-2" />
@ -115,6 +116,10 @@ export default connect(
message: state.message,
}),
dispatch => ({
onDataDelete: (e, target) => {
const id = e.target.form.id.value
dispatch(deleteData(target, id))
},
onDataUpdate: (e, target) => {
const data = [].slice
.call(e.target.form.elements)

View File

@ -28,34 +28,37 @@ export default function AdminPage(props) {
<div className="row">
<div className="col-md-2" />
<div className="col-md-8 card">
<table className="table">
<thead>
<tr>
{tbKeys.map(
tbKey => <th key={tbKey} scope="col">{tbKey}</th>
)}
</tr>
</thead>
<tbody>
{ results.map((result, idx) => (
<tr key={idx}>
{ Object.keys(result).map(key => {
if (key === 'id') {
return (
<th key={key} scope="row">
<Link to={`/admin/${detailLink}/${result[key]}`}>
{result[key]}
</Link>
</th>
)
}
return <td key={key}>{result[key]}</td>
})
}
<div className="card-body">
<table className="table">
<thead>
<tr>
{tbKeys.map(
tbKey => <th key={tbKey} scope="col">{tbKey}</th>
)}
</tr>
))}
</tbody>
</table>
</thead>
<tbody>
{ results.map((result, idx) => (
<tr key={idx}>
{ Object.keys(result).map(key => {
if (key === 'id') {
return (
<th key={key} scope="row">
<Link to={`/admin/${detailLink}/${result[key]}`}>
{result[key]}
</Link>
</th>
)
}
return <td key={key}>{result[key]}</td>
})
}
</tr>
))}
</tbody>
</table>
<Link to={`/admin/${target}/add`}>Add new item</Link>
</div>
</div>
<div className="col-md-2" />
</div>

View File

@ -3,9 +3,9 @@ import { Helmet } from 'react-helmet'
import { connect } from 'react-redux'
import { Redirect, Route, Switch } from 'react-router-dom'
import AdminMenu from './AdminMenu'
import AdminSport from './AdminSport'
import AdminSports from './AdminSports'
import AdminMenu from './Sports/AdminMenu'
import AdminSport from './Sports/AdminSport'
import AdminSports from './Sports/AdminSports'
import AccessDenied from './../Others/AccessDenied'
import NotFound from './../Others/NotFound'
import { isLoggedIn } from '../../utils'