Bed Raps

BedSettings.js

import React, {Component} from 'react'
import {View, StyleSheet, TouchableOpacity, ScrollView} from 'react-native'
import Svg, {Path, Defs, Use, G} from 'react-native-svg'
import {Text, Bed, AlarmCard} from '../components'
import d from '../path-descriptions/bed-settings.json'
const {layout:{row}} = require('../styles')

const User = ({ebwuOn, ...props}) => <TouchableOpacity {...props}>
  <Svg width="46" height="46" viewBox="0 0 46 46" >
  <Defs>
    <Path id="user" fillRule="evenodd" d={d.user}/>
  </Defs>
  <G><Use href="#user"  fill="white" fillOpacity={ebwuOn ? 1 : .3} /></G>
  </Svg>
</TouchableOpacity>


export default class extends Component{
  state={side:'', singleMode:true, ebwuOn:true}

  // componentWillReceiveProps = ({connected})=>  this.setState({ebwuOn:connected})

  style = StyleSheet.create({
    container:{
      marginTop:30,
      // alignItems:'center',
      flex:1
    },
    bed:{
      marginTop:15,
      alignSelf:'center',
    }
  })
  userConfig = () =>{
    const {singleMode, ebwuOn, side} = this.state
    return {
      onPress:()=>  this.setState({singleMode:!singleMode }),
      disabled: !ebwuOn,
      style:{margin:8},
      ebwuOn,
    }
  }

  swapSides=()=> {
    const {side} =this.state
    this.setState({side: side==='A' ?'B': 'A'  })
  }

  render (){
    const { container, bed} = this.style
    const { singleMode} = this.state
    const { history:{push}} = this.props
    // console.log(this.props, '---props')
    return <View style={container}>
      <View  style={{alignSelf:'center'}} >
        {singleMode
          ? <User {...this.userConfig()} />
          : <View  style={row}>
              <User {...this.userConfig()} />
              <User {...this.userConfig()} />
            </View>
        }
      </View>
      <Bed  style={bed}  swapSides={this.swapSides} {...this.state}/>

      <View style={{height:215, marginTop:15}}>
      <ScrollView    >

        <AlarmCard />


      </ScrollView>
    </View>
    </View>
  }
}