@navinc/base-react-components/src/guarded-route.story.js

Nav's Pattern Library

import React from 'react'
import { MemoryRouter, Switch } from 'react-router-dom'
import styled from 'styled-components'
import { createGuardedRoute, GuardedRoute } from './guarded-route.js'
import readme from './guarded-route.readme.md'
import LoadingView from './loading-view.js'

const RouteWrapper = styled.div`
  border: 1px solid black;
  padding: 20px;
  margin-top: 20px;
`

export default {
  title: 'Router/GuardedRoute',
  component: GuardedRoute,
  parameters: {
    readme: { content: readme },
  },
}

export const Basic = (args) => {
  const MyGuardedRoute = createGuardedRoute({
    LoadingComponent: LoadingView,
    FailureComponent: () => <div>ERROR: You are not allowed to see this route.</div>,
    ...args,
  })

  return (
    <MemoryRouter initialEntries={['/']}>
      <RouteWrapper>
        <Switch>
          <MyGuardedRoute path="/" component={() => <div>You are viewing a protected route.</div>} />
        </Switch>
      </RouteWrapper>
    </MemoryRouter>
  )
}

Basic.args = {
  condition: true,
  isConditionLoading: false,
}