|
1 |
| -import { ModalTrigger, Components, registerComponent, withList, Utils } from "meteor/vulcan:core"; |
2 |
| -import React, { PureComponent } from 'react'; |
3 |
| -import PropTypes from 'prop-types'; |
4 |
| -import { FormattedMessage } from 'meteor/vulcan:i18n'; |
5 |
| -import Button from 'react-bootstrap/lib/Button'; |
6 |
| -import DropdownButton from 'react-bootstrap/lib/DropdownButton'; |
7 |
| -import MenuItem from 'react-bootstrap/lib/MenuItem'; |
| 1 | +import { |
| 2 | + ModalTrigger, |
| 3 | + Components, |
| 4 | + registerComponent, |
| 5 | + withList, |
| 6 | + Utils |
| 7 | +} from 'meteor/vulcan:core' |
| 8 | +import React, { PureComponent } from 'react' |
| 9 | +import PropTypes from 'prop-types' |
| 10 | +import { FormattedMessage } from 'meteor/vulcan:i18n' |
| 11 | +import Button from 'react-bootstrap/lib/Button' |
| 12 | +import DropdownButton from 'react-bootstrap/lib/DropdownButton' |
| 13 | +import MenuItem from 'react-bootstrap/lib/MenuItem' |
8 | 14 | import { withRouter } from 'react-router'
|
9 |
| -import { LinkContainer } from 'react-router-bootstrap'; |
10 |
| -import { Categories } from '../../modules/categories/index.js'; |
11 |
| -import { withApollo } from 'react-apollo'; |
| 15 | +import { LinkContainer } from 'react-router-bootstrap' |
| 16 | +import { Categories } from '../../modules/categories/index.js' |
| 17 | +import { withApollo } from 'react-apollo' |
12 | 18 |
|
13 | 19 | class CategoriesList extends PureComponent {
|
14 |
| - |
15 | 20 | constructor() {
|
16 |
| - super(); |
17 |
| - this.getCurrentCategoriesArray = this.getCurrentCategoriesArray.bind(this); |
18 |
| - this.getCategoryLink = this.getCategoryLink.bind(this); |
| 21 | + super() |
| 22 | + this.getCurrentCategoriesArray = this.getCurrentCategoriesArray.bind(this) |
| 23 | + this.getCategoryLink = this.getCategoryLink.bind(this) |
19 | 24 | }
|
20 | 25 |
|
21 | 26 | getCurrentCategoriesArray() {
|
22 |
| - const currentCategories = _.clone(this.props.location.query.cat); |
| 27 | + const currentCategories = _.clone(this.props.location.query.cat) |
23 | 28 | if (currentCategories) {
|
24 |
| - return Array.isArray(currentCategories) ? currentCategories : [currentCategories] |
| 29 | + return Array.isArray(currentCategories) |
| 30 | + ? currentCategories |
| 31 | + : [currentCategories] |
25 | 32 | } else {
|
26 |
| - return []; |
| 33 | + return [] |
27 | 34 | }
|
28 | 35 | }
|
29 | 36 |
|
30 | 37 | getCategoryLink(slug) {
|
31 |
| - const categories = this.getCurrentCategoriesArray(); |
| 38 | + const categories = this.getCurrentCategoriesArray() |
32 | 39 | return {
|
33 | 40 | pathname: Utils.getRoutePath('posts.list'),
|
34 | 41 | query: {
|
35 | 42 | ...this.props.location.query,
|
36 |
| - cat: categories.includes(slug) ? _.without(categories, slug) : categories.concat([slug]) |
| 43 | + cat: categories.includes(slug) |
| 44 | + ? _.without(categories, slug) |
| 45 | + : categories.concat([slug]) |
37 | 46 | }
|
38 | 47 | }
|
39 | 48 | }
|
40 | 49 |
|
41 | 50 | getNestedCategories() {
|
42 |
| - const categories = this.props.results; |
| 51 | + const categories = this.props.results |
43 | 52 |
|
44 | 53 | // check if a category is currently active in the route
|
45 |
| - const currentCategorySlug = this.props.router.location.query && this.props.router.location.query.cat; |
46 |
| - const currentCategory = Categories.findOneInStore(this.props.client.store, {slug: currentCategorySlug}); |
47 |
| - const parentCategories = Categories.getParents(currentCategory, this.props.client.store); |
| 54 | + const currentCategorySlug = |
| 55 | + this.props.router.location.query && this.props.router.location.query.cat |
| 56 | + const currentCategory = Categories.findOneInStore(this.props.client.store, { |
| 57 | + slug: currentCategorySlug |
| 58 | + }) |
| 59 | + const parentCategories = Categories.getParents( |
| 60 | + currentCategory, |
| 61 | + this.props.client.store |
| 62 | + ) |
48 | 63 |
|
49 | 64 | // decorate categories with active and expanded properties
|
50 | 65 | const categoriesClone = _.map(categories, category => {
|
51 | 66 | return {
|
52 | 67 | ...category, // we don't want to modify the objects we got from props
|
53 |
| - active: currentCategory && category.slug === currentCategory.slug, |
54 |
| - expanded: parentCategories && _.contains(_.pluck(parentCategories, 'slug'), category.slug) |
55 |
| - }; |
56 |
| - }); |
| 68 | + active: currentCategory && category.slug === currentCategory.slug, |
| 69 | + expanded: |
| 70 | + parentCategories && |
| 71 | + _.contains(_.pluck(parentCategories, 'slug'), category.slug) |
| 72 | + } |
| 73 | + }) |
57 | 74 |
|
58 |
| - const nestedCategories = Utils.unflatten(categoriesClone, {idProperty: '_id', parentIdProperty: 'parentId'}); |
| 75 | + const nestedCategories = Utils.unflatten(categoriesClone, { |
| 76 | + idProperty: '_id', |
| 77 | + parentIdProperty: 'parentId' |
| 78 | + }) |
59 | 79 |
|
60 |
| - return nestedCategories; |
| 80 | + return nestedCategories |
61 | 81 | }
|
62 | 82 |
|
63 | 83 | render() {
|
64 |
| - |
65 |
| - const allCategoriesQuery = _.clone(this.props.router.location.query); |
66 |
| - delete allCategoriesQuery.cat; |
67 |
| - const nestedCategories = this.getNestedCategories(); |
| 84 | + const allCategoriesQuery = _.clone(this.props.router.location.query) |
| 85 | + delete allCategoriesQuery.cat |
| 86 | + const nestedCategories = this.getNestedCategories() |
68 | 87 |
|
69 | 88 | return (
|
70 | 89 | <div>
|
71 | 90 | <DropdownButton
|
72 | 91 | bsStyle="default"
|
73 | 92 | className="categories-list btn-secondary"
|
74 |
| - title={<FormattedMessage id="categories"/>} |
| 93 | + title={<FormattedMessage id="categories" />} |
75 | 94 | id="categories-dropdown"
|
76 | 95 | >
|
77 | 96 | <div className="category-menu-item category-menu-item-all dropdown-item">
|
78 |
| - <LinkContainer className="category-menu-item-title" to={{pathname:"/", query: allCategoriesQuery}}> |
| 97 | + <LinkContainer |
| 98 | + className="category-menu-item-title" |
| 99 | + to={{ pathname: '/', query: allCategoriesQuery }} |
| 100 | + > |
79 | 101 | <MenuItem eventKey={0}>
|
80 |
| - <FormattedMessage id="categories.all"/> |
| 102 | + <FormattedMessage id="categories.all" /> |
81 | 103 | </MenuItem>
|
82 | 104 | </LinkContainer>
|
83 | 105 | </div>
|
84 |
| - { |
85 |
| - // categories data are loaded |
86 |
| - !this.props.loading ? |
87 |
| - // there are currently categories |
88 |
| - nestedCategories && nestedCategories.length > 0 ? |
89 |
| - nestedCategories.map((category, index) => <Components.CategoriesNode key={index} category={category} index={index} openModal={this.openCategoryEditModal}/>) |
90 |
| - // not any category found |
91 |
| - : null |
| 106 | + {// categories data are loaded |
| 107 | + !this.props.loading ? ( |
| 108 | + // there are currently categories |
| 109 | + nestedCategories && nestedCategories.length > 0 ? ( |
| 110 | + nestedCategories.map((category, index) => ( |
| 111 | + <Components.CategoriesNode |
| 112 | + key={index} |
| 113 | + category={category} |
| 114 | + index={index} |
| 115 | + openModal={this.openCategoryEditModal} |
| 116 | + /> |
| 117 | + )) |
| 118 | + ) : // not any category found |
| 119 | + null |
| 120 | + ) : ( |
92 | 121 | // categories are loading
|
93 |
| - : <div className="dropdown-item"><MenuItem><Components.Loading /></MenuItem></div> |
94 |
| - } |
| 122 | + <div className="dropdown-item"> |
| 123 | + <MenuItem> |
| 124 | + <Components.Loading /> |
| 125 | + </MenuItem> |
| 126 | + </div> |
| 127 | + )} |
95 | 128 | <Components.ShowIf check={Categories.options.mutations.new.check}>
|
96 | 129 | <div className="categories-new-button category-menu-item dropdown-item">
|
97 |
| - <ModalTrigger title={<FormattedMessage id="categories.new"/>} component={<Button bsStyle="primary"><FormattedMessage id="categories.new"/></Button>}> |
98 |
| - <Components.CategoriesNewForm/> |
| 130 | + <ModalTrigger |
| 131 | + title={<FormattedMessage id="categories.new" />} |
| 132 | + component={ |
| 133 | + <Button bsStyle="primary"> |
| 134 | + <FormattedMessage id="categories.new" /> |
| 135 | + </Button> |
| 136 | + } |
| 137 | + > |
| 138 | + <Components.CategoriesNewForm /> |
99 | 139 | </ModalTrigger>
|
100 | 140 | </div>
|
101 | 141 | </Components.ShowIf>
|
102 | 142 | </DropdownButton>
|
103 |
| - |
104 | 143 | </div>
|
105 | 144 | )
|
106 |
| - |
107 | 145 | }
|
108 | 146 | }
|
109 | 147 |
|
110 | 148 | CategoriesList.propTypes = {
|
111 |
| - results: PropTypes.array, |
112 |
| -}; |
113 |
| - |
| 149 | + results: PropTypes.array |
| 150 | +} |
114 | 151 |
|
115 | 152 | const options = {
|
116 | 153 | collection: Categories,
|
117 | 154 | queryName: 'categoriesListQuery',
|
118 | 155 | fragmentName: 'CategoriesList',
|
119 | 156 | limit: 0,
|
120 |
| - pollInterval: 0, |
121 |
| -}; |
| 157 | + pollInterval: 0 |
| 158 | +} |
122 | 159 |
|
123 |
| -registerComponent('CategoriesList', CategoriesList, withRouter, withApollo, [withList, options]); |
| 160 | +registerComponent('CategoriesList', CategoriesList, withRouter, withApollo, [ |
| 161 | + withList, |
| 162 | + options |
| 163 | +]) |
0 commit comments