Web Store Audit and Improvements

src/components/app/app.tsx

@@ -1,22 +1,22 @@
 import React from "react";
 import { Routes, Route } from "react-router-dom";
 
-import { Homepage } from "pages/homepage";
-import { Cartpage } from "pages/cartpage";
-import { ContactUspage } from "pages/contact-uspage";
-import { MadeInAflapage } from "pages/made-in-alfapage";
-import { OwnDesignpage } from "pages/own-designpage";
-import { OwnDesignProductpage } from "pages/own-desigh-productpage";
-import { MadeInAflaProductpage } from "pages/made-in-alfa-productpage";
+import { Homepage } from "pages/home-page";
+import { Cartpage } from "pages/cart-page";
+import { ContactUspage } from "pages/contact-us-page";
+import { MadeInAlfapage } from "pages/made-in-alfa-page";
+import { OwnDesignpage } from "pages/own-design-page";
+import { OwnDesignProductpage } from "pages/own-design-product-page";
+import { MadeInAlfaProductpage } from "pages/made-in-alfa-product-page";
 
 export const App = () => (
 	<div className="app">
 		<Routes>
 			<Route path="/" element={<Homepage />} />
 			<Route path="/cart" element={<Cartpage />} />
 			<Route path="/contact-us" element={<ContactUspage />} />
-			<Route path="/made-in-alfa" element={<MadeInAflapage />} />
-			<Route path="/made-in-alfa/:productId" element={<MadeInAflaProductpage />} />
+			<Route path="/made-in-alfa" element={<MadeInAlfapage />} />
+			<Route path="/made-in-alfa/:productId" element={<MadeInAlfaProductpage />} />
 			<Route path="/own-design" element={<OwnDesignpage />} />
 			<Route path="/own-design/:productId" element={<OwnDesignProductpage />} />
 		</Routes>

src/components/cart-card/cart-card.tsx

@@ -7,35 +7,34 @@ import { CrossMIcon } from "@alfalab/icons/glyph/dist/CrossMIcon";
 import React from "react";
 import { Link } from "react-router-dom";
 import { useAppDispatch, useAppSelector } from "store";
-import { aStoreActions, cartSelector, madeInAlfaProductsSelector } from "store/a-store";
+import { aStoreActions, madeInAlfaProductsSelector } from "store/a-store";
 import { CartType } from "types/product";
 import "./cart-card.css";
 
 type CartCardProductType = {
 	product: CartType;
+	index: number;
 };
 
-export const CartCard = ({ product }: CartCardProductType) => {
+export const CartCard = ({ product, index }: CartCardProductType) => {
 	const { productId, productImg, productName, productOptions, amount, price } = product;
-	const cart = useAppSelector(cartSelector);
-	const productIndex = cart.indexOf(product);
 
 	const dispatch = useAppDispatch();
 
 	const handleRemoveClick = () => {
-		dispatch(aStoreActions.removeFromCart(productIndex));
+		dispatch(aStoreActions.removeFromCart(index));
 	};
 
 	const handleDecreaseClick = () => {
-		dispatch(aStoreActions.decreaseAmount(productIndex));
+		dispatch(aStoreActions.decreaseAmount(index));
 	};
 
 	const handeIncreaseClick = () => {
-		dispatch(aStoreActions.increaseAmount(productIndex));
+		dispatch(aStoreActions.increaseAmount(index));
 	};
 
 	const madeInAlfaProducts = useAppSelector(madeInAlfaProductsSelector);
-	const isMadeinAlfaProduct = madeInAlfaProducts.find((product) => product.id === productId);
+	const isMadeinAlfaProduct = madeInAlfaProducts.find((p) => p.id === productId);
 	const productLink = isMadeinAlfaProduct ? `/made-in-alfa/${productId}` : `/own-design/${productId}`;
 	const linkStyle = { textDecoration: "none", color: "inherit" };
 
@@ -48,9 +47,9 @@ export const CartCard = ({ product }: CartCardProductType) => {
 						{productName}
 					</Typography.Text>
 				</Link>
-				{productOptions.map((option, index) => (
+				{productOptions.map((option, idx) => (
 					<Typography.Text
-						key={`${option}: ${index}`}
+						key={`${Object.keys(option)[0]}-${idx}`}
 						view="secondary-medium"
 						weight="bold"
 						color="secondary"

src/components/page/page.tsx

@@ -54,7 +54,7 @@ export const Page = ({ children }: PropsWithChildren) => {
 						<SidePanelResponsive.Content>
 							<Divider />
 							{cart.map((product, index) => (
-								<CartCard key={index} product={product} />
+								<CartCard key={index} product={product} index={index} />
 							))}
 							<Gap size="xl" />
 							<Divider />
@@ -66,7 +66,7 @@ export const Page = ({ children }: PropsWithChildren) => {
 								<Amount value={totalCost} minority={0} currency="RUB" bold="full" />
 							</div>
 							<Gap size="xl" />
-							<Link to="/cart " style={linkStyle}>
+							<Link to="/cart" style={linkStyle}>
 								<CustomButton backgroundColor="black" block={true} onClick={handleButtonClick}>
 									Дальше
 								</CustomButton>

src/components/product/product.tsx

@@ -102,48 +102,48 @@ export const Product = ({
 		setSelectedSticker(selected as SelectType);
 	};
 
-	const product: CartType = {
-		productId: id,
-		productImg: preview,
-		productName: title,
-		productOptions: [
-			{ цвет: selectedColor.content },
-			{ размер: selectedSize.content },
-			{ модель: selectedModel.content },
-			{ "номер стикера": selectedSticker.content },
-		].filter((option) => Object.values(option)[0] !== ""),
-		amount: 1,
-		price: price,
-	};
-	if (selectedSticker.content !== "") {
-		product.stickerNumber = parseInt(selectedSticker.content);
-	}
-	if (selectedColor.content !== "") {
-		product.color = selectedColor.content;
-	}
-	if (selectedSize.content !== "") {
-		product.size = selectedColor.content;
-	}
-	if (selectedModel.content !== "") {
-		product.model = selectedColor.content;
-	}
-
 	const handleButtonClick = () => {
+		const product: CartType = {
+			productId: id,
+			productImg: preview,
+			productName: title,
+			productOptions: [
+				{ цвет: selectedColor.content },
+				{ размер: selectedSize.content },
+				{ модель: selectedModel.content },
+				{ "номер стикера": selectedSticker.content },
+			].filter((option) => Object.values(option)[0] !== ""),
+			amount: 1,
+			price: price,
+		};
+		if (selectedSticker.content !== "") {
+			product.stickerNumber = parseInt(selectedSticker.content);
+		}
+		if (selectedColor.content !== "") {
+			product.color = selectedColor.content;
+		}
+		if (selectedSize.content !== "") {
+			product.size = selectedSize.content;
+		}
+		if (selectedModel.content !== "") {
+			product.model = selectedModel.content;
+		}
+
 		dispatch(aStoreActions.addToCart(product));
 	};
 
 	return (
 		<div className="productpage">
 			<div className="product-imgs">
-				<img className="product-big-img" src={images[currentImg]} alt={title} />
+				<img className="product-big-img" src={images[currentImg]} alt={`${title} - изображение ${currentImg + 1}`} />
 				<Gap size="xs" />
 				<div className="img-picker-block">
 					{images.map((img, index) => (
 						<img
 							key={index}
 							className={index === currentImg ? "img-picker-active" : "img-picker"}
 							src={img}
-							alt=""
+							alt={`${title} - превью ${index + 1}`}
 							onClick={() => handleClick(index)}
 						/>
 					))}

src/pages/cartpage.tsx → src/pages/cart-page.tsx

@@ -18,7 +18,7 @@ import { Link, useNavigate } from "react-router-dom";
 import axios from "axios";
 import emptyCartImg from "imgs/empty-cart.png";
 
-export const Cartpage = () => {
+export const CartPage = () => {
 	const amountInCart = useAppSelector(amountInCartSelector);
 	const cost = useAppSelector(totalCostSelector);
 	const cart = useAppSelector(cartSelector);
@@ -68,7 +68,7 @@ export const Cartpage = () => {
 		setDeliveryCost(payload?.value as string);
 	};
 
-	const handleChangeCkecked = () => {
+	const handleChangeChecked = () => {
 		setChecked(!checked);
 		setCheckedError("");
 	};
@@ -118,7 +118,7 @@ export const Cartpage = () => {
 					id: product.productId,
 					totalPrice: product.price,
 					totalCount: product.amount,
-					sticketNumber: product.stickerNumber,
+					stickerNumber: product.stickerNumber,
 					color: product.color,
 					size: product.size,
 					model: product.model,
@@ -230,7 +230,7 @@ export const Cartpage = () => {
 						</RadioGroup>
 						<Gap size="xl" />
 						<Checkbox
-							onChange={handleChangeCkecked}
+							onChange={handleChangeChecked}
 							checked={checked}
 							label="Согласен с политикой конфиденциальности и обработки персональных данных"
 							error={checkedError}
@@ -251,7 +251,7 @@ export const Cartpage = () => {
 						<Divider />
 						<Gap size="xs" />
 						<div>
-							<Typography.Text view="primary-large">Стоимость товаров в коризне:</Typography.Text>
+							<Typography.Text view="primary-large">Стоимость товаров в корзине:</Typography.Text>
 							<Gap direction="horizontal" size="xs" />
 							<Amount value={cost} minority={0} currency="RUB" bold="none" />
 						</div>
@@ -276,7 +276,7 @@ export const Cartpage = () => {
 						</CustomButton>
 						{orderError && (
 							<Typography.Text view="primary-large" weight="bold" color="accent">
-								При составление заказа произошла ошибка, попробуйте позже.
+								При составлении заказа произошла ошибка, попробуйте позже.
 							</Typography.Text>
 						)}
 					</>

src/pages/made-in-alfa-page.tsx

@@ -0,0 +1,40 @@
+import { Gap } from "@alfalab/core-components/gap";
+import { Typography } from "@alfalab/core-components/typography";
+import { Page } from "components/page";
+import { useAppDispatch, useAppSelector } from "store";
+import { aStoreActions, madeInAlfaProductsSelector } from "store/a-store";
+import { MadeInAlfaCard } from "components/made-in-alfa-card";
+import { useEffect } from "react";
+import "./styles.css";
+
+export const MadeInAlfapage = () => {
+	const dispatch = useAppDispatch();
+	const products = useAppSelector(madeInAlfaProductsSelector);
+
+	useEffect(() => {
+		dispatch(aStoreActions.requestMadeInAlfa());
+	}, [dispatch]);
+
+	return (
+		<Page>
+			<div className="madeinalfapage">
+				<Gap size="xl" />
+				<Typography.Title tag="h1" weight="bold">
+					Сделано в Альфе
+				</Typography.Title>
+				<Gap size="xl" />
+				<div className="madeinalfapage-cards">
+					{products.map((product) => (
+						<MadeInAlfaCard
+							key={product.id}
+							id={product.id}
+							preview={product.preview}
+							title={product.title}
+							price={product.price}
+						/>
+					))}
+				</div>
+			</div>
+		</Page>
+	);
+};

src/pages/made-in-alfa-productpage.tsx → src/pages/made-in-alfa-product-page.tsx

@@ -8,7 +8,7 @@ import { useAppDispatch, useAppSelector } from "store";
 import { useCallback, useEffect } from "react";
 import { aStoreActions, currentProductSelector, hasErrorSelector } from "store/a-store";
 
-export const MadeInAflaProductpage = () => {
+export const MadeInAlfaProductpage = () => {
 	const { productId } = useParams();
 
 	const dispatch = useAppDispatch();
@@ -27,6 +27,10 @@ export const MadeInAflaProductpage = () => {
 		product = data.products.find((product) => product.id === parseInt(productId as string)) as ProductType;
 	}
 
+	if (!product || !product.id) {
+		return <Page children={null} />;
+	}
+
 	const { id, preview, images, title, price, description, availability, colors, sizes, models } = product;
 
 	return (