Skip to content

Commit

Permalink
feature: Layered Navigation (Filters) (#797)
Browse files Browse the repository at this point in the history
  • Loading branch information
codeAdrian authored and jimbo committed Jun 3, 2019
1 parent d0f3f5e commit f1114a1
Show file tree
Hide file tree
Showing 43 changed files with 1,368 additions and 80 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,6 @@ exports[`renders the correct tree 1`] = `
<h1
className="b"
>
<div
dangerouslySetInnerHTML={
Object {
"__html": "test",
}
}
/>
<div />
</h1>
<section
Expand All @@ -26,7 +19,6 @@ exports[`renders the correct tree 1`] = `
}
}
pageSize={6}
title="test"
/>
</section>
<div
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,12 @@ const classes = {

const data = {
category: {
products: {
items: {
id: 1
}
},
description: 'test'
},
products: {
items: {
id: 1
}
}
};

Expand Down
22 changes: 19 additions & 3 deletions packages/venia-concept/src/RootComponents/Category/category.css
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,10 @@
.title {
font-size: 1.5rem;
font-weight: 400;
margin: 0 0 1rem;
padding: 0 0.5rem 0.5rem 0.5rem;
padding: 0 0.5rem;
}

.pagination {
position: -webkit-sticky;
position: sticky;
bottom: 0;
}
Expand All @@ -19,8 +17,26 @@
height: 100vh;
}

.headerButtons {
display: flex;
justify-content: center;
padding-bottom: 1.5rem;
}

.filterButton {
padding: 0.5rem;
margin-left: 0.5rem;
margin-right: 0.5rem;
width: 9rem;
border: 1px solid black;
border-radius: 100px;
color: black;
outline: none;
}

.categoryTitle {
color: rgb(var(--venia-text));
padding-bottom: 1.5rem;
font-size: 1.375rem;
font-weight: 300;
line-height: 1.375rem;
Expand Down
50 changes: 38 additions & 12 deletions packages/venia-concept/src/RootComponents/Category/category.js
Original file line number Diff line number Diff line change
@@ -1,15 +1,20 @@
import React, { useEffect } from 'react';
import { string, number, shape } from 'prop-types';
import { number, shape, string } from 'prop-types';
import { usePagination, useQuery } from '@magento/peregrine';

import { toggleDrawer } from 'src/actions/app';
import catalogActions from 'src/actions/catalog';
import { mergeClasses } from 'src/classify';
import { loadingIndicator } from 'src/components/LoadingIndicator';
import { connect } from 'src/drivers';
import categoryQuery from 'src/queries/getCategory.graphql';
import isObjectEmpty from 'src/util/isObjectEmpty';
import { getFilterParams } from 'src/util/getFilterParamsFromUrl';
import CategoryContent from './categoryContent';
import { loadingIndicator } from 'src/components/LoadingIndicator';
import defaultClasses from './category.css';

const Category = props => {
const { id, pageSize } = props;
const { filterClear, id, openDrawer, pageSize } = props;

const [paginationValues, paginationApi] = usePagination();
const { currentPage, totalPages } = paginationValues;
Expand All @@ -27,14 +32,23 @@ const Category = props => {
const { runQuery, setLoading } = queryApi;
const classes = mergeClasses(defaultClasses, props.classes);

// clear any stale filters
useEffect(() => {
if (isObjectEmpty(getFilterParams())) {
filterClear();
}
}, []);

// run the category query
useEffect(() => {
setLoading(true);
runQuery({
variables: {
currentPage: Number(currentPage),
id: Number(id),
idString: String(id),
onServer: false,
pageSize: Number(pageSize),
currentPage: Number(currentPage)
pageSize: Number(pageSize)
}
});

Expand All @@ -43,36 +57,40 @@ const Category = props => {
top: 0,
behavior: 'smooth'
});
}, [id, pageSize, currentPage]);
}, [currentPage, id, pageSize]);

const totalPagesFromData = data
? data.category.products.page_info.total_pages
? data.products.page_info.total_pages
: null;

useEffect(() => {
setTotalPages(totalPagesFromData);
}, [totalPagesFromData]);

if (error) return <div>Data Fetch Error</div>;
// show loading indicator until our data has been fetched and pagination state has been updated

// show loading indicator until data has been fetched
// and pagination state has been updated
if (!totalPages) return loadingIndicator;

// if our data is still loading, we want to reset our data state to null
return (
<CategoryContent
classes={classes}
pageControl={pageControl}
data={loading ? null : data}
filterClear={filterClear}
openDrawer={openDrawer}
pageControl={pageControl}
/>
);
};

