Browse Source

added cards for product search

Vika 2 years ago
parent
commit
d5e92194c7

+ 4 - 0
project/my-project/src/App.css

@@ -126,4 +126,8 @@ a:link, a:visited {
     background: rgb(14, 80, 141);
     opacity: 1;
     border-radius: 50%;
+}
+
+.ant-menu-item .ant-menu-item-active .ant-menu-item-selected {
+  background-color: red;
 }

+ 16 - 21
project/my-project/src/components/goodSearch.js

@@ -1,5 +1,4 @@
-import { useEffect, useState } from 'react';
-import { Card, Image, Button, Alert } from 'antd';
+import { Card, Image, Button, Alert, Row } from 'antd';
 import { connect } from 'react-redux';
 import { backURL } from '../api';
 import { actionCartAdd } from '../action';
@@ -7,15 +6,8 @@ import { useHistory } from 'react-router-dom';
 
 const ContentSearch = ({ value, onAdd }) => {
   console.log('value', value);
-  const [good, setGood] = useState(value);
   const history = useHistory();
 
-  useEffect(() => {
-    if (value.length) {
-      setGood(value[0]);
-    }
-  }, [value]);
-
   const onClose = (e) => {
     console.log(e, 'I was closed.');
     history.push('/');
@@ -23,20 +15,23 @@ const ContentSearch = ({ value, onAdd }) => {
 
   return (
     <> { value.length
-      ? <Card title={good.name} style={{ width: 350 }} hoverable>
-          {good.images &&
-          good.images[0] &&
-          good.images[0].url &&
-          <Image width={300} src={backURL + '/' + good.images[0].url} />}
-          <p>{good.description}</p>
-          <p>{good.price} грн</p>
+      ? <Row >
+      {value.map((item) =>
+      <Card key={item._id} title={item.name} style={{ width: 350 }} hoverable>
+          {item.images &&
+          item.images[0] &&
+          item.images[0].url &&
+          <Image width={300} src={backURL + '/' + item.images[0].url} />}
+          <p>{item.description}</p>
+          <p>{item.price} грн</p>
           <Button onClick={() => onAdd({
-            _id: good._id,
-            name: good.name,
-            price: good.price,
-            images: good.images
+            _id: item._id,
+            name: item.name,
+            price: item.price,
+            images: item.images
           })}>Купить</Button>
-        </Card>
+        </Card>)}
+        </Row>
       : <>
          <Alert
             message="Товара с таким названием не существует"

+ 1 - 1
project/my-project/src/components/index.js

@@ -7,7 +7,7 @@ export { default as GoodCardCharacteristic } from './goodCardCharacteristic';
 export { default as HeaderSite } from './header';
 export { default as RegisterIn } from './registerIn';
 export { default as ListOrders } from './listOrders';
-export { default as Page404 } from './pege404';
+export { default as Page404 } from './page404';
 export { default as InputUpLoadFile } from './inputUploadFile';
 export { default as SwitchRoute } from './switchRoute';
 export { default as NameCategory } from './nameCategory';

+ 1 - 1
project/my-project/src/components/listOrders.js

@@ -9,7 +9,7 @@ const Orders = ({ allOrders, status, arrUsers }) => {
       {arrUsers?.acl?.includes('user')
         ? <Card title="История заказов">
 
-      { allOrders.length === 0 && status.status === 'RESOLVD' && <Card>Вы не совершали покупки</Card>}
+      { allOrders.length === 0 && status.status === 'RESOLVED' && <Card>Вы не совершали покупки</Card>}
         { allOrders.map((item, index) =>
             <Card key={index} type="inner" title={`Заказ №  ${index + 1}`} style={{ marginTop: 16 }} >
               <Row>

project/my-project/src/components/pege404.js → project/my-project/src/components/page404.js