Skip to content

Commit 239508d

Browse files
hattonhatton
authored
Merge pull request #432 from BloomBooks/BL-11006StatsOverhaul
BL-11006 Stats overhaul including URL State
2 parents 2d7ac47 + 8940306 commit 239508d

25 files changed

+786
-652
lines changed

‎package.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@
5050
"mobx-react-lite": "^3.1.6",
5151
"prop-types": "^15.7.2",
5252
"qs": "^6.7.0",
53+
"query-string": "^7.1.1",
5354
"react": "^16.11.0",
5455
"react-avatar": "^3.9.0",
5556
"react-calendar": "^3.1.0",
@@ -69,6 +70,7 @@
6970
"swiper": "^6.4.5",
7071
"title-case": "^2.1.1",
7172
"use-media": "^1.4.0",
73+
"use-query-params": "^1.2.3",
7274
"wink-porter2-stemmer": "^2.0.1",
7375
"xml2json-light": "^1.0.6"
7476
},
@@ -140,7 +142,7 @@
140142
"ts-jest": "^25.2.0",
141143
"ts-loader": "^6.2.1",
142144
"ts-node": "^9.0.0",
143-
"typescript": "3.7.3",
145+
"typescript": "4.6.2",
144146
"webpack-cli": "^3.3.10"
145147
}
146148
}

‎src/App.tsx

+8-3
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,14 @@ import { ThemeProvider } from "@material-ui/core";
1010
import { LoginDialog } from "./components/User/LoginDialog";
1111
import { LocalizationProvider } from "./localization/LocalizationProvider";
1212
import UnderConstruction from "./components/UnderConstruction";
13-
import { BrowserRouter as Router } from "react-router-dom";
13+
import { BrowserRouter as Router, Route } from "react-router-dom";
1414
import { RouterContent } from "./model/RouterContent";
1515
import CacheProvider from "./model/CacheProvider";
1616
import { OSFeaturesProvider } from "./components/OSFeaturesContext";
1717
import CssBaseline from "@material-ui/core/CssBaseline";
1818
import ScrollToTop from "./ScrollToTop";
1919
import { configure } from "mobx";
20+
import { QueryParamProvider } from "use-query-params";
2021

2122
// Turn off "mobx" strict mode, so we can set observables without the boilerplate
2223
// of wrapping methods annotated as 'actions'.
@@ -56,8 +57,12 @@ export const App: React.FunctionComponent<{}> = (props) => {
5657
<OSFeaturesProvider>
5758
<UnderConstruction />
5859
<Router>
59-
<ScrollToTop />
60-
<RouterContent />
60+
<QueryParamProvider
61+
ReactRouterRoute={Route}
62+
>
63+
<ScrollToTop />
64+
<RouterContent />
65+
</QueryParamProvider>
6166
</Router>
6267
</OSFeaturesProvider>
6368
</CacheProvider>

‎src/components/BookDetail/BookStats.tsx

+44-40
Original file line numberDiff line numberDiff line change
@@ -65,51 +65,55 @@ export const BookStats: React.FunctionComponent<{
6565

6666
const bookStats = useGetBookStats(props.book);
6767

68-
const tooltipcontents = (
69-
<div>
70-
<ul
71-
css={css`
72-
list-style: disc;
73-
margin-left: 16px;
74-
padding: 0;
75-
li {
76-
margin-bottom: 1em;
77-
}
78-
`}
79-
>
80-
<li>
68+
const tooltipcontents = React.useMemo(
69+
() => (
70+
<div>
71+
<ul
72+
css={css`
73+
list-style: disc;
74+
margin-left: 16px;
75+
padding: 0;
76+
li {
77+
margin-bottom: 1em;
78+
}
79+
`}
80+
>
81+
<li>
82+
<FormattedMessage
83+
id="stats.book.summaryString.readExplanation"
84+
defaultMessage="'reads' is a count of how many times someone has read this book in a digital form from which we receive analytics. We cannot currently get analytics from epub versions. Because books can be read offline, we may not have a record of all reads."
85+
/>
86+
</li>
87+
<li>
88+
<FormattedMessage
89+
id="stats.book.summaryString.deviceExplanation"
90+
defaultMessage="'devices' is a count of how many phones/tablets/computers have this book installed in Bloom Reader."
91+
/>
92+
</li>
93+
<li>
94+
<FormattedMessage
95+
id="stats.book.summaryString.downloadForTranslationExplanation"
96+
defaultMessage="'downloads for translation' is a count of how times someone has clicked 'Translate into your own language' in order to load the book into Bloom for translation."
97+
/>
98+
</li>
99+
</ul>
100+
<p>
81101
<FormattedMessage
82-
id="stats.book.summaryString.readExplanation"
83-
defaultMessage="'reads' is a count of how many times someone has read this book in a digital form from which we receive analytics. We cannot currently get analytics from epub versions. Because books can be read offline, we may not have a record of all reads."
102+
id="stats.book.summaryString.range"
103+
defaultMessage="This starting date for these statistics vary by when we started recording them. They are updated every 24 hours."
84104
/>
85-
</li>
86-
<li>
105+
</p>
106+
<p>
87107
<FormattedMessage
88-
id="stats.book.summaryString.deviceExplanation"
89-
defaultMessage="'devices' is a count of how many phones/tablets/computers have this book installed in Bloom Reader."
108+
id="stats.book.summaryString.furtherStats"
109+
defaultMessage="Enterprise customers can get a set of charts and downloadable data which includes information on all of their books, including where books are being read and growth over time."
90110
/>
91-
</li>
92-
<li>
93-
<FormattedMessage
94-
id="stats.book.summaryString.downloadForTranslationExplanation"
95-
defaultMessage="'downloads for translation' is a count of how times someone has clicked 'Translate into your own language' in order to load the book into Bloom for translation."
96-
/>
97-
</li>
98-
</ul>
99-
<p>
100-
<FormattedMessage
101-
id="stats.book.summaryString.range"
102-
defaultMessage="This starting date for these statistics vary by when we started recording them. They are updated every 24 hours."
103-
/>
104-
</p>
105-
<p>
106-
<FormattedMessage
107-
id="stats.book.summaryString.furtherStats"
108-
defaultMessage="Enterprise customers can get a set of charts and downloadable data which includes information on all of their books, including where books are being read and growth over time."
109-
/>
110-
</p>
111-
</div>
111+
</p>
112+
</div>
113+
),
114+
[]
112115
);
116+
113117
// just show the stats that we have values for
114118
const l10n = useIntl();
115119
const statStrings = [];

‎src/components/Routes.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -133,9 +133,9 @@ export const Routes: React.FunctionComponent<{}> = () => {
133133
);
134134
}}
135135
/>
136-
{/* the colon here is not literally there in the url */}
136+
137137
<Route
138-
path={"/:segments*/stats"}
138+
path={"/:segments*/stats/:screen*"}
139139
render={({ match }) => {
140140
if (window.self !== window.top) {
141141
throw new Error(
@@ -148,6 +148,7 @@ export const Routes: React.FunctionComponent<{}> = () => {
148148
return (
149149
<CollectionStatsPageCodeSplit
150150
collectionName={collectionName}
151+
screen={match.params.screen}
151152
/>
152153
);
153154
}}

‎src/components/statistics/BookStatsReport.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,15 @@ import {
1414
import { SortingState, IntegratedSorting } from "@devexpress/dx-react-grid";
1515
import { IGridColumn } from "../Grid/GridColumns";
1616
import React, { useState, useContext } from "react";
17-
import { IStatsProps } from "./StatsInterfaces";
17+
import { IStatsPageProps } from "./StatsInterfaces";
1818
import { useGetBookStats } from "./useGetBookStats";
1919
import { useProvideDataForExport } from "../../export/exportData";
2020
import { CachedTablesContext } from "../../model/CacheProvider";
2121
import { getDisplayNamesFromLanguageCode } from "../../model/Language";
2222
import { useIntl } from "react-intl";
2323
import { StatsGridWrapper } from "./StatsGridWrapper";
2424

25-
export const BookStatsReport: React.FunctionComponent<IStatsProps> = (
25+
export const BookStatsReport: React.FunctionComponent<IStatsPageProps> = (
2626
props
2727
) => {
2828
const l10n = useIntl();

0 commit comments

Comments
 (0)