feat: add nta

web/src/App.js

@@ -20,6 +20,7 @@ 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 Footer from './components/Footer'
@@ -34,7 +35,10 @@ export default function App() {
   const [inputValue, setInputValue] = useState('')
   const [suggested, setSuggested] = useState(false)
   const inputRef = useRef()
-  const { t } = useTranslation()
+  const {
+    t,
+    i18n: { language },
+  } = useTranslation()
 
   const queryGiven = query && query.length > 0
 
@@ -114,6 +118,7 @@ export default function App() {
             <Cards>
               <GithubSearchCard query={query} />
               <AppStoreCard query={query} />
+              {language === 'ja' ? <NtaCard query={query} /> : null}
             </Cards>
           </SearchResult>
         ) : (

web/src/components/Welcome.js

@@ -14,6 +14,7 @@ import {
   FaSlack,
   FaAws,
   FaJsSquare,
+  FaBuilding,
 } from 'react-icons/fa'
 import { IoIosBeer } from 'react-icons/io'
 import { DiRust, DiHeroku } from 'react-icons/di'
@@ -82,6 +83,9 @@ export default function Welcome() {
         <ListItem>
           <FaAppStore /> {t('providers.appStore')}
         </ListItem>
+        <ListItem>
+          <FaBuilding /> {t('providers.nta')}
+        </ListItem>
       </List>
     </Container>
   )

web/src/components/cards/appstore.js

@@ -26,7 +26,7 @@ function Search({ query }) {
           />
         ))
       ) : (
-        <Result title="No Result" icon={<FaInfoCircle />} />
+        <Result title={t('noResult')} icon={<FaInfoCircle />} />
       )}
     </>
   )

web/src/components/cards/github-search.js

@@ -6,6 +6,7 @@ import { FaGithub, FaInfoCircle } from 'react-icons/fa'
 import { Card, Result } from '../Cards'
 
 function Search({ query }) {
+  const { t } = useTranslation()
   const searchQuery = encodeURIComponent(`${query} in:name`)
   const limit = 10
   const response = useFetch(
@@ -28,7 +29,7 @@ function Search({ query }) {
           />
         ))
       ) : (
-        <Result title="No Result" icon={<FaInfoCircle />} />
+        <Result title={t('noResult')} icon={<FaInfoCircle />} />
       )}
     </>
   )

web/src/components/cards/nta.js

@@ -0,0 +1,40 @@
+import React from 'react'
+import useFetch from 'fetch-suspense'
+import { useTranslation } from 'react-i18next'
+import { FaBuilding, FaInfoCircle } from 'react-icons/fa'
+
+import { Card, Result } from '../Cards'
+
+function Search({ query }) {
+  const { t } = useTranslation()
+  const term = encodeURIComponent(query)
+  const response = useFetch(`/availability/nta/${term}`)
+  const apps = response.result
+
+  return (
+    <>
+      {apps.length > 0 ? (
+        apps.map((app, i) => (
+          <Result
+            title={app.name}
+            message={`Phonetic: ${app.phoneticName}`}
+            icon={<FaBuilding />}
+            key={i}
+          />
+        ))
+      ) : (
+        <Result title={t('noResult')} icon={<FaInfoCircle />} />
+      )}
+    </>
+  )
+}
+
+export default function NtaCard({ query }) {
+  const { t } = useTranslation()
+
+  return (
+    <Card title={t('providers.nta')}>
+      <Search query={query} />
+    </Card>
+  )
+}

web/src/util/i18n.js

@@ -14,7 +14,7 @@ i18n
       backends: [LocalStorageBackend, XHR],
       backendOptions: [
         {
-          versions: { en: '1.3', ja: '1.3' },
+          versions: { en: '1.5', ja: '1.5' },
         },
       ],
     },