Checkout integration

.github/workflows/linters.yml

@@ -0,0 +1,27 @@
+name: Linters
+#on: push
+
+on:
+  push:
+    branches-ignore: [master]
+  pull_request:
+    branches: [master]
+
+jobs:
+  super-lint:
+    name: Lint code base
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Run Super-Linter
+        uses: github/super-linter@v4
+        env:
+          DEFAULT_BRANCH: master
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+#         validate only typescript:
+          VALIDATE_TYPESCRIPT_ES: true
+          VALIDATE_CSS: true
+          CSS_FILE_NAME: .stylelintrc.json
+          LINTER_RULES_PATH: /

@types/components.ts

@@ -0,0 +1,19 @@
+export interface IBreadCrumbItem {
+	title: string;
+	isActive?: boolean;
+	url?: string
+}
+
+export interface IMenuItem {
+	title: string,
+	url?: string,
+	img?: IMenuItemImage,
+	isActive?: boolean,
+	children?: IMenuItem[]
+}
+
+export interface IMenuItemImage {
+	src: string,
+	width?: number,
+	height?: number
+}

components/AsideMenu.tsx

@@ -0,0 +1,105 @@
+import clsx from 'clsx';
+import {useAppDispatch, useAppSelector} from '../hooks/redux';
+import {RootState} from '../redux/store';
+import {disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks} from 'body-scroll-lock';
+import {useEffect, useRef} from 'react';
+import {setIsOpened} from '../redux/reducers/asideMenu';
+import HeaderCart from './cart/HeaderCart';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faTimes} from '@fortawesome/free-solid-svg-icons';
+import {IMenuItem} from '../redux/reducers/menus';
+import AsideMenuList from './asideMenu/MenuList';
+import {DragGesture} from '@use-gesture/vanilla';
+
+export default function AsideMenu({menuList}: {menuList?: IMenuItem[]}) {
+	const rootEl = useRef(null);
+	const isOpened = useAppSelector((state: RootState) => state.asideMenu.isOpened);
+	const isRouteChanging = useAppSelector((state: RootState) => state.app.isRouteChanging);
+	const dispatch = useAppDispatch();
+	const gesture = useRef<DragGesture | null>(null);
+
+	const closeIfOpened = () => {
+		if (isOpened) {
+			dispatch(setIsOpened(false));
+		}
+	};
+	const onEscPressed = (e: KeyboardEvent) => {
+		if (e.defaultPrevented || !isOpened) {
+			return;
+		}
+
+		if (e.key !== undefined && e.key === 'Escape') {
+			closeIfOpened();
+		} else if (e.keyCode !== undefined && e.keyCode === 27) {
+			closeIfOpened();
+		}
+	};
+
+	const enableSwipe = () => {
+		const body = document.querySelector('body');
+
+		body!.style.touchAction = 'none';
+		gesture.current = new DragGesture(body!, ({last, direction: [dx], velocity: [vx, vy], movement}) => {
+			// if (last && vx > 0.3 && (Math.abs(vy) < Math.abs(vx)) && dx === 1) {
+			if (last && movement[0] > 100) {
+				closeIfOpened();
+			}
+		});
+	};
+
+	const disableSwipe = () => {
+		const body = document.querySelector('body');
+
+		if (gesture.current) gesture.current.destroy();
+		gesture.current = null;
+		body!.style.touchAction = 'auto';
+	};
+
+	useEffect(() => {
+		if (isRouteChanging) closeIfOpened();
+	}, [isRouteChanging]); //eslint-disable-line
+
+	useEffect(() => {
+		if (isOpened) {
+			if (rootEl.current) {
+				disableBodyScroll(rootEl.current);
+			}
+
+			enableSwipe();
+
+			window.addEventListener('resize', closeIfOpened);
+			window.addEventListener('keydown', onEscPressed);
+		} else {
+			if (rootEl.current) {
+				enableBodyScroll(rootEl.current);
+			}
+
+			disableSwipe();
+
+			window.removeEventListener('resize', closeIfOpened);
+			window.removeEventListener('keydown', onEscPressed);
+		}
+
+		return () => {
+			clearAllBodyScrollLocks();
+			window.removeEventListener('resize', closeIfOpened);
+			window.removeEventListener('keydown', onEscPressed);
+
+			disableSwipe();
+		};
+	}, [isOpened]);//eslint-disable-line
+
+	return (
+		<aside className={clsx('aside-menu', {'aside-menu_visible': isOpened})}
+			ref={rootEl}
+		>
+			<div className='aside-menu__header'>
+				<HeaderCart className={'cart-header cart-header_horizontal'} />
+				<button className='btn' onClick={closeIfOpened} >
+					<FontAwesomeIcon icon={faTimes} />
+				</button>
+			</div>
+			{menuList && <AsideMenuList menuList={menuList} />}
+		</aside>
+	);
+}

