Usage

LoginForm and getClient

import * as React from 'react'
import { ApolloProvider } from '@apollo/client'

import { BrowserRouter, Switch, Route } from 'react-router-dom'
import { Home } from './Home'
import { LoginForm, getClient } from 'rice-instructor'

const submitCredential = async (username: string, password: string) => {
  const res = await fetch(`http://localhost:8888/login`, {
    method: 'POST',
    body: JSON.stringify({ username, password }),
    headers: {
      'Content-Type': 'application/json',
      'X-Requested-With': 'XMLHttpRequest',
    },
  })

  const data = await res.json()
  if (data.code === 200) {
    sessionStorage.setItem('authToken', data.token)
    // Redirect to root
    window.location.href = '/'
  } else {
    throw data
  }
  return data
}

const Routes = () => {
  return (
    <BrowserRouter>
      <div>
        <Switch>
          <Route exact path="/LoginPage">
            <LoginForm onSubmitCredential={submitCredential} />
          </Route>
          <Route path="/" component={Home}></Route>
        </Switch>
      </div>
    </BrowserRouter>
  )
}
const client = getClient({ uri: 'http://localhost:8888/graphql' })
const App = () => {
  return (
    <ApolloProvider client={client}>
      <Routes />
    </ApolloProvider>
  )
}

Directory, SnackProvider and Admin

import * as React from 'react'
import { ThemeProvider } from '@material-ui/core/styles'

import { SnackProvider, Admin, Directory } from 'rice-instructor'

import { theme } from '../theme'

const routes = [{ path: '/Admin', children: <Admin /> }]
export const Home = () => {
  return (
    <ThemeProvider theme={theme}>
      <SnackProvider>
        <Directory routes={routes} redirectToLoginIfUnauthenticated={true} />
      </SnackProvider>
    </ThemeProvider>
  )
}

Install locally

• yarn install && yarn build && yarn link
• In another repo: yarn link "rice-instructor"