Commit b4fc017c authored by Remy Huet's avatar Remy Huet

Split actions into different components.

TODO :
- Fix imports (too many)
- Fix proptypes
parent 5b6694fd
Pipeline #30765 passed with stage
in 54 seconds
......@@ -13,4 +13,12 @@ export function fetchCategories(token) {
};
}
export function a() {}
export function deleteCategory(token, id) {
axios.defaults.headers.common = {
Authorization: `Bearer ${token}`,
};
return {
type: 'DELETE_CATEGORY',
payload: axios.delete(`${env.api_uri}/api/v1/categories/${id}`),
};
}
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import {
Card, Button, Header, Confirm, Breadcrumb,
} from 'semantic-ui-react';
import { Link } from 'react-router-dom';
function Category({
name, userType, parentId, parentName, id, action,
}) {
if (action === 'index') {
return (
<Card raised>
<Card.Content>
<Card.Header>
{name}
</Card.Header>
{parentName && (
<Card.Meta as={Link} to={`/categories/show/${parentId}`}>
{'Sous catégorie de '}
<u>{parentName}</u>
</Card.Meta>
)}
</Card.Content>
<Card.Content extra>
<Button.Group>
<Button primary as={Link} to={`/categories/show/${id}`}>Voir</Button>
{userType === 'Responsable' && (
<>
<Button.Or text="ou" />
<Button negative as={Link} to={`/categories/delete/${id}`}>Supprimer</Button>
</>)}
</Button.Group>
</Card.Content>
</Card>
);
}
if (action === 'show') {
return (
<Confirm
open
cancelButton={<Button as={Link} to={`/categories/edit/${id}`} color="orange">Éditer</Button>}
confirmButton={<Button primary as={Link} to="/categories">Fermer</Button>}
header={<Header as="h1">{name}</Header>}
content={
<>
{parentId && (
<Breadcrumb>
<Breadcrumb.Section link as={Link} to={`/categories/show/${parentId}`}>{parentName}</Breadcrumb.Section>
<Breadcrumb.Divider icon="right angle" />
<Breadcrumb.Section active>{name}</Breadcrumb.Section>
</Breadcrumb>
)}
</>
}
/>
);
}
if (action === 'edit') {
return (
<Confirm
open
cancelButton={<Button as={Link} to={`/categories/show/${id}`}>Retour</Button>}
header={<Header as="h1">Éditer</Header>}
content={
<>
</>
}
/>
);
}
if (action === 'delete') {
return (
<Confirm
open
cancelButton={<Button as={Link} to="/categories">Retour</Button>}
header={<Header as="h1">Supprimer</Header>}
content={(
<>
<Header as="h3">{`Êtes-vous sûr de vouloir supprimer la catégorie ${name} ?`}</Header>
<p>La catégorie doit être vide</p>
</>
)}
/>
);
}
if (action === 'create') {
return (
<Confirm
open
cancelButton={<Button as={Link} to="/categories">Retour</Button>}
header={<Header as="h1">Créer une catégorie</Header>}
/>
);
}
}
Category.propTypes = {
name: PropTypes.string.isRequired,
parentName: PropTypes.string,
parentId: PropTypes.number,
userType: PropTypes.string.isRequired,
id: PropTypes.number.isRequired,
action: PropTypes.oneOf(['index', 'show', 'edit', 'delete', 'create']),
};
Category.defaultProps = {
parentName: null,
parentId: null,
full: false,
};
export default connect(store => ({
userType: store.user.user.type,
}))(Category);
import React from 'react';
import { Link } from 'react-router-dom';
import { Confirm, Header, Button } from 'semantic-ui-react';
export default function CategoryCreate() {
return (
<Confirm
open
cancelButton={<Button as={Link} to="/categories">Retour</Button>}
header={<Header as="h1">Créer une catégorie</Header>}
/>
);
}
import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { Confirm, Button, Header } from 'semantic-ui-react';
export default function CategoryDelete({ name }) {
return (
<Confirm
open
cancelButton={<Button as={Link} to="/categories">Retour</Button>}
confirmButton={(
<Button
content="Oui"
/>
)}
header={<Header as="h1">Supprimer</Header>}
content={(
<>
<Header as="h3">{`Êtes-vous sûr de vouloir supprimer la catégorie ${name} ?`}</Header>
<p>La catégorie doit être vide</p>
</>
)}
/>
);
}
CategoryDelete.propTypes = {
name: PropTypes.string.isRequired,
};
import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { Confirm, Button, Header } from 'semantic-ui-react';
export default function CategoryEdit({ id }) {
return (
<Confirm
open
cancelButton={<Button as={Link} to={`/categories/show/${id}`}>Retour</Button>}
header={<Header as="h1">Éditer</Header>}
content={
<>
</>
}
/>
);
}
CategoryEdit.propTypes = {
id: PropTypes.number.isRequired,
};
import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { Card, Button } from 'semantic-ui-react';
function CategoryIndex({
name, userType, parentId, parentName, id,
}) {
return (
<Card raised>
<Card.Content>
<Card.Header>
{name}
</Card.Header>
{parentName && (
<Card.Meta as={Link} to={`/categories/show/${parentId}`}>
{'Sous catégorie de '}
<u>{parentName}</u>
</Card.Meta>
)}
</Card.Content>
<Card.Content extra>
<Button.Group>
<Button primary as={Link} to={`/categories/show/${id}`}>Voir</Button>
{userType === 'Responsable' && (
<>
<Button.Or text="ou" />
<Button negative as={Link} to={`/categories/delete/${id}`}>Supprimer</Button>
</>)}
</Button.Group>
</Card.Content>
</Card>
);
}
CategoryIndex.propTypes = {
id: PropTypes.number.isRequired,
name: PropTypes.string.isRequired,
userType: PropTypes.string.isRequired,
parentId: PropTypes.number,
parentName: PropTypes.string,
};
CategoryIndex.defaultProps = {
parentId: null,
parentName: null,
};
export default connect(store => ({
userType: store.user.user.type,
}))(CategoryIndex);
import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import {
Confirm, Button, Header, Breadcrumb,
} from 'semantic-ui-react';
export default function CategoryShow({
name, parentId, parentName, id,
}) {
return (
<Confirm
open
cancelButton={<Button as={Link} to={`/categories/edit/${id}`} color="orange">Éditer</Button>}
confirmButton={<Button primary as={Link} to="/categories">Fermer</Button>}
header={<Header as="h1">{name}</Header>}
content={
<>
{parentId && (
<Breadcrumb>
<Breadcrumb.Section link as={Link} to={`/categories/show/${parentId}`}>{parentName}</Breadcrumb.Section>
<Breadcrumb.Divider icon="right angle" />
<Breadcrumb.Section active>{name}</Breadcrumb.Section>
</Breadcrumb>
)}
</>
}
/>
);
}
CategoryShow.propTypes = {
id: PropTypes.number.isRequired,
name: PropTypes.string.isRequired,
parentId: PropTypes.number,
parentName: PropTypes.string,
};
CategoryShow.defaultProps = {
parentId: null,
parentName: null,
};
......@@ -8,23 +8,26 @@ import PropTypes from 'prop-types';
import { fetchCategories } from '../actions/categoriesActions';
import Category from '../components/Category';
import CategoryIndex from '../components/Category/Index';
import CategoryShow from '../components/Category/Show';
import CategoryEdit from '../components/Category/Edit';
import CategoryDelete from '../components/Category/Delete';
import CategoryCreate from '../components/Category/Create';
function Categories({
categoriesFetched, categoriesFetching, categories, dispatch, userToken, match,
}) {
const { params } = match;
// Map all categories in array of <Category />
const data = categories.map(({
const index = categories.map(({
id, name, parent_id: parentId, parent,
}) => (
<Category
<CategoryIndex
key={id}
id={id}
name={name}
parentId={parentId}
parentName={parent ? parent.name : null}
action="index"
/>));
// Get single category attributes
......@@ -33,7 +36,7 @@ function Categories({
id = null,
parent_id: parentId = null,
parent = null,
} = params.category ? categories[params.category - 1] : {};
} = params.category ? categories.find(c => c.id === parseInt(params.category, 10)) : {};
if (!categoriesFetched && !categoriesFetching) {
dispatch(fetchCategories(userToken));
......@@ -52,17 +55,34 @@ function Categories({
<Divider clearing />
<Card.Group centered>
{data}
{index}
</Card.Group>
{params.action && (
<Category
action={params.action ? params.action : 'show'}
name={name}
id={id}
parentId={parentId}
parentName={parent ? parent.name : null}
/>
)}
{params.action && ({
show: (
<CategoryShow
name={name}
parentId={parentId}
parentName={parent ? parent.name : null}
id={id}
/>
),
edit: (
<CategoryEdit
id={id}
/>
),
delete: (
<CategoryDelete
id={id}
name={name}
/>
),
create: (
<CategoryCreate />
),
}[params.action])}
</Container>
);
}
......
......@@ -21,6 +21,17 @@ export default function reducer(state = initialState, action) {
categories: action.payload.data,
};
}
case ('DELETE_CATEGORY_PENDING'): {
return {
...state,
};
}
case ('DELETE_CATEGORY_FULFILLED'): {
return {
...state,
categories: state.categories.filter(category => category.id !== action.payload.data.id),
};
}
default: {
return state;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment