Last active
August 27, 2021 18:04
-
-
Save lukejoliat/5b7f5d5fa5bea98c6a521420531ff161 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import './components/error/error' | |
import content404 from './components/404/404.html' | |
import DATA_SERVICE from './utils/data' | |
const ds = new DATA_SERVICE() | |
// get SPA containing element | |
const $el = document.getElementById('app') | |
// define routes | |
const home = async () => { | |
await import('./components/recipe/recipe') | |
await import('./components/recipe-list/recipe-list') | |
await import('./components/modal/modal.js') | |
$el.innerHTML = `<recipe-list></recipe-list>` | |
} | |
const create = async () => { | |
await import('./components/create-recipe/create-recipe') | |
$el.innerHTML = `<create-recipe></create-recipe>` | |
} | |
const edit = async () => { | |
await import('./components/edit-recipe/edit-recipe') | |
$el.innerHTML = `<edit-recipe></edit-recipe>` | |
} | |
const error404 = async () => { | |
$el.innerHTML = content404 | |
} | |
// match routes with paths | |
// grab recipe by id param for edit route | |
const routes = { | |
'/': home, | |
'/create': create, | |
'/error': error404, | |
'/edit': async function (params) { | |
const id = params.get('id') | |
const recipe = await ds.getRecipe(id) | |
await edit() | |
$el.querySelector('edit-recipe').recipe = recipe | |
} | |
} | |
// on pop state get params from url and pass to route | |
// if no such route, error | |
window.onpopstate = async () => { | |
const url = new URL( | |
window.location.pathname + window.location.search, | |
window.location.origin | |
) | |
if (routes[window.location.pathname]) { | |
await routes[window.location.pathname](url.searchParams) | |
} else routes['/error']() | |
} | |
// on pop state get params from url and pass to route | |
// if no such route, error | |
// add route to browser history | |
let onNavItemClick = async pathName => { | |
const url = new URL(pathName, window.location.origin) | |
const params = url.searchParams | |
if (routes[url.pathname]) { | |
window.history.pushState({}, pathName, window.location.origin + pathName) | |
await routes[url.pathname](params) | |
} else { | |
window.history.pushState({}, '404', window.location.origin + '/404') | |
routes['/error']() | |
} | |
} | |
// on page load/reload, set appropriate route | |
;(async () => { | |
const url = new URL( | |
window.location.pathname + window.location.search, | |
window.location.origin | |
) | |
if (routes[window.location.pathname]) { | |
await routes[window.location.pathname](url.searchParams) | |
} else routes['/error']() | |
})() | |
// export routes and nav click method | |
const router = { | |
onNavItemClick, | |
routes | |
} | |
export { router } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment