Skip to content

Commit

Permalink
refactor router into an object
Browse files Browse the repository at this point in the history
  • Loading branch information
h.u.g.u.rp committed Oct 17, 2023
1 parent 427daf7 commit ce425e6
Show file tree
Hide file tree
Showing 2 changed files with 57 additions and 59 deletions.
94 changes: 44 additions & 50 deletions src/components/r4-app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,8 +166,15 @@ export default class R4App extends LitElement {
- one for when only one channel should be displayed in the UI
*/
renderRouter() {
const routerData = {store: this.store, config: this.config}
return this.singleChannel ? renderRouterSingleChannel(routerData) : renderRouterCMS(routerData)
if (this.singleChannel) {
return html`
<r4-router name="channel" .store=${this.store} .config=${this.config} .routes=${ROUTES_SINGLE}></r4-router>
`
} else {
return html`
<r4-router name="application" .store=${this.store} .config=${this.config} .routes=${ROUTES_CMS}> </r4-router>
`
}
}

renderMenu() {
Expand Down Expand Up @@ -258,51 +265,38 @@ export default class R4App extends LitElement {
}
}

function renderRouterSingleChannel({store, config}) {
return html`
<r4-router name="channel" .store=${store} .config=${config}>
<r4-routes>
<r4-route path="/sign/:method" page="sign"></r4-route>
<r4-route path="/" page="channel"></r4-route>
<r4-route path="/player" page="channel-player"></r4-route>
<r4-route path="/tracks" page="channel-tracks"></r4-route>
<r4-route path="/tracks/:track_id" page="channel-track"></r4-route>
<r4-route path="/followers" page="channel-followers"></r4-route>
<r4-route path="/following" page="channel-followings"></r4-route>
<r4-route path="/add" page="add"></r4-route>
<r4-route path="/settings" page="settings"></r4-route>
</r4-routes>
</r4-router>
`
}

function renderRouterCMS({store, config}) {
return html`
<r4-router name="application" .store=${store} .config=${config}>
<r4-routes>
<r4-route path="/" page="home"></r4-route>
<r4-route path="/explore" page="explore"></r4-route>
<r4-route path="/sign" page="sign"></r4-route>
<r4-route path="/sign/:method" page="sign"></r4-route>
<r4-route path="/add" page="add"></r4-route>
<r4-route path="/new" page="new"></r4-route>
<r4-route path="/settings" page="settings"></r4-route>
<r4-route path="/map" page="map"></r4-route>
<r4-route path="/search" page="search"></r4-route>
<r4-route path="/about" page="about"></r4-route>
<r4-route path="/playground/:color" page="playground"></r4-route>
<r4-route path="/:slug" page="channel"></r4-route>
<r4-route path="/:slug/feed" page="channel-feed"></r4-route>
<r4-route path="/:slug/update" page="channel-update"></r4-route>
<r4-route path="/:slug/delete" page="channel-delete"></r4-route>
<r4-route path="/:slug/player" page="channel-player"></r4-route>
<r4-route path="/:slug/tracks" page="channel-tracks"></r4-route>
<r4-route path="/:slug/tracks/:track_id" page="channel-track"></r4-route>
<r4-route path="/:slug/tracks/:track_id/update" page="track-update"></r4-route>
<r4-route path="/:slug/tracks/:track_id/delete" page="track-delete"></r4-route>
<r4-route path="/:slug/followers" page="channel-followers"></r4-route>
<r4-route path="/:slug/following" page="channel-followings"></r4-route>
</r4-routes>
</r4-router>
`
}
const ROUTES_CMS = [
{path: '/', page: 'home'},
{path: '/explore', page: 'explore'},
{path: '/sign', page: 'sign'},
{path: '/sign/:method', page: 'sign'},
{path: '/add', page: 'add'},
{path: '/new', page: 'new'},
{path: '/settings', page: 'settings'},
{path: '/map', page: 'map'},
{path: '/search', page: 'search'},
{path: '/about', page: 'about'},
{path: '/playground/:color', page: 'playground'},
{path: '/:slug', page: 'channel'},
{path: '/:slug/feed', page: 'channel-feed'},
{path: '/:slug/update', page: 'channel-update'},
{path: '/:slug/delete', page: 'channel-delete'},
{path: '/:slug/player', page: 'channel-player'},
{path: '/:slug/tracks', page: 'channel-tracks'},
{path: '/:slug/tracks/:track_id', page: 'channel-track'},
{path: '/:slug/tracks/:track_id/update', page: 'track-update'},
{path: '/:slug/tracks/:track_id/delete', page: 'track-delete'},
{path: '/:slug/followers', page: 'channel-followers'},
{path: '/:slug/following', page: 'channel-followings'},
]
const ROUTES_SINGLE = [
{path: '/sign/:method', page: 'sign'},
{path: '/', page: 'channel'},
{path: '/player', page: 'channel-player'},
{path: '/tracks', page: 'channel-tracks'},
{path: '/tracks/:track_id', page: 'channel-track'},
{path: '/followers', page: 'channel-followers'},
{path: '/following', page: 'channel-followings'},
{path: '/add', page: 'add'},
{path: '/settings', page: 'settings'},
]
22 changes: 13 additions & 9 deletions src/components/r4-router.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export default class R4Router extends LitElement {
static properties = {
store: {type: Object, state: true},
config: {type: Object, state: true},
routes: {type: Array, state: true},
}

/* used to setup the base of the url handled by page.js router */
Expand Down Expand Up @@ -53,13 +54,15 @@ export default class R4Router extends LitElement {
}

setupRoutes() {
const $routes = this.querySelectorAll('r4-route')
$routes.forEach(this.setupRoute.bind(this))
if (this.routes?.length) {
this.routes.forEach(this.setupRoute.bind(this))
}
}

setupRoute($route) {
page($route.getAttribute('path'), this.parseContext.bind(this), (ctx) => this.renderRoute($route, ctx))
page.exit($route.getAttribute('path'), (ctx, next) => this.unrenderRoute($route, ctx, next))
setupRoute(route) {
const {path} = route
page(path, this.parseContext.bind(this), (ctx) => this.renderRoute(route, ctx))
page.exit(path, (ctx, next) => this.unrenderRoute(route, ctx, next))
}

parseContext(ctx, next) {
Expand All @@ -74,12 +77,13 @@ export default class R4Router extends LitElement {
}

// Called by page.js when a route is matched.
renderRoute($route, ctx) {
renderRoute(route, ctx) {
const {page} = route
/* console.info('render route') */
this.params = ctx.params
this.searchParams = ctx.searchParams
/* console.info('ctx.params', ctx.searchParams) */
this.componentName = `r4-page-${$route.getAttribute('page')}`
this.componentName = `r4-page-${page}`
// Schedules a new render.
this.requestUpdate()
}
Expand All @@ -92,8 +96,8 @@ export default class R4Router extends LitElement {
return $pageDom
}

unrenderRoute($route, ctx, next) {
/* console.info('unrender route') */
unrenderRoute(route, ctx, next) {
/* console.info('unrender route', route, ctx) */
next()
}

Expand Down

0 comments on commit ce425e6

Please sign in to comment.