Finished connection to API

README.md

@@ -22,7 +22,7 @@ The build is minified and the filenames include the hashes. Your app is ready to
 
 - [X] Create React web app
 - [X] It should have fields for giving start date, end date and access token as arguments to the app.
-- [ ] App should make HTTP GET request to the API to fetch chat counts between those two given dates.
+- [X] App should make HTTP GET request to the API to fetch chat counts between those two given dates.
 - [ ] The dashboard should render three values from the API.
 - [X] The dashboard should render a Paginated List.
 
@@ -37,3 +37,6 @@ The build is minified and the filenames include the hashes. Your app is ready to
 5 | Axios | To communicate with external API's, I added Axios. |
 6 | FontAwesome | To communicate actions to the user, I have added some relatable icons for actions. |
 7 | react-bootstrap-table2-* | To get a paginated table, React Bootstrap Table is used. |
+
+**NOTE**: The background used for this software is owned by www.univ-cotedazur.fr.
+I take no right or ownership to this background, as this piece of software is for personal use only.

src/Components/DashboardComponent/Dashboard.tsx

@@ -1,13 +1,15 @@
 import React from 'react';
 import DashboardView from '../../Views/DashboardView'
-import API_DTO from '../../DTOs/api.dto';
 import ReportingRepository from '../../Repositories/ReportingRepository';
