router

router.js

import createRouteMatcher from 'feather-route-matcher'

const createRouter = routeConfig => {
  const prefix = window.location.protocol + '//' + window.location.host

  const getPath = () => {
    return decodeURI(window.location.href).substring(prefix.length) || '/'
  }

  const routeMatcher = createRouteMatcher(routeConfig)
  const initialRoute = routeMatcher(getPath())

  const pathLookup = Object.entries(routeConfig).reduce(
    (result, [path, route]) => {
      return Object.assign(result, { [route.value]: path })
    },
    {}
  )

  const toPath = (id, params = {}) => {
    const path = pathLookup[id]

    return [...path.matchAll(/(:[^/]*)/g)]
      .map(a => a[1])
      .reduce(
        (result, pathParam) => {
          return result.replace(new RegExp(pathParam), encodeURI(params[pathParam.substring(1)]))
        },
        path
      )
  }

  const getRoute = (id, params) => {
    return routeMatcher(toPath(id, params))
  }

  const getHref = (id, params) => {
    const url = toPath(id, params)

    return {
      href: url,
      onclick: evt => {
        evt.preventDefault()
        window.history.pushState({}, '', url)
        window.onpopstate()
      }
    }
  }

  const start = ({ navigateTo }) => {
    window.onpopstate = () => {
      navigateTo(routeMatcher(getPath()))
    }
  }

  const locationBarSync = route => {
    const path = route.url

    if (getPath() !== path) {
      window.history.pushState({}, '', prefix + path)
    }
  }

  return { initialRoute, routeMatcher, getHref, start, toPath, locationBarSync, getRoute }
}

export const Route = {
  Home: 'Home',
  Login: 'Login',
  Register: 'Register',
  Dashboard: 'Dashboard',
  NotFound: 'NotFound'
}

const routeConfig = {
  '/': Route.Home,
  '/login': Route.Login,
  '/register': Route.Register,
  '/dashboard': Route.Dashboard,
  '/:404': Route.NotFound
}

export const router = createRouter(routeConfig)