diff --git a/README.md b/README.md index 76b1fd5..b831c7a 100644 --- a/README.md +++ b/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. diff --git a/src/Background/bg.jfif b/src/Background/bg.jfif new file mode 100644 index 0000000..2599e10 Binary files /dev/null and b/src/Background/bg.jfif differ diff --git a/src/Components/DashboardComponent/Dashboard.tsx b/src/Components/DashboardComponent/Dashboard.tsx index d526753..85d5cd8 100644 --- a/src/Components/DashboardComponent/Dashboard.tsx +++ b/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} />) } } diff --git a/src/DTOs/response.dto.ts b/src/DTOs/response.dto.ts new file mode 100644 index 0000000..f1ac172 --- /dev/null +++ b/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 = []; +} diff --git a/src/Repositories/ReportingRepository.ts b/src/Repositories/ReportingRepository.ts index 8f794d4..4df6937 100644 --- a/src/Repositories/ReportingRepository.ts +++ b/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; } diff --git a/src/Views/DashboardView.tsx b/src/Views/DashboardView.tsx index c5d7eec..ff4e9d0 100644 --- a/src/Views/DashboardView.tsx +++ b/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<{ - Total Conversation Count + Total Conversation Count - + { this.props.getResponseDTO().total_conversation_count } - Total User Message Count + Total User Message Count - + { this.props.getResponseDTO().total_user_message_count } - Total Visitor Message Count + Total Visitor Message Count - + { this.props.getResponseDTO().total_visitor_message_count } @@ -86,6 +87,10 @@ export default class DashboardView extends React.Component<{ + data={ this.props.getResponseDTO().by_date } />
-
Made with ❤ by Jeroen Vijgen
+
+
Made with ❤ by Jeroen Vijgen
diff --git a/src/Views/TableView.tsx b/src/Views/TableView.tsx index 991f0a4..299fe24 100644 --- a/src/Views/TableView.tsx +++ b/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<{