Single commit

.babelrc

@@ -1,3 +1,4 @@
 {
-  "presets": ["env", "react"]
+  "presets": ["env", "react"],
+  "plugins": ["transform-object-rest-spread"]
 }

package.json

@@ -13,11 +13,13 @@
   },
   "dependencies": {
     "react": "^16.3.1",
-    "react-dom": "^16.3.1"
+    "react-dom": "^16.3.1",
+    "react-router-dom": "^5.2.0"
   },
   "devDependencies": {
     "babel-core": "6.26.*",
     "babel-loader": "7.1.*",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-env": "1.7.0",
     "babel-preset-react": "6.24.*",
     "css-loader": "2.1.*",

src/ActivityDetails.jsx

@@ -0,0 +1,42 @@
+import React, {Component, Fragment} from 'react';
+import ReactDOM from 'react-dom';
+
+import ActivityItem from './ActivityItem.jsx';
+import { Link } from 'react-router-dom';
+
+export default class ActivityDetails extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {details: null};
+
+        this.fetchDetails(this.props.id);
+    }
+
+    fetchDetails(id) {
+        fetch(`https://aircall-job.herokuapp.com/activities/${id}`)
+        .then((data) => {
+            data.json().then((result) => {
+                this.setState({...this.state, details:result});
+            });
+        });
+    }
+
+    render () {
+        console.log('render', this.props);
+        if (this.state.details === null) return '';
+        return (
+            <Fragment>
+                <div>
+                    <div>From: {this.state.details.from}</div>
+                    <div>To: {this.state.details.from}</div>
+                    <div>Via: {this.state.details.via}</div>
+                    <div>Duration: {this.state.details.duration}s</div>
+                </div>
+                <br/>
+                <Link to='/'>&lt; Back</Link>
+            </Fragment>
+
+        );
+    }
+}

src/ActivityItem.jsx

@@ -0,0 +1,56 @@
+import React, {Component, Fragment} from 'react';
+import ReactDOM from 'react-dom';
+import { Link } from 'react-router-dom';
+
+export default class ActivityItem extends Component {
+    constructor(props) {
+        super(props);
+    }
+
+    archive(id) {
+        window.updateActivity(id, true);
+    }
+
+    click(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        this.archive(this.props.activity.id);
+    }
+
+    renderInbound() {
+        return (
+            <Fragment>
+                <Link to={`/activity/${this.props.activity.id}`}>
+                    <div>INBOUND</div>
+                    <div>from: {this.props.activity.from}</div>
+                    <div>to: {this.props.activity.to != null ? this.props.activity.to : "(Unknown)"}</div>
+                    <div>via: {this.props.activity.via}</div>
+                </Link>
+                <button onClick={this.click.bind(this)}>Archive</button>
+            </Fragment>
+        )
+    }
+
+    renderOutbound() {
+        return (
+            <Fragment>
+                <Link to={`/activity/${this.props.activity.id}`}>
+                    <div>OUTBOUND</div>
+                    <div>from: {this.props.activity.from}</div>
+                    <div>to: {this.props.activity.to != null ? this.props.activity.to : "(Unknown)"}</div>
+                    <div>via: {this.props.activity.via}</div>
+                </Link>
+                <button onClick={this.click.bind(this)}>Archive</button>
+            </Fragment>
+        )
+    }
+
+    render () {
+        return (
+
+                <li key={this.props.activity.id} className="activity-item">
+                    {this.props.activity.direction === "inbound" ? this.renderInbound(): this.renderOutbound()}
+                </li>
+        );
+    }
+}

src/ActivityList.jsx

@@ -0,0 +1,24 @@
+import React, {Component} from 'react';
+import ReactDOM from 'react-dom';
+
+import ActivityItem from './ActivityItem.jsx';
+
+export default class ActivityList extends Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render () {
+        console.log('render', this.props);
+        return (
+            <div>
+                <ul>        
+                    {this.props.activities.map((activity) => 
+                        activity.is_archived ? null : <ActivityItem key={activity.id} activity={activity} />
+                    )}
+                </ul>
+                Loading : {this.props.fetching? 'yes': 'no'}
+            </div>
+        );z
+    }
+}

src/App.jsx

@@ -1,17 +1,80 @@
-import React from 'react';
+import React, { Component } from 'react';
+import { BrowserRouter, Switch, Route } from 'react-router-dom'
 import ReactDOM from 'react-dom';
 
 import Header from './Header.jsx';
+import ActivityList from './ActivityList.jsx';
+import ActivityDetails from './ActivityDetails.jsx';
 
-const App = () => {
-  return (
-    <div className='container'>
-      <Header/>
-      <div className="container-view">Some activities should be here</div>
-    </div>
-  );
+class App extends Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      fetching: false,
+      activities: []
+    };
+
+    window.fetchState = this.fetchState.bind(this);
+    window.updateActivity = this.updateActivity.bind(this);
+  }
+
+  componentDidMount() {
+    this.fetchState();
+  }
+
+  updateActivity(id, archive) {
+    this.setState({...this.state, fetching: true});
+    fetch(`https://aircall-job.herokuapp.com/activities/${id}`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            mode: 'cors',
+            body: JSON.stringify({is_archived: archive})
+    }).then((data) => {
+      data.json().then((updatedActivity) => {
+        var newList = this.replaceActivity(updatedActivity);
+        this.setState({...this.state, fetching: false, activities: newList});
+      });
+    });
+  }
+
+  replaceActivity(newActivity) {
+    return this.state.activities.map((currentEntry) => {
+      if (currentEntry.id === newActivity.id) return newActivity;
+      return currentEntry;
+    })
+  }
+
+
+
+  fetchState() {
+    console.log('load');
+    this.setState({...this.state, fetching: true});
+    fetch('https://aircall-job.herokuapp.com/activities').then((response) => {
+        response.json().then((result) => {
+            console.log(result);
+            this.setState({...this.state, fetching: false, activities: result});
+        })
+    });
+  }
+
+  render() {
+    return (
+      <div className='container'>
+        <Header fetching={this.state.fetching} />
+        <Switch>
+            <Route exact path='/' component={() => <ActivityList fetching={this.props.fetching} activities={this.state.activities} />}></Route>
+            <Route exact path='/activity/:id' component={(props) => <ActivityDetails id={props.match.params.id} />}></Route>
+        </Switch>
+      </div>
+    );
+  }  
 };
 
-ReactDOM.render(<App/>, document.getElementById('app'));
+ReactDOM.render(<BrowserRouter>
+<App/></BrowserRouter>, document.getElementById('app'));
 
 export default App;

src/Header.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
 
-const Header = () => {
+const Header = (props) => {
   return (
     <header>
+      {props.fetching ? "Loading..." : ""}
       <svg width='486px' height='168px' viewBox='0 0 486 168' version='1.1' xmlns='http://www.w3.org/2000/svg'>
         <g stroke='none' strokeWidth='1' fill='none' fillRule='evenodd'>
           <g transform='translate(207.000000, 24.000000)'>

src/css/activity-item.css

@@ -0,0 +1,3 @@
+.activity-item {
+    border: solid black 1px;
+}

src/css/app.css

@@ -23,3 +23,7 @@
   padding: 20px;
 }
 
+a {
+  text-decoration: inherit;
+  color: inherit;
+}

src/index.js

@@ -1,6 +1,7 @@
 import './css/body.css';
 import './css/app.css';
-import './css/header.css';
+import './css/header.css'; 
+import './css/activity-item.css';
 
 import App from './App.jsx';