Merge pull request #19 from flickerleap/feature-components

Component Updates and Bug Fixes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-admin-template",
-  "version": "1.1.8",
+  "version": "1.1.9",
   "description": "",
   "main": "dist/bundle.js",
   "style": "dist/styles.css",
@@ -23,22 +23,22 @@
   "license": "MIT",
   "dependencies": {
     "@fortawesome/fontawesome": "^1.1.5",
+    "@fortawesome/fontawesome-free-brands": "^5.0.9",
+    "@fortawesome/fontawesome-free-solid": "^5.0.9",
     "bootstrap": "^4.0.0",
     "classnames": "^2.2.5",
     "clean-webpack-plugin": "^0.1.19",
     "file-loader": "^1.1.11",
-    "flag-icon-css": "^3.0.0",
     "font-awesome": "^4.7.0",
     "html-webpack-plugin": "^3.2.0",
-    "jquery": "^3.3.1",
     "moment": "^2.22.0",
     "normalize.css": "^7.0.0",
-    "popper.js": "^1.14.3",
     "query-string": "^6.0.0",
     "react": "^16.3.1",
     "react-dates": "^16.5.0",
     "react-dom": "^16.3.1",
     "react-modal": "^3.3.2",
+    "react-popup": "^0.9.2",
     "react-redux": "^5.0.7",
     "react-router-dom": "^4.2.2",
     "reactstrap": "^5.0.0",
@@ -48,7 +48,7 @@
     "redux-refresh-token": "^0.1.0",
     "redux-thunk": "^2.2.0",
     "rollup-plugin-uglify": "^3.0.0",
-    "simple-line-icons": "^2.4.1",
+    "url": "^0.11.0",
     "validator": "^9.4.1"
   },
   "devDependencies": {

rollup.config.js

@@ -20,7 +20,8 @@ export default {
     external: [
         'react',
         'react-proptypes',
-        'commonjs-external:url'
+        'url',
+        'events'
     ],
     plugins: [
         resolve({

src/app.js

@@ -29,13 +29,14 @@ export {userNeedsAuthentication, userDoesNotNeedAuthentication} from './helpers/
 export {createFSAConverter} from './helpers/createFSAConverter';
 export {get, set} from './helpers/storage';
 export {contains} from './helpers/string';
-export {now} from './helpers/time';
+export {now, timestamp} from './helpers/time';
 
 /** LAYOUTS */
 export {AdminLayout} from "./layouts/layouts";
 
 /** MIDDLEWARE */
-export {apiMiddleware, CALL_API} from "./middleware/api";
+export {apiMiddleware} from "./middleware/api";
+export {CALL_API} from "./middleware/statics";
 
 /** STORE */
 export {authReducer} from "./store/reducers/reducers";

src/components/form/DynamicForm.js

@@ -13,7 +13,7 @@ export class DynamicForm extends React.Component {
             fields = [],
             newRecord = true,
             dataType = '',
-            errors = []
+            errors = this.props.errors || []
         } = this.props;
 
         this.state = {
@@ -127,7 +127,7 @@ export class DynamicForm extends React.Component {
                     </div>
                     <div className="row">
                         <div className="col pull-left">
-                            <button className="btn btn-success">{this.state.newRecord ? 'Add' : 'Edit'} {this.state.dataType}</button>
+                            <button className="btn btn-success">{this.state.newRecord ? 'Add' : 'Update'} {this.state.dataType}</button>
                         </div>
                     </div>
                 </form>

src/components/form/inputs/Date.js

@@ -1,16 +1,22 @@
 import React from 'react';
 import {SingleDatePicker} from 'react-dates';
 import moment from 'moment';
+import {timestamp} from '../../../helpers/time';
 
 export class Date extends React.Component {
     constructor(props) {
         super(props);
 
         this.state = {
-            focused: false
+            focused: false,
+            date: moment(this.props.value)
         };
     }
 
+    componentDidMount() {
+        this.onChange(this.state.date);
+    }
+
     onFocusChanged = ({focused}) => {
         this.setState(() => ({focused: focused}));
     };
@@ -19,26 +25,32 @@ export class Date extends React.Component {
         const event = {
             target: {
                 name: this.props.name,
-                value: date.format()
+                value: timestamp(date)
             }
         };
+
+        this.setState(() => ({
+            date
+        }));
+
         this.props.onChange(event);
     };
 
     render() {
         const {name, label, numberOfMonths = 1} = this.props;
-        const date = moment(this.props.value);
         return (
             <div>
                 <label htmlFor={name}>{label}</label>
-                <SingleDatePicker
-                    date={date} // momentPropTypes.momentObj or null
-                    onDateChange={this.onChange} // PropTypes.func.isRequired
-                    focused={this.state.focused} // PropTypes.bool
-                    onFocusChange={this.onFocusChanged} // PropTypes.func.isRequired
-                    numberOfMonths={numberOfMonths}
-                    isOutsideRange={() => false}
-                />
+                <div className="form-control">
+                    <SingleDatePicker
+                        date={this.state.date} // momentPropTypes.momentObj or null
+                        onDateChange={this.onChange} // PropTypes.func.isRequired
+                        focused={this.state.focused} // PropTypes.bool
+                        onFocusChange={this.onFocusChanged} // PropTypes.func.isRequired
+                        numberOfMonths={numberOfMonths}
+                        isOutsideRange={() => false}
+                    />
+                </div>
             </div>
         );
     }

src/components/form/inputs/DropDown.js

@@ -1,24 +1,50 @@
 import React from 'react';
 
-export const DropDown = ({name, label, value, onChange, className="form-control", items = [], nameField='name'}) => (
-    <div>
-        <label htmlFor={name}>{label}</label>
-        <select
-            name={name}
-            className={className}
-            value={value}
-            onChange={onChange}
-        >
-            {
-                items.map((item) => (
-                    <option
-                        key={item.id}
-                        value={item.id}
-                    >
-                        {item[nameField]}
-                    </option>
-                ))
+export class DropDown extends React.Component {
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            value: props.value || (props.items.length > 0 ? props.items[0].id : '')
+        };
+    }
+
+    componentDidMount() {
+        this.props.onChange({
+            target:{
+                name: this.props.name,
+                value: this.state.value
             }
-        </select>
-    </div>
-);
+        });
+    }
+
+    render() {
+        const {
+            name, label, onChange, className="form-control", items = [], nameField='name'
+        } = this.props;
+
+        return (
+            <div>
+                <label htmlFor={name}>{label}</label>
+                <select
+                    name={name}
+                    className={className}
+                    value={this.state.value}
+                    onChange={onChange}
+                >
+                    {
+                        items.map((item) => (
+                            <option
+                                key={item.id}
+                                value={item.id}
+                            >
+                                {item[nameField]}
+                            </option>
+                        ))
+                    }
+                </select>
+            </div>
+        );
+    }
+}

src/components/screens/AddScreen.js

@@ -1,11 +1,28 @@
 import React from 'react';
 import {DynamicForm} from '../form/form';
+import {contains} from "../../helpers/string";
 
 export class AddScreen extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            errors: []
+        };
+    }
+
     onSubmit = (item) => {
         const {redirectPath, add} = this.props;
-        add(item).then((response) => {
-            this.props.history.push(redirectPath);
+        add(item).then((action) => {
+            const data = action.payload.response;
+            if (contains(action.type, 'FAILURE')) {
+                this.setState(() => ({
+                    errors: action.errors,
+                    errorMessage: data.message
+                }));
+            } else {
+                this.props.history.push(redirectPath);
+            }
         });
     };
 
@@ -15,6 +32,7 @@ export class AddScreen extends React.Component {
             <div>
                 <h3>{title}</h3>
                 <DynamicForm
+                    errors={this.state.errors}
                     fields={fields}
                     onSubmit={this.onSubmit}
                 />