Wikipedia links integration

arbre-app · Nov 28, 2021 · cac1859 · cac1859
1 parent 865c8aa
commit cac1859
Show file tree

Hide file tree

Showing 11 changed files with 74 additions and 24 deletions.
diff --git a/src/components/BlockApi.js b/src/components/BlockApi.js
@@ -80,6 +80,10 @@ export function BlockApi({ onBackClick }) {
                 gender: true,
                 nom: 'CHIRAC',
                 prenom: 'Jacques René',
+                wikipedia: {
+                  fr: 'https://fr.wikipedia.org/wiki/Jacques_Chirac',
+                  en: 'https://en.wikipedia.org/wiki/Jacques_Chirac'
+                },
               }
             ],
           }}

diff --git a/src/components/BlockInformation.js b/src/components/BlockInformation.js
@@ -65,7 +65,7 @@ export function BlockInformation({ onBackClick }) {
         <h6 className="font-weight-bold"><FormattedMessage id="info.faq.cannot_find.question" /></h6>
         <p className="text-justify">
           <ArrowRightShort className="icon mr-1" />
-          <FormattedMessage id="info.faq.cannot_find.answer" values={{ date: <FormattedDate value={DB_LAST_UPDATE} month="long" year="numeric" /> }} />
+          <FormattedMessage id="info.faq.cannot_find.answer" values={{ date: <FormattedDate value={DB_LAST_UPDATE} month="long" year="numeric" timeZone="UTC" /> }} />
         </p>
         <h6 className="font-weight-bold"><FormattedMessage id="info.faq.found_error.question" /></h6>
         <p className="text-justify">

diff --git a/src/components/BlockResultTabList.js b/src/components/BlockResultTabList.js
@@ -12,7 +12,7 @@ import { SmallPagination } from '../form/SmallPagination';
 
 export function BlockResultTabList() {
   const { state: { data, form, loading }, dispatch: dispatchForm } = useFormContext();
-  const { state: { data: { matchesHighlighting, columnEventType, columnActCode } } } = useSettingsContext();
+  const { state: { data: { matchesHighlighting, wikipediaLinks, columnEventType, columnActCode } } } = useSettingsContext();
   const setCurrentPageDispatch = currentPage => dispatchForm(setCurrentPage(currentPage));
   const handlePageChange = newPage => {
     setCurrentPageDispatch(newPage);
@@ -56,7 +56,7 @@ export function BlockResultTabList() {
       </Row>
       {data.count > 0 ? (
         <>
-          <ResultListTable results={data.results} formData={form} disabled={loading} withHighlights={matchesHighlighting} columnEventType={columnEventType} columnActCode={columnActCode} />
+          <ResultListTable results={data.results} formData={form} disabled={loading} withHighlights={matchesHighlighting} withLinks={wikipediaLinks} columnEventType={columnEventType} columnActCode={columnActCode} />
           <SmallPagination currentPage={form.currentPage} totalPages={totalPages} onChange={handlePageChange} disabled={loading} />
         </>
       ) : (

diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -41,7 +41,7 @@ export function Footer({ onInformationClick, onApiClick }) {
         <Col xs={12}>
           <FormattedMessage id="footer.current_data" values={{
             count: <strong><FormattedNumber value={DB_TOTAL_RECORDS} /></strong>,
-            date: <em><FormattedDate value={DB_LAST_UPDATE} month="long" year="numeric" /></em>,
+            date: <em><FormattedDate value={DB_LAST_UPDATE} month="long" year="numeric" timeZone="UTC" /></em>,
           }} />
         </Col>
         <Col xs={12}>

diff --git a/src/components/ResultListTable.js b/src/components/ResultListTable.js
@@ -7,7 +7,7 @@ import { EVENT_TYPE_BIRTH, EVENT_TYPE_DEATH } from '../api';
 import { RANGE_ABOUT, RANGE_AFTER, RANGE_BEFORE, RANGE_BETWEEN, RANGE_EXACT } from '../form/DateRangeGroup';
 import { normalizeTextToken, selectElementText, tokenizeAndNormalizeText, tokenizeText } from '../utils';
 
-export function ResultListTable({ results, formData, disabled, withHighlights, columnEventType, columnActCode }) {
+export function ResultListTable({ results, formData, disabled, withHighlights, withLinks, columnEventType, columnActCode }) {
   const intl = useIntl();
   const renderRow = (entry, index) => {
     const GenderCmp = entry.gender ? GenderMale : GenderFemale;
@@ -33,7 +33,7 @@ export function ResultListTable({ results, formData, disabled, withHighlights, c
     const surnameNeedles = tokenizeAndNormalizeText(formData.surname || '');
     const givenNameNeedles = tokenizeAndNormalizeText(formData.givenName || '');
     const HighlightFuzzy = ({ text, needles }) => {
-      if(withHighlights) {
+      if(text && withHighlights) {
         const parts = tokenizeText(text);
         return parts.map((token, i) => (
           <React.Fragment key={i}>
@@ -43,24 +43,36 @@ export function ResultListTable({ results, formData, disabled, withHighlights, c
           </React.Fragment>
         ));
       } else {
-        return text;
+        return text || null;
       }
     };
     const HighlightSuffix = ({ text, suffix }) => {
-      if(withHighlights && suffix != null && text.endsWith(suffix)) {
+      if(text && withHighlights && suffix != null && text.endsWith(suffix)) {
         return (
           <>
             {text.substring(0, text.length - suffix.length)}
             <strong onClick={handleChildClick}>{text.substring(text.length - suffix.length)}</strong>
           </>
         );
       } else {
-        return text;
+        return text || null;
       }
     };
     const HighlightConditional = ({ children, isHighlighted }) => withHighlights && isHighlighted ? (
       <strong onClick={handleChildClick}>{children}</strong>
     ) : children;
+    const LinkWhenAvailable = ({ children, urls }) => {
+      if(urls && withLinks) {
+        const url = urls[intl.locale] || urls['fr'] || urls['en']; // This should be the expected behavior
+        return url ? (
+          <a href={url} target="_blank" rel="noreferrer" className="table-row-link">
+            {children}
+          </a>
+        ) : children;
+      } else {
+        return children;
+      }
+    };
     const placeText = formData.place.length > 0 ? formData.place[0].fullname : null;
     const hasYearFilter =
       formData.rangeType === RANGE_BETWEEN && (formData.yearAfter !== undefined || formData.yearBefore !== undefined) ||
@@ -73,17 +85,25 @@ export function ResultListTable({ results, formData, disabled, withHighlights, c
               <GenderCmp className={`icon icon-gender ${genderColor}`} />
             </span>
           </td>
-          <TextTd rowSpan={2}><HighlightFuzzy text={entry.nom} needles={surnameNeedles} /></TextTd>
-          <TextTd rowSpan={2}><HighlightFuzzy text={entry.prenom} needles={givenNameNeedles} /></TextTd>
+          <TextTd rowSpan={2}>
+            <LinkWhenAvailable urls={entry.wikipedia}>
+              <HighlightFuzzy text={entry.nom} needles={surnameNeedles} />
+            </LinkWhenAvailable>
+          </TextTd>
+          <TextTd rowSpan={2}>
+            <LinkWhenAvailable urls={entry.wikipedia}>
+              <HighlightFuzzy text={entry.prenom} needles={givenNameNeedles} />
+            </LinkWhenAvailable>
+          </TextTd>
           {columnEventType && (
             <td><FormattedMessage id="common.event.birth" /></td>
           )}
           <TextTd>
             <HighlightConditional isHighlighted={formData.sortBy === EVENT_TYPE_BIRTH && hasYearFilter}>
-            {entry.birthDate ? (
-              <time dateTime={entry.birthDate}><FormattedDate value={entry.birthDate} timeZone="UTC" /></time>
-            ) : null}
-          </HighlightConditional>
+              {entry.birthDate ? (
+                <time dateTime={entry.birthDate}><FormattedDate value={entry.birthDate} timeZone="UTC" /></time>
+              ) : null}
+            </HighlightConditional>
           </TextTd>
           <TextTd><HighlightSuffix text={entry.birthPlace} suffix={placeText} /></TextTd>
           {columnActCode && (
@@ -99,10 +119,10 @@ export function ResultListTable({ results, formData, disabled, withHighlights, c
             <td><FormattedMessage id="common.event.death" /></td>
           )}
           <TextTd><HighlightConditional isHighlighted={formData.sortBy === EVENT_TYPE_DEATH && hasYearFilter}>
-            {entry.deathDate ? (
-              <time dateTime={entry.deathDate}><FormattedDate value={entry.deathDate} timeZone="UTC" /></time>
-            ) : null}
-          </HighlightConditional></TextTd>
+              {entry.deathDate ? (
+                <time dateTime={entry.deathDate}><FormattedDate value={entry.deathDate} timeZone="UTC" /></time>
+              ) : null}
+            </HighlightConditional></TextTd>
           <TextTd><HighlightSuffix text={entry.deathPlace} suffix={placeText} /></TextTd>
         </tr>
       </tbody>
@@ -144,13 +164,15 @@ ResultListTable.propTypes = {
   formData: PropTypes.object.isRequired,
   disabled: PropTypes.bool,
   withHighlights: PropTypes.bool,
+  withLinks: PropTypes.bool,
   columnEventType: PropTypes.bool,
   columnActCode: PropTypes.bool,
 };
 
 ResultListTable.defaultProps = {
   disabled: false,
   withHighlights: false,
+  withLinks: false,
   columnEventType: false,
   columnActCode: false,
 };
diff --git a/src/components/SettingsButton.js b/src/components/SettingsButton.js
@@ -7,7 +7,7 @@ import {
   setColumnActCode,
   setColumnEventType,
   setMatchesHighlighting,
-  setTheme,
+  setTheme, setWikipediaLinks,
   THEME_DARK,
   THEME_LIGHT,
   useSettingsContext,
@@ -18,10 +18,11 @@ import { deepEqual } from '../utils';
 export function SettingsButton({ ...props }) {
   const [isShown, setIsShown] = useState(false);
   const { state, dispatch } = useSettingsContext();
-  const { data: { theme, matchesHighlighting, columnEventType, columnActCode } } = state;
+  const { data: { theme, matchesHighlighting, wikipediaLinks, columnEventType, columnActCode } } = state;
   const setThemeDispatch = theme => dispatch(setTheme(theme));
   const createThemeChangeHandler = theme => () => setThemeDispatch(theme);
   const setMatchesHighlightingDispatch = isEnabled => dispatch(setMatchesHighlighting(isEnabled));
+  const setWikipediaLinksDispatch = isEnabled => dispatch(setWikipediaLinks(isEnabled));
   const setColumnEventTypeDispatch = isEnabled => dispatch(setColumnEventType(isEnabled));
   const setColumnActCodeDispatch = isEnabled => dispatch(setColumnActCode(isEnabled));
   const resetSettingsDispatch = () => dispatch(resetSettings());
@@ -44,6 +45,10 @@ export function SettingsButton({ ...props }) {
         <CheckboxIcon isEnabled={matchesHighlighting} />
         <FormattedMessage id="settings.highlight" />
       </Dropdown.Item>
+      <Dropdown.Item onClick={() => setWikipediaLinksDispatch(!wikipediaLinks)}>
+        <CheckboxIcon isEnabled={wikipediaLinks} />
+        <FormattedMessage id="settings.wikipedia_links" />
+      </Dropdown.Item>
       <Dropdown.Header><FormattedMessage id="settings.columns" /></Dropdown.Header>
       <Dropdown.Item onClick={() => setColumnEventTypeDispatch(!columnEventType)}>
         <CheckboxIcon isEnabled={columnEventType} />

diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -58,8 +58,9 @@
   "result.warning.item.period_early_death": "The year is too far back, only the deaths that occurred after 1970 are available",
   "result.warning.item.period_early": "The year is too far back",
   "result.warning.item.special_symbols": "The query contains special characters which were ignored",
-  "settings.search": "Search",
+  "settings.search": "Results",
   "settings.highlight": "Highlighting",
+  "settings.wikipedia_links": "Wikipedia links",
   "settings.columns": "Columns",
   "settings.column_event_type": "Event type",
   "settings.column_act_code": "Document number",

diff --git a/src/i18n/fr.json b/src/i18n/fr.json
@@ -58,8 +58,9 @@
   "result.warning.item.period_early_death": "L'année est trop reculée, seuls les décès après 1970 sont consultables",
   "result.warning.item.period_early": "L'année est trop reculée",
   "result.warning.item.special_symbols": "La recherche contient des caractères spéciaux qui ont été ignorés",
-  "settings.search": "Recherche",
+  "settings.search": "Résultats",
   "settings.highlight": "Surbrillance",
+  "settings.wikipedia_links": "Liens Wikipédia",
   "settings.columns": "Colonnes",
   "settings.column_event_type": "Type d'événement",
   "settings.column_act_code": "Numéro d'acte",

diff --git a/src/index.css b/src/index.css
@@ -195,3 +195,7 @@ table.result-table > tbody > tr > td {
 .cursor-pointer{
     cursor: pointer;
 }
+
+tbody:hover .table-row-link {
+    text-decoration: underline;
+}
diff --git a/src/state/settings/actions.js b/src/state/settings/actions.js
@@ -1,5 +1,6 @@
 export const SET_THEME = 'settings/SET_THEME';
 export const SET_MATCHES_HIGHLIGHTING = 'settings/SET_MATCHES_HIGHLIGHTING';
+export const SET_WIKIPEDIA_LINKS = 'settings/SET_WIKIPEDIA_LINKS';
 export const SET_COLUMN_EVENT_TYPE = 'settings/SET_COLUMN_EVENT_TYPE';
 export const SET_COLUMN_ACT_CODE = 'settings/SET_COLUMN_ACT_CODE';
 export const HIDE_MESSAGE_NEWS = 'settings/HIDE_MESSAGE_NEWS';
@@ -26,6 +27,15 @@ export const setMatchesHighlighting = isEnabled => async dispatch => {
   });
 };
 
+export const setWikipediaLinks = isEnabled => async dispatch => {
+  dispatch({
+    type: SET_WIKIPEDIA_LINKS,
+    data: {
+      wikipediaLinks: isEnabled,
+    }
+  });
+};
+
 export const setColumnEventType = isEnabled => async dispatch => {
   dispatch({
     type: SET_COLUMN_EVENT_TYPE,

diff --git a/src/state/settings/reducer.js b/src/state/settings/reducer.js
@@ -2,7 +2,7 @@ import {
   HIDE_MESSAGE_NEWS, RESET, SET_COLUMN_ACT_CODE,
   SET_COLUMN_EVENT_TYPE,
   SET_MATCHES_HIGHLIGHTING,
-  SET_THEME,
+  SET_THEME, SET_WIKIPEDIA_LINKS,
   THEME_DARK,
   THEME_LIGHT,
 } from './actions';
@@ -11,6 +11,7 @@ export const defaultState = {
   data: {
     theme: THEME_LIGHT,
     matchesHighlighting: true,
+    wikipediaLinks: true,
     messageNewsVisible: true,
     columnEventType: true,
     columnActCode: false,
@@ -36,6 +37,7 @@ const loadState = () => {
         data: {
           theme: validateCategory([THEME_LIGHT, THEME_DARK])(data.theme, defaultState.data.theme),
           matchesHighlighting: validateBoolean(data.matchesHighlighting, defaultState.data.matchesHighlighting),
+          wikipediaLinks: validateBoolean(data.wikipediaLinks, defaultState.data.wikipediaLinks),
           messageNewsVisible: validateBoolean(data.messageNewsVisible, defaultState.data.messageNewsVisible),
           columnEventType: validateBoolean(data.columnEventType, defaultState.data.columnEventType),
           columnActCode: validateBoolean(data.columnActCode, defaultState.data.columnActCode),
@@ -61,6 +63,7 @@ export const settingsReducer = (state, action) => {
   switch (action.type) {
     case SET_THEME:
     case SET_MATCHES_HIGHLIGHTING:
+    case SET_WIKIPEDIA_LINKS:
     case SET_COLUMN_EVENT_TYPE:
     case SET_COLUMN_ACT_CODE:
     case HIDE_MESSAGE_NEWS: