Skip to content

Commit d5fde89

Browse files
exidy80exidy80
committed
simplified monitors
1 parent b97ce2c commit d5fde89

File tree

4 files changed

+132
-51
lines changed

4 files changed

+132
-51
lines changed

‎client/src/Containers/Monitoring/AdminMonitor.js‎

Lines changed: 45 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,15 @@
11
import React from 'react';
2-
import { timeFrames, API, dateAndTime } from 'utils';
3-
import RecentMonitor from './RecentMonitor';
2+
import {
3+
timeFrames,
4+
API,
5+
dateAndTime,
6+
useSortableData,
7+
usePopulatedRooms,
8+
} from 'utils';
9+
import _pick from 'lodash/pick';
10+
import { SimpleLoading } from 'Components';
11+
import RoomsMonitor from './RoomsMonitor';
12+
import classes from './monitoringView.css';
413

514
/**
615
* The AdminMonitor provides views into all of the rooms with activity in the past 48 hours.
@@ -13,6 +22,11 @@ function AdminMonitor() {
1322
filter: { timeframe: timeFrames.LAST2DAYS, key: 'updatedAt' },
1423
};
1524

25+
const [isLoading, setIsLoading] = React.useState(false);
26+
const [allRooms, setAllRooms] = React.useState([]);
27+
28+
const { items: rooms } = useSortableData(allRooms, config);
29+
1630
const fetchAllRooms = () => {
1731
const twoDaysAgo = dateAndTime.before(Date.now(), 2, 'days');
1832
const since = dateAndTime.getTimestamp(twoDaysAgo);
@@ -27,23 +41,45 @@ function AdminMonitor() {
2741
);
2842
};
2943

44+
React.useEffect(async () => {
45+
setIsLoading(true);
46+
const allTheRooms = await fetchAllRooms();
47+
setAllRooms(allTheRooms);
48+
setIsLoading(false);
49+
}, []);
50+
51+
const roomIds = rooms.map((room) => room._id);
52+
const populatedRooms = usePopulatedRooms(roomIds, false, {
53+
refetchInterval: 10000,
54+
});
55+
56+
if (populatedRooms.isError) return <div>There was an error</div>;
57+
3058
return (
3159
<div style={{ marginTop: '100px', width: '90%', alignSelf: 'center' }}>
3260
<p
3361
style={{
34-
marginBottom: '25px',
3562
fontSize: '30px',
3663
textAlign: 'center',
3764
}}
3865
>
3966
Rooms Updated in the Past 48 Hours
4067
</p>
41-
<RecentMonitor
42-
config={config}
43-
context={`adminMonitor`}
44-
fetchRooms={fetchAllRooms}
45-
fetchInterval={1000 * 60 * 30} // 30 minutes
46-
/>
68+
<p style={{ textAlign: 'center' }}>
69+
(Use brower refresh to find newly active rooms)
70+
</p>
71+
<br />
72+
<div className={classes.Container}>
73+
{populatedRooms.isLoading || isLoading ? (
74+
<SimpleLoading />
75+
) : (
76+
<RoomsMonitor
77+
context={`adminMonitor`}
78+
populatedRooms={populatedRooms.data || {}}
79+
isLoading={populatedRooms.isFetching ? roomIds : []}
80+
/>
81+
)}
82+
</div>
4783
</div>
4884
);
4985
}

‎client/src/Containers/Monitoring/AllRoomsMonitor.js‎

Lines changed: 36 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,15 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
import { timeFrames, API, dateAndTime, amIAFacilitator } from 'utils';
4-
import RecentMonitor from './RecentMonitor';
3+
import _pick from 'lodash/pick';
4+
import {
5+
timeFrames,
6+
useSortableData,
7+
usePopulatedRooms,
8+
amIAFacilitator,
9+
} from 'utils';
10+
import { SimpleLoading } from 'Components';
11+
import RoomsMonitor from './RoomsMonitor';
12+
import classes from './monitoringView.css';
513

614
/**
715
* The AllRoomsMonitor provides views into all of the rooms associated with
@@ -17,37 +25,38 @@ function AllRoomsMonitor({ user, userResources }) {
1725
filter: { timeframe: timeFrames.LAST2DAYS, key: 'updatedAt' },
1826
};
1927

20-
const [roomsShown, setRoomsShown] = React.useState(0);
21-
const totalRooms = userResources.filter((room) =>
28+
const allRooms = userResources.filter((room) =>
2229
amIAFacilitator(room, user._id)
23-
).length;
24-
25-
const fetchUserRooms = () => {
26-
const twoDaysAgo = dateAndTime.before(Date.now(), 2, 'days');
27-
const since = dateAndTime.getTimestamp(twoDaysAgo);
28-
return (
29-
API.getAllUserRooms(user._id, { since, isActive: true })
30-
.then((res) => {
31-
const rooms = res.data.result;
32-
return rooms.filter((room) => amIAFacilitator(room, user._id));
33-
})
34-
// eslint-disable-next-line no-console
35-
.catch((err) => console.log(err))
36-
);
37-
};
30+
);
31+
32+
const { items: rooms } = useSortableData(allRooms, config);
33+
34+
const roomIds = rooms.map((room) => room._id);
35+
const populatedRooms = usePopulatedRooms(roomIds, false, {
36+
refetchInterval: 10000,
37+
});
38+
39+
if (populatedRooms.isError) return <div>There was an error</div>;
3840

3941
return (
4042
<div>
41-
<p style={{ fontSize: '1.5em', marginBottom: '20px' }}>
43+
<p style={{ fontSize: '1.5em' }}>
4244
Rooms with activity in the past 48 hours {'('}
43-
{roomsShown} active of {totalRooms} total{')'}
45+
{rooms.length} active of {allRooms.length} total{')'}
4446
</p>
45-
<RecentMonitor
46-
config={config}
47-
context={`userRooms-${user._id}`}
48-
fetchRooms={fetchUserRooms}
49-
setRoomsShown={setRoomsShown}
50-
/>
47+
<p>(Use brower refresh to find newly active rooms)</p>
48+
<br />
49+
<div className={classes.Container}>
50+
{populatedRooms.isLoading ? (
51+
<SimpleLoading />
52+
) : (
53+
<RoomsMonitor
54+
context={`user-${user._id}`}
55+
populatedRooms={populatedRooms.data || {}}
56+
isLoading={populatedRooms.isFetching ? roomIds : []}
57+
/>
58+
)}
59+
</div>
5160
</div>
5261
);
5362
}

‎client/src/Containers/Monitoring/CourseMonitor.js‎

Lines changed: 49 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,16 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
import { timeFrames, API, dateAndTime } from 'utils';
4-
import RecentMonitor from './RecentMonitor';
3+
import _pick from 'lodash/pick';
4+
import {
5+
dateAndTime,
6+
API,
7+
timeFrames,
8+
useSortableData,
9+
usePopulatedRooms,
10+
} from 'utils';
11+
import { SimpleLoading } from 'Components';
12+
import RoomsMonitor from './RoomsMonitor';
13+
import classes from './monitoringView.css';
514

615
/**
716
* The CourseMonitor provides views into all of the rooms assoicated with
@@ -17,31 +26,58 @@ function CourseMonitor({ course }) {
1726
filter: { timeframe: timeFrames.LAST2DAYS, key: 'updatedAt' },
1827
};
1928

20-
const [roomsShown, setRoomsShown] = React.useState(0);
29+
const [isLoading, setIsLoading] = React.useState(false);
30+
const [allRooms, setAllRooms] = React.useState([]);
2131

22-
const fetchCourseRooms = () => {
32+
const { items: rooms } = useSortableData(allRooms, config);
33+
34+
const fetchAllRooms = () => {
2335
const twoDaysAgo = dateAndTime.before(Date.now(), 2, 'days');
2436
const since = dateAndTime.getTimestamp(twoDaysAgo);
2537
return (
2638
API.getAllCourseRooms(course._id, { since, isActive: true })
27-
.then((res) => res.data.result)
39+
.then((res) => {
40+
const rooms = res.data.result || [];
41+
return rooms;
42+
})
2843
// eslint-disable-next-line no-console
2944
.catch((err) => console.log(err))
3045
);
3146
};
3247

48+
React.useEffect(async () => {
49+
setIsLoading(true);
50+
const allTheRooms = await fetchAllRooms();
51+
setAllRooms(allTheRooms);
52+
setIsLoading(false);
53+
}, []);
54+
55+
const roomIds = rooms.map((room) => room._id);
56+
const populatedRooms = usePopulatedRooms(roomIds, false, {
57+
refetchInterval: 10000,
58+
});
59+
60+
if (populatedRooms.isError) return <div>There was an error</div>;
61+
3362
return (
3463
<div>
35-
<p style={{ fontSize: '1.5em', marginBottom: '20px' }}>
64+
<p style={{ fontSize: '1.5em' }}>
3665
Rooms with activity in the past 48 hours {'('}
37-
{roomsShown} active of {course.rooms.length} total{')'}
66+
{rooms.length} active of {allRooms.length} total{')'}
3867
</p>
39-
<RecentMonitor
40-
config={config}
41-
context={`course-${course._id}`}
42-
fetchRooms={fetchCourseRooms}
43-
setRoomsShown={setRoomsShown}
44-
/>
68+
<p>(Use brower refresh to find newly active rooms)</p>
69+
<br />
70+
<div className={classes.Container}>
71+
{populatedRooms.isLoading || isLoading ? (
72+
<SimpleLoading />
73+
) : (
74+
<RoomsMonitor
75+
context={`course-${course._id}`}
76+
populatedRooms={populatedRooms.data || {}}
77+
isLoading={populatedRooms.isFetching ? roomIds : []}
78+
/>
79+
)}
80+
</div>
4581
</div>
4682
);
4783
}

‎client/src/utils/utilityHooks.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,15 +47,15 @@ export const timeFrames = {
4747

4848
/**
4949
* Custom hook for sorting and filtering table data. Note that filter must be one of all, lastDay, lastWeek, last2Weeks, lastMonth, or lastYear. Adapted from https://www.smashingmagazine.com/2020/03/sortable-tables-react/.
50-
* @param {array} items - The data array. Each element represents a row as an object, with the properties (keys) representing the table columns
50+
* @param {array} [items = []] - The data array. Each element represents a row as an object, with the properties (keys) representing the table columns
5151
* @param {object} [config = null] - Optional specification of an initial sorting of the form { key, direction, filter }
5252
* @returns {array} items - The data sorted by the requested column (key), in the requested direction, filtered by the requested filter.
5353
* @returns {object} sortConfig - The current sorting: { key, direction, filter }. Note that filter must be one of all, lastDay, lastWeek, last2Weeks, lastMonth, or lastYear.
5454
* @returns {function} requestSort - Takes a key and sorts the items accordingly. If not direction is supplied, the current direction is reversed.
5555
* @returns {function} resetSort - Takes a sortConfig object. That object is merged with the current sortConfig then the items are sorted and filtered appropriately.
5656
*/
5757

58-
export const useSortableData = (items, config = null) => {
58+
export const useSortableData = (items = [], config = null) => {
5959
const [sortConfig, setSortConfig] = React.useState(config);
6060

6161
const withinTimeframe = (item) => {

0 commit comments

Comments
 (0)