Skip to content
This repository was archived by the owner on Jun 30, 2022. It is now read-only.

Commit ae67552

Browse files
sivakbsivakb
authored
Merge pull request #6 from spritlesoftware/dashboard_performance_issue
Dashboard Performance improvement
2 parents c8e56e8 + b104887 commit ae67552

1 file changed

Lines changed: 156 additions & 114 deletions

File tree

‎ReactJS-Project-CardinalKit/src/components/UserList.tsx‎

Lines changed: 156 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -1,135 +1,193 @@
1+
import moment from 'moment';
12
import React, { Component } from 'react';
2-
import { Link } from 'react-router-dom'
3-
import ReactTable from "react-table-6";
4-
import "react-table-6/react-table.css";
5-
import './styles/customStyle.css';
6-
import Pagination from './Pagination'
3+
import { Link } from 'react-router-dom';
4+
import ReactTable from 'react-table-6';
5+
import 'react-table-6/react-table.css';
76
import { getAllFirebaseUsers, getSurveys } from '../api/getAllUsers';
8-
import moment from 'moment';
7+
import Pagination from './Pagination';
8+
import './styles/customStyle.css';
99

10-
export interface users {
11-
userId: string,
12-
endDate: string,
10+
export interface Users {
11+
userId: string;
12+
endDate: string;
1313
}
1414

15-
16-
17-
class UserList extends Component<{}, { users: any[], newUsers: any[], totalSurveys: any[] }> {
15+
class UserList extends Component<
16+
{},
17+
{ users: any[]; newUsers: any[]; totalSurveys: any[]; usersDetails: any[] }
18+
> {
1819
constructor(props) {
1920
super(props);
2021
this.state = {
2122
users: [],
23+
usersDetails: [],
2224
newUsers: [],
23-
totalSurveys: []
25+
totalSurveys: [],
2426
};
2527
}
2628

27-
componentDidMount = () => {
29+
componentWillMount = () => {
2830
getAllFirebaseUsers()
2931
.then(querySnapshot => {
30-
let data = querySnapshot.docs.map(doc => {
31-
return {
32-
userId: doc.id,
33-
view: <Link to={"/users/" + doc.id}>View Survey</Link>
34-
}
32+
querySnapshot.docs.map(doc => {
33+
this.setState({
34+
users: [
35+
...this.state.users,
36+
{
37+
userEmail: doc.data().email,
38+
userId: doc.data().userID,
39+
view: <Link to={'/users/' + doc.id}>View Survey</Link>,
40+
},
41+
],
42+
});
3543
});
36-
this.setState({
37-
users: [...data]
38-
})
3944
})
4045
.then(() => {
41-
this.getSurveyDetails()
42-
})
46+
this.getSurveyDetails();
47+
});
4348
};
4449

4550
getSurveyDetails = () => {
46-
const { users } = this.state;
47-
let surveyData: any[] = [];
48-
let newUsers: any[] = [];
49-
let totalSurveys: any[] = [];
51+
const surveyData: any[] = [];
52+
const newUsers: any[] = [];
53+
const totalSurveys: any[] = [];
5054
const today = new Date();
51-
users.map(({ userId }) => {
52-
return getSurveys(userId)
53-
.then((querySnapshot) => {
54-
querySnapshot.docs.map((survey) => {
55-
return totalSurveys.push(survey.id.substring(0, 14))
56-
})
57-
surveyData.push(querySnapshot.docs[0].data())
58-
const data = surveyData.map(doc => {
59-
let surveyDate = new Date(doc.payload.endDate.substring(0, 10))
55+
let userEmail = '';
56+
this.state.users.map(({ userId }) => {
57+
return getSurveys(userId).then(querySnapshot => {
58+
querySnapshot.docs.map(survey => {
59+
return totalSurveys.push(survey.id.substring(0, 14));
60+
});
61+
surveyData.push(querySnapshot.docs[0].data());
62+
63+
this.setState({
64+
usersDetails: surveyData.map(doc => {
65+
const surveyDate = new Date(doc.payload.endDate.substring(0, 10));
6066
if (surveyDate === today) {
61-
newUsers.push(doc.userId)
67+
newUsers.push(doc.userId);
68+
}
69+
for (const user of this.state.users) {
70+
if (user.userId === doc.userId) {
71+
userEmail = user.userEmail;
72+
}
6273
}
6374
return {
6475
name: 'John Adams',
65-
email: 'johnadams@gmail.com',
76+
email: userEmail,
6677
userId: doc.userId,
67-
endDate:
68-
moment(doc.payload.endDate.substring(0, 10))
69-
.format('ll'),
70-
view:
71-
<div><span className="px-2 py-1 font-semibold leading-tight text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100"><Link to={"/users/" + doc.userId}>View Survey</Link></span>
72-
<a href="#"><span
73-
className="px-2 py-1 font-semibold leading-tight text-blue-700 bg-blue-100 rounded-full dark:bg-blue-700 dark:text-blue-100"
74-
>
75-
Download Survey response
76-
</span></a></div>
77-
}
78-
});
79-
this.setState({
80-
users: [...data],
81-
newUsers: [...newUsers],
82-
totalSurveys: [...totalSurveys.filter(function (item, index, inputArray) {
78+
endDate: moment(doc.payload.endDate.substring(0, 10)).format('ll'),
79+
view: (
80+
<div>
81+
<span className="px-2 py-1 font-semibold leading-tight text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100">
82+
<Link to={'/users/' + doc.userId}>View Survey</Link>
83+
</span>
84+
<a href="#">
85+
<span className="px-2 py-1 font-semibold leading-tight text-blue-700 bg-blue-100 rounded-full dark:bg-blue-700 dark:text-blue-100">
86+
Download Survey response
87+
</span>
88+
</a>
89+
</div>
90+
),
91+
};
92+
}),
93+
});
94+
95+
{
96+
// const data = surveyData.map(doc => {
97+
// const surveyDate = new Date(doc.payload.endDate.substring(0, 10));
98+
// if (surveyDate === today) {
99+
// newUsers.push(doc.userId);
100+
// }
101+
// for (const user of this.state.users) {
102+
// if (user.userId === doc.userId) {
103+
// userEmail = user.userEmail;
104+
// }
105+
// }
106+
// return {
107+
// name: 'John Adams',
108+
// email: userEmail,
109+
// userId: doc.userId,
110+
// endDate: moment(doc.payload.endDate.substring(0, 10)).format('ll'),
111+
// view: (
112+
// <div>
113+
// <span className="px-2 py-1 font-semibold leading-tight text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100">
114+
// <Link to={'/users/' + doc.userId}>View Survey</Link>
115+
// </span>
116+
// <a href="#">
117+
// <span className="px-2 py-1 font-semibold leading-tight text-blue-700 bg-blue-100 rounded-full dark:bg-blue-700 dark:text-blue-100">
118+
// Download Survey response
119+
// </span>
120+
// </a>
121+
// </div>
122+
// ),
123+
// };
124+
// });
125+
}
126+
127+
this.setState({
128+
// usersDetails: [...data],
129+
newUsers: [...newUsers],
130+
totalSurveys: [
131+
...totalSurveys.filter((item, index, inputArray) => {
83132
return inputArray.indexOf(item) === index;
84-
})
85-
]
86-
})
87-
})
88-
})
89-
}
133+
}),
134+
],
135+
});
136+
});
137+
});
138+
};
90139

91140
render() {
92-
93141
const columns = [
94142
{
95143
Header: () => (
96-
<div className="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">Name</div>
144+
<div className="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
145+
Name
146+
</div>
97147
),
98148
accessor: 'name',
99149
className: 'font-semibold',
100-
width: 200
150+
width: 200,
101151
},
102152
{
103153
Header: () => (
104-
<div className="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">Email</div>
154+
<div className="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
155+
Email
156+
</div>
105157
),
106158
accessor: 'email',
107159
className: 'font-semibold',
108-
width: 200
160+
width: 200,
109161
},
110162
{
111163
Header: () => (
112-
<div className="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">user id</div>
164+
<div className="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
165+
user id
166+
</div>
113167
),
114168
accessor: 'userId',
115169
className: 'font-semibold',
116-
width: 250
170+
width: 250,
117171
},
118172
{
119173
Header: () => (
120-
<div className="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">survey submitted</div>
174+
<div className="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
175+
survey submitted
176+
</div>
121177
),
122178
accessor: 'endDate',
123-
className: "px-4 py-3 text-sm",
124-
width: 150
179+
className: 'px-4 py-3 text-sm',
180+
width: 150,
125181
},
126182
{
127183
Header: () => (
128-
<div className="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase text-center dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">action</div>
184+
<div className="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase text-center dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
185+
action
186+
</div>
129187
),
130188
accessor: 'view',
131189
filterable: false,
132-
}
190+
},
133191
];
134192

135193
return (
@@ -138,26 +196,30 @@ class UserList extends Component<{}, { users: any[], newUsers: any[], totalSurve
138196
<div className="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
139197
<div className="p-3 mr-4 text-orange-500 bg-orange-100 rounded-full dark:text-orange-100 dark:bg-orange-500">
140198
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
141-
<path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z"></path>
199+
<path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z" />
142200
</svg>
143201
</div>
144202
<div>
145203
<p className="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
146204
Total Users
147205
</p>
148-
<p className="text-lg font-semibold text-gray-700 dark:text-gray-200">{this.state.users.length}</p>
206+
<p className="text-lg font-semibold text-gray-700 dark:text-gray-200">
207+
{this.state.users.length}
208+
</p>
149209
</div>
150210
</div>
151211

152212
<div className="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
153213
<div className="p-3 mr-4 text-blue-500 bg-blue-100 rounded-full dark:text-blue-100 dark:bg-blue-500">
154214
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
155-
<path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z"></path>
215+
<path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z" />
156216
</svg>
157217
</div>
158218
<div>
159219
<p className="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">New Users</p>
160-
<p className="text-lg font-semibold text-gray-700 dark:text-gray-200">{this.state.newUsers.length}</p>
220+
<p className="text-lg font-semibold text-gray-700 dark:text-gray-200">
221+
{this.state.newUsers.length}
222+
</p>
161223
</div>
162224
</div>
163225

@@ -168,19 +230,21 @@ class UserList extends Component<{}, { users: any[], newUsers: any[], totalSurve
168230
fillRule="evenodd"
169231
d="M18 5v8a2 2 0 01-2 2h-5l-5 4v-4H4a2 2 0 01-2-2V5a2 2 0 012-2h12a2 2 0 012 2zM7 8H5v2h2V8zm2 0h2v2H9V8zm6 0h-2v2h2V8z"
170232
clipRule="evenodd"
171-
></path>
233+
/>
172234
</svg>
173235
</div>
174236
<div>
175237
<p className="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
176238
Total Surveys
177239
</p>
178-
<p className="text-lg font-semibold text-gray-700 dark:text-gray-200">{this.state.totalSurveys.length}</p>
240+
<p className="text-lg font-semibold text-gray-700 dark:text-gray-200">
241+
{this.state.totalSurveys.length}
242+
</p>
179243
</div>
180244
</div>
181245
</div>
182246
<ReactTable
183-
data={this.state.users}
247+
data={this.state.usersDetails}
184248
columns={columns}
185249
className="ReactTable"
186250
filterable={true}
@@ -189,50 +253,28 @@ class UserList extends Component<{}, { users: any[], newUsers: any[], totalSurve
189253
PaginationComponent={Pagination}
190254
/>
191255

192-
<h2
193-
className="my-6 text-2xl font-semibold text-gray-700 dark:text-gray-200"
194-
>
195-
Charts
196-
</h2>
256+
<h2 className="my-6 text-2xl font-semibold text-gray-700 dark:text-gray-200">Charts</h2>
197257
<div className="grid gap-6 mb-8 md:grid-cols-2">
198-
<div
199-
className="min-w-0 p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800"
200-
>
201-
<h4 className="mb-4 font-semibold text-gray-800 dark:text-gray-300">
202-
Survey
203-
</h4>
204-
<canvas id="pie"></canvas>
205-
<div
206-
className="flex justify-center mt-4 space-x-3 text-sm text-gray-600 dark:text-gray-400"
207-
>
258+
<div className="min-w-0 p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
259+
<h4 className="mb-4 font-semibold text-gray-800 dark:text-gray-300">Survey</h4>
260+
<canvas id="pie" />
261+
<div className="flex justify-center mt-4 space-x-3 text-sm text-gray-600 dark:text-gray-400">
208262
<div className="flex items-center">
209-
<span
210-
className="inline-block w-3 h-3 mr-1 bg-blue-500 rounded-full"
211-
></span>
263+
<span className="inline-block w-3 h-3 mr-1 bg-blue-500 rounded-full" />
212264
<span>ShortWalkTask</span>
213265
</div>
214266
<div className="flex items-center">
215-
<span
216-
className="inline-block w-3 h-3 mr-1 bg-teal-600 rounded-full"
217-
></span>
267+
<span className="inline-block w-3 h-3 mr-1 bg-teal-600 rounded-full" />
218268
<span>SurveyTask-SF12</span>
219269
</div>
220270
</div>
221271
</div>
222-
<div
223-
className="min-w-0 p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800"
224-
>
225-
<h4 className="mb-4 font-semibold text-gray-800 dark:text-gray-300">
226-
Traffic
227-
</h4>
228-
<canvas id="line"></canvas>
229-
<div
230-
className="flex justify-center mt-4 space-x-3 text-sm text-gray-600 dark:text-gray-400"
231-
>
272+
<div className="min-w-0 p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
273+
<h4 className="mb-4 font-semibold text-gray-800 dark:text-gray-300">Traffic</h4>
274+
<canvas id="line" />
275+
<div className="flex justify-center mt-4 space-x-3 text-sm text-gray-600 dark:text-gray-400">
232276
<div className="flex items-center">
233-
<span
234-
className="inline-block w-3 h-3 mr-1 bg-teal-600 rounded-full"
235-
></span>
277+
<span className="inline-block w-3 h-3 mr-1 bg-teal-600 rounded-full" />
236278
<span>User</span>
237279
</div>
238280
</div>

0 commit comments

Comments
 (0)