feat: app store

web/src/App.js

@@ -12,6 +12,7 @@ import CratesioCard from './components/cards/CratesioCard'
 import HomebrewCard from './components/cards/HomebrewCard'
 import LinuxCard from './components/cards/LinuxCard'
 import GithubSearchCard from './components/cards/GithubSearchCard'
+import AppStoreCard from './components/cards/AppStoreCard'
 import TwitterCard from './components/cards/TwitterCard'
 import SlackCard from './components/cards/SlackCard'
 import S3Card from './components/cards/S3Card'
@@ -100,6 +101,7 @@ export default function App() {
               <HomebrewCard name={query} />
               <LinuxCard name={query} />
               <GithubSearchCard query={query} />
+              <AppStoreCard query={query} />
               <TwitterCard name={query} />
               <SlackCard name={query} />
               <S3Card name={query} />

web/src/components/Welcome.js

@@ -6,13 +6,15 @@ import { FaMapSigns } from 'react-icons/fa'
 import { FaGithub } from 'react-icons/fa'
 import { FaNpm } from 'react-icons/fa'
 import { FaPython } from 'react-icons/fa'
-import { IoIosBeer } from 'react-icons/io'
+import { FaGem } from 'react-icons/fa'
 import { DiRust } from 'react-icons/di'
-import { FaJsSquare } from 'react-icons/fa'
-import { FaAws } from 'react-icons/fa'
+import { IoIosBeer } from 'react-icons/io'
+import { FaLinux } from 'react-icons/fa'
+import { FaAppStore } from 'react-icons/fa'
 import { FaTwitter } from 'react-icons/fa'
 import { FaSlack } from 'react-icons/fa'
-import { FaGem } from 'react-icons/fa'
+import { FaAws } from 'react-icons/fa'
+import { FaJsSquare } from 'react-icons/fa'
 
 import { mobile } from '../util/css'
 
@@ -48,10 +50,13 @@ export default function Welcome() {
           <IoIosBeer /> {t('providers.homebrew')}
         </ListItem>
         <ListItem>
-          <FaJsSquare /> {t('providers.jsorg')}
+          <FaLinux /> {t('providers.linux')}
         </ListItem>
         <ListItem>
-          <FaAws /> {t('providers.s3')}
+          <FaGithub /> {t('providers.githubSearch')}
+        </ListItem>
+        <ListItem>
+          <FaAppStore /> {t('providers.appStore')}
         </ListItem>
         <ListItem>
           <FaTwitter /> {t('providers.twitter')}
@@ -59,6 +64,12 @@ export default function Welcome() {
         <ListItem>
           <FaSlack /> {t('providers.slack')}
         </ListItem>
+        <ListItem>
+          <FaAws /> {t('providers.s3')}
+        </ListItem>
+        <ListItem>
+          <FaJsSquare /> {t('providers.jsorg')}
+        </ListItem>
       </List>
     </Container>
   )

web/src/components/cards/AppStoreCard.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import useFetch from 'fetch-suspense'
+import { useTranslation } from 'react-i18next'
+import { FaAppStore } from 'react-icons/fa'
+
+import { Card, Result } from '../Cards'
+
+function Search({ query }) {
+  const term = encodeURIComponent(query)
+  const response = useFetch(`/availability/appstore/${term}`)
+  const apps = response.result
+
+  return (
+    <div>
+      {apps.map((app) => (
+        <Result
+          title={app.name}
+          message={`Price: ${app.price}`}
+          link={app.viewURL}
+          icon={<FaAppStore />}
+          key={app.id}
+        />
+      ))}
+    </div>
+  )
+}
+
+export default function AppStoreCard({ query }) {
+  const { t } = useTranslation()
+
+  return (
+    <Card title={t('providers.appStore')}>
+      <Search query={query} />
+    </Card>
+  )
+}