Arxiv live search template

by wsypeter

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/[email protected]/prop-types.js"></script>
<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
}

input {
  width: 100%;
  font-size: 120%;
}

.search-results {
  margin: 1em 0 1em 0;
}

React

/**
 * Arxiv live search: your task is to write a React widget that takes user input 
 * and searches arxiv.org as the user types. We have provided some helper functions
 * and the skeleton of the code.
 * 
 * For a screenshot of the desired end-result, see:
 * https://drive.google.com/file/d/1wWKkIf4mrlpZx5U5EDv3P6dti_qcLB9h/view
 */
 
 
/*****************************  UTILITY FUNCTIONS FOR YOUR USE: DO NOT MODIFY  *****************************/

/**
 * Given an XML node from Arxiv API reponse, returns an object
 *   {
 *     title: <title of the paper>
 *     url: <arxiv.org url of the paper>
 *   }
 */
function extractTitleAndURL(entry) {
  return {
    title: entry.getElementsByTagName('title')[0].innerHTML,
    url: entry.getElementsByTagName('id')[0].innerHTML.replace(RegExp('^http://'), 'https://')
  }
}


/**
 * Returns a promise that resolves after the specified amount of time
 */
function sleep(milliseconds)  {
  return new Promise(resolve => setTimeout(resolve, milliseconds));
}


/**
 * Search arxiv.org for papers with the string `s` in their title, returning a promise that
 * resolves to an object
 *   {
 *     query: <the given search string `s`>
 *     papers: <an array of papers as extracted by extractTitleAndURL>
 *   }
 */
async function searchArxiv(s) {
  const url = 'https://export.arxiv.org/api/query?search_query=ti:' + encodeURIComponent(s);
	const resp = await fetch(url);
  const parser = new DOMParser();
  const text = await resp.text();
  const doc = parser.parseFromString(text, 'application/xml');
  await sleep(Math.random() * 5000);  // exaggerate variable response timimg
  return {query: s, papers: Array.from(doc.getElementsByTagName('entry')).map(
    entry => extractTitleAndURL(entry)
  )};
}


/**
 * This is sample search results you can use for testing/development.
 */
SAMPLE_SEARCH_RESULTS = {"query":"machine learning","papers":[{"title":"Machine Learned Learning...