rtk_user_upsert

src/Components/EditableUser.js

@@ -4,26 +4,30 @@ import { useParams } from "react-router-dom";
 import { Button, Card, CardActions, CardContent, CardMedia, Container, Grid, InputAdornment, TextField } from "@mui/material";
 import { CSortedFileDropZone } from "./SortedFileDropZone";
 import { ModalContainer } from "./ModalContainer";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { getFullImageUrl, saveImage } from "../utills/utils";
+import { Input } from "@mui/icons-material";
 
 const EditableUser = ({ user: userExt, maxWidth = 'md', saveUser }) => {
     let [user, setUser] = useState(userExt);
-    let [imagesContainer, setImagesContainer] = useState({ images: userExt.images });
+
+    useEffect(() => {
+        setUser(userExt);
+    }, [userExt]);
+
     const setUserData = (data) => {
         let userData = { ...user, ...data };
         setUser(userData);
         return userData;
     }
     const saveFullUser = async () => {
-        let addedImages = imagesContainer.images.filter(img => !img._id);
-        let results = await Promise.all(addedImages.map(img => saveImage(img)));
-        for (let i = 0; i < results.length; i++) {
-            addedImages[i]._id = results[i]._id;
-            addedImages[i].url = results[i].url;
-        }
-        user = { ...user, images: imagesContainer.images };
-        saveUser({ user });
+        saveUser({ user: { _id: user._id, nick: user.nick } });
+    }
+
+    const uploadAvatar = async param => {
+        let image = await saveImage({ data: param.target.files[0] }, false);
+        let userToSave = { _id: user._id, avatar: { _id: image._id } };
+        saveUser({ user: userToSave });
     }
 
     return user && (
@@ -40,6 +44,17 @@ const EditableUser = ({ user: userExt, maxWidth = 'md', saveUser }) => {
                                         image={getFullImageUrl(user.avatar)}
                                         title={user.name}
                                     />
+                                    <Button
+                                        variant="contained"
+                                        component="label"
+                                    >
+                                        Upload File
+                                        <input
+                                            type="file"
+                                            hidden
+                                            onChange={param => uploadAvatar(param)}
+                                        />
+                                    </Button>
                                 </Grid>
                                 <Grid item xs={8}>
                                     <CardContent>
@@ -48,7 +63,7 @@ const EditableUser = ({ user: userExt, maxWidth = 'md', saveUser }) => {
                                                 <TextField
                                                     required
                                                     id="outlined-required"
-                                                    label="Name"
+                                                    label="Nick"
                                                     value={user.nick}
                                                     onChange={event => setUserData({ nick: event.target.value })}
                                                     fullWidth
@@ -58,7 +73,7 @@ const EditableUser = ({ user: userExt, maxWidth = 'md', saveUser }) => {
                                                 <TextField
                                                     required
                                                     id="outlined-required"
-                                                    label="Price"
+                                                    label="Login"
                                                     startAdornment={<InputAdornment position="start">$</InputAdornment>}
                                                     value={user.login}
                                                     onChange={event => setUserData({ login: event.target.value })}
@@ -92,9 +107,9 @@ const EditableUser = ({ user: userExt, maxWidth = 'md', saveUser }) => {
 
 const CEditableUser = ({ maxWidth = 'md' }) => {
     const { _id } = useParams();
-    const { isLoading, data } = useUserFindQuery(_id);
-    let user = isLoading ? undefined : data?.UserFindOne;
     let currentUser = useSelector(state => state.auth.currentUser);
+    const { isLoading, data } = useUserFindQuery(_id ?? currentUser?._id ?? 'jfbvwkbvjeb');
+    let user = isLoading ? undefined : data?.UserFindOne;
     user = _id ? user : currentUser;
     const [saveUserMutation, { }] = useSaveUserMutation();
 

src/Components/OrderList.js

@@ -63,26 +63,6 @@ const OrderList = ({ orders, fromPage, pageSize }) => {
                                 {
                                     headCells.map(headCell => {
                                         return <StyledTableCell key={headCell.id} align={headCell.align}>{headCell.label}</StyledTableCell>
-                                        /*return (
-                                            <StyledTableCell
-                                                key={headCell.id}
-                                                align={headCell.align}
-                                                padding={headCell.disablePadding ? 'none' : 'normal'}
-                                                sortDirection={orderBy === headCell.id ? order : false}
-                                            >
-                                                <TableSortLabel
-                                                    active={orderBy === headCell.id}
-                                                    direction={orderBy === headCell.id ? order : 'asc'}
-                                                >
-                                                    {headCell.label}
-                                                    {orderBy === headCell.id ? (
-                                                        <Box component="span" sx={visuallyHidden}>
-                                                            {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
-                                                        </Box>
-                                                    ) : null}
-                                                </TableSortLabel>
-                                            </StyledTableCell>
-                                        )*/
                                     })
                                 }
                             </TableRow>
@@ -149,8 +129,8 @@ const COrdersList = () => {
     const ordersCountResult = useGetOrdersCountQuery({ searchStr });
     let isLoading = ordersResult.isLoading || ordersCountResult.isLoading;
 
-    let orders = ordersResult.data?.OrderFind;
-    return !isLoading && orders && <OrderList orders={orders} fromPage={fromPage} pageSize={pageSize} />
+    let orders = !isLoading && ordersResult.data?.OrderFind;
+    return !isLoading  && orders && <OrderList orders={orders} fromPage={fromPage} pageSize={pageSize} />
 }
 
 export { COrdersList };

src/Components/Pagination.js

@@ -31,10 +31,8 @@ export const COrdersPagination = () => {
     let allEntitiesCount = getOrdersCount(state);
     let dispatch = useDispatch();
     let changePageFE = (fromPage) => dispatch(actionSetOrdersPaging({ fromPage }));
-    let changeRowsPerPageFE = pageSize => {
-        let a = '';
+    let changeRowsPerPageFE = pageSize => 
         dispatch(actionSetOrdersPaging({ fromPage: 0, pageSize }));
-    }
     let fromPage = state.frontend.ordersPaging.fromPage;
     const pageSize = state.frontend.ordersPaging.pageSize;
     return <Pagination allEntitiesCount={allEntitiesCount} fromPage={fromPage} pageSize={pageSize} changePageFE={changePageFE} changeRowsPerPageFE={changeRowsPerPageFE} />

src/gql/gqlUtils.js

@@ -15,15 +15,17 @@ const createQueryExt = (searchQuery = {}, queryExt = {}) => {
     return { $and: [searchQuery, queryExt] };
 }
 
-const createQueryPaging = (fromPage, pageSize) => {
+const createQueryPaging = (fromPage, pageSize, sort) => {
     let result = {};
     if (fromPage !== undefined && pageSize !== undefined) {
         result["skip"] = [fromPage * pageSize];
         result["limit"] = [pageSize];
     }
+    if (sort)
+        result["sort"] = [sort];
     return result;
 }
 
-export const createFullQuery = ({ searchStr, searchFieldNames, queryExt = {} }, { fromPage, pageSize } = {}) => {
-    return { q: JSON.stringify([createQueryExt(createQuery(searchStr, searchFieldNames), queryExt), createQueryPaging(fromPage, pageSize)]) };
+export const createFullQuery = ({ searchStr, searchFieldNames, queryExt = {} }, { fromPage, pageSize, sort } = {}) => {
+    return { q: JSON.stringify([createQueryExt(createQuery(searchStr, searchFieldNames), queryExt), createQueryPaging(fromPage, pageSize, sort)]) };
 }

src/reducers/authReducer.js

@@ -36,7 +36,7 @@ export const loginApi = createApi({
                 document: gql`
                     query UserFind($q: String) {
                         UserFindOne(query: $q){
-                            _id login nick avatar {url} createdAt
+                            _id login nick avatar {_id url} createdAt
                         } 
                     }
                     `,
@@ -66,8 +66,9 @@ export const loginApi = createApi({
                                 }
                             }
                         `,
-                variables: { user: { ...user, avatar: user?.avatar?._id } }
-            })
+                variables: { user }
+            }),
+            invalidatesTags: (result, error, arg) => ([{ type: 'User', id: arg._id }])
         }),
     }),
 })
@@ -99,7 +100,17 @@ const authSlice = createSlice({
                 let retrievedUser = payload?.UserFindOne;
                 if (retrievedUser?._id === state.currentUser?._id)
                     state.currentUser = retrievedUser;
-            })
+            });
+        builder.addMatcher(loginApi.endpoints.saveUser.matchFulfilled,
+            (state, { payload }) => {
+                let a = '';
+                let b = '';
+            });
+        builder.addMatcher(loginApi.endpoints.saveUser.matchRejected,
+            (state, data) => {
+                let a = '';
+                let b = '';
+            });
     }
 })
 

src/reducers/frontEndReducer.js

@@ -9,7 +9,7 @@ const frontEndReducerSlice = createSlice({ //promiseReducer
     name: 'frontend', //префикс типа наподобие AUTH_
     initialState: {
         sidebar: {},
-        ordersPaging: { fromPage: 0, pageSize: 5 },
+        ordersPaging: { fromPage: 0, pageSize: 10 },
         goodsPaging: { fromPage: 0, pageSize: 5 }
     }, //state={} в параметрах
     reducers: {
@@ -21,7 +21,8 @@ const frontEndReducerSlice = createSlice({ //promiseReducer
             let { fromPage, pageSize } = action.payload.page;
             fromPage = fromPage ?? state.ordersPaging?.fromPage;
             pageSize = pageSize ?? state.ordersPaging?.pageSize;
-            state.ordersPaging = { fromPage, pageSize };
+            state.ordersPaging.fromPage = fromPage;
+            state.ordersPaging.pageSize = pageSize;
             return state;
         },
         setOrdersSearch(state, action) {
@@ -65,6 +66,16 @@ const frontEndReducerSlice = createSlice({ //promiseReducer
             (state, { payload }) => {
                 state.orders = { ordersCount: { payload: payload.OrderCount } }
             });
+        builder.addMatcher(ordersApi.endpoints.getOrders.matchFulfilled,
+            (state, data) => {
+                let a = '';
+                let b = '';
+            });
+        builder.addMatcher(ordersApi.endpoints.getOrders.matchRejected,
+            (state, data) => {
+                let a = '';
+                let b = '';
+            });
     }
 })
 

src/reducers/ordersReducer.js

@@ -20,12 +20,12 @@ const ordersApi = createApi({
     endpoints: (builder) => ({
         getOrders: builder.query({
             query: ({ fromPage, pageSize, searchStr = '' }) => {
-                let params = createFullQuery(getOrderSearchParams(searchStr), { fromPage, pageSize });
+                let params = createFullQuery(getOrderSearchParams(searchStr), { fromPage, pageSize, sort: { _id: -1 } });
                 return {
                     document: gql`
                             query OrderFind($q: String) {
                                 OrderFind(query: $q) {
-                                    _id total
+                                    _id total createdAt
                                     orderGoods {
                                         _id price count total createdAt
                                         good {