Sync with winston (#6)

* Update server file.

* Update utils/components with changes made in Winston.

Improve some existing components, and adds new.

* Fix linting.

* Add missing util for pagination.

* Remove React Date Picker from forms.

* Fix withState references.

Author: staydecent

app/assets/images/loader.svg

@@ -1,18 +1,21 @@
 import {map} from 'wasmuth'
 
+import Link from '/components/elements/link'
+
 export default function render ({
   active,
   prev,
   next,
   className = 'carousel-slide',
   getRef,
   getStyle,
+  wrapperClass,
   children
 }) {
-  return <div className='carousel-block carousel'>
+  return <div className={`carousel-block carousel ${wrapperClass}`}>
     <div className='card-carousel-content row'>
-      <nav>
-        <a onClick={prev} href='#' className='carousel-btn left'>&nbsp;</a>
+      <nav className='nav prev'>
+        <Link to={prev} />
       </nav>
       <div className='slides'>
         {map((c, idx) =>
@@ -23,8 +26,8 @@ export default function render ({
           >{c}</div>
         , children)}
       </div>
-      <nav>
-        <a onClick={next} href='#' className='carousel-btn right'>&nbsp;</a>
+      <nav className='nav next'>
+        <Link to={next} />
       </nav>
     </div>
   </div>

app/components/elements/carousel/base.js

@@ -14,12 +14,6 @@ function init () {
   )
 }
 
-function componentDidMount () {
-  window.requestAnimationFrame(() =>
-    this.setState({...this.state, width: this.ref.offsetWidth})
-  )
-}
-
 function next (ev) {
   ev.preventDefault()
   const n = this.state.active >= this.props.children.length - 1
@@ -37,8 +31,11 @@ function prev (ev) {
 }
 
 function getRef (ref) {
-  if (!ref) return
+  if (!ref || this.ref) return
   this.ref = ref
+  window.requestAnimationFrame(() =>
+    this.setState({...this.state, width: this.ref.offsetWidth})
+  )
 }
 
 function getStyle (idx, active) {
@@ -51,7 +48,6 @@ function getStyle (idx, active) {
 
 export default compose(setNodeName('Carousel'), {
   init,
-  componentDidMount,
   next,
   prev,
   getRef,

app/components/elements/carousel/index.js

@@ -19,7 +19,7 @@ function BaseDropdown ({
       ? <button className='btn btn-dropdown black-ghost-btn' onClick={handleClick}>
         <Level noPadding>{buttonText} <DownArrow /></Level>
       </button>
-      : <Trigger className='btn btn-dropdown' onClick={handleClick} />}
+      : <Trigger className='btn-dropdown' onClick={handleClick} />}
     {noWrapper
       ? isOpen && children
       : <div className={cls}>

app/components/elements/dropdown/base.js

@@ -4,7 +4,7 @@ import {
   set,
   dispatch,
   getState,
-  mapStateToProps
+  withState
 } from '/store'
 
 import BaseDropdown from './base'
@@ -32,18 +32,22 @@ document.body.addEventListener('click', (ev) => {
   dispatch(set(['dropdowns'], {}))
 })
 
-export default mapStateToProps(
-  ({dropdowns}, {uid, ...props}) => {
+export default withState(
+  ({dropdowns}, {uid}) => {
     if (!uid) {
       console.warn('<Dropdown> must include a uid prop.')
     }
     return {
-      uid,
       isOpen: !!dropdowns[uid],
-      handleClick: (ev) =>
-        ev.preventDefault() ||
-        dispatch(set(['dropdowns', uid], !dropdowns[uid])),
-      ...props
+      dropdowns
     }
   }
-)(BaseDropdown)
+)(({isOpen, dropdowns, uid, ...props}) =>
+  BaseDropdown({
+    ...props,
+    isOpen,
+    handleClick: (ev) =>
+      ev.preventDefault() ||
+      dispatch(set(['dropdowns', uid], !dropdowns[uid]))
+  })
+)