reativo 0.1.3 → 0.1.4

data/lib/generators/reativo/templates/component/Index.js

@@ -0,0 +1,51 @@
+import { hot } from 'react-hot-loader/root'
+import React from 'react'
+
+import Button from '@material-ui/core/Button'
+import MaterialTable from 'material-table'
+import { wrapper } from "reativo"
+
+function Index({model, rows}) {
+  return (
+    <>
+      <MaterialTable
+        columns={[
+          { title: 'ID', field: 'id' },
+          <%- options[:properties].each do |prop| -%>
+          { title: '<%= prop.humanize %>', field: '<%= prop %>' },
+          <%- end -%>
+        ]}
+        data={model}
+        title="<%= model_name_plural %>"
+        actions={[
+          rowData => ({
+            icon: 'create',
+            iconProps: {'data-testid': `edit-${rowData.id}`},
+            tooltip: 'Edit <%= model_name_singular %>',
+            onClick: (event, rowData) => {
+              Turbolinks.visit(`/<%= collection_path %>/${rowData.id}/edit`)
+            },
+          })
+        ]}
+        options={{
+          columnsButton: true,
+          exportButton: true,
+          actionsColumnIndex: -1,
+        }}
+        detailPanel={rowData => {
+          return (
+            <pre>
+            {rowData.key}
+            </pre>
+          )
+        }}
+        onRowClick={(event, rowData, togglePanel) => togglePanel()}
+      />
+      <Button variant="contained" color="secondary" href="/<%= collection_path %>/new">
+        New <%= model_name_singular %>
+      </Button>
+    </>
+  )
+}
+
+export default hot(wrapper(Index))

data/lib/generators/reativo/templates/component/New.js

@@ -0,0 +1,37 @@
+import { hot } from 'react-hot-loader/root'
+import React from 'react'
+
+import {
+  Typography,
+  Button,
+} from '@material-ui/core';
+import Form from './Form'
+
+import { Form as FinalForm } from 'react-final-form'
+import { RailsForm } from 'reativo'
+import { validate } from './Form'
+import { wrapper } from "reativo"
+
+function New() {
+  return (
+    <div style={{ padding: 16, margin: 'auto', maxWidth: 600 }}>
+      <Typography variant="h4" align="center" component="h1" gutterBottom>
+        New <%= model_name_singular %>
+      </Typography>
+      <RailsForm
+        component={FinalForm}
+        action='create'
+        url='/<%= collection_path %>'
+        validate={validate}
+        render={(props) => (
+          <Form {...props} />
+        )}
+      />
+      <Button variant="contained" color="secondary" href="/<%= collection_path %>">
+        <%= model_name_plural %>
+      </Button>
+    </div>
+  );
+}
+
+export default hot(wrapper(New))

data/lib/generators/reativo/templates/component/Show.js

@@ -0,0 +1,32 @@
+import { hot } from 'react-hot-loader/root'
+import React from 'react'
+
+import {
+  Typography,
+  Button,
+} from '@material-ui/core'
+
+import { wrapper } from "reativo"
+
+function Show({model}) {
+  const { id } = model
+
+  return (
+    <div style={{ padding: 16, margin: 'auto', maxWidth: 600 }}>
+      <Typography variant="h4" align="center" component="h1" gutterBottom>
+        <%= model_name_singular %>
+      </Typography>
+      <%- options[:properties].each do |prop| -%>
+      <p><%= prop.humanize %>: {model.<%= prop %>}</p>
+      <%- end -%>
+      <Button variant="contained" color="primary" href={`/<%= collection_path %>/${id}/edit`}>
+        Edit
+      </Button>
+      <Button variant="contained" color="secondary" href="/<%= collection_path %>">
+        Back to <%= model_name_plural %>
+      </Button>
+    </div>
+  );
+}
+
+export default hot(wrapper(Show))

data/lib/generators/reativo/templates/operation/create.erb

@@ -1,16 +1,15 @@
 module <%= class_name %>::Operation
   class Create < Trailblazer::Operation
     class Present < Trailblazer::Operation
+      step ->(options, params) { options["representer.render.class"] = <%= class_name %>::Representer::Create }
+      step ->(options, params) { options["representer.errors.class"] = Reativo::Representer::Errors }
       step Model(<%= model_name %>, :new)
       step Contract::Build( constant: <%= class_name %>::Contract::Create )
     end
 
-    step ->(options, params) { options["representer.render.class"] = <%= class_name %>::Representer::Create }
-    step ->(options, params) { options["representer.errors.class"] = Reativo::Representer::Errors }
     step Nested( Present )
-
     step Contract::Build(constant: <%= class_name %>::Contract::Create)
-    step Contract::Validate(key: '<%= model_name.underscore %>')
+    step Contract::Validate(key: '<%= model_name.demodulize.underscore %>')
     step Contract::Persist()
   end
 end

data/lib/generators/reativo/templates/operation/destroy.erb

@@ -1,12 +1,12 @@
 module <%= class_name %>::Operation
-  class Create < Trailblazer::Operation
+  class Destroy < Trailblazer::Operation
     step ->(options, params) { options["representer.render.class"] = <%= class_name %>::Representer::Create }
     step ->(options, params) { options["representer.errors.class"] = Reativo::Representer::Errors }
     step Model( <%= model_name %>, :find )
     step :destroy!
 
     def destroy!(ctx, params:, current_user:, **)
-      options[:model].destroy
+      ctx[:model].destroy
     end
   end
 end

data/lib/generators/reativo/templates/operation/index.erb

@@ -15,7 +15,8 @@ module <%= class_name %>::Operation
     step :cache_key!
 
     def scope!(ctx, params:, current_user:, **)
-      ctx[:scope] = <%= class_name.singularize %>.where(user: current_user).order(id: :asc)
+      # Change the scope, so avoid data leaking
+      ctx[:scope] = <%= model_name.singularize %>.where('created_at > ?', DateTime.current)
     end
 
     def model!(ctx, params:, current_user:, **)

data/lib/generators/reativo/templates/operation/update.erb

@@ -1,16 +1,15 @@
 module <%= class_name %>::Operation
   class Update < Trailblazer::Operation
     class Present < Trailblazer::Operation
+      step ->(options, params) { options["representer.render.class"] = <%= class_name %>::Representer::Update }
+      step ->(options, params) { options["representer.errors.class"] = Reativo::Representer::Errors }
       step Model(<%= model_name %>, :find)
       step Contract::Build( constant: <%= class_name %>::Contract::Update )
     end
 
-    step ->(options, params) { options["representer.render.class"] = <%= class_name %>::Representer::Update }
-    step ->(options, params) { options["representer.errors.class"] = Reativo::Representer::Errors }
     step Nested( Present )
-
     step Contract::Build(constant: <%= class_name %>::Contract::Update)
-    step Contract::Validate(key: '<%= model_name.underscore %>')
+    step Contract::Validate(key: '<%= model_name.demodulize.underscore %>')
     step Contract::Persist()
   end
 end

data/lib/generators/reativo/templates/representer/create.erb

@@ -1,6 +1,6 @@
 module <%= class_name %>::Representer
   module Create
     include Representable::JSON
-    include <%= model_name %>Module
+    include <%= model_name.demodulize %>Module
   end
 end

data/lib/generators/reativo/templates/representer/index.erb

@@ -4,7 +4,7 @@ module <%= class_name %>::Representer
 
     items class: <%= model_name %> do
       include Representable::JSON
-      include <%= model_name %>Module
+      include <%= model_name.demodulize %>Module
     end
   end
 end

data/lib/generators/reativo/templates/representer/module.erb

@@ -1,5 +1,5 @@
 module <%= class_name %>::Representer
-  module <%= model_name %>Module
+  module <%= model_name.demodulize %>Module
     include Reform::Form::Module
 
     <%- options[:properties].each do |property| -%>

data/lib/generators/reativo/templates/representer/update.erb

@@ -1,6 +1,6 @@
 module <%= class_name %>::Representer
   module Update
     include Representable::JSON
-    include <%= model_name %>Module
+    include <%= model_name.demodulize %>Module
   end
 end

data/lib/generators/reativo/templates/support/store.js

@@ -0,0 +1,24 @@
+import { createStore } from 'redux'
+import { combineReducers } from 'redux'
+
+const DRAWER_OPEN = 'DRAWER_OPEN'
+const DRAWER_CLOSE = 'DRAWER_CLOSE'
+
+function drawer(state = { open: true }, action) {
+  switch (action.type) {
+    case DRAWER_OPEN:
+      return {...action.props, open: true}
+    case DRAWER_CLOSE:
+    return {...action.props, open: false}
+    default:
+      return state
+  }
+}
+
+const rootReducer = combineReducers({
+  drawer,
+})
+
+const store = createStore(rootReducer)
+
+export default store

