styles, random track

src/components/EditPlaylistModal.js

@@ -1,6 +1,5 @@
 import Button from 'react-bootstrap/Button';
 import Modal from 'react-bootstrap/Modal';
-import {connect}   from 'react-redux';
 import React, {useState} from 'react';
 // import { sendForm } from './LoadTrackModal';
 import { sendForm } from './SendForm';
@@ -17,12 +16,12 @@ export function EditPlaylistModal  (props)  {
         const data = new FormData();
 
         data.append("name", name || props.playlist?.name);
-        data.append("description", description || props.playlist?.description);
+        data.append("description", description || props.playlist?.description || '');
         data.append("private", props.playlist?.private);
         image.name && data.append("photo",  image, image.name);
 
         sendForm('playlists/' + props.playlist?.id + '/edit', data);  
-    }
+    } 
 
     return(
     <Modal
@@ -32,9 +31,7 @@ export function EditPlaylistModal  (props)  {
         centered
     >
         <Modal.Header closeButton> 
-        <Modal.Title id="contained-modal-title-vcenter">
-        
-        </Modal.Title> 
+        <Modal.Title id="contained-modal-title-vcenter"></Modal.Title> 
         </Modal.Header>
         <Modal.Body >
         <form onSubmit={PostEditPlaylist} className="authorization center align-items-center justify-content-center  d-flex" id='loadTracksForm'>
@@ -52,7 +49,7 @@ export function EditPlaylistModal  (props)  {
                         <label  className="form-label">Name</label><br/>
                         <input type="text" id="username" className='input form-control mb-3' value={name} onChange={e => setName(e.target.value)}/>
                         <label  className="form-label">Description</label>
-                        <textarea type="password" id="password" className='form-control mb-3' value={description} onChange={e => setDescription(e.target.value)}/>
+                        <textarea type="password" id="password" className='form-control mb-3' value={description || ''} onChange={e => setDescription(e.target.value)}/>
                     </div>
                 </div>
             </div>

src/components/EditProfile.js

@@ -41,9 +41,7 @@ export function EditProfile  (props)  {
     const postForm = async (event)  =>{
         event.preventDefault();
         const data = new FormData();
-
         login && login!==props.user?.login && data.append("login", login);
-        console.log(login, props.user?.login)
         name && name!==props.user?.name && data.append("name", name);
         avatar.name && data.append("avatar",  avatar, avatar.name);
         
@@ -128,4 +126,5 @@ export function EditProfile  (props)  {
     </>)
 }
 export const CEditProfile = connect(state => ({ user: state.auth?.user }))(EditProfile);
+
   

src/components/Routs.js

@@ -36,7 +36,7 @@ export const Main = ({auth}) =>
 const Content = ({children}) => 
   <>
   {store.getState().auth?.token && <Header/>}
-    <section className='d-flex justify-content-around'>
+    <section className='d-flex justify-content-around py-4'>
       <div className={store.getState().auth?.token ? 'col-7' : 'col-12'}>
         {children}
       </div>

src/components/SendForm.js

@@ -3,7 +3,7 @@
 
 
 export function sendForm (url, data) {
-    fetch(`http://player-api/api/${url}`, {
+    return fetch(`http://player-api/api/${url}`, {
         method: 'POST',
         body: data,
         headers: {
@@ -17,7 +17,8 @@ export function sendForm (url, data) {
             console.log(data)
             return data
           } else {
-            //console.log(data.login[0]); 
+            console.log(data);
+            return data 
           }
       })
 } 

src/components/Tracks.js

@@ -9,6 +9,7 @@ import React, {useState} from 'react';
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faPlay, faUserAstronaut} from "@fortawesome/free-solid-svg-icons";
 import { Link } from 'react-router-dom';
+import { Dropdown } from 'react-bootstrap';
 
 
 export let audio = new Audio();
@@ -19,7 +20,8 @@ const ButtonDeleteTrack = (track) => {
     let id = store.getState().plstById?.payload?.id;
     return (
     <>
-        <Button  variant="outline-danger" onClick={() => {console.log(track); setDeletePllstModal(true)}}> Delete</Button>
+        <Dropdown.Item href="#/action-1"  onClick={() => {console.log(track); setDeletePllstModal(true)}}>Delete</Dropdown.Item>
+        {/* <Button  variant="outline-danger" onClick={() => {console.log(track); setDeletePllstModal(true)}}> Delete</Button> */}
             <Modal
                 show={deletePllstModal} onHide={() => setDeletePllstModal(false)}
                 backdrop="static" keyboard={false} track={track}>
@@ -72,8 +74,19 @@ const Track = ({track = {}, trackone={}, playlist={}, plstnow={}},  key) =>
     <td> 
         <Link className="link-light" to='#'> {track.id3.getAlbum}</Link>
     </td>
-    <td>
+    {/* <td>
     {playlist?.user_id === store.getState().auth.user.id? <ButtonDeleteTrack track={track} /> : <button>V</button>}
+    </td> */}
+    <td align={"right"}>
+        <Dropdown align={"end"}>
+            <Dropdown.Toggle variant="outline-light" id="dropdown-basic"></Dropdown.Toggle>
+
+            <Dropdown.Menu variant={"dark"}>
+                {playlist?.user_id === store.getState().auth.user.id ? <ButtonDeleteTrack track={track} /> : <Dropdown.Item href="#/action-3">Add to Playlist</Dropdown.Item>}
+                <Dropdown.Item href="#/action-2">Add to Queue</Dropdown.Item>
+                
+            </Dropdown.Menu>
+        </Dropdown>
     </td>
 </tr>
 
@@ -86,7 +99,7 @@ const TracksAll = ({tracks=[], playlist={}}) =>
             <th scope="col">Track name</th>
             <th scope="col">Artist</th>
             <th scope="col">Album</th>
-            <th scope='col'>{playlist?.user_id === store.getState().auth.user.id? 'X' : 'V'}</th>
+            <th scope='col'>Action</th>
         </tr>
 </thead>
     <tbody>

src/components/createPlaylist.js

@@ -1,30 +1,9 @@
 import React, {useState} from 'react';
 import { sendForm } from './SendForm';
-// import {Link} from 'react-router-dom';
-// import { actionAuthLogin } from '../store/authReducer';
-// import { store } from '../store/store';
-
-
-
-// function sendForm (url, data) {
-//     fetch(`http://player-api/api/${url}`, {
-//         method: 'POST',
-//         body: data,
-//         headers: {
-          
-//           ...(localStorage.authToken ? {"Authorization": "Bearer " + localStorage.authToken} : {})
-          
-//           },
-//       }).then(res => res.json())
-//       .then(data => {
-//           if(data.token) {
-//             console.log(data)
-//             return data
-//           } else {
-//             //console.log(data.login[0]); 
-//           }
-//       })
-// }
+import Modal from 'react-bootstrap/Modal';
+import Button from 'react-bootstrap/Button';
+import { store } from '../store/store';
+import { history } from '../App';
 
 
 export const CreatePlaylist = (props) => {
@@ -38,35 +17,50 @@ export const CreatePlaylist = (props) => {
     const data = new FormData();
 
     data.append("name", name);
-    data.append("description", description);
+    description && data.append("description", description);
     data.append("private", privat);
-    data.append("photo",  image, image.name);
-
-    sendForm('playlists/create', data);
+    image && data.append("photo",  image, image.name);
+    let result = await sendForm('playlists/create', data);
+    console.log(result);
+    
+    history.push(`/playlist/${result.playlist.id}`)
   }
 
   return <>
-    <form onSubmit={PostCreatePlaylist} className="authorization center align-items-center justify-content-center  d-flex">
-
-        <div className="border p-3 col-9">
-        <h4 className="w-100 text-center">Create Playlist</h4>
-            <hr/>
-            <div className="d-flex justify-content-between">
-              <div className="w-auto">
-                  <label  className="form-label">Image</label>
-                  <input type="file" name="picture" accept="image/*" id="file" className='form-control mb-3' onChange={(e) => setImage(e.target.files[0])} multiple={false}/>
-                  <input className="form-check-input me-3" type="checkbox" id="flexCheckIndeterminate" checked={privat} onChange={e => setPrivat(e.target.checked? 1 : 0)}/>
-                  <label className="form-check-label" >Private?</label>    
-              </div>
-              <div className="w-50">
-                  <label  className="form-label">Name</label><br/>
-                  <input type="text" id="username" className='input form-control mb-3' value={name} onChange={e => setName(e.target.value)}/>
-                  <label  className="form-label">Description</label>
-                  <textarea type="password" id="password" className='form-control mb-3' value={description} onChange={e => setDescription(e.target.value)}/>
-              </div>
-            </div>
-            <button type='submit' className="btn btn-outline-danger" onClick={props.onHide} >Create</button>
+  <Modal
+        {...props}
+        size="lg"
+        aria-labelledby="contained-modal-title-vcenter"
+        centered
+      >
+  <Modal.Header closeButton>
+      <Modal.Title id="contained-modal-title-vcenter">Create new Playlist</Modal.Title>
+  </Modal.Header>
+  <Modal.Body >
+    <form onSubmit={PostCreatePlaylist} className="authorization center align-items-center justify-content-center  d-flex" id='CreatePlaylistForm'>
+      <div className="border p-3 col-9">
+      {/* <hr/> */}
+        <div className="d-flex justify-content-between">
+          <div className="w-auto">
+              <label  className="form-label">Image</label>
+              <input type="file" name="picture" accept="image/*" id="file" className='form-control mb-3' onChange={(e) => setImage(e.target.files[0])} multiple={false}/>
+              <input className="form-check-input me-3" type="checkbox" id="flexCheckIndeterminate" checked={privat} onChange={e => setPrivat(e.target.checked? 1 : 0)}/>
+              <label className="form-check-label" >Private?</label>    
+          </div>
+          <div className="w-50">
+              <label  className="form-label">Name</label><br/>
+              <input type="text" id="username" className='input form-control mb-3' value={name} onChange={e => setName(e.target.value)}/>
+              <label  className="form-label">Description</label>
+              <textarea type="password" id="password" className='form-control mb-3' value={description} onChange={e => setDescription(e.target.value)}/>
+          </div>
+        </div>
+            {/* <button type='submit' className="btn btn-outline-danger" onClick={props.onHide} >Create</button> */}
         </div>
     </form>
+    </Modal.Body>
+    <Modal.Footer> 
+      <Button variant="outline-danger" type='submit' form='CreatePlaylistForm' className="btn btn-outline-danger" onClick={props.onHide}>Create</Button> 
+    </Modal.Footer> 
+    </Modal>
   </>
 }

src/components/playing.js

@@ -2,7 +2,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React, {useState, useEffect} from 'react';
 import {faVolumeDown, faVolumeUp, faRandom, faStepBackward, faStopCircle, faStepForward, faPlayCircle, faRepeat} from '@fortawesome/free-solid-svg-icons'
 import { store } from '../store/store';
-import {actionFullGetDuration, actionFullSetTrack, actionFullPlay, actionFullPause, actionFullSetVolume, actionPrevTrack, actionNextTrack, actionSetRepeat} from '../store/playerReducer';
+import {actionPlayerRandom, actionFullPlay, actionFullPause, actionFullSetVolume, actionPrevTrack, actionNextTrack, actionSetRepeat, actionSetRandom} from '../store/playerReducer';
 import {Provider, connect}   from 'react-redux';
 import { audio } from './Tracks';
 import img_album from '../images/default_album.gif'
@@ -69,9 +69,12 @@ return(
 
         <div className="buttons">
             <div className="random-track" 
-            // onClick={randomTrack()}
+             onClick={() => {
+                props.random === 1 ? store.dispatch(actionSetRandom(2)) : store.dispatch(actionSetRandom(1))
+                store.dispatch(actionPlayerRandom());
+             }}
             >
-                <FontAwesomeIcon icon={faRandom} className='fa-2x'/>
+                <FontAwesomeIcon icon={faRandom} className={props.random === 1 ? 'fa-2x' : 'fa-3x'}/>
             </div>
             <div className="prev-track" 
                 onClick={ () => store.dispatch(actionPrevTrack(props.track))}
@@ -114,4 +117,5 @@ return(
     duration: state.player?.duration || '00:00',
     isPlaying: state.player?.isPlaying || false,
     currentTime: state.player?.currentTime || '00:00',
-    repeat: state.player?.repeat || 1}) )(NowPlayingPlayer);
+    repeat: state.player?.repeat || 1,
+    random: state.player?.random || 1}) )(NowPlayingPlayer);

src/components/playlistById.js

@@ -11,15 +11,15 @@ import {faTrash,
     faPlus,
     faAlignCenter,
     faPlay, faHeart} from '@fortawesome/free-solid-svg-icons'
-import { actionFullSetPlaylist, actionFullSetTrack, actionFullSetTrackCount} from '../store/playerReducer';
+import { actionFullSetPlaylist, actionFullSetTrack} from '../store/playerReducer';
 import {connect}   from 'react-redux';
-// import {actionFullSetTrack, actionFullPlay} from '../store/playerReducer';
 import {СAllTracks } from './Tracks'
 import { LoadTrackModal } from './LoadTrackModal';
 import { EditPlaylistModal } from './EditPlaylistModal';
 import { Link } from 'react-router-dom';
 import { sendForm } from './SendForm';
 import { history } from '../App';
+import {ButtonGroup, Dropdown} from "react-bootstrap";
 
 
 let listToPlay;
@@ -110,14 +110,31 @@ export const PlaylistById = ({playlist = {}, tracks={}}) => {
                             <div className='d-flex'>
                                 <div className='row g-2'>
                                     <div className="col">
-                                        <Button className='d-flex align-items-center' variant="outline-light" title='Play' onClick={async() => {
+                                        <Dropdown
+                                                  as={ButtonGroup}
+                                                  align={"end"}>
+                                            <Button className='d-flex align-items-center' variant="outline-light" title='Play' onClick={async() => {
+                                                store.dispatch(actionFullSetPlaylist(playlist.tracks));
+                                                store.dispatch(actionFullSetTrack(store.getState().player?.playlist[0]));
+                                            }}>
+                                                <FontAwesomeIcon className='me-2' icon={faPlay}/>
+                                                Play
+                                            </Button>
+
+                                            <Dropdown.Toggle split variant="outline-light" id="dropdown-split-basic"/>
+
+                                            <Dropdown.Menu variant="dark">
+                                                <Dropdown.Item href="#/action-1">Add to Queue</Dropdown.Item>
+                                            </Dropdown.Menu>
+                                        </Dropdown>
+                                        {/* <Button className='d-flex align-items-center' variant="outline-light" title='Play' onClick={async() => {
                                             store.dispatch(actionFullSetPlaylist(playlist.tracks));
                                             store.dispatch(actionFullSetTrack(store.getState().player?.playlist[0]));
                                             //store.dispatch(actionFullSetTrackCount(0));
                                         }}>
                                             <FontAwesomeIcon className='me-2' icon={faPlay}/>
                                             Play
-                                        </Button>
+                                        </Button> */}
                                     </div>
                                     <div className="col">
                                         <button type="button" className="btn btn-outline-danger">

src/components/userPage.js

@@ -2,77 +2,58 @@ import React, {useEffect} from 'react';
 import {Link} from 'react-router-dom';
 import {connect}   from 'react-redux';
 import { actionUsersPlaylists } from '../store/promiseReducer';
-import { actionFullSetPlaylist } from '../store/playerReducer';
 import { store } from '../store/store';
 import image from '../images/card.png';
-import Modal from 'react-bootstrap/Modal';
-// import Button from 'react-bootstrap/Button';
-import {CreatePlaylist} from './createPlaylist'
-
+import {CreatePlaylist} from './createPlaylist';
+import { history } from '../App';
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {
+    faAlignCenter,
+    faCompactDisc,
+    faHeadphonesSimple, faPlay,
+    faPlus,
+} from "@fortawesome/free-solid-svg-icons";
+import Button from "react-bootstrap/Button";
 
 
 const Playlist = ({playlist = {}}) => 
-  <div className="col-sm-3 p-1">
-    <Link className="card" to= {`/playlist/${playlist.id}`} 
-    // onClick={() => store.dispatch(actionFullSetPlaylist({playlist}) )}
-    >
-      <img src={playlist.photo || image} className="card-img-top" alt="..."  height={'150px'}/>
-      <div className="card-body">
-        <h5 className="card-title"> {playlist.name}</h5>
-        <p className="card-text">{playlist.description? playlist.description :  '.' }</p>
+  <div className="">
+      <div className="me-4 mb-4 p-4 playlist-img-box rounded-5 position-relative"
+           style={{backgroundImage: `url(${playlist.photo || image})`, backgroundSize: "cover", backgroundRepeat: "no-repeat", backgroundPosition: "center", width:250, height:250}}
+      >
+          <div className="playlist-grey-box"></div>
+          <Link className="d-flex border-0 link-light position-relative text-decoration-none h4 text-wrap"
+                to={`/playlist/${playlist.id}`}>
+              {playlist.name}
+          </Link>
+          <Button variant="outline-light" className='rounded-5 position-absolute playlist-play-box'  title='Play'>
+              <FontAwesomeIcon className='' icon={faPlay}/>
+          </Button>
       </div>
-    </Link>
   </div>
   
-
-
-export const UsersPlaylistsAll = ({playlists= []}) => {
-  const [modalShow, setModalShow] = React.useState(false);
-  return (
-<>
-
-  <div className='RootCategories row'>
-    <div className="col-sm-3 border border-white d-flex align-items-center justify-content-center" onClick={() => setModalShow(true)}>
-      <h3>Create new Playlist</h3>
-    </div>
-
-      <MyVerticallyCenteredModal
-        show={modalShow}
-        onHide={() => setModalShow(false)}
-      />
-        
-  
-    {playlists.map((playlist, i) => <Playlist key={i} playlist={playlist}/>)}
-  </div> 
-</>)
-}
-
-const СUsersPlaylists = connect(state => ({playlists: state.promise.usersPlaylists?.payload?.playlists|| []}), )(UsersPlaylistsAll);
-                                              
-
-function MyVerticallyCenteredModal(props) {
+  export const UsersPlaylistsAll = ({playlists= []}) => {
+    const [modalShow, setModalShow] = React.useState(false);
     return (
-      <Modal
-        {...props}
-        size="lg"
-        aria-labelledby="contained-modal-title-vcenter"
-        centered
-      >
-         {/* <Modal.Header closeButton> */}
-          {/* <Modal.Title id="contained-modal-title-vcenter">
-            Create new Playlist
-          </Modal.Title> */}
-        {/*</Modal.Header> */}
-        <Modal.Body >
-          <CreatePlaylist props={props}/>
-        </Modal.Body>
-        {/* <Modal.Footer> 
-          <Button variant="outline-danger" onClick={props.onHide}>Create</Button> 
-         </Modal.Footer> */}
-      </Modal>
-    );
+  <>
+      <div className="d-flex justify-content-between align-items-center py-3">
+          <h3 className="text-uppercase"> <FontAwesomeIcon icon={faHeadphonesSimple} className="me-2"/>My playlists</h3>
+          <Button  variant="outline-success" title='Delete playlist' onClick={() => setModalShow(true)}>
+              <FontAwesomeIcon icon={faPlus} />
+          </Button>
+          <CreatePlaylist
+              show={modalShow}
+              onHide={() => setModalShow(false)}
+          />
+      </div>
+    <div className='RootCategories d-flex justify-content-start flex-wrap'>
+      {playlists.map((playlist, i) => <Playlist key={i} playlist={playlist}/>)}
+    </div> 
+  </>)
   }
 
+const СUsersPlaylists = connect(state => ({playlists: state.promise.usersPlaylists?.payload?.playlists|| []}))(UsersPlaylistsAll);
+                                              
 
 export const UserPage = () => {
 let id = store.getState().auth?.user?.id;
@@ -86,17 +67,25 @@ let id = store.getState().auth?.user?.id;
 
     return(<>
     
-    <div className='d-flex container align-items-center justify-content-center'>
-        <div className=''>
-            <img className='m-4' alt='...' src={store.getState().auth?.user?.avatar || image} width='150px'/>
-        </div>
-        <div className=''>
-            <h3>{store.getState().auth?.user?.name}</h3>
-            <Link to={'/editprofile'} >Edit Profile</Link>
-        </div>
-    </div>
+    <div className='d-flex  w-100'>
+            <div className='me-4 playlist-img-box rounded-5' style={{backgroundImage: `url(${store.getState().auth?.user?.avatar || image})`, backgroundSize: "cover", backgroundRepeat: "no-repeat", backgroundPosition: "center"}}>
+            </div>
+            <div className='w-100'>
+                <div className="d-flex flex-column justify-content-between h-100">
+                    <div className="w-100 row">
+                            <p className='h4 m-0'>{store.getState().auth?.user?.name}</p>
 
-    <h3>My playlists:</h3>
+                            <Link to={'/editprofile'} className="mb-3" >Edit Profile</Link>
+
+                            <p className='text-white-50 mb-2'><FontAwesomeIcon className='me-2' icon={faHeadphonesSimple} /> 100 Tracks</p>
+                            <p className='text-white-50 mb-2'><FontAwesomeIcon className='me-2' icon={faCompactDisc} /> 8 PLaylists</p>
+                            <p className='text-white-50 mb-2'><FontAwesomeIcon className='me-2' icon={faAlignCenter} />
+                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid amet animi aspernatur facere iste nisi omnis optio, vel vitae? Accusantium assumenda autem cumque ducimus eum ipsa, maiores pariatur repudiandae?
+                            </p>
+                    </div>
+                </div>
+            </div>
+        </div>
     <СUsersPlaylists/>
 
     </>)

src/index.css

@@ -28,7 +28,23 @@ code {
 .rounded-5 {
   border-radius: 20px!important;
 }
-
+.playlist-img-box{
+  min-height: 250px;
+  min-width: 250px;
+  overflow: hidden;
+}
+.playlist-play-box{
+  bottom: 15px;
+  right: 15px;
+}
+.playlist-grey-box{
+  background: rgba(0, 0, 0, 0.54);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%
+}
 .player{
   padding-top: 20px;
 }

src/store/playerReducer.js

@@ -1,7 +1,7 @@
 import { store } from '../store/store';
 import { audio } from '../components/Tracks';
 
-export const playerReducer = function(state = {}, {type, duration, track, playlist, playlistIndex, currentTime, volume,  repeat=1}) {
+export const playerReducer = function(state = {}, {type, duration, track, playlist, playlistIndex, currentTime, volume,  repeat=1, random=1}) {
     if (!state) {
         return {};
     }
@@ -50,6 +50,11 @@ export const playerReducer = function(state = {}, {type, duration, track, playli
             ...state,
             repeat
         }
+    } if (type === 'SET_RANDOM') {
+        return {
+            ...state,
+            random
+        }
     }
     return state;
 }
@@ -149,4 +154,27 @@ export const actionNextTrack = (track) =>
         }
     }
 
-export const actionSetRepeat = (repeat) => ({ type: 'SET_REPEAT', repeat})
+export const actionSetRepeat = (repeat) => ({ type: 'SET_REPEAT', repeat});
+export const actionSetRandom = (random) => ({ type: 'SET_RANDOM', random});
+
+
+export const actionPlayerRandom = () =>
+    async (dispatch, getState) => {
+        if (getState().player?.playlist) {
+            let newPlaylist = [...getState().player.playlist];
+            let currentIndex = newPlaylist.length
+            while (currentIndex !== 0) {
+                let randomIndex = Math.floor(Math.random() * currentIndex);
+                currentIndex--;
+                [newPlaylist[currentIndex], newPlaylist[randomIndex]] = [newPlaylist[randomIndex], newPlaylist[currentIndex]];
+            }
+            const currentTrackIndex = newPlaylist.indexOf(getState().player?.track);
+            const currentTrack = newPlaylist.splice(currentTrackIndex, 1)
+            newPlaylist = [currentTrack[0], ...newPlaylist]
+            dispatch(actionSetPlaylist([
+                ...newPlaylist
+            ]))
+            
+        }
+        
+    }

src/store/promiseReducer.js

@@ -74,16 +74,4 @@ export const actionPlaylistById = (_id) =>
     {"login": login, "password": password});
 
     store.dispatch(actionAuthLogin(token));
-};
-
-
-// export const actionCreateOrder = () => async (dispatch) => {
-//     let orderGoods = [];
-//     Object.entries(store.getState().cart).map(([_id,{count}])=>orderGoods.push({"count":count,"good":{_id:_id}}))
-//     actionPromise('createOrder',gql(`mutation newOrder($order:OrderInput) {
-//             OrderUpsert(order:$order) {
-//               _id total
-//             }
-//           }`,{order:{orderGoods}}));
-//          await store.dispatch(actionCartClean());
-//     }
+};