pages goods, orders

package-lock.json

@@ -20,6 +20,7 @@
         "react-dom": "^18.2.0",
         "react-lorem-ipsum": "^1.4.10",
         "react-scripts": "5.0.1",
+        "redux-thunk": "^2.4.2",
         "web-vitals": "^2.1.4"
       }
     },
@@ -14815,6 +14816,23 @@
         "node": ">=8"
       }
     },
+    "node_modules/redux": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.0.tgz",
+      "integrity": "sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==",
+      "peer": true,
+      "dependencies": {
+        "@babel/runtime": "^7.9.2"
+      }
+    },
+    "node_modules/redux-thunk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.2.tgz",
+      "integrity": "sha512-+P3TjtnP0k/FEjcBL5FZpoovtvrTNT/UXd4/sluaSyrURlSlhLSzEdfsTBW7WsKB6yPvgd7q/iZPICFjW4o57Q==",
+      "peerDependencies": {
+        "redux": "^4"
+      }
+    },
     "node_modules/regenerate": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -27933,6 +27951,21 @@
         "strip-indent": "^3.0.0"
       }
     },
+    "redux": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.0.tgz",
+      "integrity": "sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==",
+      "peer": true,
+      "requires": {
+        "@babel/runtime": "^7.9.2"
+      }
+    },
+    "redux-thunk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.2.tgz",
+      "integrity": "sha512-+P3TjtnP0k/FEjcBL5FZpoovtvrTNT/UXd4/sluaSyrURlSlhLSzEdfsTBW7WsKB6yPvgd7q/iZPICFjW4o57Q==",
+      "requires": {}
+    },
     "regenerate": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",

package.json

@@ -15,6 +15,7 @@
     "react-dom": "^18.2.0",
     "react-lorem-ipsum": "^1.4.10",
     "react-scripts": "5.0.1",
+    "redux-thunk": "^2.4.2",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.js

@@ -1,19 +1,26 @@
 import logo from './logo.svg';
 import './App.css';
