feat(initDataset): add initDataset api call and wire to app

app/actions/api.ts

@@ -327,3 +327,36 @@ export function addDatasetAndFetch (peername: string, name: string): ApiActionTh
  return response
  }
 }
+
+export function initDataset (filepath: string, name: string, format: string): ApiActionThunk {
+ return async (dispatch) => {
+ const action = {
+ type: 'init',
+ [CALL_API]: {
+ endpoint: 'init',
+ method: 'POST',
+ params: {
+ filepath,
+ name,
+ format
+ }
+ }
+ }
+ return dispatch(action)
+ }
+}
+
+export function initDatasetAndFetch (filepath: string, name: string, format: string): ApiActionThunk {
+ return async (dispatch, getState) => {
+ const whenOk = chainSuccess(dispatch, getState)
+ let response: Action
+
+ try {
+ response = await initDataset(filepath, name, format)(dispatch, getState)
+ response = await whenOk(fetchMyDatasets())(response)
+ } catch (action) {
+ throw action
+ }
+ return response
+ }
+}

app/components/App.tsx

@@ -13,6 +13,7 @@ interface AppProps {
  fetchSession: () => Promise<ApiAction>
  fetchMyDatasetsAndLinks: () => Promise<ApiAction>
  addDataset: (peername: string, name: string) => Promise<ApiAction>
+ initDataset: (path: string, name: string, format: string) => Promise<ApiAction>
  acceptTOS: () => Action
  setPeername: () => Action
  hasDatasets: boolean
@@ -54,7 +55,7 @@ export default class App extends React.Component<AppProps, AppState> {
  switch (Modal.type) {
  case ModalType.CreateDataset:
  return (
- <CreateDataset onSubmit={() => this.setState({ currentModal: NoModal })} onDismissed={() => this.setState({ currentModal: NoModal })}/>
+ <CreateDataset onSubmit={this.props.initDataset} onDismissed={() => this.setState({ currentModal: NoModal })}/>
  )
  case ModalType.AddDataset:
  return (

app/components/AppLoading.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react'
-// import Spinner from './chrome/Spinner'
 import WelcomeTemplate from './WelcomeTemplate'
 const version: string = require('../../version').default
 
@@ -10,30 +9,5 @@ export const AppLoading: React.FunctionComponent<any> = () =>
  id='app-loading'
  loading={true}
  ></WelcomeTemplate>
- // <div style={{
- // display: 'flex',
- // alignItems: 'center',
- // justifyContent: 'center',
- // height: '100%',
- // width: '100%',
- // top: 0,
- // right: 0,
- // left: 0,
- // bottom: 0,
- // position: 'absolute',
- // zIndex: 100,
- // backgroundColor: '#fff'
- // }}>
- // <div style={{
- // width: 300,
- // height: 300,
- // textAlign: 'center'
- // }}>
- // <img style={{ marginBottom: 20 }} className='app-loading-blob' src={logo} height={150} width={150}/>
- // <h4>Starting Qri Desktop</h4>
- // <h6>version {version}</h6>
- // <div style={{ marginTop: 20 }}><Spinner /></div>
- // </div>
- // </div>
 
 export default AppLoading

app/components/modals/AddDataset.tsx

@@ -111,12 +111,8 @@ const AddDataset: React.FunctionComponent<AddDatasetProps> = ({ onDismissed, onS
  }
  }
 
- const handleSetDismissable = (dismissable: boolean) => {
- setDismissable(dismissable)
- }
-
  const handleSubmit = () => {
- handleSetDismissable(false)
+ setDismissable(false)
  setLoading(true)
  // should fire off action and catch error response
  // if success, fetchDatatsets

app/components/modals/CreateDataset.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react'
 import { remote } from 'electron'
 import { CSSTransition } from 'react-transition-group'
-import Modal, { ModalProps } from './Modal'
+import Modal from './Modal'
+import { ApiAction } from '../../store/api'
 import TextInput from '../form/TextInput'
 import SelectInput from '../form/SelectInput'
 import Error from './Error'
@@ -23,7 +24,12 @@ enum TabTypes {
  ExistingBody = 'Use existing file',
 }
 
-const CreateDataset: React.FunctionComponent<ModalProps> = ({ onDismissed, onSubmit }) => {
+interface CreateDatasetProps {
+ onDismissed: () => void
+ onSubmit: (path: string, name: string, format: string) => Promise<ApiAction>
+}
+
+const CreateDataset: React.FunctionComponent<CreateDatasetProps> = ({ onDismissed, onSubmit }) => {
  const [datasetName, setDatasetName] = React.useState('')
  const [path, setPath] = React.useState('')
  const [bodyFormat, setBodyFormat] = React.useState(formatOptions[0].value)
@@ -104,12 +110,6 @@ const CreateDataset: React.FunctionComponent<ModalProps> = ({ onDismissed, onSub
  .then(() => setDismissable(true))
  }
 
- const handleSetActiveTab = (activeTab: TabTypes) => {
- setActiveTab(activeTab)
- toggleButton(activeTab)
- setError('')
- }
-
  const renderCreateDataset = () => {
  return (
  <div className='margin-bottom'>
@@ -148,11 +148,11 @@ const CreateDataset: React.FunctionComponent<ModalProps> = ({ onDismissed, onSub
  }
  if (name === 'format') setBodyFormat(value)
  if (name === 'bodyPath') setBodyPath(value)
- toggleButton(activeTab)
  }
 
  const renderTabs = () => {
- return <Tabs tabs={[TabTypes.NewBody, TabTypes.ExistingBody]} active={activeTab} onClick={handleSetActiveTab}/>
+ // return <Tabs tabs={[TabTypes.NewBody, TabTypes.ExistingBody]} active={activeTab} onClick={(activeTab: TabTypes) => setActiveTab(activeTab)}/>
+ return <Tabs tabs={[TabTypes.NewBody]} active={activeTab} onClick={(activeTab: TabTypes) => setActiveTab(activeTab)}/>
  }
 
  const renderCreateNewBody = () =>
@@ -202,23 +202,13 @@ const CreateDataset: React.FunctionComponent<ModalProps> = ({ onDismissed, onSub
  setLoading(true)
  // should fire off action and catch error response
  // if success, fetchDatatsets
- const handleResponse = () => {
-  if (datasetName === 'error' || path === 'error' || bodyPath === 'error') {
-  setError('could not find dataset!')
-  setDismissable(true)
+ if (!onSubmit) return
+ onSubmit(path, datasetName, bodyFormat)
+ .then(() => onDismissed())
+ .catch((action) => {
  setLoading(false)
- return
- }
- if (onSubmit) {
- new Promise((resolve) => {
- onSubmit()
- resolve()
- }).then(() =>
- setTimeout(onDismissed, 200)
- )
- }
- }
- setTimeout(handleResponse, 1000)
+ setError(action.payload.err.message)
+ })
  }
 
  return (
@@ -243,7 +233,7 @@ const CreateDataset: React.FunctionComponent<ModalProps> = ({ onDismissed, onSub
  <Buttons
  cancelText='cancel'
  onCancel={onDismissed}
- submitText='Add Dataset'
+ submitText='Create Dataset'
  onSubmit={handleSubmit}
  disabled={buttonDisabled}
  loading={loading}

app/containers/AppContainer.tsx

@@ -2,7 +2,7 @@ import { connect } from 'react-redux'
 import App from '../components/App'
 import Store from '../models/store'
 
-import { fetchSession, fetchMyDatasetsAndLinks, addDatasetAndFetch } from '../actions/api'
+import { fetchSession, fetchMyDatasetsAndLinks, addDatasetAndFetch, initDatasetAndFetch } from '../actions/api'
 import { acceptTOS, setPeername } from '../actions/ui'
 
 const AppContainer = connect(
@@ -26,7 +26,8 @@ const AppContainer = connect(
  fetchMyDatasetsAndLinks,
  acceptTOS,
  setPeername,
- addDataset: addDatasetAndFetch
+ addDataset: addDatasetAndFetch,
+ initDataset: initDatasetAndFetch
  }
 )(App)
 

app/scss/_welcome.scss

@@ -15,10 +15,10 @@
  bottom: 0;
  }
 
-#app-loading { z-index: 100 }
-#welcome-page { z-index: 99 }
-#choose-peername-page { z-index: 98 }
-#no-datasets-page { z-index: 97 }
+#app-loading { z-index: 200 }
+#welcome-page { z-index: 199 }
+#choose-peername-page { z-index: 198 }
+#no-datasets-page { z-index: 197 }
 
 .welcome-center {
  width: 600px;