rtk_order_good yepp

src/App.js

@@ -1,14 +1,12 @@
 
 import { configureStore } from '@reduxjs/toolkit';
-import { Router, Route, Switch, useParams } from 'react-router-dom';
+import { Router, Route, Switch } from 'react-router-dom';
 import { createBrowserHistory } from "history";
-import { createStore, combineReducers, applyMiddleware } from 'redux';
 import { Provider } from 'react-redux';
 import { authReducer, promiseReducer, actionAuthLogin, frontEndReducer, actionRootCats, goodsReducer } from './reducers';
-import { CGoodsList, CLoginForm, CMainAppBar, COrder, COrdersList, exampleOrder, goodsExample, GoodsList, Order } from "./Components";
+import { CGood, CGoodsList, CLoginForm, CMainAppBar, COrder, COrdersList, exampleOrder, goodsExample, GoodsList, Order } from "./Components";
 import { CLogout } from './Components';
 import { CSidebar } from './Components/Sidebar';
-import thunk from 'redux-thunk';
 import { CRootCats } from './Components';
 
 import './App.css';
@@ -61,6 +59,7 @@ function App() {
               <Route path="/" component={Main} exact />
               <Route path="/orders" component={COrdersList} />
               <Route path="/goods" component={CGoodsList} />
+              <Route path="/good/:_id" component={CGood} />
               <Route path="/category/:_id" component={CCategory} />
               <Route path="/order/:_id" component={COrder} />
               <Route path="/login" component={CLoginForm} />

src/Components/GoodItem.js

@@ -0,0 +1,80 @@
+import React, { useState } from 'react';
+import Button from '@mui/material/Button';
+import { Container, Typography, Grid, CardActionArea, Card, CardContent, CardMedia, CardActions, Collapse } from '@mui/material';
+import { getFullImageUrl } from "./../utills";
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { AvatarAnimated } from './AvatarAnimated';
+import { MyLink } from './MyLink';
+import { AvatarGroupOriented, ExpandMore } from './Good';
+
+export const GoodItem = ({ good = {}, maxWidth = 'md', showAddToCard = true }) => {
+    let [currentImageIndex, setCurrentImageIndex] = useState(0);
+    let [expanded, setExpanded] = useState(false);
+    const handleExpandClick = () => setExpanded(!expanded);
+    return good && (
+        <Container maxWidth={maxWidth}>
+            <Card variant='outlined'>
+                <Grid container spacing={maxWidth === 'xs' ? 7 : 5}>
+                    <Grid item xs={1}>
+                        <AvatarGroupOriented variant='rounded' vertical>
+                            {good.images?.map((image, index) => (
+                                <AvatarAnimated selected={index === currentImageIndex} variant='rounded' key={index} src={getFullImageUrl(image)}
+                                    onClick={() => {
+                                        setCurrentImageIndex(index);
+                                    }} />
+                            ))}
+                        </AvatarGroupOriented>
+                    </Grid>
+                    <Grid item xs>
+                        <MyLink to={`/good/${good._id}`}>
+                            <CardActionArea>
+                                <Grid container spacing={2}>
+                                    <Grid item xs={4}>
+                                        <CardMedia
+                                            component="img"
+                                            sx={{ height: 300, padding: "1em 1em 0 1em", objectFit: "contain" }}
+                                            image={good.images?.length > 0 ? getFullImageUrl(good.images[currentImageIndex]) : ''}
+                                            title={good.name} />
+                                    </Grid>
+                                    <Grid item xs={8}>
+                                        <CardContent>
+                                            <Typography gutterBottom variant='h5' component='h2'>
+                                                {good.name}
+                                            </Typography>
+                                            <Typography gutterBottom variant='body2' color='textSecondary' component='p'>
+                                                {`Price: $${good.price}`}
+                                            </Typography>
+                                        </CardContent>
+                                    </Grid>
+                                </Grid>
+                            </CardActionArea>
+                        </MyLink>
+                    </Grid>
+                </Grid>
+                <CardActions>
+                    <ExpandMore
+                        expand={expanded}
+                        onClick={handleExpandClick}
+                        aria-expanded={expanded}
+                        aria-label='showMore'
+                    >
+                        <ExpandMoreIcon />
+                    </ExpandMore>
+                    {showAddToCard && (
+                        <Button size='small' color='primary'>
+                            Add to cart
+                        </Button>
+                    )}
+                </CardActions>
+                <Collapse in={expanded} timeout='auto' unmountOnExit>
+                    <Typography paragraph sx={{ marginLeft: 1 }}>
+                        Description:
+                    </Typography>
+                    <Typography paragraph align='justify' sx={{ marginLeft: 2, marginRight: 2 }}>
+                        {good.description}
+                    </Typography>
+                </Collapse>
+            </Card>
+        </Container>
+    );
+};

src/Components/GoodsList.js

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { Container, Box } from '@mui/material';
-import { Good } from './Good';
+import { CGoodItem } from './Good';
 import { connect } from 'react-redux';
 import { actionGoodFind, actionGoodsCount } from '../reducers';
 import { CGoodsSearchInput } from './SearchInput';
@@ -21,7 +21,7 @@ const GoodsList = ({ goods, searchStr, fromPage = 0, pageSize = 5, loadData, loa
                 {
                     goods?.map(good => {
                         return (
-                            <Good key={good._id} good={good} maxWidth='xs' />
+                            <CGoodItem key={good._id} good={good} maxWidth='xs' />
                         )
                     })}
             </Box>

src/Components/index.js

@@ -1,7 +1,7 @@
 export { CLoginForm } from './LoginForm';
-export { Good, GoodExample } from './Good';
+export { CGood, CGoodItem } from './Good';
 export { CGoodsList } from './GoodsList';
-export { OrderGood, exampleOrderGood } from './OrderGood';
+export { OrderGood} from './OrderGood';
 export { OrderGoodsList, exampleOrderGoodsList } from './OrderGoodsList'
 export { COrder } from './Order';
 export { COrdersList } from './OrderList';

src/jql/gqlGoods.js

@@ -1,6 +1,5 @@
 import { gql } from "../utills/gql";
 import { createFullQuery } from "./jqlUtils";
-
 export const gqlGoodFindOne = (id) => {
     let params = createFullQuery({ searchStr: id, searchFieldNames: ["_id"] });
     const gqlQuery = `

src/jql/gqlOrders.js

@@ -51,6 +51,7 @@ export const gqlOrderFindOne = (_id) => {
             orderGoods {
                 _id price count total createdAt
                 good {
+                    _id
                     name 
                     images { url }
                 }

src/reducers/goodsReducer.js

@@ -1,8 +1,14 @@
 import { gqlGoodFind, gqlGoodFindOne, gqlGoodsCount } from '../jql/gqlGoods';
 import { createPromiseReducerSlice, actionPromiseGeneric } from './promiseReducer';
 
+const currentGood = 'currentGood';
 const actionGoodFindOne = (id) =>
-    actionPromiseGoods('currentGood', gqlGoodFindOne(id));
+    actionPromiseGoods(currentGood, gqlGoodFindOne(id));
+const getCurrentGood = state => (
+    
+    state.goods[currentGood]?.payload
+)
+
 const actionGoodFind = (fromPage = 0, pageSize = undefined, searchStr = null, queryExt = {}) =>
     actionPromiseGoods('goods', gqlGoodFind(fromPage, pageSize, searchStr, queryExt));
 const actionGoodsCount = (searchStr = null, queryExt = {}) =>
@@ -11,6 +17,5 @@ const actionGoodsCount = (searchStr = null, queryExt = {}) =>
 const goodsReducerSlice = createPromiseReducerSlice('goods');
 const actionPromiseGoods = (name, promise) =>
     actionPromiseGeneric(goodsReducerSlice, name, promise);
-
 let goodsReducer = goodsReducerSlice.reducer;
-export { goodsReducer, actionGoodFindOne, actionGoodFind, actionGoodsCount }
+export { goodsReducer, actionGoodFindOne, actionGoodFind, actionGoodsCount,  getCurrentGood }