getUrl.js

import { concat } from "ramda";
export default concat(
  "https://en.wikipedia.org/w/api.php?origin=*&action=opensearch&search="
);

concat

R.concat('ABC', 'DEF'); // 'ABCDEF'
R.concat([4, 5, 6], [1, 2, 3]); //=> [4, 5, 6, 1, 2, 3]
R.concat([], []); //=> []

getInputValue.js

import { pathOr, trim, pipe } from "ramda";
export default pipe(pathOr("", ["target", "value"]), trim);

pathOr

R.pathOr('N/A', ['a', 'b'], {a: {b: 2}}); //=> 2
R.pathOr('N/A', ['a', 'b'], {c: {b: 2}}); //=> "N/A"

trim

R.trim('   xyz  '); //=> 'xyz'
R.map(R.trim, R.split(',', 'x, y, z')); //=> ['x', 'y', 'z']

Results.js

export default ([query, names, summaries, links]) => `
  <h2>Searching for "${query}"</h2>
  <ul class="list-group">
    ${names.map(
      (name, index) => `
        <li class="list-group-item">
          <a href=${links[index]} target="_blank">
            <h4>${name}</h4>
          </a>
          <p>${summaries[index]}</p>
        </li>
      `
    ).join('')}}
  </ul>
`;

index.js

import "bootstrap/dist/css/bootstrap.min.css";
import { pipe, tap,ifElse,isEmpty  } from "ramda";
import getInputValue from "./getInputValue";
import getUrl from "./getUrl";
import data from "./data";
import Results from "./Results";
import { debounce } from "lodash";
const doNothing = () => {};
const render = (markup) => {
  const resultsElement = document.getElementById("results");
  resultsElement.innerHTML = markup;
};
const searchAndRenderResults = pipe(getUrl, tap(console.warn), (url) =>
  fetch(url)
    .then(
      (res) => res.json(),
      (err) => {
        console.warn(err);
        return data;
      }
    )
    .then(Results)
    .then(render)
);
const makeSearchRequestIfValid = pipe(
  getInputValue,
  ifElse(isEmpty, doNothing, debounce(searchAndRenderResults, 1000))
);
const inputElement = document.querySelector("input");
inputElement.addEventListener("keyup", makeSearchRequestIfValid);

tap

const sayX = x => console.log('x is ' + x);
R.tap(sayX, 100); //=> 100
// logs 'x is 100'

ifElse

const incCount = R.ifElse(
  R.has('count'),
  R.over(R.lensProp('count'), R.inc),
  R.assoc('count', 1)
);
incCount({});           //=> { count: 1 }
incCount({ count: 1 }); //=> { count: 2 }

isEmpty

R.isEmpty([1, 2, 3]);   //=> false
R.isEmpty([]);          //=> true
R.isEmpty('');          //=> true
R.isEmpty(null);        //=> false
R.isEmpty({});          //=> true
R.isEmpty({length: 0}); //=> false