Skip to content

Commit

Permalink
routes
Browse files Browse the repository at this point in the history
  • Loading branch information
@teticio
teticio committed Sep 28, 2021
1 parent dd95665 commit 5520171
Show file tree
Hide file tree
Showing 6 changed files with 138 additions and 243 deletions.
128 changes: 19 additions & 109 deletions src/components/App.js
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,12 @@
import React, { useState, useEffect } from 'react';
import { getHashParams, ReactJSOnly, Routes, Route, useNavigate, Container } from './Platform';
import React, { useState, useEffect, createElement } from 'react';
import { Routes, Route, useNavigate } from 'react-router-dom';
import { getHashParams, Container } from './Platform';
import { usePersistedState } from './Lib';
import About from './About';
import Banner from './Banner';
import Footer from './Footer';
import Spotify from './Spotify';
import Settings from './Settings';
import NotFound from './NotFound';
import TopPlaylists from './TopPlaylists';
import ShowPlaylist from './ShowPlaylist';
import ErrorBoundary from './ErrorBoundary';
import PrivacyPolicy from './PrivacyPolicy';
import CreatePlaylist from './CreatePlaylist';
import LatestPlaylists from './LatestPlaylists';
import SearchPlaylists from './SearchPlaylists';
import MostUploadedPlaylists from './MostUploadedPlaylists';
import { getRoutes } from './Menu';

