diff --git a/.babelrc b/.babelrc index 95b8ce0..9dce8c8 100644 --- a/.babelrc +++ b/.babelrc @@ -1,3 +1,4 @@ { - "presets": ["stage-2", "es2015", "react"] + "plugins": ["universal-import"], + "presets": ["stage-2", "es2017", "react"] } \ No newline at end of file diff --git a/.eslintrc b/.eslintrc index a278674..3291474 100644 --- a/.eslintrc +++ b/.eslintrc @@ -11,9 +11,9 @@ "**/__tests__/**", "**/__mocks__/**", "**/*.{test,spec}.{js,jsx}", - "**/stories/**" + "**/stories/**", "**/__stories__/**", - "**/*.story.{js,jsx}", + "**/*.story.{js,jsx}" ], "optionalDependencies": false }], diff --git a/config/storybook/addons.js b/config/storybook/addons.js index 6aed412..80d8ad3 100644 --- a/config/storybook/addons.js +++ b/config/storybook/addons.js @@ -1,2 +1,3 @@ +/* eslint-disable import/no-extraneous-dependencies */ import '@storybook/addon-actions/register'; import '@storybook/addon-links/register'; diff --git a/config/storybook/config.js b/config/storybook/config.js index 2edb8fc..a0c4031 100644 --- a/config/storybook/config.js +++ b/config/storybook/config.js @@ -4,7 +4,7 @@ import { configure, addDecorator, setAddon } from '@storybook/react'; import { setOptions } from '@storybook/addon-options'; import { withKnobs } from '@storybook/addon-knobs/react'; import JSXAddon from 'storybook-addon-jsx'; -import styles from "@sambego/storybook-styles"; +import styles from '@sambego/storybook-styles'; import Provider from './Provider'; import { MemoryRouter } from 'react-router'; @@ -12,14 +12,14 @@ import { MemoryRouter } from 'react-router'; import configureStore from '../src/bootstrap/configureStore'; addDecorator(story => ); -addDecorator(story => {story()}) +addDecorator(story => {story()}); addDecorator(styles({ boxSizing: 'border-box', fontFamily: "'Helvetica Neue','Helvetica','Arial',sans-serif", fontSize: '16px', margin: 0, -})) -setAddon(JSXAddon) +})); +setAddon(JSXAddon); const req = require.context('../src/components/', true, /story\.(jsx|js)$/); function loadStories() { diff --git a/package.json b/package.json index 98eb582..ce5a54b 100644 --- a/package.json +++ b/package.json @@ -3,31 +3,22 @@ "license": "MIT", "version": "0.1.0", "private": true, + "scripts": { + "start": "node scripts/start.js", + "build": "node scripts/build.js", + "test": "node scripts/test.js --env=jsdom", + "lint": "eslint . --fix", + "storybook": "start-storybook -p 9009 -s public -c config/storybook", + "build-storybook": "build-storybook -s public" + }, "dependencies": { - "autoprefixer": "7.1.6", - "babel-core": "6.26.0", - "babel-eslint": "7.2.3", - "babel-jest": "20.0.3", - "babel-loader": "7.1.2", - "babel-preset-react-app": "^3.1.1", - "babel-runtime": "6.26.0", - "case-sensitive-paths-webpack-plugin": "2.1.1", "chalk": "1.1.3", "css-loader": "0.28.7", - "dotenv": "4.0.0", - "dotenv-expand": "4.2.0", - "eslint": "4.10.0", - "eslint-config-react-app": "^2.1.0", - "eslint-loader": "1.9.0", - "eslint-plugin-flowtype": "2.39.1", - "eslint-plugin-import": "2.8.0", - "eslint-plugin-jsx-a11y": "5.1.1", - "eslint-plugin-react": "7.4.0", "extract-text-webpack-plugin": "3.0.2", "file-loader": "1.1.5", "fs-extra": "3.0.1", + "history": "^4.7.2", "html-webpack-plugin": "2.29.0", - "jest": "20.0.4", "object-assign": "4.1.1", "postcss-flexbugs-fixes": "3.2.0", "postcss-loader": "2.0.8", @@ -39,11 +30,10 @@ "react-dom": "^16.3.2", "react-helmet": "^5.2.0", "react-redux": "^5.0.7", - "react-router": "^4.2.0", - "react-router-dom": "^4.2.2", - "react-router-redux": "^4.0.8", "react-snapshot": "^1.3.0", + "react-universal-component": "^2.9.0", "redux": "^4.0.0", + "redux-first-router": "^0.0.16-next", "redux-logger": "^3.0.6", "redux-thunk": "^2.2.0", "resolve": "1.6.0", @@ -56,14 +46,6 @@ "webpack-manifest-plugin": "1.3.2", "whatwg-fetch": "2.0.3" }, - "scripts": { - "start": "node scripts/start.js", - "build": "node scripts/build.js", - "test": "node scripts/test.js --env=jsdom", - "lint": "eslint . --fix", - "storybook": "start-storybook -p 9009 -s public -c config/storybook", - "build-storybook": "build-storybook -s public" - }, "devDependencies": { "@sambego/storybook-styles": "^1.0.0", "@storybook/addon-actions": "^3.4.3", @@ -73,14 +55,32 @@ "@storybook/addon-storyshots": "^3.4.3", "@storybook/addons": "^3.4.3", "@storybook/react": "^3.4.3", + "autoprefixer": "7.1.6", + "babel-cli": "^6.26.0", "babel-core": "^6.26.3", - "babel-preset-es2015": "^6.24.1", + "babel-eslint": "7.2.3", + "babel-jest": "20.0.3", + "babel-loader": "7.1.2", + "babel-plugin-universal-import": "^3.0.0", + "babel-preset-es2017": "^6.24.1", + "babel-preset-react-app": "^3.1.1", "babel-preset-stage-2": "^6.24.1", "babel-runtime": "^6.26.0", + "case-sensitive-paths-webpack-plugin": "2.1.1", + "dotenv": "4.0.0", + "dotenv-expand": "4.2.0", "enzyme": "^3.3.0", "enzyme-adapter-react-16": "^1.1.1", "enzyme-to-json": "^3.3.3", + "eslint": "4.10.0", "eslint-config-airbnb": "^16.1.0", + "eslint-config-react-app": "^2.1.0", + "eslint-loader": "1.9.0", + "eslint-plugin-flowtype": "2.39.1", + "eslint-plugin-import": "2.8.0", + "eslint-plugin-jsx-a11y": "^6.0.3", + "eslint-plugin-react": "7.4.0", + "jest": "20.0.4", "jest-styled-components": "^5.0.1", "storybook-addon-jsx": "^5.3.0" }, diff --git a/src/actions/index.js b/src/actions/index.js new file mode 100644 index 0000000..83f91c9 --- /dev/null +++ b/src/actions/index.js @@ -0,0 +1,4 @@ +import exportAllDefaults from '../utils/exportAllDefaults'; + +const context = require.context('.', false, /\.js/); +export default exportAllDefaults(context); diff --git a/src/actions/plants.js b/src/actions/plants.js new file mode 100644 index 0000000..3680a95 --- /dev/null +++ b/src/actions/plants.js @@ -0,0 +1,12 @@ +// ADD_PLANT, UPDATE_PLANT, DELETE_PLANT, GET_PLANT, +import { LIST_PLANTS, SET_PLANTS } from '../constants/actionTypes'; +import * as api from '../constants/apiTypes'; +import makeActionCreator from '../utils/makeActionCreator'; +import apiActionCreator from '../utils/apiActionCreator'; + +// export const createPlant = makeActionCreator(ADD_PLANT, 'plant'); +// export const updatePlant = makeActionCreator(UPDATE_PLANT, 'id', 'plant'); +// export const getPlant = makeActionCreator(GET_PLANT, 'id'); +// export const deletePlant = makeActionCreator(DELETE_PLANT, 'id'); +export const listPlants = apiActionCreator(LIST_PLANTS, api.GET_PLANTS, 'gardenId'); +export const setPlants = makeActionCreator(SET_PLANTS, 'gardenId', 'plants'); diff --git a/src/constants/actionTypes.js b/src/constants/actionTypes.js new file mode 100644 index 0000000..760e455 --- /dev/null +++ b/src/constants/actionTypes.js @@ -0,0 +1,10 @@ +export const API_LOADING = 'API_LOADING'; +export const API_SUCCESS = 'API_SUCCESS'; +export const API_ERROR = 'API_ERROR'; + +export const ADD_PLANT = 'ADD_PLANT'; +export const UPDATE_PLANT = 'UPDATE_PLANT'; +export const DELETE_PLANT = 'DELETE_PLANT'; +export const GET_PLANT = 'GET_PLANT'; +export const LIST_PLANTS = 'LIST_PLANTS'; +export const SET_PLANTS = 'SET_PLANTS'; diff --git a/src/constants/apiTypes.js b/src/constants/apiTypes.js new file mode 100644 index 0000000..ca7de24 --- /dev/null +++ b/src/constants/apiTypes.js @@ -0,0 +1,2 @@ +export const GET_PLANTS = 'getPlants'; +export const GET_GARDENS = 'getGardens'; diff --git a/src/constants/pageNames.js b/src/constants/pageNames.js new file mode 100644 index 0000000..6121c94 --- /dev/null +++ b/src/constants/pageNames.js @@ -0,0 +1,12 @@ +const context = require.context('../containers/pages', false, /\.jsx/); +const pageNames = {}; +context.keys().forEach((key) => { + if (key !== '.' && key !== '..') { + const name = key.replace(/\.\//, '').split('.')[0]; + if (name !== 'index') { + pageNames[name] = name; + } + } +}); + +export default pageNames; diff --git a/src/containers/layout/App.jsx b/src/containers/layout/App.jsx index 16cb192..0b0ed21 100644 --- a/src/containers/layout/App.jsx +++ b/src/containers/layout/App.jsx @@ -1,14 +1,24 @@ -import React, { Fragment } from 'react'; -import Router from '../../init/router'; - -const App = () => ( - -
-
- -
-
-
-); - -export default App; +import React, { Fragment } from 'react'; +import { connect } from 'react-redux'; +import PropTypes from 'prop-types'; +import universal from 'react-universal-component'; + +const UniversalComponent = universal(({ page }) => import(`../pages/${page}`)); + +const App = ({ page }) => ( + +
+
+ +
+