feature: add language and genre facets

CodeforNepal · Oct 15, 2019 · bf0fb87 · bf0fb87
1 parent 9846f9f
commit bf0fb87
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 28 deletions.
diff --git a/parijat-frontend/src/components/filters/index.js b/parijat-frontend/src/components/filters/index.js
@@ -2,10 +2,8 @@ import { h, Component } from 'preact';
 import Icon from 'preact-material-components/Icon';
 import Dialog from 'preact-material-components/Dialog';
 import 'preact-material-components/Dialog/style.css';
-import Checkbox from 'preact-material-components/Checkbox';
 import 'preact-material-components/Checkbox/style.css';
 import TransliteratedInput from '../transliteratedinput';
-const map = require('lodash/map');
 const omitBy = require('lodash/omitBy');
 const isUndefined = require('lodash/isUndefined');
 import Button from '../button';
@@ -15,7 +13,8 @@ import {
 	FacetAccessor,
 	FilterBucket,
 	TermsBucket,
-	CardinalityMetric
+	CardinalityMetric,
+	RefinementListFilter
 } from 'searchkit';
 import style from './style';
 
@@ -68,7 +67,7 @@ class SearchableFacetAccessor extends FacetAccessor {
 	}
 }
 
-class SearchableRefinementListFilter extends FacetFilter {
+class SearchableFacetFilter extends FacetFilter {
 	getAccessorOptions() {
 		const {
 			field,
@@ -164,46 +163,102 @@ class FiltersListInput extends Component {
 	}
 }
 
-class FiltersList extends Component {
+class SearchableRefinementListFilter extends Component {
 	state = {
 		searchValue: ''
 	};
 
-	onSearchValueChange(event) {
+	onSearchValueChange = (event) => {
 		this.setSearchValue(event.target.value);
 	}
 
-	clearSearchValue() {
+	clearSearchValue = () => {
 		this.setSearchValue('');
 	}
 
-	setSearchValue(searchValue) {
+	setSearchValue = (searchValue) => {
 		this.setState({ searchValue });
 	}
 
 	render() {
 		return (
-			<ul className={style.FiltersList__Container}>
+			<div>
 				<FiltersListInput
 					searchValue={this.state.searchValue}
-					onInput={this.onSearchValueChange.bind(this)}
-					clearSearchValue={this.clearSearchValue.bind(this)}
-					title="लेखक"
+					onInput={this.onSearchValueChange}
+					clearSearchValue={this.clearSearchValue}
+					title={this.props.title}
 				/>
-				<SearchableRefinementListFilter
-					id="author"
-					size={7}
-					title="लेखक"
-					field="author.keyword"
-					operator="OR"
+				<SearchableFacetFilter
+					id={this.props.id}
+					size={this.props.size}
+					title={this.props.title}
+					field={this.props.field}
+					operator={this.props.operator}
 					searchValue={this.state.searchValue}
 					itemComponent={RefinementOption}
 				/>
-			</ul>
+			</div>
 		);
 	}
 }
 
+function StandardRefinementListFilter({ field, title, id, operator, itemComponent, size }) {
+	return (
+		<div>
+			<div
+				className={style.StandardRefinementListFilter__Title}
+			>
+				<strong>{title}</strong>
+			</div>
+			<RefinementListFilter
+				field={field}
+				title={title}
+				id={id}
+				operator={operator}
+				itemComponent={itemComponent}
+				size={size}
+			/>
+		</div>
+	);
+}
+
+function FiltersList() {
+	return (
+		<ul className={style.FiltersList__Container}>
+			<li className={style.FiltersList__Section}>
+				<StandardRefinementListFilter
+					field="lang"
+					title="भाषा"
+					id="lang"
+					operator="OR"
+					itemComponent={RefinementOption}
+					size={7}
+				/>
+			</li>
+			<li className={style.FiltersList__Section}>
+				<StandardRefinementListFilter
+					field="genre"
+					title="विधा"
+					id="genre"
+					operator="OR"
+					itemComponent={RefinementOption}
+					size={7}
+				/>
+			</li>
+			<li className={style.FiltersList__Section}>
+				<SearchableRefinementListFilter
+					field="author.keyword"
+					title="लेखक"
+					id="author"
+					operator="OR"
+					size={7}
+				/>
+			</li>
+		</ul>
+	);
+}
+
 const RefinementOption = props => (
 	<div>
 		<span onClick={props.onClick} className={style.RefinementOption__Container}>

diff --git a/parijat-frontend/src/components/filters/style.css b/parijat-frontend/src/components/filters/style.css
@@ -18,6 +18,7 @@
 .FiltersList__Container {
   margin: 0;
   padding: 0;
+  list-style: none;
 }
 
 .Filters__Container {
@@ -28,6 +29,7 @@
 
 .FiltersListInput__Container {
   display: flex;
+  height: 2rem;
 }
 
 .FiltersListInput__Editable {
@@ -55,11 +57,32 @@
 .FiltersListInput__Button {
   background: none;
   border: none;
-  width: 3rem;
-  height: 3rem;
+  width: 2rem;
+  height: 2rem;
   line-height: 0rem;
 }
 
+.FiltersList__Section {
+  margin-bottom: 2rem;
+}
+
+/* SearchableRefinementListFilter */
+
+.SearchableRefinementListFilter {
+
+}
+
+.StandardRefinementListFilter {
+
+}
+
+.StandardRefinementListFilter__Title {
+  display: flex;
+  align-items: center;
+  height: 2rem;
+  padding-left: 15px;
+}
+
 /* To swith to a button view when in small screens */
 @media (min-width: 839px) {
   .Filters__Mobile {
@@ -73,4 +96,4 @@
     display: none;
     width: 100%;
   }
-}
+}
diff --git a/parijat-frontend/src/routes/home/index.js b/parijat-frontend/src/routes/home/index.js
@@ -17,8 +17,8 @@ export default class Home extends Component {
 					<SearchBox
 						autofocus
 						queryFields={{
-							'title': 'शिर्षक',
-							'author': 'लेखक'
+							title: 'शिर्षक',
+							author: 'लेखक'
 						}}
 						onSubmit={queryValue => {
 							route(`search?q=${queryValue}`);

diff --git a/parijat-frontend/src/routes/home/style.css b/parijat-frontend/src/routes/home/style.css
@@ -22,7 +22,3 @@ body {
 		padding: 5rem;
 	}
 }
-
-
-
-