import: flow skeleton

packages/web-console/src/modules/Import/dropbox.tsx

@@ -0,0 +1,5 @@
+import React from "react"
+
+export const DropBox = () => {
+  return <div>dropbox</div>
+}

packages/web-console/src/modules/Import/import-file.tsx

@@ -0,0 +1,32 @@
+import React, { createContext, useReducer } from "react"
+import { DropBox } from "./dropbox"
+import { Settings } from "./settings"
+import { Result } from "./result"
+
+export const Context = createContext({})
+
+type State = {
+  step: "dropbox" | "settings" | "result"
+  // TODO: file+schema
+}
+
+const initialState: State = {
+  step: "dropbox",
+}
+
+const reducer = (state: typeof initialState, action: Partial<State>) => ({
+  ...state,
+  ...action,
+})
+
+export const ImportFile = () => {
+  const [state, dispatch] = useReducer(reducer, initialState)
+
+  return (
+    <Context.Provider value={{ state, dispatch }}>
+      {state.step === "dropbox" && <DropBox />}
+      {state.step === "settings" && <Settings />}
+      {state.step === "result" && <Result />}
+    </Context.Provider>
+  )
+}

packages/web-console/src/modules/Import/result.tsx

@@ -0,0 +1,5 @@
+import React from "react"
+
+export const Result = () => {
+  return <div>upload result</div>
+}

packages/web-console/src/modules/Import/settings.tsx

@@ -0,0 +1,5 @@
+import React from "react"
+
+export const Settings = () => {
+  return <div>upload settings</div>
+}

packages/web-console/src/scenes/Console/import.tsx

@@ -1,9 +1,11 @@
 import React from "react"
-import { PaneContent } from "../../components/PaneContent"
-import { PaneWrapper } from "../../components/PaneWrapper"
+import { PaneContent, PaneWrapper } from "../../components"
+import { ImportFile } from "../../modules/Import/import-file"
 
 export const Import = () => (
   <PaneWrapper>
-    <PaneContent>import</PaneContent>
+    <PaneContent>
+      <ImportFile />
+    </PaneContent>
   </PaneWrapper>
 )