+import API_DTO from '../../DTOs/api.dto';
+import { RESPONSE_DTO } from '../../DTOs/response.dto';
 
 export default class Dashboard extends React.Component<{
 	history: any,
 	location: any
 }, {
 	dto: API_DTO,
+	response: RESPONSE_DTO,
 	ReportingRepository: ReportingRepository
 }> {
 	constructor(props: any) {
@@ -22,6 +24,7 @@ export default class Dashboard extends React.Component<{
 				DTO.setSecondDate(localStorage.getItem("Second_Date") || "");
 				this.state = {
 					 dto: DTO,
+					 response: new RESPONSE_DTO(),
 					 ReportingRepository: new ReportingRepository(DTO)
 				}
 			}
@@ -37,6 +40,7 @@ export default class Dashboard extends React.Component<{
 	   			DTO.setSecondDate(localStorage.getItem("Second_Date") || "");
 	   			this.state = {
 	   				 dto: DTO,
+					 response: new RESPONSE_DTO(),
 	   				 ReportingRepository: new ReportingRepository(DTO)
 	   			}
 	   		} else {
@@ -47,6 +51,8 @@ export default class Dashboard extends React.Component<{
 		this.checkFirstDate = this.checkFirstDate.bind(this);
 		this.checkSecondDate = this.checkSecondDate.bind(this);
 		this.getItemsFromApi = this.getItemsFromApi.bind(this);
+		this.getResponseDTO = this.getResponseDTO.bind(this);
+		this.getItemsFromApi();
 	}
 
 	checkFirstDate(_e: any) {
@@ -59,7 +65,29 @@ export default class Dashboard extends React.Component<{
 
 	getItemsFromApi() {
 		// TODO: Connect to ReportingRepository.
-		console.log(this.state.ReportingRepository.Read(this.state.dto));
+		this.state.ReportingRepository.Read(this.state.dto).then((res) => {
+			const response = new RESPONSE_DTO();
+            response.room_id = res.room_id;
+            response.start_date = res.start_date;
+            response.end_date = res.end_date;
+            response.total_visitors_with_conversation_count = res.total_visitors_with_conversation_count;
+            response.total_visitors_affected_by_chat_count = res.total_visitors_affected_by_chat_count;
+            response.total_visitors_autosuggested_count = res.total_visitors_autosuggested_count;
+            response.total_visitors_with_chat_count = res.total_visitors_with_chat_count;
+            response.total_chats_from_autosuggest_count = res.total_chats_from_autosuggest_count;
+            response.total_chats_from_user_count = res.total_chats_from_user_count;
+            response.total_chats_from_visitor_count = res.total_chats_from_visitor_count;
+            response.total_conversation_count = res.total_conversation_count;
+            response.total_user_message_count = res.total_user_message_count;
+            response.total_visitor_message_count = res.total_visitor_message_count;
+            response.total_missed_chat_count = res.total_missed_chat_count;
+            response.by_date = res.by_date;
+			this.setState({response: response});
+		});
+	}
+
+	getResponseDTO() {
+		return this.state.response;
 	}
 
 	render () {
@@ -67,6 +95,7 @@ export default class Dashboard extends React.Component<{
 					checkFirstDate={this.checkFirstDate}
 					checkSecondDate={this.checkSecondDate}
 					getItemsFromApi={this.getItemsFromApi}
+					getResponseDTO={this.getResponseDTO}
 				/>)
 	}
 }

src/DTOs/response.dto.ts

@@ -0,0 +1,17 @@
+export class RESPONSE_DTO {
+    room_id: string = "";
+    start_date: Date = new Date();
+    end_date: Date = new Date();
+    total_visitors_with_conversation_count: number = 0;
+    total_visitors_affected_by_chat_count: number = 0;
+    total_visitors_autosuggested_count: number = 0;
+    total_visitors_with_chat_count: number = 0;
+    total_chats_from_autosuggest_count: number = 0;
+    total_chats_from_user_count: number = 0;
+    total_chats_from_visitor_count: number = 0;
+    total_conversation_count: number = 0;
+    total_user_message_count: number = 0;
+    total_visitor_message_count: number = 0;
+    total_missed_chat_count: number = 0;
+    by_date: Array<Object> = [];
+}

src/Repositories/ReportingRepository.ts

@@ -23,7 +23,10 @@ export default class ReportingRepository {
         if (this.instance === undefined)
             throw new Error("[ReportingRepository]: Please initiate the constructor first before calling a subfunction.");
         return (await this.instance.get("api/reporting/v1/rooms/84e0fefa-5675-11e7-a349-00163efdd8db/chat-stats/daily/", {
-            params: { "start_date": _t.getFirstDate(), "end_date": _t.getSecondDate() }
+            params: {
+                "start_date": _t.getFirstDate(),
+                "end_date": _t.getSecondDate()
+            }
         })).data;
     }
 

src/Views/DashboardView.tsx

@@ -7,7 +7,8 @@ import Table from "./TableView";
 export default class DashboardView extends React.Component<{
 	checkFirstDate: any,
 	checkSecondDate: any,
-	getItemsFromApi: any
+	getItemsFromApi: any,
+	getResponseDTO: any
 }> {
 	render () {
 		return (
@@ -60,25 +61,25 @@ export default class DashboardView extends React.Component<{
 					<Row>
 						<Col>
 							<Card>
-								<Card.Header as="h5">Total Conversation Count</Card.Header>
+								<Card.Header as="h6">Total Conversation Count</Card.Header>
 								<Card.Body>
-									<Card.Text></Card.Text>
+									<Card.Text>{ this.props.getResponseDTO().total_conversation_count }</Card.Text>
 								</Card.Body>
 							</Card>
 						</Col>
 						<Col>
 							<Card>
-								<Card.Header as="h5">Total User Message Count</Card.Header>
+								<Card.Header as="h6">Total User Message Count</Card.Header>
 								<Card.Body>
-									<Card.Text></Card.Text>
+									<Card.Text>{ this.props.getResponseDTO().total_user_message_count }</Card.Text>
 								</Card.Body>
 							</Card>
 						</Col>
 						<Col>
 							<Card>
-								<Card.Header as="h5">Total Visitor Message Count</Card.Header>
+								<Card.Header as="h6">Total Visitor Message Count</Card.Header>
 								<Card.Body>
-									<Card.Text></Card.Text>
+									<Card.Text>{ this.props.getResponseDTO().total_visitor_message_count }</Card.Text>
 								</Card.Body>
 							</Card>
 						</Col>
@@ -86,6 +87,10 @@ export default class DashboardView extends React.Component<{
 					<Row>
 						<Table
 						  columns={[{
+							  dataField: 'date',
+							  text: 'Date',
+							  sort: true
+						  	}, {
 							  dataField: 'conversation_count',
 							  text: 'Conversation Count'
 							}, {
@@ -95,12 +100,13 @@ export default class DashboardView extends React.Component<{
 							  dataField: 'visitors_with_conversation_count',
 							  text: 'Visitors With Conversation Count'
 							}]}
-						  data={[]} />
+						  data={ this.props.getResponseDTO().by_date } />
 					</Row>
 					<Row>
 						<Col>
 							<br />
-							<hr /><h6>Made with ❤ by Jeroen Vijgen </h6>
+							<hr />
+							<h6>Made with ❤ by Jeroen Vijgen </h6>
 						</Col>
 					</Row>
 				</Container>

src/Views/TableView.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import BootstrapTable from 'react-bootstrap-table-next';
 import paginationFactory from 'react-bootstrap-table2-paginator';
+import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
 import 'react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min.css';
 
 export default class Table extends React.Component<{
@@ -12,11 +13,10 @@ export default class Table extends React.Component<{
 		<br />
 				<BootstrapTable
 				  bootstrap4
-				  keyField='id'
+				  keyField='date'
 				  columns={ this.props.columns }
 				  data={ this.props.data }
 				  pagination={ paginationFactory({
-								  paginationSize: 4,
 								  pageStartIndex: 0,
 								  showTotal: true,
 								  sizePerPageList: [5]

src/index.css

@@ -5,7 +5,8 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background-color: #282c34;
+  background: url(./Background/bg.jfif) no-repeat center center;
+  /* background-color: #282c34; */
   height: 100%;
   margin: 0;
 }
@@ -18,11 +19,19 @@ body {
 	justify-content: center;
 }
 
+.LoginComponent,
 .DashboardComponent {
 	background-color: white;
+	border-style: solid;
+	border-width: solid;
+	border-color: #FD4114;
 	border-radius: 7px;
 }
 
+.btn {
+	width: 100%;
+}
+
 .fullSize {
 	width: 96%;
 	margin: 0 auto;