react-course-epam-05-09-18 · ViktorSoroka07 · Sep 26, 2018 · Sep 28, 2018 · Oct 10, 2018 · Oct 18, 2018
diff --git a/.gitignore b/.gitignore
diff --git a/ebs-movies/.gitignore b/ebs-movies/.gitignore
@@ -0,0 +1,21 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/ebs-movies/.prettierrc b/ebs-movies/.prettierrc
@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "es5"
+}
diff --git a/ebs-movies/README.md b/ebs-movies/README.md
@@ -0,0 +1,28 @@
+This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.<br>
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br>
+You will also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.<br>
+See the section about [running tests](#running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.<br>
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br>
+Your app is ready to be deployed!
+
+See the section about [deployment](#deployment) for more information.
diff --git a/ebs-movies/package.json b/ebs-movies/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "ebs-movies",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "history": "^4.7.2",
+    "prop-types": "^15.6.2",
+    "react": "^16.5.1",
+    "react-bootstrap": "^0.32.4",
+    "react-dom": "^16.5.1",
+    "react-redux": "^5.0.7",
+    "react-router-dom": "^4.3.1",
+    "react-scripts": "1.1.5",
+    "recompose": "^0.30.0",
+    "redux": "^4.0.0",
+    "redux-thunk": "^2.3.0",
+    "reselect": "^3.0.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "proxy": "http://localhost:8080",
+  "devDependencies": {
+    "prettier": "^1.14.3"
+  }
+}
diff --git a/ebs-movies/public/favicon.ico b/ebs-movies/public/favicon.ico
diff --git a/ebs-movies/public/index.html b/ebs-movies/public/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+
+    <!-- Latest compiled and minified CSS -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>Courses App</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <div id="modal-root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/ebs-movies/src/actions/goTo.js b/ebs-movies/src/actions/goTo.js
@@ -0,0 +1,5 @@
+import history from '../services/history';
+
+export const goTo = payload => () => {
+  history[payload.method](payload.args);
+};
diff --git a/ebs-movies/src/actions/index.js b/ebs-movies/src/actions/index.js
@@ -0,0 +1 @@
+export * from './goTo';
diff --git a/ebs-movies/src/components/ConfirmModal/ConfirmModal.js b/ebs-movies/src/components/ConfirmModal/ConfirmModal.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { withModal } from '../../hoc';
+
+const modalStyles = { display: 'block' };
+
+function ConfirmationModalComponent(props) {
+  const { isVisible, modalTitle, onConfirm, onCancel } = props;
+
+  return (
+    isVisible && (
+      <div role="dialog">
+        <div className="fade modal-backdrop in" />
+        <div className="modal fade in" style={modalStyles}>
+          <div className="modal-dialog">
+            <div className="modal-content">
+              <div className="modal-header">{modalTitle}</div>
+              <div className="modal-footer">
+                <button
+                  type="button"
+                  className="btn btn-default"
+                  onClick={onConfirm}
+                >
+                  Confirm
+                </button>
+                <button
+                  type="button"
+                  className="btn btn-primary"
+                  onClick={onCancel}
+                >
+                  Cancel
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  );
+}
+
+ConfirmationModalComponent.propTypes = {
+  isVisible: PropTypes.bool,
+  modalTitle: PropTypes.string,
+  onConfirm: PropTypes.func,
+  onCancel: PropTypes.func,
+  data: PropTypes.object,
+};
+
+export const ConfirmModal = withModal(ConfirmationModalComponent);
diff --git a/ebs-movies/src/components/ConfirmModal/index.js b/ebs-movies/src/components/ConfirmModal/index.js
@@ -0,0 +1 @@
+export * from './ConfirmModal';
diff --git a/ebs-movies/src/components/FormatDate/FormatDate.js b/ebs-movies/src/components/FormatDate/FormatDate.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const FormatDate = ({ date }) => {
+  if (!date) return null;
+
+  return <span>{new Date(date).toLocaleDateString()}</span>;
+};
+
+FormatDate.propTypes = {
+  date: PropTypes.string.isRequired,
+};
+
+export { FormatDate };
diff --git a/ebs-movies/src/components/FormatDate/index.js b/ebs-movies/src/components/FormatDate/index.js
@@ -0,0 +1 @@
+export * from './FormatDate';
diff --git a/ebs-movies/src/components/FormatDuration/FormatDuration.js b/ebs-movies/src/components/FormatDuration/FormatDuration.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const pluralize = (type, value) => {
+  if (value === 0) return null;
+
+  return `${value} ${type}${value > 1 ? 's' : ''}`;
+};
+
+const FormatDuration = ({ duration, children }) => {
+  const durationNumber = parseInt(duration);
+
+  if ((!durationNumber && durationNumber <= 0) || isNaN(durationNumber))
+    return children({ formattedDuration: null });
+
+  const hours = Math.floor(durationNumber / 60);
+  const minutes = durationNumber - hours * 60;
+
+  const hoursStr = pluralize('hour', hours);
+  const minutesStr = pluralize('minute', minutes);
+  const formattedDuration = [hoursStr, minutesStr].filter(val => val).join(' ');
+
+  return children({ formattedDuration });
+};
+
+FormatDuration.propTypes = {
+  duration: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+};
+
+export { FormatDuration };
diff --git a/ebs-movies/src/components/FormatDuration/index.js b/ebs-movies/src/components/FormatDuration/index.js
@@ -0,0 +1 @@
+export * from './FormatDuration';
diff --git a/ebs-movies/src/components/PrivateRoute/PrivateRoute.js b/ebs-movies/src/components/PrivateRoute/PrivateRoute.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import { Redirect, Route } from 'react-router-dom';
+
+import { isAuthenticated } from '../../services';
+
+export const PrivateRoute = ({ component: Component, ...rest }) => (
+  <Route
+    {...rest}
+    render={props =>
+      isAuthenticated() ? (
+        <Component {...props} />
+      ) : (
+        <Redirect
+          to={{
+            pathname: '/login',
+            state: { from: props.location },
+          }}
+        />
+      )
+    }
+  />
+);
diff --git a/ebs-movies/src/components/PrivateRoute/index.js b/ebs-movies/src/components/PrivateRoute/index.js
@@ -0,0 +1 @@
+export * from './PrivateRoute';
diff --git a/ebs-movies/src/components/Search/Search.js b/ebs-movies/src/components/Search/Search.js
@@ -0,0 +1,52 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Form, FormControl, FormGroup } from 'react-bootstrap';
+
+export class Search extends Component {
+  static propTypes = {
+    onSubmit: PropTypes.func.isRequired,
+    placeholder: PropTypes.string,
+    defaultValue: PropTypes.string,
+  };
+
+  static defaultProps = {
+    placeholder: '',
+    defaultValue: '',
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      value: props.defaultValue,
+    };
+  }
+
+  handleChange = e => {
+    this.setState({ value: e.target.value });
+  };
+
+  handleSubmit = e => {
+    e.preventDefault();
+
+    this.props.onSubmit(this.state.value.trim());
+  };
+
+  render() {
+    const { placeholder, defaultValue } = this.props;
+
+    return (
+      <Form inline onSubmit={this.handleSubmit}>
+        <FormGroup controlId="formInlineName" className="m-r-sm">
+          <FormControl
+            defaultValue={defaultValue}
+            type="text"
+            placeholder={placeholder}
+            onChange={this.handleChange}
+          />
+        </FormGroup>
+        <Button type="submit">Search</Button>
+      </Form>
+    );
+  }
+}
diff --git a/ebs-movies/src/components/Search/index.js b/ebs-movies/src/components/Search/index.js
@@ -0,0 +1 @@
+export * from './Search';
diff --git a/ebs-movies/src/components/index.js b/ebs-movies/src/components/index.js
@@ -0,0 +1,5 @@
+export * from './Search';
+export * from './FormatDuration';
+export * from './FormatDate';
+export * from './ConfirmModal';
+export * from './PrivateRoute';
diff --git a/ebs-movies/src/hoc/index.js b/ebs-movies/src/hoc/index.js
@@ -0,0 +1 @@
+export * from './withModal';