data/lib/generators/reativo/templates/support/theme.js

@@ -0,0 +1,25 @@
+import { createMuiTheme } from '@material-ui/core/styles';
+
+export const theme = createMuiTheme({
+  palette: {
+  },
+  typography: {
+    useNextVariants: true,
+  },
+  overrides: {
+    MuiAppBar: {
+      root: {
+        boxShadow: 'unset',
+        backgroundColor: "#aaa"
+      }
+    },
+    MuiSvgIcon: { // Name of the component ⚛️ / style sheet
+      root: { // Name of the rule
+        color: '#000', // Some CSS
+        opacity: 0.54,
+      },
+    },
+  },
+});
+
+export default theme

data/lib/generators/reativo/templates/theme/Baseline.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import CssBaseline from '@material-ui/core/CssBaseline';
+
+function Baseline() {
+  return (
+    <CssBaseline />
+  );
+}
+
+export default Baseline;

data/lib/generators/reativo/templates/theme/Drawer.js

@@ -0,0 +1,50 @@
+import React from "react"
+import PropTypes from "prop-types"
+import Button from '@material-ui/core/Button'
+import { hot } from 'react-hot-loader/root'
+import { withStyles } from '@material-ui/core/styles';
+import { wrapper } from "reativo"
+import Menu from "./Menu"
+
+const styles = theme => ({
+  root: {
+    paddingBottom: 10
+  },
+})
+
+class Drawer extends React.Component {
+  render () {
+    const { classes } = this.props;
+    return (
+      <div className={classes.root}>
+        <Menu />
+      </div>
+    );
+  }
+}
+
+Drawer.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+
+function mapStateToProps (state) {
+  return {
+    drawer: state.drawer
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    toggle: () => {
+      dispatch({type: "DRAWER_TOGGLE"})
+    },
+  }
+}
+
+export default hot(
+  withStyles(styles)(
+    wrapper(Drawer, mapStateToProps, mapDispatchToProps)
+  )
+)
+

data/lib/generators/reativo/templates/theme/MainBar.js

