123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126 |
- import './App.scss';
- import * as action from './actions'
- import * as reducer from './reducers'
- import * as Logcomp from './components/Login'
- import * as Sidebar from './components/Sidebar'
- import * as Page from './components/Page'
- import { PlayerbarConnect } from './components/Playerbar'
- import thunk from 'redux-thunk';
- import { createStore, combineReducers, applyMiddleware } from 'redux';
- import { Provider } from 'react-redux';
- import { Route, Router, Switch } from 'react-router-dom';
- import createHistory from 'history/createBrowserHistory'
- export function jwtDecode(token) {
- try {
- let decoded = token.split('.')
- decoded = decoded[1]
- decoded = atob(decoded)
- decoded = JSON.parse(decoded)
- return decoded
- }
- catch (e) {
- return;
- }
- }
- export const getGQL = url =>
- (query, variables = {}) =>
- fetch(url, {
- method: 'POST',
- headers: {
- "Content-Type": "application/json",
- ...(localStorage.authToken ? { "Authorization": "Bearer " + localStorage.authToken } : {})
- },
- body: JSON.stringify({ query, variables })
- })
- .then(res => res.json())
- .then(data => {
- if (data.errors && !data.data) throw new Error(JSON.stringify(data.errors))
- return data.data[Object.keys(data.data)[0]]
- })
- export const history = createHistory()
- export const backendURL = "http://player.asmer.fs.a-level.com.ua"
- export const gql = getGQL(backendURL + '/graphql')
- export const store = createStore(
- combineReducers(
- {
- promise: reducer.promiseReducer,
- auth: reducer.authReducer,
- player: reducer.playerReducer
- //local: localStoreReducer(promiseReducer, 'locale')
- }
- ), applyMiddleware(thunk)
- )
- store.subscribe(() => console.log(store.getState()))
- //works only once on start of page
- if (store.getState().auth?.token) {
- history.push('/player')
- store.dispatch(action.actionGetUserData())
- store.dispatch(action.actionGetUserPlaylists())
- } else {
- history.push('/login')
- }
- const GreetPg = () =>
- <>
- <h2>Welcome to online Player!</h2>
- <div className='startpage__ulwrapper'>
- <ul>
- <li>
- <strong className='highlightYellow'>Click "MY UPLOADS" - </strong><small>To see all of your uploaded tracks.</small>
- </li>
- <li>
- <strong className='highlightGreen'>Click "NEW PLAYLIST" - </strong><small>To create new playlist.</small>
- </li>
- <li>
- <strong>Drag 'n' drop track to playlist area - </strong><small>To upload the track and add it to current playlist.</small>
- </li>
- <li>
- <strong>Drag a track within playlist - </strong><small>To chage the order of playlist tracks.</small>
- </li>
- </ul>
- </div>
- </>
- const Player = () =>
- <div>
- <div className='page'>
- <aside className='sidebar' >
- <Sidebar.LogoutBtnConnect />
- <Sidebar.ProfileWindowDropzoneConnect />
- <Sidebar.UserTracksBtnConnect />
- <Sidebar.PlaylistAddConnect />
- <Sidebar.PlaylistsConnect />
- </aside>
- <main className='page__window'>
- <Switch>
- <Route path="/player/playlist/:_id" component={Page.PlaylistPageConnect} exact />
- <Route path="/player/tracks/:_id" component={Page.UserTracksPageConnect} exact />
- <GreetPg />
- </Switch>
- </main>
- </div>
- <PlayerbarConnect />
- </div>
- function App() {
- return (
- <Router history={history}>
- <Provider store={store}>
- <div className="App">
- <Switch>
- <Route path="/login" component={Logcomp.LoginFormConnect} exact />
- <Route path="/registration" component={Logcomp.RegisterFormConnect} exact />
- <Route path="/player" component={Player} />
- </Switch>
- </div>
- </Provider>
- </Router>
- );
- }
- export default App;
|