breezy 0.3.0 → 0.3.1

data/lib/generators/rails/templates/mobile/elements.js

@@ -0,0 +1,88 @@
+import React from 'react'
+import {View, Text, ScrollView, TouchableOpacity, Alert} from 'react-native'
+import {Header, Card, ListItem, Icon, Button} from 'react-native-elements'
+
+export function Container(props) {
+  return <ScrollView contentContainerStyle={{paddingBottom: 100, flexDirection: 'column'}}>
+    {props.children}
+  </ScrollView>
+}
+
+export function BarSaveAndGoBack({onPress}) {
+  return (
+    <TouchableOpacity onPress={onPress} style={{flex: 1, flexDirection: 'row', alignItems: 'flex-end'}}>
+      <Icon
+        name='chevron-left'
+        color='#fff'
+        size={18}
+        underlayColor='rgba(0, 0, 0, 0)'
+      />
+      <Text style={{color: '#fff'}}>SAVE AND GO BACK</Text>
+    </TouchableOpacity>
+  )
+}
+
+export function BarGoBack({onPress}) {
+  return (
+    <TouchableOpacity onPress={onPress} style={{flex: 1, flexDirection: 'row', alignItems: 'flex-end'}}>
+      <Icon
+        name='chevron-left'
+        color='#fff'
+        size={18}
+        underlayColor='rgba(0, 0, 0, 0)'
+      />
+      <Text style={{color: '#fff'}}>BACK</Text>
+    </TouchableOpacity>
+  )
+}
+
+export function BarCancel({onPress}) {
+  return (
+    <TouchableOpacity onPress={onPress} style={{flex: 1, flexDirection: 'row', alignItems: 'flex-end'}}>
+      <Text style={{color: '#fff'}}>CANCEL</Text>
+    </TouchableOpacity>
+  )
+}
+
+export function BarNew ({onPress}) {
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      style={{flex: 1, flexDirection: 'row', alignItems: 'flex-end'}}>
+      <Icon
+        name='note-add'
+        color='#fff'
+        size={18}
+        underlayColor='rgba(0, 0, 0, 0)'
+      />
+      <Text style={{color: '#fff'}}>NEW</Text>
+    </TouchableOpacity>
+   )
+}
+
+export function IconDelete({onPress}) {
+  return <Icon
+    raised
+    name='close'
+    color='#f50'
+    size={13}
+    onPress={onPress}/>
+}
+export function IconEdit({onPress}) {
+  return <Icon
+    raised
+    name='mode-edit'
+    color='#f50'
+    size={13}
+    onPress={onPress}/>
+
+}
+export function IconShow({onPress}) {
+  return <Icon
+    raised
+    name='more-horiz'
+    color='#f50'
+    size={13}
+    onPress={onPress}/>
+}
+

data/lib/generators/rails/templates/mobile/form.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { Field, reduxForm, stopSubmit, touch} from 'redux-form'
+import {View, Text} from 'react-native'
+import { FormLabel, FormInput, FormValidationMessage } from 'react-native-elements'
+
+const RenderField = ({ input, label, type, meta: { touched, error } }) => {
+  return (
+    <View>
+      <FormLabel><Text>{label}</Text></FormLabel>
+      <FormInput onChangeText={input.onChange} value={input.value} placeholder={`Please enter ${label}`}/>
+      {touched && error && <FormValidationMessage><Text>{error}</Text></FormValidationMessage>}
+    </View>
+  )
+}
+const SimpleForm = props => {
+  const { error, handleSubmit, initialValue } = props
+
+  return (
+    <View><% attributes_list.select{|attr| attr != :id }.each do |attr| %>
+      <Field
+        name="<%=attr.to_s.camelize(:lower)%>"
+        label="<%=attr.to_s.humanize%>"
+        component={RenderField}
+        type="text"
+      />
+    <%end%></View>
+  )
+}
+
+export default reduxForm({
+  form: '<%=plural_table_name%>_form' // a unique identifier for this form
+})(SimpleForm)
+
+

data/lib/generators/rails/templates/mobile/index.jsx

