Mostly there

sdow/helpers.py

@@ -61,13 +61,14 @@ def fetch_wikipedia_pages_info(page_ids, database):
       raise ValueError('Empty MediaWiki API response')
 
     for page_id, page in pages_result.items():
-      page_id = str(page_id)
+      page_id = int(page_id)
 
       if 'missing' in page:
         # If the page has been deleted since the current Wikipedia database dump, fetch the page
         # title from the SDOW database and create the (albeit broken) URL.
         page_title = database.fetch_page_title(page_id)
         pages_info[page_id] = {
+            'id': page_id,
             'title': page_title,
             'url': 'https://en.wikipedia.org/wiki/{0}'.format(page_title)
         }

website/src/api.ts

@@ -1,5 +1,5 @@
-import {SDOW_API_URL} from './resources/constants';
-import {ShortestPathsApiResponse, WikipediaPage, WikipediaPageId} from './types';
+import {SDOW_API_URL} from './resources/constants.ts';
+import {ShortestPathsApiResponse, WikipediaPage, WikipediaPageId} from './types.ts';
 
 interface FetchShortestPathsResponse {
   readonly paths: readonly WikipediaPageId[][];

website/src/components/Home.tsx

@@ -3,7 +3,7 @@ import React, {useCallback, useState} from 'react';
 
 import {fetchShortestPaths} from '../api.ts';
 import {WikipediaPage, WikipediaPageId} from '../types.ts';
-import {getRandomPageTitle} from '../utils.js';
+import {getRandomPageTitle} from '../utils.ts';
 import {Logo} from './common/Logo';
 import {ErrorMessage} from './ErrorMessage.tsx';
 import {InputFlexContainer, Modal, P} from './Home.styles.ts';

website/src/components/Loading.tsx

@@ -1,7 +1,7 @@
 import React, {useEffect, useState} from 'react';
 import styled from 'styled-components';
 
-import {getRandomWikipediaFact, getWikipediaPageUrl} from '../utils';
+import {getRandomWikipediaFact, getWikipediaPageUrl} from '../utils.ts';
 import {StyledTextLink} from './common/StyledTextLink.tsx';
 
 const Wrapper = styled.div`

website/src/components/PageInput.tsx

@@ -6,10 +6,10 @@ import React, {useCallback, useEffect, useState} from 'react';
 import Autosuggest from 'react-autosuggest';
 import styled from 'styled-components';
 
-import {SDOW_USER_AGENT, WIKIPEDIA_API_URL} from '../resources/constants';
-import {WikipediaPage} from '../types';
-import {getRandomPageTitle} from '../utils';
-import {PageInputSuggestion} from './PageInputSuggestion';
+import {SDOW_USER_AGENT, WIKIPEDIA_API_URL} from '../resources/constants.ts';
+import {WikipediaPage} from '../types.ts';
+import {getRandomPageTitle} from '../utils.ts';
+import {PageInputSuggestion} from './PageInputSuggestion.tsx';
 
 type PageSuggestion = Required<Omit<WikipediaPage, 'url'>>;
 
@@ -100,7 +100,13 @@ const AutosuggestWrapper = styled.div`
 
 // Autosuggest component helpers.
 const getSuggestionValue = (suggestion) => suggestion.title;
-const renderSuggestion = (suggestion) => <PageInputSuggestion {...suggestion} />;
+const renderSuggestion = (suggestion) => (
+  <PageInputSuggestion
+    title={suggestion.title}
+    description={suggestion.description}
+    thumbnailUrl={suggestion.thumbnailUrl}
+  />
+);
 
 export const PageInput: React.FC<{
   readonly title: string;
@@ -152,11 +158,14 @@ export const PageInput: React.FC<{
 
       const pageResults = get(data, 'query.pages', {});
       const newSuggestions: PageSuggestion[] = [];
-      forEach(pageResults, ({ns, title, terms, thumbnail}) => {
+      forEach(pageResults, (all) => {
+        const {ns, id, title, terms, thumbnail} = all;
+        console.log('ALL:', all);
         if (ns === 0) {
           let description = get(terms, 'description.0', '');
           description = description.charAt(0).toUpperCase() + description.slice(1);
           newSuggestions.push({
+            id,
             title,
             description,
             thumbnailUrl: get(thumbnail, 'source'),

website/src/components/PageInputSuggestion.styles.js → website/src/components/PageInputSuggestion.tsx

@@ -1,14 +1,17 @@
+import React from 'react';
 import styled from 'styled-components';
 
-export const Wrapper = styled.div`
+import defaultPageThumbnail from '../images/defaultPageThumbnail.png';
+
+const Wrapper = styled.div`
   width: 100%;
   display: flex;
   align-items: center;
   flex-direction: row;
   color: ${({theme}) => theme.colors.darkGreen};
 `;
 
-export const InnerWrapper = styled.div`
+const InnerWrapper = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -20,7 +23,7 @@ export const InnerWrapper = styled.div`
   }
 `;
 
-export const Image = styled.img`
+const Image = styled.img`
   width: 60px;
   height: 60px;
   margin-right: 12px;
@@ -33,15 +36,15 @@ export const Image = styled.img`
   }
 `;
 
-export const Title = styled.p`
+const Title = styled.p`
   font-size: 20px;
 
   @media (max-width: 600px) {
     font-size: 16px;
   }
 `;
 
-export const Description = styled.p`
+const Description = styled.p`
   font-size: 12px;
   max-height: 48px;
   overflow: hidden;
@@ -50,3 +53,21 @@ export const Description = styled.p`
     max-height: 32px;
   }
 `;
+
+export const PageInputSuggestion: React.FC<{
+  readonly title: string;
+  readonly description: string;
+  readonly thumbnailUrl?: string;
+}> = ({title, description, thumbnailUrl}) => {
+  const descriptionContent = description ? <Description>{description}</Description> : null;
+
+  return (
+    <Wrapper>
+      <Image src={thumbnailUrl || defaultPageThumbnail} />
+      <InnerWrapper>
+        <Title>{title}</Title>
+        {descriptionContent}
+      </InnerWrapper>
+    </Wrapper>
+  );
+};

website/src/components/Results.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import {WikipediaPage, WikipediaPageId} from '../types';
-import {getNumberWithCommas, getWikipediaPageUrl} from '../utils';
+import {WikipediaPage, WikipediaPageId} from '../types.ts';
+import {getNumberWithCommas, getWikipediaPageUrl} from '../utils.ts';
 import {Button} from './common/Button.tsx';
 import {StyledTextLink} from './common/StyledTextLink.tsx';
 import {ResultsGraph} from './ResultsGraph.tsx';