Complete app's logic

.eslintrc

@@ -1,4 +1,5 @@
 {
+  "parser": "babel-eslint",
   "extends": [
     "standard",
     "standard-react",
@@ -8,6 +9,8 @@
     "react"
   ],
   "rules": {
-    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
+    "no-trailing-spaces": ["error", { "skipBlankLines": true }],
+    "max-len": [2, 120, 2]
   }
 }

package.json

@@ -1,12 +1,23 @@
 {
   "name": "react-rrule-generator",
   "version": "0.1.0",
-  "private": true,
+  "author": "Filip Duczyminski <fduczyminski@gmail.com>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Fafruch/react-rrule-generator.git"
+  },
+  "license": "MIT",
   "dependencies": {
+    "bootstrap": "^4.0.0-beta",
+    "lodash": "^4.17.4",
+    "moment": "^2.18.1",
     "prop-types": "^15.6.0",
     "react": "^16.0.0",
+    "react-copy-to-clipboard": "^5.0.1",
+    "react-datetime": "^2.10.3",
     "react-dom": "^16.0.0",
-    "react-scripts": "1.0.14"
+    "react-scripts": "1.0.14",
+    "rrule": "^2.2.0"
   },
   "devDependencies": {
     "eslint": "^4.8.0",

src/App.js

@@ -1,15 +1,8 @@
 import React from 'react';
-import './styles/App.css';
 
-const App = () => (
-  <div className="App">
-    <header className="App-header">
-      <h1 className="App-title">Rrule generator</h1>
-    </header>
-    <p className="App-intro">
-      To get started, edit <code>src/App.js</code> and save to reload.
-    </p>
-  </div>
-);
+import './styles/index.css';
+import AppContainer from './components/AppContainer';
+
+const App = () => <AppContainer />;
 
 export default App;

src/components/AppContainer.js

@@ -0,0 +1,102 @@
+import React, { Component } from 'react';
+import { cloneDeep, set } from 'lodash';
+import moment from 'moment';
+
+import Repeat from './Repeat/index';
+import End from './End/index';
+import RRule from './RRule/index';
+import computeRRule from '../utils/computeRRule';
+import { DATE_TIME_FORMAT } from '../constants/index';
+
+class AppContainer extends Component {
+  state = {
+    data: {
+      repeat: {
+        frequency: 'Yearly',
+        yearly: {
+          mode: 'on',
+          on: {
+            month: 'Jan',
+            day: 1,
+          },
+          onThe: {
+            month: 'Jan',
+            day: 'Monday',
+            which: 'First',
+          },
+        },
+        monthly: {
+          mode: 'on',
+          interval: 1,
+          on: {
+            day: 1,
+          },
+          onThe: {
+            day: 'Monday',
+            which: 'First',
+          },
+        },
+        weekly: {
+          interval: 1,
+          days: {
+            mon: false,
+            tue: false,
+            wed: false,
+            thu: false,
+            fri: false,
+            sat: false,
+            sun: false,
+          },
+        },
+        daily: {
+          interval: 1,
+        },
+        hourly: {
+          interval: 1,
+        },
+      },
+      end: {
+        mode: 'Never',
+        after: 1,
+        onDate: moment().format(DATE_TIME_FORMAT),
+      },
+    },
+    isCopied: false,
+  };
+
+  handleChange = ({ target }) => {
+    this.setState((currentState) => {
+      const newData = cloneDeep(currentState.data);
+      set(newData, target.name, target.value);
+      return { data: newData, isCopied: false };
+    });
+  }
+
+  handleCopy = () => this.setState({ isCopied: true });
+
+  render() {
+    return (
+      <div className="container m-5">
+
+        <Repeat
+          repeat={this.state.data.repeat}
+          handleChange={this.handleChange}
+        />
+
+        <End
+          end={this.state.data.end}
+          handleChange={this.handleChange}
+        />
+
+        <RRule
+          rrule={computeRRule(this.state.data)}
+          isCopied={this.state.isCopied}
+          handleCopy={this.handleCopy}
+        />
+
+      </div>
+    );
+  }
+}
+
+export default AppContainer;

src/components/End/After.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import numericalFieldHandler from '../../utils/numericalFieldHandler';
+
+const EndAfter = ({
+  after,
+  handleChange,
+}) => (
+  <div>
+    <input
+      name="end.after"
+      className="form-control"
+      value={after}
+      onChange={numericalFieldHandler(handleChange)}
+    />
+    executions.
+  </div>
+);
+
+EndAfter.propTypes = {
+  after: PropTypes.number.isRequired,
+  handleChange: PropTypes.func.isRequired,
+};
+
+export default EndAfter;

src/components/End/OnDate.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import moment from 'moment';
+import DateTime from 'react-datetime';
+
+import { DATE_TIME_FORMAT } from '../../constants/index';
+
+const EndOnDate = ({
+  onDate,
+  handleChange,
+}) => (
+  <DateTime
+    inputProps={{ name: 'end.onDate' }}
+    value={onDate}
+    dateFormat={DATE_TIME_FORMAT}
+    timeFormat={false}
+    viewMode="days"
+    closeOnSelect
+    closeOnTab
+    required
+    onChange={(inputDate) => {
+      const editedEvent = { target: { value: moment(inputDate).format(DATE_TIME_FORMAT), name: 'end.onDate' } };
+      handleChange(editedEvent);
+    }}
+  />
+);
+
+EndOnDate.propTypes = {
+  onDate: PropTypes.string.isRequired,
+  handleChange: PropTypes.func.isRequired,
+};
+
+export default EndOnDate;

src/components/End/index.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import EndAfter from './After';
+import EndOnDate from './OnDate';
+
+const End = ({
+  end: {
+    mode,
+    after,
+    onDate,
+  },
+  handleChange,
+}) => (
+  <div>
+    <h2>End</h2>
+    <select
+      name="end.mode"
+      className="form-control"
+      value={mode}
+      onChange={event => handleChange(event)}
+    >
+      <option value="Never">Never</option>
+      <option value="After">After</option>
+      <option value="On date">On date</option>
+    </select>
+
+    {mode === 'After' && <EndAfter after={after} handleChange={handleChange} />}
+    {mode === 'On date' && <EndOnDate onDate={onDate} handleChange={handleChange} />}
+
+  </div>
+);
+
+End.propTypes = {
+  end: PropTypes.shape({
+    mode: PropTypes.string.isRequired,
+    after: PropTypes.number.isRequired,
+    onDate: PropTypes.string.isRequired,
+  }).isRequired,
+  handleChange: PropTypes.func.isRequired,
+};
+
+export default End;

src/components/RRule/index.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import CopyToClipboard from 'react-copy-to-clipboard';
+
+const RRule = ({ rrule, isCopied, handleCopy }) => (
+  <div>
+    <div className="m-5">
+      Your RRule is: <code>{rrule}</code>
+    </div>
+    <CopyToClipboard
+      text={rrule}
+      onCopy={handleCopy}
+    >
+      <button
+        className={isCopied ? 'btn btn-secondary' : 'btn btn-primary'}
+        onClick={handleCopy}
+      >
+        {isCopied ? 'Copied' : 'Copy'}
+      </button>
+    </CopyToClipboard>
+  </div>
+);
+
+RRule.propTypes = {
+  rrule: PropTypes.string.isRequired,
+  isCopied: PropTypes.bool.isRequired,
+  handleCopy: PropTypes.func.isRequired,
+};
+
+export default RRule;

src/components/Repeat/Daily/index.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import numericalFieldHandler from '../../../utils/numericalFieldHandler';
+
+const RepeatDaily = ({
+  daily: {
+    interval,
+  },
+  handleChange,
+}) => (
+  <div>
+    every
+    <input
+      name="repeat.daily.interval"
+      className="form-control"
+      value={interval}
+      onChange={numericalFieldHandler(handleChange)}
+    />
+    day(s)
+
+  </div>
+);
+RepeatDaily.propTypes = {
+  daily: PropTypes.shape({
+    interval: PropTypes.number.isRequired,
+  }).isRequired,
+  handleChange: PropTypes.func.isRequired,
+};
+
+export default RepeatDaily;

src/components/Repeat/Hourly/index.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import numericalFieldHandler from '../../../utils/numericalFieldHandler';
+
+const RepeatHourly = ({
+  hourly: {
+    interval,
+  },
+  handleChange,
+}) => (
+  <div>
+    every
+    <input
+      name="repeat.hourly.interval"
+      className="form-control"
+      value={interval}
+      onChange={numericalFieldHandler(handleChange)}
+    />
+    day(s)
+
+  </div>
+);
+RepeatHourly.propTypes = {
+  hourly: PropTypes.shape({
+    interval: PropTypes.number.isRequired,
+  }).isRequired,
+  handleChange: PropTypes.func.isRequired,
+};
+
+export default RepeatHourly;