components/BreadCrumbs.tsx

@@ -1,11 +1,9 @@
-import {ICategoryFlatItem} from 'boundless-api-client/types/catalog/category';
 import clsx from 'clsx';
 import Link from 'next/link';
-import {TQuery} from '../@types/common';
-import {getCategoryUrl} from '../lib/services/urls';
+import {IBreadCrumbItem} from '../@types/components';
 
-export default function BreadCrumbs({parents, activeParams}: IBreadCrumbsProps) {
-	const _parents = [...parents];
+export default function BreadCrumbs({items}: {items: IBreadCrumbItem[]}) {
+	const isEmpty = items.length === 0;
 
 	const richItemAttrs = {
 		itemProp: 'itemListElement',
@@ -14,41 +12,32 @@ export default function BreadCrumbs({parents, activeParams}: IBreadCrumbsProps)
 	};
 
 	return (
-		<nav className='breadcrumb-wrapper'>
-			<ol className='breadcrumb' itemProp='breadcrumb' itemScope itemType='http://schema.org/BreadcrumbList'>
+		<nav className={clsx('breadcrumb-wrapper', isEmpty && 'd-none')}>
+			{!isEmpty && <ol className='breadcrumb' itemProp='breadcrumb' itemScope itemType='http://schema.org/BreadcrumbList'>
 				<li className='breadcrumb-item' {...richItemAttrs}>
 					<Link href='/'>
 						<a itemProp='item'><span itemProp='name'>Home</span></a>
 					</Link>
 					<meta itemProp='position' content='1' />
 				</li>
-				{parents?.length > 0 && _parents.reverse().map((parent, i) => {
-					const isLast = parents.length === i + 1;
-					const isActive = isLast && !activeParams;
-					const title = parent.title || parent.joined_title;
-
-					return (
-						<li
-							className={clsx('breadcrumb-item', isActive && 'active')}
-							key={parent.category_id}
-							{...(isActive ? {} : richItemAttrs)}
-						>
-							{isActive
-								? title
-								: <Link href={getCategoryUrl(parent, activeParams)}>
+				{items.map((item, i) => (
+					<li
+						className={clsx('breadcrumb-item', item.isActive && 'active')}
+						key={i}
+						{...(item.url ? richItemAttrs : {})}
+					>
+						{item.url && !item.isActive
+							? <>
+								<Link href={item.url}>
 									<a itemProp='item'>
-										<span itemProp='name'>{title}</span>
+										<span itemProp='name'>{item.title}</span>
 									</a>
-								</Link>}
-							<meta itemProp='position' content={String(i + 2)} />
-						</li>);
-				})}
-			</ol>
+								</Link>
+								<meta itemProp='position' content={String(i + 2)} />
+							</>
+							: item.title}
+					</li>))}
+			</ol>}
 		</nav>
 	);
-}
-
-interface IBreadCrumbsProps {
-	parents: ICategoryFlatItem[];
-	activeParams?: TQuery;
 }

components/FilterForm.tsx

@@ -1,7 +1,7 @@
 import {IFilterField, IFilterFieldRange, TCharacteristicType, TFilterFieldType} from 'boundless-api-client';
 import {TQuery} from '../@types/common';
 import {SyntheticEvent, useCallback, useEffect, useState} from 'react';
-import {apiClient} from '../lib/services/api';
+import {apiClient} from '../lib/api';
 import PriceRangeField from './filterForm/PriceRange';
 import _debounce from 'lodash/debounce';
 import _omit from 'lodash/omit';
@@ -12,7 +12,9 @@ import TextCharacteristic from './filterForm/TextCharacteristic';
 import BrandSelect from './filterForm/BrandSelect';
 import Stock from './filterForm/Stock';
 import _isEqualWith from 'lodash/isEqualWith';
-import {filterKeys, filterProductsQuery} from '../lib/services/category';
+import {filterKeys, filterProductsQuery} from '../lib/category';
+
+const DEFAULT_DISPLAY_LIMIT = 3;
 
 /**
  * @param filterFields - might be passed manually, e.g. pass:
@@ -22,13 +24,13 @@ import {filterKeys, filterProductsQuery} from '../lib/services/category';
  * @param onSubmit
  * @constructor
  */
-export default function FilterForm({filterFields, queryParams, categoryId, onSearch}: IFilterFormProps) {
+export default function FilterForm({filterFields, queryParams, categoryId, onSearch, idsPrefix}: IFilterFormProps) {
 	const [hasChanged, setHasChanged] = useState<boolean>(false);
 	const [values, setValues] = useState<TQuery>({});
 	const [ranges, setRanges] = useState<IFilterFieldRange[]>([]);
 	const [isFetching, setIsFetching] = useState<boolean>(false);
 	const [preSearchResult, setPreSearchResult] = useState<null | number>(null);
-	const [initedForCategory, setInitedForCategory] = useState<number|null>(null);
+	const [initedForCategory, setInitedForCategory] = useState<number | null>(null);
 
 	const getData = () => {
 		const sanitizedQuery = sanitizeIncomingQuery(queryParams);
@@ -60,18 +62,14 @@ export default function FilterForm({filterFields, queryParams, categoryId, onSea
 		}).catch(console.error);
 	}, 600), [categoryId]);
 
-	const onChange = (key: string, value: any, characteristicId?: number) => {
-		let newValues: TQuery = {};
-		if (key === 'props') {
-			const props = Object.assign({}, values.props, {[characteristicId!]: value});
-			newValues = {...values, ...{props: props}};
-		} else {
-			newValues = {...values, ...{[key]: value}};
-		}
+	const onChange = (value: {[key: string]: any}) => {
+		const newValues: TQuery = 'props' in value
+			? {...values, props: Object.assign({}, values.props, value.props)}
+			: {...values, ...value};
 
-		setHasChanged(true);
 		setValues(newValues);
 		reCalcRanges(newValues);
+		setHasChanged(true);
 	};
 
 	const onSubmit = (e: SyntheticEvent) => {
@@ -105,54 +103,68 @@ export default function FilterForm({filterFields, queryParams, categoryId, onSea
 	}
 
 	return (
-		<form className={'filters px-1'} onSubmit={onSubmit}>
+		<form className={'category-filters px-1'} onSubmit={onSubmit}>
 			{ranges.map((filterField, i) => {
 				switch (filterField.type) {
 					case TFilterFieldType.price:
 						return <PriceRangeField field={filterField}
 							onChange={onChange}
 							values={values}
-							key={i} />;
+							key={i}
+							idsPrefix={idsPrefix}
+						/>;
 
 					case TFilterFieldType.brand:
 						return <BrandSelect field={filterField}
 							onChange={onChange}
 							values={values}
-							key={i} />;
+							displayLimit={DEFAULT_DISPLAY_LIMIT}
+							key={i}
+							idsPrefix={idsPrefix}
+						/>;
 
 					case TFilterFieldType.availability:
 						return <Stock field={filterField}
 							onChange={onChange}
 							values={values}
-							key={i} />;
+							key={i}
+							idsPrefix={idsPrefix}
+						/>;
 
 					case TFilterFieldType.characteristic: {
 						if (isMultiCaseType(filterField.characteristic!.type)) {
 							return <MultipleSelectCharacteristic
 								field={filterField}
 								onChange={onChange}
 								values={values}
-								key={i} />;
+								displayLimit={DEFAULT_DISPLAY_LIMIT}
+								key={i}
+								idsPrefix={idsPrefix}
+							/>;
 						} else {
 							return <TextCharacteristic
 								field={filterField}
 								onChange={onChange}
 								values={values}
-								key={i} />;
+								key={i}
+								idsPrefix={idsPrefix}
+							/>;
 						}
 					}
 				}
 			})}
-			<div className='btn-group' role='group'>
-				<button type='button'
-					className='btn btn-secondary'
-					onClick={onClear}
-					disabled={isFetching}
-				>Clear</button>
-				<button type='submit'
-					className='btn btn-primary'
-					disabled={!hasChanged || isFetching}
-				>{getSubmitLabel(hasChanged, isFetching, preSearchResult)}</button>
+			<div className='category-filters__actions'>
+				<div className='btn-group' role='group'>
+					<button type='button'
+						className='btn btn-secondary'
+						onClick={onClear}
+						disabled={isFetching}
+					>Clear</button>
+					<button type='submit'
+						className='btn btn-primary'
+						disabled={!hasChanged || isFetching}
+					>{getSubmitLabel(hasChanged, isFetching, preSearchResult)}</button>
+				</div>
 			</div>
 		</form>
 	);
@@ -285,10 +297,13 @@ interface IFilterFormProps {
 	queryParams: TQuery;
 	categoryId: number;
 	onSearch: (data: TQuery) => void;
+	idsPrefix: string;
 }
 
 export interface IFilterFieldProps {
 	field: IFilterFieldRange;
 	values: TQuery;
-	onChange: (key: string, value: any, characteristicId?: number) => void;
+	onChange: (value: {[key: string]: any}) => void;
+	idsPrefix: string;
+	displayLimit?: number;
 }