|
1 | | -import React, { ReactElement, useEffect, useState } from "react"; |
2 | | -import { Book } from "../../model/Book"; |
3 | | -import { BlorgLink } from "../BlorgLink"; |
4 | | -import { useIntl } from "react-intl"; |
5 | | -import { BookProblemNotice } from "./BookProblemNotice"; |
6 | | - |
7 | | -export const MissingFontNotice: React.FunctionComponent<{ book: Book }> = ( |
8 | | - props |
9 | | -) => { |
10 | | - const l10n = useIntl(); |
11 | | - const [links, setLinks] = useState<ReactElement[]>([]); |
12 | | - |
13 | | - useEffect(() => { |
14 | | - const missingFontNames = props.book.getMissingFontNames(); |
15 | | - setLinks( |
16 | | - missingFontNames.map((fontName) => ( |
17 | | - <BlorgLink |
18 | | - key={fontName} |
19 | | - alwaysnewtab={true} |
20 | | - color="primary" |
21 | | - href={`https://docs.google.com/forms/d/e/1FAIpQLSeo_lwdTU0JY4Nw1zlo1LCceXkLBWcATfWItnS7FqX5Aa3NUg/viewform?usp=pp_url&entry.1604864976=${window.location.href}&entry.1767307754=${fontName}`} |
22 | | - > |
23 | | - {fontName} |
24 | | - </BlorgLink> |
25 | | - )) |
26 | | - ); |
27 | | - }, [props.book]); |
28 | | - |
29 | | - if (!links || links.length === 0) { |
30 | | - return null; |
31 | | - } |
32 | | - |
33 | | - const listOfLinks = links.reduce( |
34 | | - (prev: JSX.Element, curr: JSX.Element): any => [prev, ", ", curr] |
35 | | - ); |
36 | | - |
37 | | - return ( |
38 | | - <BookProblemNotice> |
39 | | - {l10n.formatMessage({ |
40 | | - id: "book.missingFontsNotice", |
41 | | - defaultMessage: |
42 | | - "We cannot fully present this book because it uses one or more fonts that BloomLibrary.org does not have. Please help us to find each font by clicking on its name and answering some questions: ", |
43 | | - })} |
44 | | - {listOfLinks} |
45 | | - {"."} |
46 | | - </BookProblemNotice> |
47 | | - ); |
48 | | -}; |
| 1 | +import React, { ReactElement, useEffect, useState } from "react"; |
| 2 | +import { Book } from "../../model/Book"; |
| 3 | +import { BlorgLink } from "../BlorgLink"; |
| 4 | +import { useIntl } from "react-intl"; |
| 5 | +import { BookProblemNotice } from "./BookProblemNotice"; |
| 6 | + |
| 7 | +export const MissingFontNotice: React.FunctionComponent<{ book: Book }> = ( |
| 8 | + props |
| 9 | +) => { |
| 10 | + const l10n = useIntl(); |
| 11 | + const [links, setLinks] = useState<ReactElement[]>([]); |
| 12 | + |
| 13 | + useEffect(() => { |
| 14 | + const missingFontNames = props.book.getMissingFontNames(); |
| 15 | + setLinks( |
| 16 | + missingFontNames.map((fontName) => ( |
| 17 | + <BlorgLink |
| 18 | + key={fontName} |
| 19 | + alwaysnewtab={true} |
| 20 | + color="primary" |
| 21 | + href={`https://docs.google.com/forms/d/e/1FAIpQLSeo_lwdTU0JY4Nw1zlo1LCceXkLBWcATfWItnS7FqX5Aa3NUg/viewform?usp=pp_url&entry.1604864976=${window.location.href}&entry.1767307754=${fontName}`} |
| 22 | + > |
| 23 | + {fontName} |
| 24 | + </BlorgLink> |
| 25 | + )) |
| 26 | + ); |
| 27 | + }, [props.book]); |
| 28 | + |
| 29 | + if (!links || links.length === 0) { |
| 30 | + return null; |
| 31 | + } |
| 32 | + |
| 33 | + const listOfLinks = links.reduce( |
| 34 | + (prev: JSX.Element, curr: JSX.Element): any => [prev, ", ", curr] |
| 35 | + ); |
| 36 | + |
| 37 | + return ( |
| 38 | + <BookProblemNotice> |
| 39 | + {l10n.formatMessage({ |
| 40 | + id: "book.missingFontsNotice", |
| 41 | + defaultMessage: |
| 42 | + "We cannot fully present this book because it uses one or more fonts that BloomLibrary.org does not have. Please help us to find each font by clicking on its name and answering some questions: ", |
| 43 | + })}{" "} |
| 44 | + {listOfLinks} |
| 45 | + {"."} |
| 46 | + </BookProblemNotice> |
| 47 | + ); |
| 48 | +}; |
0 commit comments