123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172 |
- import {useCallback} from "react";
- import {store} from "../reducers";
- import {useDropzone} from "react-dropzone";
- import {connect} from "react-redux";
- import {actionUploadTrack, actionFindMyTracks, backURL} from "../actions";
- import {CPreloaded} from "./preloader";
- const defaultTrack = {
- "_id": "61dc5a42e9472933a6785f18",
- "url": "track/fe15599bbb13c96d70dd5a1591a0b158",
- "originalFileName": "cart.png",
- "owner": {
- "login": "mfdok43"
- }
- }
- export const PageMain = () =>
- <div>
- <h1>Главная страница</h1>
- <CTrackDropZone />
- </div>
- function TrackDropZone({ onLoad }) {
- const onDrop = useCallback((acceptedFiles) => {
- // Do something with the files
- onLoad(acceptedFiles[0]);
- }, []);
- const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
- return (
- <div {...getRootProps()}>
- <input {...getInputProps()} />
- {isDragActive ? (
- <p>Перетащите файл сюда ...</p>
- ) : (
- <p>Для добавления трэка перетащите файлы в плейлист</p>
- )}
- {/*<CPreloaded>*/}
- <CMyTracks />
- {/*</CPreloaded>*/}
- </div>
- );
- }
- const CTrackDropZone = connect (null, {onLoad: actionUploadTrack}) (TrackDropZone)
- const Track = ({track:{url,originalFileName}={}}) => {
- return (
- <div className='Tracks'>
- <audio controls src={backURL+'/'+url}></audio>
- <strong>{originalFileName}</strong></div>
- )
- }
- const MyTracks = ({tracks=defaultTrack}) => {
- return(
- <div>
- {console.log(tracks,'kak dela')}
- {tracks.map(track => <Track track={track}/> )}
- </div>
- )
- }
- const CMyTracks = connect(state => ({tracks: state.promise.findMyTracks1?.payload || []}))(MyTracks)
- store.dispatch(actionFindMyTracks())
|