try {
require('./App.css');
Expand All @@ -30,6 +22,14 @@ export default function App() {
const [creativity, setCreativity] = usePersistedState('creativity', 0.5);
const [noise, setNoise] = usePersistedState('noise', 0);
const navigate = useNavigate();
const routes = getRoutes(
waypoints, setWaypoints,
size, setSize,
creativity, setCreativity,
noise, setNoise,
playlist, setPlaylist,
spotify, navigate
);

useEffect(() => {
if ('route' in hashParams) {
Expand All @@ -51,106 +51,16 @@ export default function App() {
}
}} />
<Container className='App'>
<Routes>
<Route
path='/'
element={
<CreatePlaylist
waypoints={waypoints}
size={size}
creativity={creativity}
noise={noise}
spotify={spotify}
onCreate={(playlist, waypoints) => {
setWaypoints(waypoints);
setPlaylist(playlist);
navigate('/playlist');
}}
onSettings={waypoints => {
setWaypoints(waypoints);
navigate('/settings');
}}
/>
}
/>
<Route
path='/playlist'
element={
<ShowPlaylist style={{ padding: 15 }}
playlist={playlist}
onClose={() => navigate('/')}
spotify={spotify}
userPlaylist={true}
/>
}
/>
<Route
path='/settings'
element={
<Settings
size={size}
creativity={creativity}
noise={noise}
onChange={(size, creativity, noise) => {
setSize(size !== '' ? size : 0);
setCreativity(creativity);
setNoise(noise);
}}
onClose={() => navigate('/')}
/>
}
/>
<Route
path='/latest'
element={
<LatestPlaylists spotify={spotify} />
}
/>
<Route
path='/top'
element={
<TopPlaylists spotify={spotify} />
}
/>
<Route
path='/most_uploaded'
element={
<MostUploadedPlaylists spotify={spotify} />
}
/>
<Route
path='/search'
element={
<SearchPlaylists spotify={spotify} />
}
/>
<Route
path='/about'
element={
<About />
}
/>
<Route
path='/privacy_policy'
element={
<PrivacyPolicy />
}
/>
<Route
path='/privacy_policy.html'
element={
<PrivacyPolicy />
}
/>
<Routes initialRouteName='/'>
{Object.keys(routes).map(route => (
<Route
path='*'
element={
<NotFound />
}
path={route}
element={createElement(routes[route].element, routes[route])}
/>
</Routes>
))}
</Routes>
</Container>
<ReactJSOnly><Footer /></ReactJSOnly>
<Footer />
</ErrorBoundary>
);
}
106 changes: 15 additions & 91 deletions src/components/App.native.js
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,12 @@
import React, { useState, createElement, useEffect } from 'react';
import { useNavigation } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { getHashParams } from './Platform';
import { ScrollView } from './Platform';
import { getHashParams, ScrollView } from './Platform';
import { usePersistedState } from './Lib';
import About from './About';
import { getRoutes } from './Menu';
import Banner from './Banner';
import Spotify from './Spotify';
import Settings from './Settings';
import NotFound from './NotFound';
import TopPlaylists from './TopPlaylists';
import ShowPlaylist from './ShowPlaylist';
import ErrorBoundary from './ErrorBoundary';
import PrivacyPolicy from './PrivacyPolicy';
import CreatePlaylist from './CreatePlaylist';
import LatestPlaylists from './LatestPlaylists';
import SearchPlaylists from './SearchPlaylists';
import MostUploadedPlaylists from './MostUploadedPlaylists';

try {
require('./App.css');
} catch (e) { }

const Stack = createStackNavigator();

Expand All @@ -47,79 +33,19 @@ export default function App(props) {
const [creativity, setCreativity] = usePersistedState('creativity', 0.5);
const [noise, setNoise] = usePersistedState('noise', 0);
const [route, navigate] = useState('/');

const routeParams = {
'/': {
element: CreatePlaylist,
waypoints: waypoints,
size: size,
creativity: creativity,
noise: noise,
spotify: spotify,
onCreate: (playlist, waypoints) => {
setWaypoints(waypoints);
setPlaylist(playlist);
navigate('/playlist');
},
onSettings: waypoints => {
setWaypoints(waypoints);
navigate('/settings');
}
},
'/playlist': {
element: ShowPlaylist,
playlist: playlist,
onClose: () => navigate('/'),
spotify: spotify,
userPlaylist: true,
style: { padding: 15 }
},
'/settings': {
element: Settings,
size: size,
creativity: creativity,
noise: noise,
onChange: (size, creativity, noise) => {
setSize(size !== '' ? size : 0);
setCreativity(creativity);
setNoise(noise);
},
onClose: () => navigate('/')
},
'/latest': {
element: LatestPlaylists,
spotify: spotify
},
'/top': {
element: TopPlaylists,
spotify: spotify
},
'/most_uploaded': {
element: MostUploadedPlaylists,
spotify: spotify
},
'/search': {
element: SearchPlaylists,
spotify: spotify
},
'/about': {
element: About
},
'/privacy_policy': {
element: PrivacyPolicy
},
'/privacy_policy.html': {
element: PrivacyPolicy
},
'*': {
element: NotFound
}
};

const _navigate = useNavigation().navigate;
const routes = getRoutes(
waypoints, setWaypoints,
size, setSize,
creativity, setCreativity,
noise, setNoise,
playlist, setPlaylist,
spotify, navigate
);


useEffect(() => {
_navigate(route, routeParams[route]);
_navigate(route, routes[route]);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [route]);

Expand All @@ -130,23 +56,21 @@ export default function App(props) {
} else if (route === '/logout') {
spotify.logOut();
setLoggedIn(false);
} else if (route in routeParams) {
navigate(route);
} else {
navigate('*');
navigate(route);
}
}

return (
<ErrorBoundary>
<Banner loggedIn={loggedIn} onSelect={handleSelect} />
<Stack.Navigator initialRouteName='/'>
{Object.keys(routeParams).map((route) => (
{Object.keys(routes).map(route => (
<Stack.Screen
options={{ headerShown: false }}
name={route}
component={Screen}
initialParams={routeParams[route]}
initialParams={routes[route]}
/>
))}
</Stack.Navigator>
Expand Down
87 changes: 87 additions & 0 deletions src/components/Menu.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
import About from './About';
import Settings from './Settings';
import NotFound from './NotFound';
import TopPlaylists from './TopPlaylists';
import ShowPlaylist from './ShowPlaylist';
import PrivacyPolicy from './PrivacyPolicy';
import CreatePlaylist from './CreatePlaylist';
import LatestPlaylists from './LatestPlaylists';
import SearchPlaylists from './SearchPlaylists';
import MostUploadedPlaylists from './MostUploadedPlaylists';

export const getRoutes = (
waypoints, setWaypoints,
size, setSize,
creativity, setCreativity,
noise, setNoise,
playlist, setPlaylist,
spotify, navigate
) => {
return {
'/': {
element: CreatePlaylist,
waypoints: waypoints,
size: size,
creativity: creativity,
noise: noise,
spotify: spotify,
onCreate: (playlist, waypoints) => {
setWaypoints(waypoints);
setPlaylist(playlist);
navigate('/playlist');
},
onSettings: waypoints => {
setWaypoints(waypoints);
navigate('/settings');
}
},
'/playlist': {
element: ShowPlaylist,
playlist: playlist,
onClose: () => navigate('/'),
spotify: spotify,
userPlaylist: true,
style: { padding: 15 }
},
'/settings': {
element: Settings,
size: size,
creativity: creativity,
noise: noise,
onChange: (size, creativity, noise) => {
setSize(size !== '' ? size : 0);
setCreativity(creativity);
setNoise(noise);
},
onClose: () => navigate('/')
},
'/latest': {
element: LatestPlaylists,
spotify: spotify
},
'/top': {
element: TopPlaylists,
spotify: spotify
},
'/most_uploaded': {
element: MostUploadedPlaylists,
spotify: spotify
},
'/search': {
element: SearchPlaylists,
spotify: spotify
},
'/about': {
element: About
},
'/privacy_policy': {
element: PrivacyPolicy
},
'/privacy_policy.html': {
element: PrivacyPolicy
},
'*': {
element: NotFound
}
};
}
Loading

0 comments on commit 5520171

Please sign in to comment.