diff --git a/.idea/.gitignore b/.idea/.gitignore
new file mode 100644
index 0000000..e7e9d11
--- /dev/null
+++ b/.idea/.gitignore
@@ -0,0 +1,2 @@
+# Default ignored files
+/workspace.xml
diff --git a/.idea/codeStyles/codeStyleConfig.xml b/.idea/codeStyles/codeStyleConfig.xml
new file mode 100644
index 0000000..a55e7a1
--- /dev/null
+++ b/.idea/codeStyles/codeStyleConfig.xml
@@ -0,0 +1,5 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/frontend-test.iml b/.idea/frontend-test.iml
new file mode 100644
index 0000000..c956989
--- /dev/null
+++ b/.idea/frontend-test.iml
@@ -0,0 +1,8 @@
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/misc.xml b/.idea/misc.xml
new file mode 100644
index 0000000..24eb271
--- /dev/null
+++ b/.idea/misc.xml
@@ -0,0 +1,6 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 0000000..58e12f5
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000..94a25f7
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/package.json b/package.json
index f09dd4d..5e7bcec 100644
--- a/package.json
+++ b/package.json
@@ -12,8 +12,12 @@
"build": "webpack --mode production"
},
"dependencies": {
+ "@babel/polyfill": "^7.12.1",
+ "@material-ui/core": "^4.11.0",
+ "@material-ui/icons": "^4.9.1",
"react": "^16.3.1",
- "react-dom": "^16.3.1"
+ "react-dom": "^16.13.1",
+ "react-router-dom": "^5.2.0"
},
"devDependencies": {
"babel-core": "6.26.*",
diff --git a/src/App.jsx b/src/App.jsx
index 6f44e55..f7b3293 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,14 +1,21 @@
import React from 'react';
import ReactDOM from 'react-dom';
-
+import {BrowserRouter as Router, Route} from 'react-router-dom';
+import CallList from './components/CallList';
+import "@babel/polyfill";
+import CallDetail from './components/CallDetail';
import Header from './Header.jsx';
const App = () => {
return (
-
-
-
Some activities should be here
-
+
+
+
+
+
+
);
};
diff --git a/src/components/CallDetail.js b/src/components/CallDetail.js
new file mode 100644
index 0000000..32f22d7
--- /dev/null
+++ b/src/components/CallDetail.js
@@ -0,0 +1,92 @@
+import React, {useEffect, useState} from 'react';
+import {getCallDetail, updateCall} from "../services/api";
+import Card from "@material-ui/core/Card";
+import Typography from "@material-ui/core/Typography";
+import CardContent from "@material-ui/core/CardContent";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Checkbox from "@material-ui/core/Checkbox";
+import CallIcon from "@material-ui/icons/Call";
+import CallMadeRoundedIcon from "@material-ui/icons/CallMadeRounded";
+import CallReceivedRoundedIcon from "@material-ui/icons/CallReceivedRounded";
+import Button from "@material-ui/core/Button";
+import '../css/CallDetail.css'
+
+const CallDetail = ({match, history}) => {
+ const [callDetail, setCallDetail] = useState([]);
+ const [values, setValues] = useState({isArchived: false});
+
+ useEffect(() => {
+ const getData = async() => {
+ const call = await getCallDetail(match.params.callId);
+ if (call.is_archived === true) {
+ setValues({isArchived: true})
+ }
+ return setCallDetail(call);
+ };
+ getData();
+ }, []);
+
+ const handleCheckBoxChange = (event) => {
+ const isArchived = event.target.checked;
+ const id = match.params.callId;
+ setValues({isArchived: isArchived});
+ updateCall(id, {is_archived: isArchived}).then(() => history.push({pathname: '/'}))
+ };
+
+ const date = new Date(callDetail.created_at);
+ const formattedDate = date.toDateString();
+ const formattedTime = date.toLocaleTimeString('fr-FR');
+
+ const handleRedirect = () => history.push({pathname: '/'});
+
+ return (
+
+
+
+ {callDetail && (
+
+
+
+
+ {callDetail.from}
+
+
+ {callDetail.to ? `To: ${callDetail.to}` : `To: unknown`}
+
+
+ {formattedDate}
+
+
+ {formattedTime}
+
+
+
+ {callDetail.direction === 'outbound' ?
+ :
+
+ }
+
+
+ {`Duration: ${callDetail.duration} seconds`}
+
+
+ {`Via: ${callDetail.via}`}
+
+ }
+ label="Archive"
+ labelPlacement="start"
+ />
+
+
+
+
+ )}
+
+
+
+
+
+
+
+
+ {!callList || callList.length === 0 && (
+
No Calls
+ )}
+
+ {
+ callList && callList.length > 0 && callList.map((call, index) => {
+ const date = new Date(call.created_at);
+ const formattedDate = date.toDateString();
+ const formattedTime = date.toLocaleTimeString('fr-FR');
+ return (
+
+
+ {formattedDate}
+
+
redirect(call.id)}>
+
+ {call.direction === 'outbound' ?
+ :
+
+ }
+
+
+ {call.from}
+
+
+ {call.to ? `To: ${call.to}` : `To: unknown`}
+
+
+
+ {formattedTime}
+
+
+
+
+
+
+ {callList.length >= 1 && (
+
+
+
+
+
+
+ )}
+