From 2438518e3c051e27c231ca380b1a85810462fc58 Mon Sep 17 00:00:00 2001 From: Yasuaki Uechi Date: Mon, 2 Sep 2019 19:41:44 +0900 Subject: [PATCH] chore: move components into separated files --- web/src/App.tsx | 170 ++---------------- web/src/components/Form.tsx | 112 ++++++++++++ .../cards/{appstore.tsx => AppStore.tsx} | 2 +- .../cards/{cratesio.tsx => Cratesio.tsx} | 2 +- .../cards/{domains.tsx => Domains.tsx} | 2 +- ...ub-repository.tsx => GitHubRepository.tsx} | 2 +- .../{github-search.tsx => GitHubSearch.tsx} | 2 +- .../cards/{heroku.tsx => Heroku.tsx} | 2 +- .../cards/{homebrew.tsx => Homebrew.tsx} | 2 +- .../components/cards/{jsorg.tsx => JsOrg.tsx} | 2 +- .../components/cards/{linux.tsx => Linux.tsx} | 2 +- web/src/components/cards/{now.tsx => Now.tsx} | 2 +- web/src/components/cards/{npm.tsx => Npm.tsx} | 2 +- web/src/components/cards/{nta.tsx => Nta.tsx} | 2 +- .../components/cards/{pypi.tsx => PyPI.tsx} | 2 +- .../cards/{rubygems.tsx => RubyGems.tsx} | 2 +- web/src/components/cards/{s3.tsx => S3.tsx} | 2 +- .../components/cards/{slack.tsx => Slack.tsx} | 2 +- .../cards/{spectrum.tsx => Spectrum.tsx} | 2 +- .../cards/{twitter.tsx => Twitter.tsx} | 2 +- .../components/{Cards.tsx => cards/core.tsx} | 4 +- web/src/components/cards/index.tsx | 69 +++++++ 22 files changed, 211 insertions(+), 180 deletions(-) create mode 100644 web/src/components/Form.tsx rename web/src/components/cards/{appstore.tsx => AppStore.tsx} (96%) rename web/src/components/cards/{cratesio.tsx => Cratesio.tsx} (91%) rename web/src/components/cards/{domains.tsx => Domains.tsx} (93%) rename web/src/components/cards/{github-repository.tsx => GitHubRepository.tsx} (94%) rename web/src/components/cards/{github-search.tsx => GitHubSearch.tsx} (97%) rename web/src/components/cards/{heroku.tsx => Heroku.tsx} (91%) rename web/src/components/cards/{homebrew.tsx => Homebrew.tsx} (95%) rename web/src/components/cards/{jsorg.tsx => JsOrg.tsx} (92%) rename web/src/components/cards/{linux.tsx => Linux.tsx} (93%) rename web/src/components/cards/{now.tsx => Now.tsx} (91%) rename web/src/components/cards/{npm.tsx => Npm.tsx} (95%) rename web/src/components/cards/{nta.tsx => Nta.tsx} (96%) rename web/src/components/cards/{pypi.tsx => PyPI.tsx} (93%) rename web/src/components/cards/{rubygems.tsx => RubyGems.tsx} (93%) rename web/src/components/cards/{s3.tsx => S3.tsx} (93%) rename web/src/components/cards/{slack.tsx => Slack.tsx} (92%) rename web/src/components/cards/{spectrum.tsx => Spectrum.tsx} (92%) rename web/src/components/cards/{twitter.tsx => Twitter.tsx} (94%) rename web/src/components/{Cards.tsx => cards/core.tsx} (98%) create mode 100644 web/src/components/cards/index.tsx 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() && )} -