Category.propTypes = {
id: number,
classes: shape({
gallery: string,
root: string,
title: string
}),
id: number,
pageSize: number
};

Expand All @@ -81,4 +99,12 @@ Category.defaultProps = {
pageSize: 6
};

export default Category;
const mapDispatchToProps = dispatch => ({
filterClear: () => dispatch(catalogActions.filterOption.clear()),
openDrawer: () => dispatch(toggleDrawer('filter'))
});

export default connect(
null,
mapDispatchToProps
)(Category);
Original file line number Diff line number Diff line change
@@ -1,35 +1,59 @@
import React from 'react';
import { shape, string } from 'prop-types';

import { mergeClasses } from 'src/classify';
import FilterModal from 'src/components/FilterModal';
import Gallery from 'src/components/Gallery';
import Pagination from 'src/components/Pagination';
import defaultClasses from './category.css';

const CategoryContent = props => {
const { pageControl, data, pageSize } = props;
const { data, openDrawer, pageControl, pageSize } = props;
const classes = mergeClasses(defaultClasses, props.classes);
const items = data ? data.category.products.items : null;
const title = data ? data.category.description : null;
const categoryTitle = data ? data.category.name : null;
const filters = data ? data.products.filters : null;
const items = data ? data.products.items : null;
const title = data ? data.category.name : null;

const header = filters ? (
<div className={classes.headerButtons}>
<button
className={classes.filterButton}
onClick={openDrawer}
type="button"
>
{'Filter'}
</button>
</div>
) : null;

const modal = filters ? <FilterModal filters={filters} /> : null;

return (
<article className={classes.root}>
<h1 className={classes.title}>
{/* TODO: Switch to RichContent component from Peregrine when merged */}
<div
dangerouslySetInnerHTML={{
__html: title
}}
/>
<div className={classes.categoryTitle}>{categoryTitle}</div>
<div className={classes.categoryTitle}>{title}</div>
</h1>
{header}
<section className={classes.gallery}>
<Gallery data={items} title={title} pageSize={pageSize} />
<Gallery data={items} pageSize={pageSize} />
</section>
<div className={classes.pagination}>
<Pagination pageControl={pageControl} />
</div>
{modal}
</article>
);
};

export default CategoryContent;

CategoryContent.propTypes = {
classes: shape({
filterContainer: string,
gallery: string,
headerButtons: string,
pagination: string,
root: string,
title: string
})
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { connect } from 'src/drivers';
import { toggleDrawer } from 'src/actions/app';
import CategoryContent from './categoryContent';

const mapDispatchToProps = dispatch => ({
openDrawer: () => dispatch(toggleDrawer('filter'))
});

export default connect(
null,
mapDispatchToProps
)(CategoryContent);
11 changes: 9 additions & 2 deletions packages/venia-concept/src/RootComponents/Search/container.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { connect } from 'src/drivers';

import { toggleDrawer } from 'src/actions/app';
import Search from './search';
import catalogActions from 'src/actions/catalog';
import { executeSearch, toggleSearch } from 'src/actions/app';

const mapStateToProps = ({ app }) => {
Expand All @@ -9,7 +10,13 @@ const mapStateToProps = ({ app }) => {
return { searchOpen };
};

const mapDispatchToProps = { executeSearch, toggleSearch };
const mapDispatchToProps = dispatch => ({
openDrawer: () => dispatch(toggleDrawer('filter')),
filterClear: () => dispatch(catalogActions.filterOption.clear()),
executeSearch: (query, history, categoryId) =>
dispatch(executeSearch(query, history, categoryId)),
toggleSearch: () => dispatch(toggleSearch())
});

export default connect(
mapStateToProps,
Expand Down
19 changes: 19 additions & 0 deletions packages/venia-concept/src/RootComponents/Search/search.css
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@

.categoryTop {
display: flex;
flex-wrap: wrap;
padding: 0 0 1rem 0;
color: rgb(var(--venia-text-alt));
justify-content: center;
Expand All @@ -30,3 +31,21 @@
.noResult {
display: flex;
}

.headerButtons {
display: flex;
justify-content: center;
flex-basis: 100%;
padding-top: 0.5rem;
}

.filterButton {
padding: 0.5rem;
margin-left: 0.5rem;
margin-right: 0.5rem;
width: 9rem;
border: 1px solid black;
border-radius: 100px;
color: black;
outline: none;
}
Loading

1 comment on commit f1114a1

@vercel
Copy link

@vercel vercel bot commented on f1114a1 Jun 3, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.