namae/web/src/components/Suggestion.tsx

import React, { useEffect, useState, useRef } from 'react'
import styled from 'styled-components'
import { useTranslation } from 'react-i18next'
import fetch from 'isomorphic-unfetch'
import { TiArrowSync } from 'react-icons/ti'

import { capitalize } from '../util/text'
import { mobile } from '../util/css'

type Modifier = (word: string) => string

const maximumCount = 3
const modifiers: Modifier[] = [
  (word) => `${capitalize(word)}ify`,
  (word) => `lib${lower(word)}`,
  (word) => `Omni${capitalize(word)}`,
  (word) => `${capitalize(word)}Lab`,
  (word) => `${capitalize(word)}Kit`,
  (word) => `Open${capitalize(word)}`,
  (word) => `${capitalize(word)}box`,
  (word) => `Insta${lower(word)}`,
  (word) => `${capitalize(word)}Hub`,
  (word) => `Cloud${capitalize(word)}`,
  (word) => `quick${lower(word)}`,
  (word) => `fast${lower(word)}`,
  (word) => `super-${lower(word)}`,
  (word) => `Hyper${capitalize(word)}`,
  (word) => `${capitalize(word)}Go`,
  (word) => `${lower(word)}-io`,
  (word) => `Go${capitalize(word)}`,
  (word) => `${capitalize(word)}X`,
  (word) => `${capitalize(word)}time`,
  (word) => `${capitalize(word)}flow`,
  (word) => `${capitalize(word)}ful`,
  (word) => `${capitalize(word)}ery`,
  (word) => `${lower(word)}ly`,
  (word) => `${lower(word)}joy`,
  (word) => `${capitalize(word)}Hunt`,
  (word) => `${capitalize(word)}gram`,
  (word) => `${capitalize(word)}base`,
  (word) => `${capitalize(word)}API`,
  (word) => `${capitalize(word)}note`,
  (word) => `In${capitalize(word)}`,
  (word) => `Uni${lower(word)}`,
  (word) => `${capitalize(word)}`,
]

function lower(word: string) {
  return word.toLowerCase()
}

function shuffleArray(array: any[]) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1))
    const temp = array[i]
    array[i] = array[j]
    array[j] = temp
  }
  return array
}

function sampleFromArray(array: any[], maximum: number) {
  return shuffleArray(array).slice(0, maximum)
}

function modifyWord(word: string) {
  return modifiers[Math.floor(Math.random() * modifiers.length)](word)
}

function fillArray(array: any[], filler: string, maximum: number) {
  const deficit = maximum - array.length
  if (deficit > 0) {
    array = [...array, ...Array(deficit).fill(filler)]
  }
  return array
}

async function findSynonyms(word: string) {
  try {
    const response = await fetch(
      `https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&dt=ss&ie=UTF-8&oe=UTF-8&dj=1&q=${encodeURIComponent(
        word
      )}`
    )
    const json: {
      synsets: Array<{ entry: Array<{ synonym: string[] }> }>
    } = await response.json()
    const synonyms = Array.from(
      new Set<string>(
        json.synsets.reduce(
          (sum, synset) => [...sum, ...synset.entry.map((e) => e.synonym[0])],
          [] as string[]
        )
      )
    ).filter((word) => !word.match(/[\s-]/))
    return synonyms
  } catch (err) {
    return []
  }
}

const Suggestion: React.FC<{
  query: string
  onSubmit: (name: string) => void
}> = ({ query, onSubmit }) => {
  const { t } = useTranslation()
  const synonymRef = useRef<string[]>([])
  const [bestWords, setBestWords] = useState<string[]>([])

  function shuffle() {
    const best = fillArray(
      sampleFromArray(synonymRef.current, maximumCount),
      query,
      maximumCount
    ).map((word) => modifyWord(word))
    setBestWords(best)
  }

  function applyQuery(name: string) {
    onSubmit(name)
  }

  useEffect(() => {
    const fn = async () => {
      if (query && query.length > 0) {
        const synonyms = await findSynonyms(query)
        synonymRef.current = synonyms
        const best = fillArray(
          sampleFromArray(synonyms, maximumCount),
          query,
          maximumCount
        ).map((word) => modifyWord(word))
        setBestWords(best)
      }
    }
    fn()
  }, [query])

  return (
    <Container>
      <Title>{t('try')}</Title>
      <Items>
        {bestWords &&
          bestWords.map((name) => (
            <Item key={name} onClick={() => applyQuery(name)}>
              {name}
            </Item>
          ))}
        <Icon>
          <TiArrowSync onClick={shuffle} />
        </Icon>
      </Items>
    </Container>
  )
}

export default Suggestion

const Container = styled.div`
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
`

const Title = styled.div`
  margin-top: 15px;
  padding: 5px 12px;
  color: gray;
  border: 1px solid gray;
  border-radius: 2em;
`

const Items = styled.div`
  margin-top: 2px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;

  ${mobile} {
    flex-direction: column;
    align-items: center;
  }
`

const Item = styled.div`
  margin-top: 8px;
  margin-right: 14px;
  cursor: pointer;
  font-weight: bold;
  font-family: monospace;
  border-bottom: 1px dashed black;
  color: black;

  ${mobile} {
    margin-right: 0;
  }
`

const Icon = styled(Item)`
  display: flex;
  align-items: center;
  border-bottom: none;
`