Update API methods

.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "react-app"
+}

src/index.js

@@ -2,8 +2,11 @@ import React from "react";
 import ReactDOM from "react-dom";
 import { BrowserRouter } from "react-router-dom";
 import registerServiceWorker from "./registerServiceWorker";
+import initReactFastclick from "react-fastclick";
 import App from "./routes/app";
-import "./index.css";
+import "./styles/index.css";
+
+initReactFastclick();
 
 ReactDOM.render(
   <BrowserRouter>

src/lib/api/index.js

@@ -1,59 +1,108 @@
 import axios from "axios";
 
-export const fetchMedia = (title, lang = "en") =>
+const lang = "en";
+const baseUrl = `https://${lang}.wikipedia.org/w/api.php`;
+const defaultParams = {
+  format: "json",
+  origin: "*"
+};
+
+export const fetch = params =>
+  axios.get(
+    baseUrl,
+    {
+      params: {
+        ...defaultParams,
+        ...params
+      }
+    },
+    {
+      withCredentials: true
+    }
+  );
+
+export const fetchMedia = title =>
+  new Promise((resolve, reject) =>
+    fetch({
+      params: {
+        action: "query",
+        iiprop: "timestamp|url|size|mime|mediatype|extmetadata",
+        prop: "imageinfo",
+        titles: title
+      }
+    }).then(({ data: { error, query } }) => {
+      if (error) {
+        return reject(error);
+      } else {
+        return resolve(query.pages[-1]);
+      }
+    })
+  );
+
+export const fetchRandom = () =>
   new Promise((resolve, reject) =>
-    axios
-      .get(`https://${lang}.wikipedia.org/w/api.php`, {
-        params: {
-          action: "query",
-          format: "json",
-          iiprop: "timestamp|url|size|mime|mediatype|extmetadata",
-          origin: "*",
-          prop: "imageinfo",
-          titles: title
-        }
-      })
-      .then(({ data: { error, query } }) => {
-        if (error) {
-          return reject(error);
-        } else {
-          return resolve(query.pages[-1]);
-        }
-      })
+    fetch({
+      action: "query",
+      list: "random",
+      rnnamespace: 0,
+      rnlimit: 1
+    }).then(({ data: { error, query } }) => {
+      if (error) {
+        return reject(error);
+      } else {
+        return resolve(query.random[0]);
+      }
+    })
   );
 
-export const fetchPage = (title, lang = "en") =>
+export const fetchPages = query =>
   new Promise((resolve, reject) =>
-    axios
-      .get(`https://${lang}.wikipedia.org/w/api.php`, {
-        params: {
-          action: "parse",
-          disableeditsection: true,
-          disablestylededuplication: true,
-          format: "json",
-          // mainpage: title === "Main_page",
-          mobileformat: true,
-          origin: "*",
-          page: title,
-          prop: "text|sections|images|displaytitle",
-          redirects: true,
-          wrapoutputclass: "root"
-        }
-      })
-      .then(({ data: { error, parse } }) => {
-        if (error) {
-          return reject(error);
-        } else {
-          const { displaytitle, images, sections, text } = parse;
-
-          return resolve({
-            title: displaytitle,
-            images,
-            sections,
-            content: formatHtml(text["*"])
-          });
-        }
-      })
+    fetch({
+      prop: "pageprops|pageimages|pageterms",
+      format: "json",
+      generator: "prefixsearch",
+      ppprop: "displaytitle",
+      piprop: "thumbnail",
+      pithumbsize: 160,
+      pilimit: 10,
+      wbptterms: "description",
+      gpssearch: decodeURIComponent(query),
+      gpsnamespace: 0,
+      gpslimit: 10
+    }).then(({ data: { error, query } }) => {
+      if (error) {
+        return reject(error);
+      } else {
+        return resolve(query.pages);
+      }
+    })
+  );
+
+export const fetchPage = title =>
+  new Promise((resolve, reject) =>
+    fetch({
+      action: "parse",
+      disableeditsection: true,
+      disablestylededuplication: true,
+      mobileformat: true,
+      page: decodeURIComponent(title),
+      prop: "text|sections|images|displaytitle",
+      redirects: true,
+      wrapoutputclass: "root"
+    }).then(({ data: { error, parse } }) => {
+      if (error) {
+        return reject(error);
+      } else {
+        const { displaytitle, images, sections, text } = parse;
+
+        return resolve({
+          title: displaytitle,
+          images,
+          sections,
+          content: formatHtml(text["*"])
+        });
+      }
+    })
   );
 
 export const formatHtml = html =>

src/routes/home/index.js

@@ -2,7 +2,7 @@ import React from "react";
 import { Route, Link } from "react-router-dom";
 
 export default () => (
-  <div>
+  <div class="container">
     <h1 class="logo">Wikipadia</h1>
 
     <div class="blurb">

src/routes/page/index.js

@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import { fetchPage } from "../../lib/api";
-import Loading from "../../components/Loading";
+
+import Loading from "../../components/loading";
 
 export default class extends Component {
   constructor(props) {
@@ -22,9 +23,9 @@ export default class extends Component {
   fetchPage = title => {
     this.setState({ loading: true });
 
-    return fetchPage(decodeURIComponent(title))
+    return fetchPage(title)
       .then(({ title, content, sections }) => {
-        document.title = title;
+        document.title = `${title} - Wikipadia`;
 
         this.setState(
           {
@@ -54,7 +55,7 @@ export default class extends Component {
     const { loading, title, content, error } = this.state;
 
     return (
-      <div>
+      <div class="container">
         {loading && <Loading />}
         {content ? (
           <div>

src/index.css → src/styles/index.css

@@ -1,3 +1,5 @@
+@import url("./page.css");
+
 html {
   font-family: Cardo, Georgia, serif;
   font-size: 100%;
@@ -45,7 +47,7 @@ h6 {
   font-family: Playfair Display, Cardo, Georgia, serif;
 }
 
-.root {
+.container {
   max-width: 42rem;
   margin: auto;
   padding: 1.5rem;