Added react router

README.md

@@ -1,5 +1,30 @@
 # subtaskio
 Subtask Io 
 
-frontend - React JS frontend
+#Frontend
+## How to use - React JS frontend
+
+- Clone git
+
+- Switch to frontend directory
+`$ cd frontend`
+
+- Install dependencies:
+`$ npm install`
+
+- Host dev environment and start
+`$ npm start`
+
+## Stack:
+- React 16.3.1
+- React-Router-dom  4.2.2
+- babel-core 6.26.0
+- Webpack 3.8.1
+
+- Unit Testing :
+- Jest 22.4.3.8
+- Enzyme 3.3.0
+
+
+#Backend
 backend - Aws Lambda backend

frontend/package.json

@@ -40,6 +40,7 @@
     "react": "^16.3.1",
     "react-dev-utils": "^5.0.1",
     "react-dom": "^16.3.1",
+    "react-router-dom": "^4.2.2",
     "react-test-renderer": "^16.3.1",
     "resolve": "1.6.0",
     "sass-loader": "^6.0.7",

frontend/src/components/App/Dashboard/dashboard.test.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import {BrowserRouter as Router} from 'react-router-dom'
+import Dashboard from './index';
+import renderer from 'react-test-renderer';
+
+test('Dummy renders correctly', () => {
+	const component = renderer.create(
+		<Router><Dashboard/></Router>,
+	);
+	let tree = component.toJSON();
+	expect(tree).toMatchSnapshot();
+});

frontend/src/components/App/Dashboard/index.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import styles from './styles.scss';
+import Header from '../Header/index'
+
+const Dashboard = (props) => {
+	return <div className={styles.colored}><Header/>Dashboard</div>;
+};
+
+export default Dashboard;

frontend/src/components/App/Header/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import {Link } from 'react-router-dom'
+
+const Header = () => {
+    return <div>
+        <Link to="/mytask">My Task</Link>
+        <Link to="/inbox">Inbox</Link>
+        <Link to="/dashboard">Dashboard</Link>
+    </div>;
+};
+
+export default Header;

frontend/src/components/App/Inbox/index.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import styles from './styles.scss';
+import Header from '../Header/index'
+
+const Inbox = (props) => {
+	return <div className={styles.colored}><Header/>Inbox</div>;
+};
+
+export default Inbox;

frontend/src/components/App/Mytask/index.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import styles from './styles.scss';
+import Header from '../Header/index'
+
+const MyTask = (props) => {
+	return <div className={styles.colored}><Header/>My Task</div>;
+};
+
+export default MyTask;

frontend/src/components/App/index.js

@@ -1,19 +1,14 @@
 import React, { Component } from 'react';
-import logo from '../../logo.svg';
 import styles from './styles.scss';
-import Dummy from './Dummy';
+import Header from './Header';
 
 class App extends Component {
   render() {
     return (
       <div className={styles.App}>
         <header className={styles["App-header"]}>
-          <img src={logo} className={styles["App-logo"]} alt="logo" />
+          <h1 className={styles["App-title"]}><Header name="Header"/> </h1>
-          <h1 className={styles["App-title"]}><Dummy name="Hamo"/> </h1>
         </header>
-        <p className={styles["App-intro"]}>
-          To get started ba, edit <code>src/App.js</code> and save to reload.
-        </p>
       </div>
     );
   }

frontend/src/index.js

@@ -1,8 +1,23 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { BrowserRouter as Router, Route } from 'react-router-dom'
 import './index.css';
 import App from './components/App';
 import registerServiceWorker from './registerServiceWorker';
+import Inbox from './components/App/Inbox/index';
+import MyTask from './components/App/Mytask/index';
+import Dashboard from './components/App/Dashboard/index';
+import Dummy from './components/App/Dummy/index';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(
+    <Router>
+        <div>
+            <Route exact path='/' component={App} />
+            <Route exact path="/mytask" component={MyTask} />
+            <Route exact path="/inbox" component={Inbox} />
+            <Route exact path="/dashboard" component={Dashboard} />
+        </div>
+    </Router>
+    ,
+    document.getElementById('root'));
 registerServiceWorker();