-import { 
-  JqlTests_RootCats, 
+import {
+  JqlTests_RootCats,
   JqlTests_RetrieveRootCats,
   JqlTests_AuthLogin,
   JqlTests_Goods,
   JqlTests_GoodFindOne,
   JqlTests_AuthUpsert
- } from './Tests/test_jql';
-import { LoginForm, GoodExample } from "./Components";
+} from './Tests/test_jql';
+import { LoginForm, GoodExample, GoodsList, goodsExample, Category, exampleCategory, OrderGood, exampleOrderGood, Order, exampleOrder } from "./Components";
 
 
 function App() {
   return (
+    <>
+      {/*<GoodsList goods={goodsExample} />
     <GoodExample />
+      <Category category={exampleCategory} />
+      <OrderGood orderGood={exampleOrderGood}/>*/}
+      <Order order={exampleOrder} />
+    </>
+
   );
 }
 {/*    <div className="App">

src/Components/Good.js

@@ -5,6 +5,7 @@ import { Container, Avatar, Typography, Grid, CardActionArea, Card, CardContent,
 //CssBaseline, TextField, FormControlLabel, Checkbox, Link, Divider
 import { getFullImageUrl } from "./../utills";
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { Box } from '@mui/system';
 const GoodExample = () => {
     return <Good good={
         {
@@ -73,20 +74,24 @@ const AvatarAnimated = styled((props) => {
     },
 }));
 
-const Good = ({ good }) => {
+const Good = ({ good, maxWidth, showAddToCard = true }) => {
     let [currentImageIndex, setCurrentImageIndex] = useState(0);
     let [expanded, setExpanded] = useState(false);
     const handleExpandClick = () => setExpanded(!expanded);
+    maxWidth = maxWidth ?? 'md';
     return (
-        <Container maxWidth='md'>
+        <Container maxWidth={maxWidth}>
             <Card variant='outlined'>
-                <Grid container spacing={5}>
+                <Grid container spacing={maxWidth == 'xs' ? 7 : 5}>
                     <Grid item xs={1}>
                         <AvatarGroupOriented variant='rounded' vertical>
                             {
-                                good.images.map((image, index) => (
+                                good.images?.map((image, index) => (
                                     <AvatarAnimated selected={index === currentImageIndex} variant='rounded' key={index} src={getFullImageUrl(image)}
-                                        onClick={() => setCurrentImageIndex(index)} />
+                                        onClick={() => {
+                                            let a = '';
+                                            setCurrentImageIndex(index)
+                                        }} />
                                 ))
                             }
                         </AvatarGroupOriented>
@@ -98,7 +103,7 @@ const Good = ({ good }) => {
                                     <CardMedia
                                         component="img"
                                         sx={{ height: 300, padding: "1em 1em 0 1em", objectFit: "contain" }}
-                                        image={getFullImageUrl(good.images[currentImageIndex])}
+                                        image={good.images?.length > 0 ? getFullImageUrl(good.images[currentImageIndex]) : ''}
                                         title={good.name}
                                     />
                                 </Grid>
@@ -117,9 +122,6 @@ const Good = ({ good }) => {
                     </Grid>
                 </Grid>
                 <CardActions>
-                    <Typography sx={{marginLeft:70}}>
-                        Description:
-                    </Typography>
                     <ExpandMore
                         expand={expanded}
                         onClick={handleExpandClick}
@@ -128,15 +130,19 @@ const Good = ({ good }) => {
                     >
                         <ExpandMoreIcon />
                     </ExpandMore>
-                    <Button size='small' color='primary'>
-                        Add to cart
-                    </Button>
+                    {
+                        showAddToCard && (
+                            <Button size='small' color='primary'>
+                                Add to cart
+                            </Button>
+                        )
+                    }
                 </CardActions>
                 <Collapse in={expanded} timeout='auto' unmountOnExit>
-                    <Typography paragraph  sx={{marginLeft:1}}>
+                    <Typography paragraph sx={{ marginLeft: 1 }}>
                         Description:
                     </Typography>
-                    <Typography paragraph align='justify' sx={{marginLeft:2, marginRight:2}}>
+                    <Typography paragraph align='justify' sx={{ marginLeft: 2, marginRight: 2 }}>
                         {good.description}
                     </Typography>
                 </Collapse>

src/Components/Order.js

@@ -0,0 +1,75 @@
+import { Typography } from "@mui/material"
+import { Box, Container } from "@mui/system"
+import { OrderGoodsList } from "./OrderGoodsList"
+
+let exampleOrder = {
+    "_id": "62cdc9b3b74e1f5f2ec1a0e9",
+    "total": 3383,
+    "orderGoods": [
+        {
+            "_id": "62cdc9b3b74e1f5f2ec1a0e6",
+            "price": 33,
+            "count": 1,
+            "total": 33,
+            "createdAt": "1657653683000",
+            "good": null
+        },
+        {
+            "_id": "62cdc9b3b74e1f5f2ec1a0e7",
+            "price": 1000,
+            "count": 2,
+            "total": 2000,
+            "createdAt": "1657653683000",
+            "good": {
+                "name": "iPhone 13",
+                "images": [
+                    {
+                        "url": "images/56c5d476685355221b1a3ba2c554ad91"
+                    },
+                    {
+                        "url": "images/29393a087c933d7caea010c98f4d2876"
+                    }
+                ]
+            }
+        },
+        {
+            "_id": "62cdc9b3b74e1f5f2ec1a0e8",
+            "price": 450,
+            "count": 3,
+            "total": 1350,
+            "createdAt": "1657653683000",
+            "good": {
+                "name": "Samsung Galaxy M52",
+                "images": [
+                    {
+                        "url": "images/e91a37b88f947e51586dfe87b2f4e13f"
+                    },
+                    {
+                        "url": "images/bf8fcf557844ba9bce1368e5bf52bb4d"
+                    },
+                    {
+                        "url": "images/fd419e96ffc2d21e880fc0efabe7ae5c"
+                    }
+                ]
+            }
+        }
+    ]
+}
+const Order = ({ order }) => {
+    return (
+        <>
+            <Container>
+                <Box>
+                    <Typography paragraph gutterBottom component={'h3'} variant={'h3'}>
+                        Order# {order._id}
+                    </Typography>
+                    <Typography gutterBottom variant='body2' color='textSecondary' component='p'>
+                        {`Total: $${order.total}`}
+                    </Typography>
+                    <OrderGoodsList orderGoods={order.orderGoods} />
+                </Box>
+            </Container>
+        </>
+    )
+}
+export { Order, exampleOrder }

src/Components/index.js

@@ -1,2 +1,7 @@
 export { LoginForm } from './LoginForm';
-export {Good, GoodExample} from './Good';
+export { Good, GoodExample } from './Good';
+export { goodsExample, GoodsList } from './GoodsList';
+export {Category, exampleCategory} from './Category';
+export {OrderGood, exampleOrderGood} from './OrderGood';
+export {OrderGoodsList, exampleOrderGoodsList} from './OrderGoodsList'
+export {Order, exampleOrder} from './Order';