diff --git a/web/src/App.tsx b/web/src/App.tsx index bd380da..cafcc05 100644 --- a/web/src/App.tsx +++ b/web/src/App.tsx @@ -1,131 +1,40 @@ -import React, { useState, useEffect, useRef } from 'react' +import React, { useState } from 'react' import styled, { createGlobalStyle } from 'styled-components' import { Helmet } from 'react-helmet' import { useTranslation } from 'react-i18next' -import DomainCard from './components/cards/domains' -import GithubCard from './components/cards/github-repository' -import NpmCard from './components/cards/npm' -import PypiCard from './components/cards/pypi' -import RubyGemsCard from './components/cards/rubygems' -import CratesioCard from './components/cards/cratesio' -import HomebrewCard from './components/cards/homebrew' -import LinuxCard from './components/cards/linux' -import TwitterCard from './components/cards/twitter' -import SpectrumCard from './components/cards/spectrum' -import SlackCard from './components/cards/slack' -import S3Card from './components/cards/s3' -import JsOrgCard from './components/cards/jsorg' -import GithubSearchCard from './components/cards/github-search' -import AppStoreCard from './components/cards/appstore' -import HerokuCard from './components/cards/heroku' -import NowCard from './components/cards/now' -import NtaCard from './components/cards/nta' - import Welcome from './components/Welcome' +import Form from './components/Form' +import Cards from './components/cards' import Footer from './components/Footer' -import Suggestion from './components/Suggestion' -import { useDeferredState } from './util/hooks' 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(null) - const { - t, - i18n: { language }, - } = useTranslation() + const [query, setQuery] = useState('') + 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: React.FormEvent) { - const value = e.currentTarget.value - setInputValue(value) - } - - // clear input form and focus on it - function onLogoClick(e: React.MouseEvent) { - setInputValue('') - inputRef.current!.focus() - } - - // invoke when user clicked one of the suggested items - function onSuggestionCompleted(name: string) { - setInputValue(name) - setSuggested(true) + function onQuery(query: string) { + setQuery(query) } return ( <> - namae — {t('title')} -
- - namæ - - {queryGiven && !suggested ? ( - - ) : null} - +
- - {queryGiven ? ( - - - - - - - - - - - - - - - - - - - - - - {language === 'ja' ? : null} - - + {query !== '' ? ( + ) : ( !isStandalone() && )} -