adaptive fixes, some new features

design/icons/index.ts

@@ -0,0 +1,8 @@
+import ico1 from './beer.png';
+import ico2 from './cder.png';
+import ico3 from './champage.png';
+import ico4 from './coffee.png';
+import ico5 from './cola.png';
+import ico6 from './mineral-water.png';
+
+export const imageIcons = [ico3, ico4, ico5, ico1, ico2, ico6];

package.json

@@ -21,6 +21,7 @@
     "axios": "^1.3.4",
     "eslint": "8.35.0",
     "eslint-config-next": "13.2.3",
+    "js-sha1": "^0.6.0",
     "lodash": "^4.17.21",
     "next": "13.2.3",
     "next-redux-wrapper": "^8.1.0",

src/components/layout/Layout.tsx

@@ -3,11 +3,20 @@ import Header from './header/Header';
 
 import DrawCategory from '../ui/drawer/DrawCategory';
 import { CategoryService } from '@/services/Server/ServerCategory';
+import styled from 'styled-components';
 
 interface ILayout {
 	children?: React.ReactNode;
 }
 
+const Main = styled.main`
+	width: 100%;
+`;
+
+const Section = styled.section`
+	display: flex;
+`;
+
 // TODO: change categories variable to object like {data, changeData, loading, error} or set 'em to redux storage
 
 const Layout: React.FC<ILayout> = ({ children }) => {
@@ -30,11 +39,11 @@ const Layout: React.FC<ILayout> = ({ children }) => {
 	// TODO: create recurcive function for fetching data
 
 	return (
-		<main style={{ width: '100%' }}>
+		<Main>
 			<Header />
 			<DrawCategory categories={categories} />
-			<section style={{ display: 'flex' }}>{children}</section>
-		</main>
+			<Section>{children}</Section>
+		</Main>
 	);
 };
 

src/components/layout/header/Header.tsx

@@ -33,8 +33,6 @@ const Wrapper = styled.div`
 `;
 
 const Header = () => {
-	console.log(window.innerWidth);
-
 	return (
 		<Wrapper>
 			<StyledHeader>

src/components/layout/header/Logo.tsx

@@ -31,7 +31,7 @@ const Logo = () => {
 				onClick={() => toggleUpperDrawer(!user.upperDrawer)}
 			/>
 			<Link href={`/`} style={{ textDecoration: 'none' }}>
-				<h3 style={{ color: 'black', paddingTop: '5px' }}>Оболонь Маркет</h3>
+				<h3 style={{ color: 'black', paddingTop: '5px' }}>Маркет</h3>
 			</Link>
 		</StyledLogo>
 	);

src/components/screen/category/Category.tsx

@@ -1,18 +1,19 @@
 import Card from '@/components/ui/card/Card';
 import CardLoader from '@/components/ui/card/CardLoader';
-import List from '@/components/ui/list/List';
 import Pagination from '@/components/ui/pagination/Pagination';
 import Refinements from '@/components/ui/refinements/Refinements';
 import { useActions } from '@/hooks/useActions';
 import { useTypedSelector } from '@/hooks/useTypedSelector';
-import { AmazonProduct } from '@/services/Amazon/AmazonProduct';
 import { ProductService } from '@/services/Server/ServerProduct';
 import { IProduct } from '@/types/product.interface';
-import { IAmazonProductsByCategory } from '@/types/products.interface';
 import { Empty, Select } from 'antd';
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 
+import sortByValue from './utils/sort';
+import filterByValue from './utils/filter';
+import { TFilter } from '@/store/product/product.types';
+
 const Wrapper = styled.div`
 	display: flex;
 	padding: 20px;
@@ -55,8 +56,10 @@ const SortWrapper = styled.div`
 	}
 `;
 
+type TData = IProduct & TFilter & { strength: string[]; capacity: string[] };
+
 interface ICategory {
-	data: IAmazonProductsByCategory;
+	data: TData[];
 	categoryId: string;
 }
 
@@ -75,10 +78,7 @@ const Category: React.FC<ICategory> = ({ data, categoryId }) => {
 	const [categoryResults, setCategoryResults] = useState(data);
 	const [loading, setLoading] = useState(false);
 	const [refinements, setRefinements] = useState({});
-
-	const sort = useTypedSelector((state) => state.product.sort);
 	const filter = useTypedSelector((state) => state.product.filter);
-	const { setSort } = useActions();
 
 	useEffect(() => {
 		(async () => {
@@ -87,140 +87,22 @@ const Category: React.FC<ICategory> = ({ data, categoryId }) => {
 		})();
 	}, []);
 
-	// React query status working
-
-	// const fetchByParameters = async (page: number, sort?: string) => {
-	// 	window.scrollTo(0, 0);
-	// 	setLoading(true);
-	// 	const data = await AmazonProduct.getByCategoryId(categoryId, page, sort);
-	// 	if (data) {
-	// 		setCategoryResults(data);
-	// 	}
-	// 	setLoading(false);
-	// };
+	useEffect(() => {
+		setCategoryResults(filterByValue(data, filter));
+	}, [filter]);
 
 	const handleChange = (value: string) => {
-		setSort({ type: value.type });
-
-		console.log(value);
-
-		switch (value) {
-			case 'by_title_a':
-				setCategoryResults(
-					data.sort((a, b) => {
-						if (a.title > b.title) return 1;
-						if (a.title < b.title) return -1;
-						return 0;
-					})
-				);
-				break;
-			case 'by_title_z':
-				setCategoryResults(
-					data.sort((a, b) => {
-						if (a.title > b.title) return -1;
-						if (a.title < b.title) return 1;
-						return 0;
-					})
-				);
-				break;
-			case 'by_cost_l':
-				setCategoryResults(
-					data.sort((a, b) => {
-						const costA = a.discount ? a.cost - a.discount * a.cost : a.cost;
-						const costB = b.discount ? b.cost - b.discount * b.cost : b.cost;
-
-						if (costA > costB) return -1;
-						if (costA < costB) return 1;
-						return 0;
-					})
-				);
-				break;
-			case 'by_cost_h':
-				setCategoryResults(
-					data.sort((a, b) => {
-						const costA = a.discount ? a.cost - a.discount * a.cost : a.cost;
-						const costB = b.discount ? b.cost - b.discount * b.cost : b.cost;
-
-						if (costA > costB) return 1;
-						if (costA < costB) return -1;
-						return 0;
-					})
-				);
-				break;
-			case 'by_discount':
-				setCategoryResults(
-					data.sort((a, b) => {
-						if (a.discount > b.discount) return -1;
-						if (a.discount < b.discount) return 1;
-						return 0;
-					})
-				);
-				break;
-			case 'by_new':
-				setCategoryResults(
-					data.sort((a, b) => {
-						if (a.isNew) return -1;
-						if (!a.isNew) return 1;
-						return 0;
-					})
-				);
-				break;
-
-			default:
-				break;
-		}
+		const sorted = sortByValue(data, value);
+		setCategoryResults([...sorted]);
 	};
 
-	useEffect(() => {
-		setCategoryResults(data);
-	}, [data]);
-
-	useEffect(() => {
-		console.log(JSON.stringify(filter));
-
-		if (
-			JSON.stringify(filter) !==
-			'{"brand":[],"capacities":[],"kind":[],"manufacturer":[],"packing":[],"strengths":[]}'
-		) {
-			const products = categoryResults.filter((product) => {
-				const isBrand = filter.brand.some(
-					(brand) => product.brand[0] === brand
-				);
-				const isKind = filter.kind.some((kind) => product.kind[0] === kind);
-				const isManufacturer = filter.manufacturer.some(
-					(manufacturer) => product.manufacturer[0] === manufacturer
-				);
-				const isStrength = filter.strengths.some(
-					(strength) => product.strength[0] === strength
-				);
-				const isCapacity = filter.capacities.some(
-					(capacity) => product.capacity[0] === capacity
-				);
-				const isPacking = filter.packing.some(
-					(packing) => product.packing[0] === packing
-				);
-				return (
-					isBrand ||
-					isKind ||
-					isManufacturer ||
-					isStrength ||
-					isCapacity ||
-					isPacking
-				);
-			});
-			setCategoryResults(products);
-		} else setCategoryResults(data);
-	}, [filter]);
-
 	return (
 		<Wrapper>
-			{/* <Refinements data={data.refinements} /> */}
 			<Refinements data={refinements} />
 			<ContentWrapper>
 				<SortWrapper>
-					<p>Відсортувати: </p>
 					<Select
-						defaultValue="..."
+						defaultValue={sortVariables[0].label}
 						style={{ width: 250 }}
 						onChange={handleChange}
 						options={sortVariables}

src/components/screen/category/utils/filter.ts

@@ -0,0 +1,41 @@
+import { TFilter } from '@/store/product/product.types';
+import { IProduct } from '@/types/product.interface';
+
+type TData = IProduct & TFilter & { strength: string[]; capacity: string[] };
+
+export default function filterByValue(data: TData[], filter: TFilter) {
+	if (
+		JSON.stringify(filter) !==
+		'{"brand":[],"capacities":[],"kind":[],"manufacturer":[],"packing":[],"strengths":[]}'
+	) {
+		const products = data.filter((product) => {
+			const isBrand = filter.brand.some(
+				(brand: string) => product.brand[0] === brand
+			);
+			const isKind = filter.kind.some(
+				(kind: string) => product.kind[0] === kind
+			);
+			const isManufacturer = filter.manufacturer.some(
+				(manufacturer: string) => product.manufacturer[0] === manufacturer
+			);
+			const isStrength = filter.strengths.some(
+				(strength: string) => product.strength[0] === strength
+			);
+			const isCapacity = filter.capacities.some(
+				(capacity: string) => product.capacity[0] === capacity
+			);
+			const isPacking = filter.packing.some(
+				(packing: string) => product.packing[0] === packing
+			);
+			return (
+				isBrand ||
+				isKind ||
+				isManufacturer ||
+				isStrength ||
+				isCapacity ||
+				isPacking
+			);
+		});
+		return products;
+	} else return data;
+}

src/components/screen/category/utils/sort.ts

@@ -0,0 +1,49 @@
+export default function sortByValue(data: any, value: string) {
+	switch (value) {
+		case 'by_title_a':
+			return data.sort((a, b) => {
+				if (a.title > b.title) return 1;
+				if (a.title < b.title) return -1;
+				return 0;
+			});
+		case 'by_title_z':
+			return data.sort((a, b) => {
+				if (a.title > b.title) return -1;
+				if (a.title < b.title) return 1;
+				return 0;
+			});
+		case 'by_cost_l':
+			return data.sort((a, b) => {
+				const costA = a.discount ? a.cost - a.discount * a.cost : a.cost;
+				const costB = b.discount ? b.cost - b.discount * b.cost : b.cost;
+
+				if (costA > costB) return -1;
+				if (costA < costB) return 1;
+				return 0;
+			});
+		case 'by_cost_h':
+			return data.sort((a, b) => {
+				const costA = a.discount ? a.cost - a.discount * a.cost : a.cost;
+				const costB = b.discount ? b.cost - b.discount * b.cost : b.cost;
+
+				if (costA > costB) return 1;
+				if (costA < costB) return -1;
+				return 0;
+			});
+		case 'by_discount':
+			return data.sort((a, b) => {
+				if (a.discount > b.discount) return -1;
+				if (a.discount < b.discount) return 1;
+				return 0;
+			});
+		case 'by_new':
+			return data.sort((a, b) => {
+				if (a.isNew) return -1;
+				if (!a.isNew) return 1;
+				return 0;
+			});
+
+		default:
+			return -1;
+	}
+}