jjvijgen/Demo-App
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Finished connection to API

Browse Source
This commit is contained in:
Jeroen Vijgen
2020-02-25 20:16:26 +01:00
parent 1bc9fa379b
commit 7547923b1f
8 changed files with 83 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Background/bg.jfif
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.0 MiB

src/Components/DashboardComponent/Dashboard.tsx
+31 -2
View File
@@ -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
+17
View File
@@ -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
+4 -1
View File
@@ -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
+15 -9
View File
@@ -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
+2 -2
View File
@@ -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
+10 -1
View File
@@ -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;