setup admin toggle

Signed-off-by: shmck <shawn.j.mckay@gmail.com>

Author: ShMcK

web-app/src/containers/Start/index.tsx

@@ -6,6 +6,8 @@ import BetaBadge from '../../components/BetaBadge'
 import { css, jsx } from '@emotion/core'
 import Button from '../../components/Button'
 import { Theme } from '../../styles/theme'
+import { ADMIN_MODE } from '../../environment'
+import AdminToggle from '../../services/admin/AdminToggle'
 
 const styles = {
   page: (theme: Theme) => ({
@@ -104,6 +106,7 @@ export const StartPage = (props: Props) => (
         </div>
       )}
     </div>
+    {ADMIN_MODE ? <AdminToggle /> : null}
   </div>
 )
 

web-app/src/services/admin/AdminToggle.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react'
+import { css, jsx } from '@emotion/core'
+import { Form, Switch } from '@alifd/next'
+import AdminContext, { AdminContextType } from './context'
+
+type Props = {}
+
+const AdminToggle = (props: Props) => {
+  const { state, dispatch } = React.useContext<AdminContextType>(AdminContext)
+  return (
+    <Form.Item label="Admin Mode">
+      <Switch
+        checked={state.adminMode}
+        onChange={(checked: boolean) => dispatch({ type: checked ? 'ADMIN_MODE_ON' : 'ADMIN_MODE_OFF' })}
+      />
+    </Form.Item>
+  )
+}
+
+export default AdminToggle

web-app/src/services/admin/index.tsx renamed to web-app/src/services/admin/context.tsx

@@ -10,14 +10,19 @@ type State = {
 
 type Action = { type: 'ADMIN_MODE_ON' | 'ADMIN_MODE_OFF' }
 
-const AdminContext = React.createContext<{ state: State; dispatch: (action: Action) => void }>({
+export type AdminContextType = { state: State; dispatch: (action: Action) => void }
+
+const AdminContext = React.createContext<AdminContextType>({
   state: { adminMode: false },
   dispatch: () => {},
 })
 
+export default AdminContext
+
 export const AdminProvider = (props: Props) => {
   const [state, dispatch] = React.useReducer(
     (state: State, action: Action) => {
+      console.log('action.type', action.type)
       switch (action.type) {
         case 'ADMIN_MODE_ON':
           return { ...state, adminMode: true }

web-app/stories/admin/Toggle.stories.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react'
+import { storiesOf } from '@storybook/react'
+import SideBarDecorator from '../utils/SideBarDecorator'
+import AdminToggle from '../../src/services/admin/AdminToggle'
+
+storiesOf('Admin', module)
+  .addDecorator(SideBarDecorator)
+  .add('Toggle', () => {
+    return <AdminToggle />
+  })