|
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