@@ -0,0 +1,103 @@
+import React from 'react'
+import {mapDispatchToProps, mapStateToProps} from '@jho406/breezy'
+import {connect} from 'react-redux'
+import {View, Text, TouchableOpacity, Alert} from 'react-native'
+import {Header, Card} from 'react-native-elements'
+import DropdownAlert from 'react-native-dropdownalert';
+import {Container, IconDelete, IconEdit, IconShow, BarNew} from 'components/elements'
+
+class <%= plural_table_name.camelize %>Index extends React.Component {
+  static defaultProps = {
+    <%= plural_table_name %>: []
+  }
+
+  constructor (props) {
+    super(props)
+    this.handleClick = this.handleClick.bind(this)
+    this.handleDeleteClick = this.handleDeleteClick.bind(this)
+  }
+
+  handleDeleteClick(path) {
+    const method = 'DELETE'
+
+    Alert.alert(
+      'Wait!',
+      'Are you sure you want to delete this <%=singular_table_name%>?',
+      [
+        {
+          text: 'Delete',
+          onPress: e => {this.props.visit(path, {method})},
+          style: 'destructive'
+         },
+        { text: 'Cancel', style: 'cancel' },
+      ],
+      { cancelable: false }
+    )
+  }
+
+  handleClick(path, method='GET') {
+    const nav = this.props.navigation
+    this.props.visit(path, {method}).then((rsp)=>{
+      if (rsp.canNavigate) {
+        return nav.navigate(rsp.screen, {pathQuery: rsp.pathQuery})
+      } else {
+        // There can only be one visit at a time, if `canNavigate`
+        // is false, then this request is being ignored for a more
+        // recent visit. Do Nothing.
+        return
+      }
+    })
+  }
+
+  showNotice (message) {
+    if (message) {
+      setImmediate(() => {
+        this.dropdown.alertWithType('success', 'Success', message);
+      })
+
+      return <DropdownAlert ref={ref => this.dropdown = ref} translucent={true}/>
+   } else {
+      return null
+   }
+  }
+
+  render () {
+    const headerOptions = {
+      centerComponent: { text: 'POSTS', style: { color: '#fff' } },
+      rightComponent: (<BarNew
+        onPress={e => this.handleClick('/<%=plural_table_name%>/new')}
+      />)
+    }
+
+    return (
+      <View>
+        <Header {...headerOptions}/>
+        <Container>
+          {this.props.<%=plural_table_name%>.map((<%=singular_table_name%>) => {
+            const {show_path, edit_path, delete_path} = <%=singular_table_name%>.meta
+            return (
+              <Card key={<%=singular_table_name%>.id}>
+                <TouchableOpacity>
+                  <% attributes_list.select{|attr| attr != :id }.each do |attr| %><Text style={{marginBottom: 10}}>{<%=singular_table_name%>.<%=attr%>}</Text>
+<% end %>
+                </TouchableOpacity>
+                <View style={{flex: 1, justifyContent: 'flex-end', flexDirection: 'row'}}>
+                  <IconDelete onPress={e => this.handleDeleteClick(delete_path)}/>
+                  <IconEdit onPress={e => this.handleClick(edit_path)}/>
+                  <IconShow onPress={e => this.handleClick(show_path)}/>
+                </View>
+              </Card>
+            )
+        })}
+        </Container>
+      {this.showNotice(this.props.notice)}
+      </View>
+    )
+  }
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(<%= plural_table_name.camelize %>Index)
+

data/lib/generators/rails/templates/mobile/new.jsx

@@ -0,0 +1,75 @@
+import React from 'react'
+import {submit} from 'redux-form'
+import {Header} from 'react-native-elements'
+import {SubmissionError} from 'redux-form'
+import {View} from 'react-native'
+import {connect} from 'react-redux'
+import {delInPage} from '@jho406/breezy/dist/action_creators'
+import {mapStateToProps, mapDispatchToProps} from '@jho406/breezy'
+import <%= plural_table_name.camelize %>Form from 'components/<%= plural_table_name.camelize %>Form'
+import {Container, BarSaveAndGoBack, BarCancel} from 'components/elements'
+
+class <%= plural_table_name.camelize %>New extends React.Component {
+  constructor (props) {
+    super(props)
+    this.submit = this.submit.bind(this)
+    this.remoteSubmit = this.remoteSubmit.bind(this)
+  }
+
+  submit (body) {
+    const options = {
+      method: 'POST',
+      body: JSON.stringify(body),
+      contentType: 'application/json'
+    }
+
+    this.props.delInPage({pathQuery: this.props.pathQuery, keypath: 'errors'})
+    return this.props.visit('/<%= plural_table_name %>', options).then((rsp) => {
+      if (this.props.errors) {
+        throw new SubmissionError({
+          ...this.props.errors
+        })
+      }
+      if (rsp.canNavigate) {
+        return this.props.navigation.goBack()
+      } else {
+        // There can only ve one visit at a time, if `canNavigate`
+        // is false, then this request is being ignored for a more
+        // recent visit. Do Nothing.
+        return
+      }
+    }).catch((err) => {
+      if (err instanceof SubmissionError) {
+        throw err
+      } else {
+        //handle other errors here
+      }
+    })
+  }
+
+  remoteSubmit () {
+    this.props.remoteSubmit('<%=plural_table_name%>_form')
+  }
+
+  render () {
+    const headerOptions = {
+      leftComponent: (<BarSaveAndGoBack onPress={this.remoteSubmit} />),
+      rightComponent: (<BarCancel onPress={e => this.props.navigation.goBack()} />)
+    }
+
+    return (
+      <View>
+        <Header {...headerOptions}/>
+        <Container>
+          <<%= plural_table_name.camelize %>Form error={this.props.error} onSubmit={this.submit}/>
+        </Container>
+      </View>
+    )
+  }
+}
+
+export default connect(
+  mapStateToProps,
+  {...mapDispatchToProps, remoteSubmit: submit, delInPage}
+)(<%= plural_table_name.camelize %>New)
+

data/lib/generators/rails/templates/mobile/show.jsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import {mapStateToProps, mapDispatchToProps} from '@jho406/breezy'
+import {connect} from 'react-redux'
+import {Text, View} from 'react-native'
+import {Header, Card} from 'react-native-elements'
+import {Container, BarGoBack} from 'components/elements'
+
+class <%= plural_table_name.camelize %>Show extends React.Component {
+  render() {
+    const headerOptions = {
+      leftComponent: (<BarGoBack onPress={ e => this.props.navigation.goBack()} />)
+    }
+
+    return (
+      <View>
+        <Header {...headerOptions}/>
+        <Container>
+          <Card><% attributes_list_with_timestamps.select{|attr| attr != :id }.each do |attr| %>
+            <Text style={{fontWeight: 'bold'}}><%=attr%></Text>
+            <Text>{this.props.<%=attr%>}</Text><% end %>
+          </Card>
+        </Container>
+      </View>
+    )
+  }
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(<%= plural_table_name.camelize %>Show)
+

data/lib/generators/rails/templates/new.js.props

@@ -0,0 +1,7 @@
+if @<%= singular_table_name %>.errors.any?
+  json.errors @<%= singular_table_name %>.errors.to_h
+end
+
+json.meta do
+  json.index_path <%= plural_table_name %>_path
+end

data/lib/generators/rails/templates/show.js.props

@@ -0,0 +1,12 @@
+<%- attributes_list_with_timestamps.each do |attr|-%>
+json.<%=attr%> @<%= singular_table_name %>.<%=attr%>
+<%- end -%>
+
+if notice
+  json.notice notice
+end
+
+json.meta do
+  json.index_path <%= plural_table_name %>_path
+  json.edit_path edit_<%= singular_table_name %>_path(@<%= singular_table_name %>)
+end

data/lib/generators/rails/templates/web/base.jsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import {SubmissionError} from 'redux-form'
+
+export default class extends React.Component {
+  constructor (props) {
+    super(props)
+    this.handleSubmit = this.handleSubmit.bind(this)
+    this.handleClick = this.handleClick.bind(this)
+  }
+
+  handleClick(path, method='GET') {
+    this.props.visit(path, {method}).then((rsp)=>{
+      // the window needs a full reload when asset fingerprint changes
+      if (rsp.needsRefresh) {
+        return window.location = rsp.url
+      }
+
+      if (rsp.canNavigate) {
+        return this.props.navigateTo(rsp.screen, rsp.pathQuery)
+      } else {
+        // There can only be one visit at a time, if `canNavigate`
+        // is false, then this request is being ignored for a more
+        // recent visit. Do Nothing.
+        return
+      }
+    })
+  }
+
+  handleSubmit (url, body, method='POST') {
+    const options = {
+      method,
+      body: JSON.stringify(body),
+      contentType: 'application/json'
+    }
+
+    return this.props.visit(url, options).then((rsp) => {
+      // the window needs a full reload when asset fingerprint changes
+      if (rsp.needsRefresh) {
+        return window.location = rsp.url
+      }
+
+      if (this.props.errors) {
+        throw new SubmissionError({
+          ...this.props.errors
+        })
+      }
+
+      if (rsp.canNavigate) {
+        //Uncomment this if you want full-page reloads
+        // window.location = rsp.url
+
+        return this.props.navigateTo(rsp.screen, rsp.pathQuery)
+      } else {
+        // There can only ve one visit at a time, if `canNavigate`
+        // is false, then this request is being ignored for a more
+        // recent visit. Do Nothing.
+        return
+      }
+    }).catch((err) => {
+      if (err.name === 'SubmissionError') {
+        throw err
+      } else {
+        window.location = err.url
+      }
+    })
+  }
+}
+

data/lib/generators/rails/templates/web/edit.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import {mapStateToProps, mapDispatchToProps} from '@jho406/breezy'
+import {delInPage} from '@jho406/breezy/dist/action_creators'
+import {connect} from 'react-redux'
+import BaseScreen from 'components/BaseScreen'
+import <%= plural_table_name.camelize %>Form from 'components/<%= plural_table_name.camelize %>Form'
+
+class <%= plural_table_name.camelize %>Edit extends BaseScreen {
+  handleSubmit (body) {
+    this.props.delInPage({pathQuery: this.props.pathQuery, keypath: 'errors'})
+    return super.handleSubmit('/<%= plural_table_name %>/' + this.props.id, body, 'PATCH')
+  }
+
+  render () {
+    return (
+      <div>
+        <<%= plural_table_name.camelize %>Form
+          error={this.props.error}
+          onSubmit={this.handleSubmit}
+          initialValues={this.props.attributes_for_form}
+        />
+        <a onClick={ e => this.handleClick(this.props.meta.show_path)}>Show</a>
+        <a onClick={ e => this.handleClick(this.props.meta.index_path)}>Back</a>
+      </div>
+    )
+  }
+}
+
+export default connect(
+  mapStateToProps,
+  {...mapDispatchToProps, delInPage}
+)(<%= plural_table_name.camelize %>Edit)
+
+