Merge pull request #82 from Code4Nepal/bug-fixes

Fix issues in the frontend
CodeforNepal · Oct 15, 2019 · 46ef056 · 46ef056
2 parents 77f1d7d + 62bda47
commit 46ef056
Show file tree

Hide file tree

Showing 30 changed files with 23,948 additions and 13,833 deletions.
diff --git a/parijat-frontend/.babelrc b/parijat-frontend/.babelrc
@@ -1,3 +1,10 @@
 {
-  "presets": ["env"]
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "useBuiltIns": "entry"
+      }
+    ]
+  ]
 }
diff --git a/parijat-frontend/.storybook/config.js b/parijat-frontend/.storybook/config.js
@@ -0,0 +1,10 @@
+import { configure } from '@storybook/preact';
+
+function loadStories() {
+  require('../stories/components/SearchBox.js');
+  require('../stories/components/TransliteratedInput.js');
+  require('../stories/components/Logo.js');
+  // You can require as many stories as you need.
+}
+
+configure(loadStories, module);
diff --git a/parijat-frontend/.storybook/webpack.config.js b/parijat-frontend/.storybook/webpack.config.js
@@ -0,0 +1,29 @@
+// This is a deprecated way, and you should see a warning when starting storybook
+// But only Allah knows what's up. I spent an entire day in webpack hell and gave up.
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        loaders: [
+          'style-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              importLoaders: 1,
+              modules: true,
+              localIdentName: '[name]__[local]___[hash:base64:5]',
+            },
+          }
+        ],
+      },
+    ],
+  },
+  resolve: {
+    alias: {
+      'react': 'preact-compat',
+      'react-dom': 'preact-compat',
+    }
+  },
+}
+
diff --git a/parijat-frontend/package-lock.json b/parijat-frontend/package-lock.json
diff --git a/parijat-frontend/package.json b/parijat-frontend/package.json
@@ -5,6 +5,7 @@
   "license": "MIT",
   "scripts": {
     "start": "if-env NODE_ENV=production && npm run -s serve || npm run -s dev",
+    "storybook": "start-storybook",
     "build": "NODE_ENV=production preact build",
     "serve": "yarn serve:gen-config && superstatic --port 8080 --host 0.0.0.0",
     "serve:gen-config": "preact serve --server config --dest superstatic.json",
@@ -25,20 +26,22 @@
     "build/*"
   ],
   "devDependencies": {
-    "babel-polyfill": "^6.26.0",
-    "babel-register": "^6.26.0",
+    "@babel/core": "^7.4.0",
+    "@babel/preset-env": "^7.4.2",
+    "@babel/register": "^7.4.0",
+    "@storybook/preact": "^5.0.4",
+    "core-js": "3",
     "eslint": "^4.5.0",
     "eslint-config-synacor": "^1.1.0",
     "expect": "^23.1.0",
     "if-env": "^1.0.0",
     "mocha": "^5.2.0",
-    "preact-cli": "^2.0.0",
+    "preact-cli": "^3.0.0-next.19",
     "superstatic": "^5.0.1"
   },
   "dependencies": {
-    "babel-preset-env": "^1.7.0",
     "lodash": "^4.17.5",
-    "preact": "^8.2.1",
+    "preact": "^8.5.2",
     "preact-compat": "^3.17.0",
     "preact-material-components": "^1.4.0",
     "preact-router": "^2.5.5",

diff --git a/parijat-frontend/src/components/CurrentQuery/index.js b/parijat-frontend/src/components/CurrentQuery/index.js
@@ -0,0 +1,11 @@
+import { h } from 'preact';
+import { SearchkitComponent } from 'searchkit';
+
+export default class CurrentQuery extends SearchkitComponent {
+	render() {
+		const queryString = decodeURI(this.getQuery().index.queryString);
+		return queryString !== '' ? (
+			<div>"{queryString}" को नतिजा</div>
+		) : null;
+	}
+}
diff --git a/parijat-frontend/src/components/filters/index.js b/parijat-frontend/src/components/filters/index.js
@@ -2,28 +2,32 @@ 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';
-const map = require('lodash/map');
+import TransliteratedInput from '../transliteratedinput';
 const omitBy = require('lodash/omitBy');
 const isUndefined = require('lodash/isUndefined');
 import Button from '../button';
+import debounce from 'lodash/debounce';
 import {
-	RefinementListFilter,
 	FacetFilter,
 	FacetAccessor,
 	FilterBucket,
 	TermsBucket,
-	CardinalityMetric
+	CardinalityMetric,
+	RefinementListFilter
 } from 'searchkit';
 import style from './style';
 
 /* This is disgusting code. We need our own state management. Searchkit abstractions are not very good */
 
 class SearchableFacetAccessor extends FacetAccessor {
-	setSearchValue(searchValue) {
-		this.searchValue = searchValue;
+	performSearch = debounce(() => {
 		this.searchkit.performSearch();
+	}, 200);
+
+	setSearchValue(searchValue) {
+	 	this.searchValue = searchValue;
+		this.performSearch();
 	}
 
 	buildOwnQuery(query) {
@@ -63,7 +67,7 @@ class SearchableFacetAccessor extends FacetAccessor {
 	}
 }
 
-class SearchableRefinementListFilter extends FacetFilter {
+class SearchableFacetFilter extends FacetFilter {
 	getAccessorOptions() {
 		const {
 			field,
@@ -130,8 +134,8 @@ class FiltersListInput extends Component {
 			<div className={style.FiltersListInput__Container}>
 				{editable ? (
 					<div className={style.FiltersListInput__Editable}>
-						<input
-							autoFocus
+						<TransliteratedInput
+							autofocus
 							placeholder={`${title}`}
 							value={this.props.searchValue}
 							onInput={this.props.onInput}
@@ -150,7 +154,7 @@ class FiltersListInput extends Component {
 							className={style.FiltersListInput__Button}
 							onClick={this.showEdit}
 						>
-							<Icon>filter_list</Icon>
+							<Icon>search</Icon>
 						</button>
 					</div>
 				)}
@@ -159,44 +163,102 @@ class FiltersListInput extends Component {
 	}
 }
 
-class FiltersList extends Component {
+class SearchableRefinementListFilter extends Component {
 	state = {
 		searchValue: ''
 	};
 
-	onSearchValueChange(evnt) {
-		this.setState({
-			searchValue: evnt.target.value
-		});
+	onSearchValueChange = (event) => {
+		this.setSearchValue(event.target.value);
+	}
+
+	clearSearchValue = () => {
+		this.setSearchValue('');
 	}
 
-	clearSearchValue() {
-		this.setState({ 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}>
@@ -219,19 +281,19 @@ class Filters extends Component {
 							this.scrollingDlg.MDComponent.show();
 						}}
 					>
-						Filters
+						खोज सुधार
 					</Button>
 					<Dialog
 						ref={scrollingDlg => {
 							this.scrollingDlg = scrollingDlg;
 						}}
 					>
-						<Dialog.Header>Select Filters</Dialog.Header>
+						<Dialog.Header>खोज सुधार</Dialog.Header>
 						<Dialog.Body scrollable>
 							<FiltersList />
 						</Dialog.Body>
 						<Dialog.Footer>
-							<Dialog.FooterButton cancel>Close</Dialog.FooterButton>
+							<Dialog.FooterButton cancel>बन्द गर्नुहोस्</Dialog.FooterButton>
 						</Dialog.Footer>
 					</Dialog>
 				</div>

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 {
@@ -47,14 +49,38 @@
 .FiltersListInput__NonEditable {
   display: flex;
   width: 100%;
+  padding-left: 14px;
   justify-content: space-between;
+  align-items: center;
 }
 
 .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 */
@@ -70,4 +96,4 @@
     display: none;
     width: 100%;
   }
-}
+}