import React, { useState, useEffect, useRef } from 'react' import styled, { createGlobalStyle } from 'styled-components' import { Helmet } from 'react-helmet' import { useTranslation } from 'react-i18next' import DomainCard from './components/cards/DomainCard' import GithubCard from './components/cards/GithubCard' import NpmCard from './components/cards/NpmCard' import PypiCard from './components/cards/PypiCard' import RubyGemsCard from './components/cards/RubyGemsCard' import CratesioCard from './components/cards/CratesioCard' import HomebrewCard from './components/cards/HomebrewCard' import LinuxCard from './components/cards/LinuxCard' import TwitterCard from './components/cards/TwitterCard' import SlackCard from './components/cards/SlackCard' import S3Card from './components/cards/S3Card' import JsOrgCard from './components/cards/JsOrgCard' import GithubSearchCard from './components/cards/GithubSearchCard' import AppStoreCard from './components/cards/AppStoreCard' import GoogleCard from './components/cards/GoogleCard' import Welcome from './components/Welcome' import Footer from './components/Footer' import Suggestion from './components/Suggestion' import { useDeferredState } from './hooks/state' import { mobile } from './util/css' import { isStandalone } from './util/pwa' export default function App() { const [query, setQuery] = useDeferredState(1000, '') const [inputValue, setInputValue] = useState('') const [suggested, setSuggested] = useState(false) const inputRef = useRef() const { t } = useTranslation() const queryGiven = query && query.length > 0 useEffect(() => { const modifiedValue = inputValue.replace(/[\s@+!#$%^&*()[\]]/g, '') setQuery(modifiedValue) }, [inputValue, setQuery]) useEffect(() => { if (query.length === 0) { setSuggested(false) } }, [query]) // set input value function onInputChange(e) { const value = e.target.value setInputValue(value) } // clear input form and focus on it function onLogoClick(e) { setInputValue('') inputRef.current.focus() } // invoke when user clicked one of the suggested items function onSuggestionCompleted(name) { setInputValue(name) setSuggested(true) } return ( <> namaæ — {t('title')}
namæ {queryGiven && !suggested ? ( ) : null}
{queryGiven ? ( ) : ( !isStandalone() && )}