@@ -0,0 +1,223 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import IconButton from '@material-ui/core/IconButton';
+import Typography from '@material-ui/core/Typography';
+import InputBase from '@material-ui/core/InputBase';
+import MenuItem from '@material-ui/core/MenuItem';
+import Menu from '@material-ui/core/Menu';
+import { fade } from '@material-ui/core/styles/colorManipulator';
+import { withStyles } from '@material-ui/core/styles';
+import MenuIcon from '@material-ui/icons/Menu';
+import SearchIcon from '@material-ui/icons/Search';
+import AccountCircle from '@material-ui/icons/AccountCircle';
+import MailIcon from '@material-ui/icons/Mail';
+import NotificationsIcon from '@material-ui/icons/Notifications';
+import MoreIcon from '@material-ui/icons/MoreVert';
+import { wrapper } from "reativo"
+import { hot } from 'react-hot-loader/root'
+
+const styles = theme => ({
+  root: {
+    width: '100%',
+  },
+  grow: {
+    flexGrow: 1,
+  },
+  menuButton: {
+    marginLeft: -12,
+    marginRight: 20,
+  },
+  title: {
+    display: 'none',
+    [theme.breakpoints.up('sm')]: {
+      display: 'block',
+    },
+  },
+  search: {
+    position: 'relative',
+    borderRadius: theme.shape.borderRadius,
+    backgroundColor: fade(theme.palette.common.white, 0.15),
+    '&:hover': {
+      backgroundColor: fade(theme.palette.common.white, 0.25),
+    },
+    marginRight: theme.spacing.unit * 2,
+    marginLeft: 0,
+    width: '100%',
+    [theme.breakpoints.up('sm')]: {
+      marginLeft: theme.spacing.unit * 3,
+      width: 'auto',
+    },
+  },
+  searchIcon: {
+    width: theme.spacing.unit * 9,
+    height: '100%',
+    position: 'absolute',
+    pointerEvents: 'none',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  inputRoot: {
+    color: 'inherit',
+    width: '100%',
+  },
+  inputInput: {
+    paddingTop: theme.spacing.unit,
+    paddingRight: theme.spacing.unit,
+    paddingBottom: theme.spacing.unit,
+    paddingLeft: theme.spacing.unit * 10,
+    transition: theme.transitions.create('width'),
+    width: '100%',
+    [theme.breakpoints.up('md')]: {
+      width: 200,
+    },
+  },
+  sectionDesktop: {
+    display: 'none',
+    [theme.breakpoints.up('md')]: {
+      display: 'flex',
+    },
+  },
+  sectionMobile: {
+    display: 'flex',
+    [theme.breakpoints.up('md')]: {
+      display: 'none',
+    },
+  },
+});
+
+class PrimarySearchAppBar extends React.Component {
+  state = {
+    anchorEl: null,
+    mobileMoreAnchorEl: null,
+  };
+
+  handleProfileMenuOpen = event => {
+    this.setState({ anchorEl: event.currentTarget });
+  };
+
+  handleMenuClose = () => {
+    this.setState({ anchorEl: null });
+    this.handleMobileMenuClose();
+  };
+
+  handleMobileMenuOpen = event => {
+    this.setState({ mobileMoreAnchorEl: event.currentTarget });
+  };
+
+  handleMobileMenuClose = () => {
+    this.setState({ mobileMoreAnchorEl: null });
+  };
+
+  render() {
+    const { anchorEl, mobileMoreAnchorEl } = this.state;
+    const { classes } = this.props;
+    const isMenuOpen = Boolean(anchorEl);
+    const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);
+
+    const renderMenu = (
+      <Menu
+        anchorEl={anchorEl}
+        anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+        transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+        open={isMenuOpen}
+        onClose={this.handleMenuClose}
+      >
+        <MenuItem onClick={this.handleMenuClose}>Profile</MenuItem>
+        <MenuItem onClick={this.handleMenuClose}>My account</MenuItem>
+      </Menu>
+    );
+
+    const renderMobileMenu = (
+      <Menu
+        anchorEl={mobileMoreAnchorEl}
+        anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+        transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+        open={isMobileMenuOpen}
+        onClose={this.handleMenuClose}
+      >
+        <MenuItem onClick={this.handleMobileMenuClose}>
+          <IconButton color="inherit">
+            <MailIcon />
+          </IconButton>
+          <p>Messages</p>
+        </MenuItem>
+        <MenuItem onClick={this.handleMobileMenuClose}>
+          <IconButton color="inherit">
+            <NotificationsIcon />
+          </IconButton>
+          <p>Notifications</p>
+        </MenuItem>
+        <MenuItem onClick={this.handleProfileMenuOpen}>
+          <IconButton color="inherit">
+            <AccountCircle />
+          </IconButton>
+          <p>Profile</p>
+        </MenuItem>
+      </Menu>
+    );
+
+    return (
+      <div className={classes.root}>
+        <AppBar position="fixed">
+          <Toolbar>
+            <IconButton className={classes.menuButton} color="inherit" aria-label="Open drawer">
+              <MenuIcon />
+            </IconButton>
+            <Typography className={classes.title} variant="h6" color="inherit" noWrap>
+              Reativo
+            </Typography>
+            <div className={classes.search}>
+              <div className={classes.searchIcon}>
+                <SearchIcon />
+              </div>
+              <InputBase
+                placeholder="Search…"
+                classes={{
+                  root: classes.inputRoot,
+                  input: classes.inputInput,
+                }}
+              />
+            </div>
+            <div className={classes.grow} />
+            <div className={classes.sectionDesktop}>
+              <IconButton color="inherit">
+                <MailIcon />
+              </IconButton>
+              <IconButton color="inherit">
+                <NotificationsIcon />
+              </IconButton>
+              <IconButton
+                aria-owns={isMenuOpen ? 'material-appbar' : undefined}
+                aria-haspopup="true"
+                onClick={this.handleProfileMenuOpen}
+                color="inherit"
+              >
+                <AccountCircle />
+              </IconButton>
+            </div>
+            <div className={classes.sectionMobile}>
+              <IconButton aria-haspopup="true" onClick={this.handleMobileMenuOpen} color="inherit">
+                <MoreIcon />
+              </IconButton>
+            </div>
+          </Toolbar>
+        </AppBar>
+        {renderMenu}
+        {renderMobileMenu}
+      </div>
+    );
+  }
+}
+
+PrimarySearchAppBar.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default hot(
+  withStyles(styles)(
+    wrapper(PrimarySearchAppBar)
+  )
+);