diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 0000000..5e603ec --- /dev/null +++ b/.eslintrc @@ -0,0 +1,3 @@ +{ + "extends": "react-app" +} diff --git a/src/components/header/index.js b/src/components/header/index.js new file mode 100644 index 0000000..e69de29 diff --git a/src/index.js b/src/index.js index 47bc4e1..6042a4a 100644 --- a/src/index.js +++ b/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( diff --git a/src/lib/api/index.js b/src/lib/api/index.js index 8350e41..9daf8ac 100644 --- a/src/lib/api/index.js +++ b/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 => diff --git a/src/routes/home/index.js b/src/routes/home/index.js index 1006b33..a63218b 100644 --- a/src/routes/home/index.js +++ b/src/routes/home/index.js @@ -2,7 +2,7 @@ import React from "react"; import { Route, Link } from "react-router-dom"; export default () => ( -
+

Wikipadia

diff --git a/src/routes/page/index.js b/src/routes/page/index.js index 714acff..92d1bc0 100644 --- a/src/routes/page/index.js +++ b/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 ( -
+
{loading && } {content ? (
diff --git a/src/index.css b/src/styles/index.css similarity index 93% rename from src/index.css rename to src/styles/index.css index ce6495e..f6c48ba 100644 --- a/src/index.css +++ b/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; diff --git a/src/styles/page.css b/src/styles/page.css new file mode 100644 index 0000000..e69de29