Start fixing UI code

Related to #13
appendonlylog · Nov 23, 2017 · 069c55f · 069c55f
1 parent 2e1552f
commit 069c55f
Show file tree

Hide file tree

Showing 18 changed files with 326 additions and 413 deletions.
diff --git a/web/src/app-integration.js b/web/src/app-integration.js
diff --git a/web/src/app.js b/web/src/app.js
@@ -1,27 +1,24 @@
-
 import React from 'react'
-import {BrowserRouter} from 'react-router-dom'
+
+import {ConnectedRouter} from 'react-router-redux'
 import {Route} from 'react-router-dom'
 
+import history from './history'
+
 import Layout from './components/layout'
-import WelcomeScreen from './components/welcome-screen'
-import ContractLayout from './components/new-contract'
-import Contract from './components/contract'
-import ContractFeedback from './components/contract-feedback'
-import ContractList from './components/contract-list'
-import ContractContainer from './components/contract-container-dummy'
+
+import ContractsListScreen from './components/contracts-list-screen'
+import NewContractScreen from './components/new-contract-screen'
+import ContractDetailsScreen from './components/contract-details-screen'
 
 export default function App() {
   return (
-    <BrowserRouter>
+    <ConnectedRouter history={history}>
       <Layout>
-        <Route exact path='/' component={WelcomeScreen} />
-        <Route exact path='/new' component={ContractLayout} />
-        <Route exact path='/contract' component={Contract} />
-        <Route exact path='/feedback' component={ContractFeedback} />
-        <Route exact path='/contract-list' component={ContractList} />
-        <Route exact path='/container' component={ContractContainer} />
+        <Route exact path='/' component={ContractsListScreen} />
+        <Route exact path='/new' component={NewContractScreen} />
+        <Route path='/contract/:address' component={ContractDetailsScreen} />
       </Layout>
-    </BrowserRouter>
+    </ConnectedRouter>
   )
 }
diff --git a/web/src/components/StatusBar.js b/web/src/components/StatusBar.js
diff --git a/web/src/components/contract-details-screen.js b/web/src/components/contract-details-screen.js
@@ -43,15 +43,7 @@ export class ContractDetailsScreen extends React.Component {
 
     const contract = immutableContract.toJS()
 
-    let role
-
-    switch (contract.myRole) {
-      case ContractRole.Stranger: role = 'stranger'; break;
-      case ContractRole.Contractor: role = 'contractor'; break;
-      case ContractRole.Client: role = 'client'; break;
-    }
-
-    return <ContractDetails {...contract} role={role} actions={this.props.actions} />
+    return <ContractDetails {...contract} actions={this.props.actions} />
   }
 }
 

diff --git a/web/src/components/contract-details.js b/web/src/components/contract-details.js
@@ -1,86 +1,104 @@
 import React from 'react'
-import styled from 'styled-components'
+import styled, {css} from 'styled-components'
 import Spinner from 'react-spinkit'
 
-import connect from '~/utils/connect'
-import sel from '~/selectors'
+import {State} from '~/contract'
 
-import ContractLayout from './freelancer-layout'
 import ContractHeader from './contract-header'
 import ContractProgress from './contract-progress'
 import ContractFooter from './contract-footer'
-
 import ContractFeedback from './contract-feedback'
 
