From 7d799eda0effcdfe1ee937dfaf04982f56aed5a5 Mon Sep 17 00:00:00 2001 From: kasulejoseph Date: Mon, 28 Jan 2019 10:49:39 +0300 Subject: [PATCH] feat(react-redux): code refactor change the code base structure to have the file structure similar to that recommended for react applications --- __tests__/components/post.test.js | 13 - __tests__/setup/setupEnzyme.js | 4 - package.json | 2 +- src/Router/router.jsx | 12 +- src/components/LoginForm/LoginForm.jsx | 114 + .../{navbarComponent.js => NavBar/Navbar.jsx} | 30 +- src/components/NavBar/Navbar.spec.jsx | 17 + .../NavBar/__snapshots__/Navbar.spec.jsx.snap | 1742 +++++++++ .../{postForm.js => PostForm/PostForm.jsx} | 54 +- src/components/PostForm/PostForm.spec.jsx | 17 + .../__snapshots__/PostForm.spec.jsx.snap | 1066 ++++++ .../SignupForm.jsx} | 61 +- src/components/SignupForm/SignupForm.spec.jsx | 17 + .../__snapshots__/SignupForm.spec.jsx.snap | 3300 +++++++++++++++++ src/components/clock.js | 40 - src/components/loginComponent.js | 130 - src/components/number.js | 4 - src/components/posts.js | 50 - src/components/posts.test.js | 13 - src/container/GetMenu/GetMenu.js | 63 + src/container/GetMenu/GetMenu.spec.jsx | 17 + .../__snapshots__/GetMenu.spec.jsx.snap | 94 + src/container/Login/Login.js | 38 + src/container/Menu/Menu.js | 40 + src/container/NavBar/NavBar.js | 25 + src/container/Signup/Signup.js | 43 + .../testComponent.js | 0 27 files changed, 6633 insertions(+), 373 deletions(-) delete mode 100644 __tests__/components/post.test.js delete mode 100644 __tests__/setup/setupEnzyme.js create mode 100644 src/components/LoginForm/LoginForm.jsx rename src/components/{navbarComponent.js => NavBar/Navbar.jsx} (76%) create mode 100644 src/components/NavBar/Navbar.spec.jsx create mode 100644 src/components/NavBar/__snapshots__/Navbar.spec.jsx.snap rename src/components/{postForm.js => PostForm/PostForm.jsx} (58%) create mode 100644 src/components/PostForm/PostForm.spec.jsx create mode 100644 src/components/PostForm/__snapshots__/PostForm.spec.jsx.snap rename src/components/{signupComponent.js => SignupForm/SignupForm.jsx} (75%) create mode 100644 src/components/SignupForm/SignupForm.spec.jsx create mode 100644 src/components/SignupForm/__snapshots__/SignupForm.spec.jsx.snap delete mode 100644 src/components/clock.js delete mode 100644 src/components/loginComponent.js delete mode 100644 src/components/number.js delete mode 100644 src/components/posts.js delete mode 100644 src/components/posts.test.js create mode 100644 src/container/GetMenu/GetMenu.js create mode 100644 src/container/GetMenu/GetMenu.spec.jsx create mode 100644 src/container/GetMenu/__snapshots__/GetMenu.spec.jsx.snap create mode 100644 src/container/Login/Login.js create mode 100644 src/container/Menu/Menu.js create mode 100644 src/container/NavBar/NavBar.js create mode 100644 src/container/Signup/Signup.js rename src/{components => container}/testComponent.js (100%) diff --git a/__tests__/components/post.test.js b/__tests__/components/post.test.js deleted file mode 100644 index ee10bd8..0000000 --- a/__tests__/components/post.test.js +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import { shallow, Enzyme } from 'enzyme'; -import Posts from '../../src/components/posts'; -import Adapter from 'enzyme-adapter-react-16'; - -Enzyme.configure({ adapter: new Adapter()}) -describe('Post', () => { - let wrapper = shallow(); - it('should render post', () => { - expect(wrapper.containsMatchingElement(
)).toEqual(true); - - }); -}); \ No newline at end of file diff --git a/__tests__/setup/setupEnzyme.js b/__tests__/setup/setupEnzyme.js deleted file mode 100644 index f11b26b..0000000 --- a/__tests__/setup/setupEnzyme.js +++ /dev/null @@ -1,4 +0,0 @@ -import Enzyme from 'enzyme'; -import Adapter from 'enzyme-adapter-react-16'; - -Enzyme.configure({ adapter: new Adapter()}) \ No newline at end of file diff --git a/package.json b/package.json index 5e4fcfb..500074a 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "scripts": { "start": "react-scripts start", "build": "react-scripts build", - "test": "react-scripts test --coverage --collectCoverageFrom=src/**/*.js --collectCoverageFrom=!src/index.js --collectCoverageFrom=!src/serviceWorker.js", + "test": "react-scripts test --coverage --collectCoverageFrom=src/**/*.js --collectCoverageFrom=src/**/*.jsx --collectCoverageFrom=!src/index.jsx --collectCoverageFrom=!src/serviceWorker.js", "eject": "react-scripts eject", "test:watch": "jest --watch" }, diff --git a/src/Router/router.jsx b/src/Router/router.jsx index 41fe2d5..8e63bb1 100644 --- a/src/Router/router.jsx +++ b/src/Router/router.jsx @@ -1,11 +1,10 @@ import {BrowserRouter, Route, Switch} from 'react-router-dom' -import Postmenu from '../components/postForm'; -import SignUp from '../components/signupComponent'; -import LogIn from '../components/loginComponent'; -import Posts from '../components/posts' -import Clock from '../components/clock' +import Postmenu from '../container/Menu/Menu'; +import SignUp from '../container/Signup/Signup'; +import LogIn from '../container/Login/Login'; +import Posts from '../container/GetMenu/GetMenu' import React from 'react'; -import FixedNavbarExample from '../components/navbarComponent' +import FixedNavbarExample from '../container/NavBar/NavBar' const RouterComponent = () => { return ( @@ -17,7 +16,6 @@ const RouterComponent = () => { -
diff --git a/src/components/LoginForm/LoginForm.jsx b/src/components/LoginForm/LoginForm.jsx new file mode 100644 index 0000000..2b39c13 --- /dev/null +++ b/src/components/LoginForm/LoginForm.jsx @@ -0,0 +1,114 @@ +import React from "react"; +import PropTypes from "prop-types"; +import { + MDBContainer, + MDBRow, + MDBCol, + MDBCard, + MDBCardBody, + MDBInput, + MDBBtn, + MDBIcon, + MDBModalFooter +} from "mdbreact"; + +const LoginForm = ({ onChange, onSubmit }) => { + return ( + + + +
+ + +
+

+ Sign in +

+
+ + +

+ Forgot + + Password? + +

+
+ + Sign in + +
+

+ or Sign in with: +

+
+ + + + + + + + + +
+ + +

+ Not a member? + + Sign Up + +

+ + +
+ + + + ); +}; + +LoginForm.propTypes = {}; + +export default LoginForm; diff --git a/src/components/navbarComponent.js b/src/components/NavBar/Navbar.jsx similarity index 76% rename from src/components/navbarComponent.js rename to src/components/NavBar/Navbar.jsx index da862b7..e17ff96 100644 --- a/src/components/navbarComponent.js +++ b/src/components/NavBar/Navbar.jsx @@ -1,32 +1,18 @@ import React from 'react'; import {MDBNavbar, NavLink, MDBNavbarBrand, MDBNavbarNav, MDBNavbarToggler, MDBCollapse, MDBNavItem, MDBIcon } from 'mdbreact'; -class FixedNavbarExample extends React.Component { - constructor(props) { - super(props); - this.state = { - collapse: false, - }; - this.onClick = this.onClick.bind(this); - } - onClick() { - this.setState({ - collapse: !this.state.collapse, - }); - } - - render() { +const Navbar = ({onClick, isOpen}) => { const bgPink = {backgroundColor: '#e91e63'} - return( -
+ return ( +
FAST FOOD FAST - - + + Home @@ -57,7 +43,7 @@ class FixedNavbarExample extends React.Component {
); - } -} +}; + -export default FixedNavbarExample; +export default Navbar; diff --git a/src/components/NavBar/Navbar.spec.jsx b/src/components/NavBar/Navbar.spec.jsx new file mode 100644 index 0000000..aa22d67 --- /dev/null +++ b/src/components/NavBar/Navbar.spec.jsx @@ -0,0 +1,17 @@ +import React from "react"; +import { shallow } from "enzyme"; +import Navbar from "./Navbar"; + +let props = { + onChange: jest.fn(), + onSubmit: jest.fn(), +}; +describe("Test Navbar", () => { + let wrapper; + beforeEach(() => { + wrapper = shallow(); + }); + it("Navbar snapshot", () => { + expect(wrapper).toMatchSnapshot(); + }); +}); \ No newline at end of file diff --git a/src/components/NavBar/__snapshots__/Navbar.spec.jsx.snap b/src/components/NavBar/__snapshots__/Navbar.spec.jsx.snap new file mode 100644 index 0000000..cbb342c --- /dev/null +++ b/src/components/NavBar/__snapshots__/Navbar.spec.jsx.snap @@ -0,0 +1,1742 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Test Navbar Navbar snapshot 1`] = ` +ShallowWrapper { + Symbol(enzyme.__root__): [Circular], + Symbol(enzyme.__unrendered__): , + Symbol(enzyme.__renderer__): Object { + "batchedUpdates": [Function], + "getNode": [Function], + "render": [Function], + "simulateError": [Function], + "simulateEvent": [Function], + "unmount": [Function], + }, + Symbol(enzyme.__node__): Object { + "instance": null, + "key": undefined, + "nodeType": "host", + "props": Object { + "children":
+ + + + FAST FOOD FAST + + + + + + + + Home + + + + + Menu + + + + + Add Menu + + + + + Signup + + + + + + + + + + + + + + + + + + + + + + +
, + }, + "ref": null, + "rendered": Object { + "instance": null, + "key": undefined, + "nodeType": "host", + "props": Object { + "children": + + + FAST FOOD FAST + + + + + + + + Home + + + + + Menu + + + + + Add Menu + + + + + Signup + + + + + + + + + + + + + + + + + + + + + + , + }, + "ref": null, + "rendered": Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "children": Array [ + + + FAST FOOD FAST + + , + , + + + + + Home + + + + + Menu + + + + + Add Menu + + + + + Signup + + + + + + + + + + + + + + + + + + + + + , + ], + "color": "grey darken-3", + "dark": true, + "expand": "md", + "fixed": "top", + "scrolling": true, + "style": Object { + "backgroundColor": "#e91e63", + }, + "tag": "nav", + }, + "ref": null, + "rendered": Array [ + Object { + "instance": null, + "key": undefined, + "nodeType": "function", + "props": Object { + "children": + FAST FOOD FAST + , + "href": "/", + }, + "ref": null, + "rendered": Object { + "instance": null, + "key": undefined, + "nodeType": "host", + "props": Object { + "children": "FAST FOOD FAST", + }, + "ref": null, + "rendered": "FAST FOOD FAST", + "type": "strong", + }, + "type": [Function], + }, + Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "onClick": undefined, + "tag": "button", + "type": "button", + }, + "ref": null, + "rendered": null, + "type": [Function], + }, + Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "children": Array [ + + + + Home + + + + + Menu + + + + + Add Menu + + + + + Signup + + + , + + + + + + + + + + + + + + + + + , + ], + "delay": Object { + "hide": 350, + "show": 350, + }, + "isOpen": "", + "navbar": true, + "onClosed": [Function], + "onOpened": [Function], + }, + "ref": null, + "rendered": Array [ + Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "children": Array [ + + + Home + + , + + + Menu + + , + + + Add Menu + + , + + + Signup + + , + ], + "left": true, + "tag": "ul", + }, + "ref": null, + "rendered": Array [ + Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "active": true, + "children": + Home + , + "tag": "li", + }, + "ref": null, + "rendered": Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "children": "Home", + "to": "/", + }, + "ref": null, + "rendered": "Home", + "type": [Function], + }, + "type": [Function], + }, + Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "children": + Menu + , + "tag": "li", + }, + "ref": null, + "rendered": Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "children": "Menu", + "to": "/menu", + }, + "ref": null, + "rendered": "Menu", + "type": [Function], + }, + "type": [Function], + }, + Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "children": + Add Menu + , + "tag": "li", + }, + "ref": null, + "rendered": Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "children": "Add Menu", + "to": "/addmenu", + }, + "ref": null, + "rendered": "Add Menu", + "type": [Function], + }, + "type": [Function], + }, + Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "children": + Signup + , + "tag": "li", + }, + "ref": null, + "rendered": Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "children": "Signup", + "to": "/signup", + }, + "ref": null, + "rendered": "Signup", + "type": [Function], + }, + "type": [Function], + }, + ], + "type": [Function], + }, + Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "children": Array [ + + + + + , + + + + + , + + + + + , + ], + "right": true, + "tag": "ul", + }, + "ref": null, + "rendered": Array [ + Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "children": + + , + "tag": "li", + }, + "ref": null, + "rendered": Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "children": , + "to": "#", + }, + "ref": null, + "rendered": Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "icon": "facebook", + }, + "ref": null, + "rendered": null, + "type": [Function], + }, + "type": [Function], + }, + "type": [Function], + }, + Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "children": + + , + "tag": "li", + }, + "ref": null, + "rendered": Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "children": , + "to": "#", + }, + "ref": null, + "rendered": Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "icon": "twitter", + }, + "ref": null, + "rendered": null, + "type": [Function], + }, + "type": [Function], + }, + "type": [Function], + }, + Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "children": + + , + "tag": "li", + }, + "ref": null, + "rendered": Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "children": , + "to": "#", + }, + "ref": null, + "rendered": Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "icon": "instagram", + }, + "ref": null, + "rendered": null, + "type": [Function], + }, + "type": [Function], + }, + "type": [Function], + }, + ], + "type": [Function], + }, + ], + "type": [Function], + }, + ], + "type": [Function], + }, + "type": "header", + }, + "type": "div", + }, + Symbol(enzyme.__nodes__): Array [ + Object { + "instance": null, + "key": undefined, + "nodeType": "host", + "props": Object { + "children":
+ + + + FAST FOOD FAST + + + + + + + + Home + + + + + Menu + + + + + Add Menu + + + + + Signup + + + + + + + + + + + + + + + + + + + + + + +
, + }, + "ref": null, + "rendered": Object { + "instance": null, + "key": undefined, + "nodeType": "host", + "props": Object { + "children": + + + FAST FOOD FAST + + + + + + + + Home + + + + + Menu + + + + + Add Menu + + + + + Signup + + + + + + + + + + + + + + + + + + + + + + , + }, + "ref": null, + "rendered": Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "children": Array [ + + + FAST FOOD FAST + + , + , + + + + + Home + + + + + Menu + + + + + Add Menu + + + + + Signup + + + + + + + + + + + + + + + + + + + + + , + ], + "color": "grey darken-3", + "dark": true, + "expand": "md", + "fixed": "top", + "scrolling": true, + "style": Object { + "backgroundColor": "#e91e63", + }, + "tag": "nav", + }, + "ref": null, + "rendered": Array [ + Object { + "instance": null, + "key": undefined, + "nodeType": "function", + "props": Object { + "children": + FAST FOOD FAST + , + "href": "/", + }, + "ref": null, + "rendered": Object { + "instance": null, + "key": undefined, + "nodeType": "host", + "props": Object { + "children": "FAST FOOD FAST", + }, + "ref": null, + "rendered": "FAST FOOD FAST", + "type": "strong", + }, + "type": [Function], + }, + Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "onClick": undefined, + "tag": "button", + "type": "button", + }, + "ref": null, + "rendered": null, + "type": [Function], + }, + Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "children": Array [ + + + + Home + + + + + Menu + + + + + Add Menu + + + + + Signup + + + , + + + + + + + + + + + + + + + + + , + ], + "delay": Object { + "hide": 350, + "show": 350, + }, + "isOpen": "", + "navbar": true, + "onClosed": [Function], + "onOpened": [Function], + }, + "ref": null, + "rendered": Array [ + Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "children": Array [ + + + Home + + , + + + Menu + + , + + + Add Menu + + , + + + Signup + + , + ], + "left": true, + "tag": "ul", + }, + "ref": null, + "rendered": Array [ + Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "active": true, + "children": + Home + , + "tag": "li", + }, + "ref": null, + "rendered": Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "children": "Home", + "to": "/", + }, + "ref": null, + "rendered": "Home", + "type": [Function], + }, + "type": [Function], + }, + Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "children": + Menu + , + "tag": "li", + }, + "ref": null, + "rendered": Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "children": "Menu", + "to": "/menu", + }, + "ref": null, + "rendered": "Menu", + "type": [Function], + }, + "type": [Function], + }, + Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "children": + Add Menu + , + "tag": "li", + }, + "ref": null, + "rendered": Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "children": "Add Menu", + "to": "/addmenu", + }, + "ref": null, + "rendered": "Add Menu", + "type": [Function], + }, + "type": [Function], + }, + Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "children": + Signup + , + "tag": "li", + }, + "ref": null, + "rendered": Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "children": "Signup", + "to": "/signup", + }, + "ref": null, + "rendered": "Signup", + "type": [Function], + }, + "type": [Function], + }, + ], + "type": [Function], + }, + Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "children": Array [ + + + + + , + + + + + , + + + + + , + ], + "right": true, + "tag": "ul", + }, + "ref": null, + "rendered": Array [ + Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "children": + + , + "tag": "li", + }, + "ref": null, + "rendered": Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "children": , + "to": "#", + }, + "ref": null, + "rendered": Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "icon": "facebook", + }, + "ref": null, + "rendered": null, + "type": [Function], + }, + "type": [Function], + }, + "type": [Function], + }, + Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "children": + + , + "tag": "li", + }, + "ref": null, + "rendered": Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "children": , + "to": "#", + }, + "ref": null, + "rendered": Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "icon": "twitter", + }, + "ref": null, + "rendered": null, + "type": [Function], + }, + "type": [Function], + }, + "type": [Function], + }, + Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "children": + + , + "tag": "li", + }, + "ref": null, + "rendered": Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "children": , + "to": "#", + }, + "ref": null, + "rendered": Object { + "instance": null, + "key": undefined, + "nodeType": "class", + "props": Object { + "icon": "instagram", + }, + "ref": null, + "rendered": null, + "type": [Function], + }, + "type": [Function], + }, + "type": [Function], + }, + ], + "type": [Function], + }, + ], + "type": [Function], + }, + ], + "type": [Function], + }, + "type": "header", + }, + "type": "div", + }, + ], + Symbol(enzyme.__options__): Object { + "adapter": ReactSixteenAdapter { + "options": Object { + "enableComponentDidUpdateOnSetState": true, + "lifecycles": Object { + "componentDidUpdate": Object { + "onSetState": true, + }, + "getDerivedStateFromProps": true, + "getSnapshotBeforeUpdate": true, + "setState": Object { + "skipsComponentDidUpdateOnNullish": true, + }, + }, + }, + }, + }, +} +`; diff --git a/src/components/postForm.js b/src/components/PostForm/PostForm.jsx similarity index 58% rename from src/components/postForm.js rename to src/components/PostForm/PostForm.jsx index d2375de..a1838fe 100644 --- a/src/components/postForm.js +++ b/src/components/PostForm/PostForm.jsx @@ -1,38 +1,12 @@ import React from 'react'; -import {connect} from 'react-redux' -import {myMenu} from '../actions/fetchAction' import { MDBContainer, MDBRow, MDBCol, MDBBtn, MDBIcon } from 'mdbreact'; -class Postmenu extends React.Component { - constructor(props) { - super(props); - this.state = { - meal: '', - description: '', - price: '', - image: '' - }; - this.onChange = this.onChange.bind(this) - this.onSubmit = this.onSubmit.bind(this) - } - onChange(e){ - this.setState({[e.target.name]: e.target.value}); - } - onSubmit(e){ - e.preventDefault(); - const menu = { - meal: this.state.meal, - description: this.state.description, - price: Number(this.state.price), - image: 'image.jpg' - }; - this.props.myMenu(menu) - } - render() { - return ( - + +const PostForm = ({onChange, onSubmit}) => { + return ( + -
+

Add menu