Splitting creator lock components into separate files (#246)

* Splitting creator lock components into separate files

* Changing stories to use direct lock subcomponents

* Lint fixes

* Parameterizing at a lower level in CreatorLock

* Minor style fixes

unlock-app/src/components/creator/CreatorLock.js

@@ -1,84 +1,48 @@
 import React from 'react'
-import styled from 'styled-components'
 import UnlockPropTypes from '../../propTypes'
-import Duration from '../helpers/Duration'
-import Balance from '../helpers/Balance'
+import CreatorLockSaved from './lock/CreatorLockSaved'
+import CreatorLockConfirming from './lock/CreatorLockConfirming'
 import Icon from '../lock/Icon'
-
+import Duration from '../helpers/Duration'
 import Icons from '../interface/icons'
+import Balance from '../helpers/Balance'
+import styled from 'styled-components'
 
 export function CreatorLock({ lock, status = 'deployed' }) {
   // Some sanitization of strings to display
   let name = lock.name || 'New Lock'
   let outstandingKeys = lock.maxNumberOfKeys - lock.outstandingKeys || 0
+  let lockComponentStatusBlock
 
   if (status === 'deployed') { // the transaction was mined and confirmed at least 12 times
-    // TODO add USD values to lock
-    // TODO add all-time balance to lock
-    return (
-      <CreatorLockRow>
-        <CreatorLockSaved>
-          <CreatorLockIcon><Icon lock={lock} address={lock.address} size={'3'} /></CreatorLockIcon>
-          <CreatorLockName>
-            {name}
-            <CreatorLockAddress>{lock.address}</CreatorLockAddress>
-          </CreatorLockName>
-          <CreatorLockDuration>
-            <Duration seconds={lock.expirationDuration} />
-          </CreatorLockDuration>
-          <CreatorLockKeys>{outstandingKeys} / {lock.maxNumberOfKeys}</CreatorLockKeys>
-          <CreatorLockValue>
-            <CreatorLockValueEth><LockCurrency><Icons.Eth /></LockCurrency> <Balance amount={lock.keyPrice} symbol={false} /></CreatorLockValueEth>
-          </CreatorLockValue>
-          <CreatorLockValue>
-            <CreatorLockValueMain><CreatorLockValueEth><LockCurrency><Icons.Eth /></LockCurrency> <Balance amount={lock.balance} symbol={false} /></CreatorLockValueEth></CreatorLockValueMain>
-          </CreatorLockValue>
-          <CreatorLockIconBar>
-            <CreatorLockIconBarIcon>
-              <Icons.Withdraw />
-            </CreatorLockIconBarIcon>
-            <CreatorLockIconBarIcon>
-              <Icons.Edit />
-            </CreatorLockIconBarIcon>
-            <CreatorLockIconBarIcon>
-              <Icons.Download />
-            </CreatorLockIconBarIcon>
-            <CreatorLockIconBarIcon>
-              <Icons.Code />
-            </CreatorLockIconBarIcon>
-          </CreatorLockIconBar>
-        </CreatorLockSaved>
-      </CreatorLockRow>
-    )
+    lockComponentStatusBlock = <CreatorLockSaved lock={lock} />
   }
   if (status === 'confirming') { // the transaction was mined but hasn't yet been confirmed at least 12 times
-    return (
-      <CreatorLockRow>
-        <CreatorLockConfirming>
-          <CreatorLockIcon><Icon lock={lock} address={lock.address} size={'3'} /></CreatorLockIcon>
-          <CreatorLockName>
-            {name}
-            <CreatorLockAddress>{lock.address}</CreatorLockAddress>
-          </CreatorLockName>
-          <CreatorLockDuration>
-            <Duration seconds={lock.expirationDuration} />
-          </CreatorLockDuration>
-          <CreatorLockKeys>{outstandingKeys} / {lock.maxNumberOfKeys}</CreatorLockKeys>
-          <CreatorLockValue>
-            <CreatorLockValueEth><LockCurrency><Icons.Eth /></LockCurrency> <Balance amount={lock.keyPrice} symbol={false} /></CreatorLockValueEth>
-          </CreatorLockValue>
-          <CreatorLockValue>
-            <CreatorLockValueMain><CreatorLockValueEth><LockCurrency><Icons.Eth /></LockCurrency> <Balance amount={lock.balance} symbol={false} /></CreatorLockValueEth></CreatorLockValueMain>
-          </CreatorLockValue>
-          <CreatorLockStatus>
-            <CreatorLockStatusLabel>
-              Pending
-            </CreatorLockStatusLabel>
-          </CreatorLockStatus>
-        </CreatorLockConfirming>
-      </CreatorLockRow>
-    )
+    lockComponentStatusBlock = <CreatorLockConfirming lock={lock} />
   }
+
+  // TODO add USD values to lock
+  // TODO add all-time balance to lock
+  return (
+    <LockRow status={status}>
+      <LockIcon><Icon lock={lock} address={lock.address} size={'3'} /></LockIcon>
+      <LockName>
+        {name}
+        <LockAddress>{lock.address}</LockAddress>
+      </LockName>
+      <LockDuration>
+        <Duration seconds={lock.expirationDuration} />
+      </LockDuration>
+      <LockKeys>{outstandingKeys} / {lock.maxNumberOfKeys}</LockKeys>
+      <LockValue>
+        <LockValueEth><LockCurrency><Icons.Eth /></LockCurrency> <Balance amount={lock.keyPrice} symbol={false} /></LockValueEth>
+      </LockValue>
+      <LockValue>
+        <LockValueMain><LockValueEth><LockCurrency><Icons.Eth /></LockCurrency> <Balance amount={lock.balance} symbol={false} /></LockValueEth></LockValueMain>
+      </LockValue>
+      {lockComponentStatusBlock}
+    </LockRow>
+  )
 }
 
 CreatorLock.propTypes = {
@@ -88,7 +52,7 @@ CreatorLock.propTypes = {
 
 export default CreatorLock
 
-const CreatorLockRow = styled.div`
+const LockRow = styled.div`
   box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.08);
   border-radius: 4px;
   grid-gap: 8px;
@@ -97,28 +61,26 @@ const CreatorLockRow = styled.div`
   color: var(--slate);
   padding: 10px 0 10px 0;
   height: 64px;
-`
-
-const CreatorLockSaved = styled.div`
   display: grid;
-  grid-template-columns: 1fr 2fr repeat(4, 1fr) 2fr;
+  ${(props) => {
+    if (props.status == 'confirming') {
+      return 'grid-template-columns: 1fr 2fr repeat(3, 1fr) 2fr 1fr;'
+    } else {
+      return 'grid-template-columns: 1fr 2fr repeat(4, 1fr) 2fr;'
+    }
+  }}
 `
 
-const CreatorLockConfirming = styled.div`
-  display: grid;
-  grid-template-columns: 1fr 2fr repeat(3, 1fr) 2fr 1fr;
-`
-
-const CreatorLockIcon = styled.div`
+const LockIcon = styled.div`
   padding-left: 5px;
 `
 
-const CreatorLockName = styled.div`
+const LockName = styled.div`
   color: var(--link);
   font-weight: 600;
 `
 
-const CreatorLockAddress = styled.div`
+const LockAddress = styled.div`
   color: var(--grey);
   font-weight: 200;
   font-size: 0.75em;
@@ -128,32 +90,32 @@ const CreatorLockAddress = styled.div`
   text-overflow: ellipsis;
 `
 
-const CreatorLockDuration = styled.div`
+const LockDuration = styled.div`
 `
 
-const CreatorLockKeys = styled.div`
+const LockKeys = styled.div`
 `
 
-const CreatorLockValue = styled.div`
+const LockValue = styled.div`
 `
 
 /* Saving for use with sub-values that need to be added in a future PR
-const CreatorLockValueSub = styled.div`
+const LockValueSub = styled.div`
   font-size: 0.6em;
   color: var(--grey);
   margin-top: 5px;
 `
 */
 
-const CreatorLockValueMain = styled.div`
+const LockValueMain = styled.div`
   font-weight: bold;
 `
 
-const CreatorLockValueEth = styled.div`
+const LockValueEth = styled.div`
 `
 
 /* Saving for use with sub-values that need to be added in a future PR
-const CreatorLockValueUsd = styled.div`
+const LockValueUsd = styled.div`
   &:before {
     content: "$ ";
   }
@@ -163,33 +125,3 @@ const CreatorLockValueUsd = styled.div`
 const LockCurrency = styled.span`
   font-size: 0.7em;
 `
-
-const CreatorLockIconBar = styled.div`
-  text-align: right;
-  padding-right: 10px;
-  padding: 0;
-  margin: 0;
-  font-size: 28px;
-`
-
-const CreatorLockIconBarIcon = styled.div`
-  display: inline-block;
-  margin-right: 10px;
-  cursor: pointer;
-`
-
-const CreatorLockStatus = styled.div`
-  padding: -10px;
-  margin: 0;
-  margin-top: -10px;
-  margin-bottom: -22px;
-  background-color: var(--lightgrey);
-  text-align: center;
-  font-family: "IBM Plex Sans", sans-serif;
-  font-weight: 200;
-  color: var(--grey);
-`
-
-const CreatorLockStatusLabel = styled.div`
-  margin-top: 30px;
-`

unlock-app/src/components/creator/lock/CreatorLockConfirming.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import styled from 'styled-components'
+import UnlockPropTypes from '../../../propTypes'
+
+export function CreatorLockConfirming({ lock }) {
+  return (
+    <LockStatus>
+      <LockStatusLabel>
+        Pending
+      </LockStatusLabel>
+    </LockStatus>
+  )
+}
+
+CreatorLockConfirming.propTypes = {
+  lock: UnlockPropTypes.lock,
+}
+
+export default CreatorLockConfirming
+
+const LockStatus = styled.div`
+  padding: -10px;
+  margin: 0;
+  margin-top: -10px;
+  margin-bottom: -10px;
+  background-color: var(--lightgrey);
+  text-align: center;
+  font-family: "IBM Plex Sans", sans-serif;
+  font-weight: 200;
+  color: var(--grey);
+`
+
+const LockStatusLabel = styled.div`
+  margin-top: 30px;
+`

unlock-app/src/components/creator/lock/CreatorLockSaved.js

@@ -0,0 +1,43 @@
+import React from 'react'
+import styled from 'styled-components'
+import UnlockPropTypes from '../../../propTypes'
+import Icons from '../../interface/icons'
+
+export function CreatorLockSaved({ lock }) {
+  return (
+    <LockIconBar>
+      <LockIconBarIcon>
+        <Icons.Withdraw />
+      </LockIconBarIcon>
+      <LockIconBarIcon>
+        <Icons.Edit />
+      </LockIconBarIcon>
+      <LockIconBarIcon>
+        <Icons.Download />
+      </LockIconBarIcon>
+      <LockIconBarIcon>
+        <Icons.Code />
+      </LockIconBarIcon>
+    </LockIconBar>
+  )
+}
+
+CreatorLockSaved.propTypes = {
+  lock: UnlockPropTypes.lock,
+}
+
+export default CreatorLockSaved
+
+const LockIconBar = styled.div`
+  text-align: right;
+  padding-right: 10px;
+  padding: 0;
+  margin: 0;
+  font-size: 28px;
+`
+
+const LockIconBarIcon = styled.div`
+  display: inline-block;
+  margin-right: 10px;
+  cursor: pointer;
+`

unlock-app/src/stories/creator/CreatorLock.stories.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
-import { CreatorLock } from '../../components/creator/CreatorLock'
+import CreatorLock from '../../components/creator/CreatorLock'
 
 storiesOf('CreatorLock')
   .add('Deployed', () => {
@@ -11,9 +11,8 @@ storiesOf('CreatorLock')
       outstandingKeys: '3',
       address: '0xab7c74abc0c4d48d1bdad5dcb26153fc8780f83e',
     }
-    const status = 'deployed'
     return (
-      <CreatorLock lock={lock} status={status} />
+      <CreatorLock lock={lock} status={'deployed'}/>
     )
   })
   .add('Confirming', () => {
@@ -24,8 +23,7 @@ storiesOf('CreatorLock')
       outstandingKeys: '3',
       address: '0xab7c74abc0c4d48d1bdad5dcb26153fc8780f83e',
     }
-    const status = 'confirming'
     return (
-      <CreatorLock lock={lock} status={status} />
+      <CreatorLock lock={lock} status={'confirming'}/>
     )
   })