-// Created: 0,
-//   Active: 1,
-//     Approved: 2,
-class ContractContainer extends React.Component {
-
-  render () {
-    const { role, state } = this.props
-
-    if (state === -3) {
-      return (
-        <ContractLayout>
-          <ErrorMessage>
-            <span>😢</span>
-            Contract Not Found
-          </ErrorMessage>
-        </ContractLayout>
-      )
-    }
-
-    if (state === -2 || state === -1) {
-      return (
-        <ContractLayout>
-          <SpinnerWrapper>
-            <Spinner name='double-bounce' color='#5E69D7' />
-          </SpinnerWrapper>
-        </ContractLayout>
-      )
-    }
-
-    if (state === 2) {
-      return (
-        <ContractLayout>
-          <ContractFeedback {...this.props} />
-        </ContractLayout>
-      )
-    }
-
-    return (
-      <ContractLayout>
-        <ContractHeader {...this.props} />
-        {state !== 0 && <ContractProgress {...this.props} />}
-        <ContractFooter {...this.props} />
-      </ContractLayout>
-    )
+
+export default function ContractDetails(props) {
+  const errorText = getErrorText(props)
+  if (errorText) {
+    return renderErrorMessage(errorText)
+  }
+  if (props.updating) {
+    return renderOngoingOperation(props)
   }
+  return renderContractDetails(props)
 }
 
-export default connect(ContractContainer)
 
-const SpinnerWrapper = styled.div`
-  height: 480px;
+function renderErrorMessage(errorText) {
+  return (
+    <ErrorMessageWrapper>
+      <span>😢</span>
+      {errorText}
+    </ErrorMessageWrapper>
+  )
+}
+
+
+function renderOngoingOperation(props) {
+  return (
+    <SpinnerWrapper>
+      <Spinner name='double-bounce' color='#5E69D7' />
+    </SpinnerWrapper>
+  )
+}
 
+
+function renderContractDetails(props) {
+  return (
+    <ContractDetailsWrapper>
+      <ContractHeader {...props} />
+      {props.state !== State.Created && <ContractProgress {...props} />}
+      <ContractFooter {...props} />
+    </ContractDetailsWrapper>
+  )
+}
+
+
+function getErrorText({state, ephemeralAddress}) {
+  return (state == State.NotFound
+    ? ephemeralAddress
+      ? 'Error occurred while creating the contract'
+      : 'Contract Not Found'
+    : null
+  )
+}
+
+
+const commonWrapperStyles = css`
+  flex: 1;
+  padding: 60px 30px;
   display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+`
+
+
+const ContractDetailsWrapper = styled.div`
+  ${commonWrapperStyles}
+
+`
+
+
+const SpinnerWrapper = styled.div`
+  ${commonWrapperStyles}
+  height: 480px;
   align-items: center;
   justify-content: center;
 `
 
-const ErrorMessage = styled.div`
+
+const ErrorMessageWrapper = styled.div`
+  ${commonWrapperStyles}
   height: 480px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
   font-family: 'Muller';
   font-weight: 500;
   font-size: 26px;
   color: #242737;
   letter-spacing: -0.79px;
 
-  display: flex;
   flex-flow: column nowrap;
-  justify-content: center;
-  align-items: center;
 
   span {
     font-family: 'Apple Color Emoji';

diff --git a/web/src/components/contract-feedback.js b/web/src/components/contract-feedback.js
@@ -1,11 +1,14 @@
 import React from 'react'
 import styled from 'styled-components'
-import { Link } from 'react-router-dom'
+import {Link} from 'react-router-dom'
+
+import {Role} from '~/contract'
 
 import good_feedback from '../../assets/good_feedback.png'
 import bad_feedback from '../../assets/bad_feedback.png'
 
-import Button from './Button'
+import Button from './button'
+
 
 export default class ContractFeedback extends React.Component {
 	state = {
@@ -42,7 +45,7 @@ export default class ContractFeedback extends React.Component {
 	}
 
 	render () {
-		const { availableForWithdraw, role } = this.props
+		const { availableForWithdraw, myRole } = this.props
 		const { isFeedbackSended } = this.state
 
 		if (isFeedbackSended) {
@@ -64,7 +67,7 @@ export default class ContractFeedback extends React.Component {
 				<FormTitle>{this.props.name}</FormTitle>
 				<Separator />
 				<FormDescription>
-					<p>Please, give a feedback for {role === 'client' ? 'client' : 'contractor'}.</p>
+					<p>Please, give a feedback for {myRole === Role.Client ? 'client' : 'contractor'}.</p>
 				</FormDescription>
 				<FeedbackOptions>
 					<GoodEmojiContainer