fix: rename components

web/src/App.js

@@ -3,7 +3,6 @@ import styled, { createGlobalStyle } from 'styled-components'
 import { Helmet } from 'react-helmet'
 import { useTranslation } from 'react-i18next'
 
-import { Cards, CardContainer } from './components/Cards'
 import GithubCard from './components/cards/GithubCard'
 import DomainCard from './components/cards/DomainCard'
 import HomebrewCard from './components/cards/HomebrewCard'
@@ -88,8 +87,8 @@ export default function App() {
 
       <Content>
         {queryGiven ? (
-          <Cards>
-            <CardContainer>
+          <SearchResult>
+            <Cards>
               <DomainCard name={query} />
               <GithubCard name={query} />
               <NpmCard name={query} />
@@ -101,9 +100,9 @@ export default function App() {
               <TwitterCard name={query} />
               <SlackCard name={query} />
               <S3Card name={query} />
-            </CardContainer>
+            </Cards>
             <EventReporter query={query} />
-          </Cards>
+          </SearchResult>
         ) : !isStandalone() ? (
           <Welcome />
         ) : null}
@@ -199,3 +198,16 @@ const InputView = styled.input.attrs({
     font-size: 2rem;
   }
 `
+
+const SearchResult = styled.div``
+
+const Cards = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  flex-wrap: wrap;
+
+  ${mobile} {
+    flex-direction: column;
+  }
+`

web/src/components/Availability.js

@@ -1,180 +0,0 @@
-import React, { Suspense } from 'react'
-import styled from 'styled-components'
-import useFetch from 'fetch-suspense'
-import BarLoader from 'react-spinners/BarLoader'
-import { GoInfo } from 'react-icons/go'
-import { Tooltip } from 'react-tippy'
-import { ExternalLink } from './Links'
-import 'react-tippy/dist/tippy.css'
-
-class ErrorBoundary extends React.Component {
-  constructor(props) {
-    super(props)
-    this.state = { hasError: false }
-  }
-
-  static getDerivedStateFromError(error) {
-    return { hasError: true, message: error.message }
-  }
-
-  componentDidCatch(error, info) {}
-
-  render() {
-    if (this.state.hasError) {
-      return (
-        <Tooltip
-          title={this.state.message}
-          position="bottom"
-          arrow={true}
-          animation="shift"
-          duration="200">
-          <Container>
-            <Cell>
-              <GoInfo />
-              <Name>Error</Name>
-            </Cell>
-          </Container>
-        </Tooltip>
-      )
-    }
-    return this.props.children
-  }
-}
-
-const Result = ({
-  name,
-  availability,
-  link,
-  prefix = '',
-  suffix = '',
-  icon,
-}) => (
-  <Container>
-    <Cell availability={availability}>
-      {icon}
-      <Name>
-        <ExternalLink href={link}>
-          {prefix}
-          {name}
-          {suffix}
-        </ExternalLink>
-      </Name>
-    </Cell>
-  </Container>
-)
-
-const Fallback = () => (
-  <Container>
-    <BarLoader />
-  </Container>
-)
-
-export const AvailabilityContainer = ({ children }) => (
-  <ErrorBoundary>
-    <Suspense fallback={<Fallback />}>{children}</Suspense>
-  </ErrorBoundary>
-)
-
-export function DedicatedAvailability({
-  name,
-  service,
-  link,
-  prefix = '',
-  suffix = '',
-  icon,
-}) {
-  const response = useFetch(`/availability/${service}/${name}`)
-
-  if (response.error) {
-    throw new Error(`${service}: ${response.error}`)
-  }
-
-  return (
-    <Result
-      availability={response.availability}
-      name={name}
-      link={link}
-      prefix={prefix}
-      suffix={suffix}
-      icon={icon}
-    />
-  )
-}
-
-export function ExistentialAvailability({
-  name,
-  target,
-  link,
-  prefix = '',
-  suffix = '',
-  icon,
-}) {
-  const response = useFetch(target, null, { metadata: true })
-
-  if (response.status !== 404 && response.status !== 200) {
-    throw new Error(`${name}: ${response.status}`)
-  }
-
-  const availability = response.status === 404
-
-  return (
-    <Result
-      name={name}
-      availability={availability}
-      link={link}
-      prefix={prefix}
-      suffix={suffix}
-      icon={icon}
-    />
-  )
-}
-
-export function CustomAvailability({
-  name,
-  target,
-  link,
-  prefix = '',
-  suffix = '',
-  icon,
-  children,
-}) {
-  const response = useFetch(target, null, { metadata: true })
-  const availability = children(response)
-
-  return (
-    <Result
-      name={name}
-      availability={availability}
-      link={link}
-      prefix={prefix}
-      suffix={suffix}
-      icon={icon}
-    />
-  )
-}
-
-const Container = styled.div`
-  min-height: 1em;
-  display: flex;
-  align-items: center;
-  margin-top: 8px;
-`
-
-const Cell = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  word-break: break-all;
-  color: ${({ availability }) => (availability ? 'green' : 'red')};
-`
-
-const Name = styled.div`
-  margin-left: 6px;
-  font-family: monospace;
-  font-size: 1rem;
-
-  a {
-    text-decoration: none;
-    color: inherit;
-  }
-`

web/src/components/Cards.js

@@ -1,9 +1,88 @@
-import React, { useState } from 'react'
+import React, { useState, Suspense } from 'react'
 import styled from 'styled-components'
 
-import { AvailabilityContainer } from './Availability'
 import { mobile } from '../util/css'
 
+import useFetch from 'fetch-suspense'
+import BarLoader from 'react-spinners/BarLoader'
+import { GoInfo } from 'react-icons/go'
+import { Tooltip } from 'react-tippy'
+import { ExternalLink } from './Links'
+import 'react-tippy/dist/tippy.css'
+
+export function DedicatedAvailability({
+  name,
+  service,
+  link,
+  prefix = '',
+  suffix = '',
+  icon,
+}) {
+  const response = useFetch(`/availability/${service}/${name}`)
+
+  if (response.error) {
+    throw new Error(`${service}: ${response.error}`)
+  }
+
+  return (
+    <AvailabilityResult
+      availability={response.availability}
+      name={name}
+      link={link}
+      prefix={prefix}
+      suffix={suffix}
+      icon={icon}
+    />
+  )
+}
+
+export function ExistentialAvailability({
+  name,
+  target,
+  link,
+  prefix = '',
+  suffix = '',
+  icon,
+}) {
+  const response = useFetch(target, null, { metadata: true })
+
+  if (response.status !== 404 && response.status !== 200) {
+    throw new Error(`${name}: ${response.status}`)
+  }
+
+  const availability = response.status === 404
+
+  return (
+    <AvailabilityResult
+      name={name}
+      availability={availability}
+      link={link}
+      prefix={prefix}
+      suffix={suffix}
+      icon={icon}
+    />
+  )
+}
+
+export function CustomSearchCard({
+  title,
+  query,
+  link,
+  prefix = '',
+  suffix = '',
+  icon,
+  children,
+}) {
+  return (
+    <CardContainer>
+      <CardTitle>{title}</CardTitle>
+      <CardList>
+        <ErrorHandler key={query}>{children(query)}</ErrorHandler>
+      </CardList>
+    </CardContainer>
+  )
+}
+
 export function Card({ title, nameList = [], alternativeList = [], children }) {
   const [revealAlternatives, setRevealAlternatives] = useState(false)
 
@@ -12,44 +91,92 @@ export function Card({ title, nameList = [], alternativeList = [], children }) {
   }
 
   return (
-    <CardWrapper>
+    <CardContainer>
       <CardTitle>{title}</CardTitle>
       <CardList>
         {nameList.map((name) => (
-          <AvailabilityContainer key={name}>
-            {children(name)}
-          </AvailabilityContainer>
+          <ErrorHandler key={name}>{children(name)}</ErrorHandler>
         ))}
         {revealAlternatives &&
           alternativeList.map((name) => (
-            <AvailabilityContainer key={name}>
-              {children(name)}
-            </AvailabilityContainer>
+            <ErrorHandler key={name}>{children(name)}</ErrorHandler>
           ))}
         {alternativeList.length > 0 && !revealAlternatives ? (
-          <ShowAlternativesButton onClick={onClick}>
-            show more
-          </ShowAlternativesButton>
+          <Button onClick={onClick}>show more</Button>
         ) : null}
       </CardList>
-    </CardWrapper>
+    </CardContainer>
   )
 }
 
-export const Cards = styled.div``
-
-export const CardContainer = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  flex-wrap: wrap;
-
-  ${mobile} {
-    flex-direction: column;
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = { hasError: false }
   }
-`
 
-const CardWrapper = styled.div`
+  static getDerivedStateFromError(error) {
+    return { hasError: true, message: error.message }
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <Tooltip
+          title={this.state.message}
+          position="bottom"
+          arrow={true}
+          animation="shift"
+          duration="200">
+          <ResultContainer>
+            <ResultItem>
+              <GoInfo />
+              <ResultName>Error</ResultName>
+            </ResultItem>
+          </ResultContainer>
+        </Tooltip>
+      )
+    }
+    return this.props.children
+  }
+}
+
+const ErrorHandler = ({ children }) => (
+  <ErrorBoundary>
+    <Suspense
+      fallback={
+        <ResultContainer>
+          <BarLoader />
+        </ResultContainer>
+      }>
+      {children}
+    </Suspense>
+  </ErrorBoundary>
+)
+
+const AvailabilityResult = ({
+  name,
+  availability,
+  link,
+  prefix = '',
+  suffix = '',
+  icon,
+}) => (
+  <ResultContainer>
+    <ResultItem color={availability ? 'green' : 'red'}>
+      {icon}
+      <ResultName>
+        <ExternalLink href={link}>
+          {prefix}
+          {name}
+          {suffix}
+        </ExternalLink>
+      </ResultName>
+    </ResultItem>
+  </ResultContainer>
+)
+
+const CardContainer = styled.div`
   padding: 40px;
 
   ${mobile} {
@@ -79,7 +206,7 @@ const CardList = styled.div`
   }
 `
 
-const ShowAlternativesButton = styled.div`
+const Button = styled.div`
   margin-top: 5px;
   display: inline-block;
   padding: 5px 0;
@@ -89,3 +216,29 @@ const ShowAlternativesButton = styled.div`
   font-family: monospace;
   font-size: 0.8em;
 `
+
+const ResultContainer = styled.div`
+  min-height: 1em;
+  display: flex;
+  align-items: center;
+  margin-top: 8px;
+`
+
+const ResultItem = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  word-break: break-all;
+  color: ${({ color }) => color};
+`
+
+const ResultName = styled.div`
+  margin-left: 6px;
+  font-family: monospace;
+  font-size: 1rem;
+
+  a {
+    text-decoration: none;
+    color: inherit;
+  }
+`

web/src/components/Suggestion.js

@@ -28,6 +28,7 @@ const modifiers = [
   (word) => `${capitalize(word)}ful`,
   (word) => `${capitalize(word)}ery`,
   (word) => `${lower(word)}ly`,
+  (word) => `${lower(word)}joy`,
   (word) => `${capitalize(word)}Hunt`,
   (word) => `${capitalize(word)}gram`,
   (word) => `${capitalize(word)}base`,

web/src/components/cards/CratesioCard.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { DiRust } from 'react-icons/di'
 import { Card } from '../Cards'
-import { DedicatedAvailability } from '../Availability'
+import { DedicatedAvailability } from '../Cards'
 
 export default function CratesioCard({ name }) {
   const { t } = useTranslation()

web/src/components/cards/DomainCard.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { FaMapSigns } from 'react-icons/fa'
 import { Card } from '../Cards'
-import { DedicatedAvailability } from '../Availability'
+import { DedicatedAvailability } from '../Cards'
 
 export default function DomainCard({ name }) {
   const { t } = useTranslation()

web/src/components/cards/GithubCard.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { FaGithub } from 'react-icons/fa'
 import { Card } from '../Cards'
-import { DedicatedAvailability } from '../Availability'
+import { DedicatedAvailability } from '../Cards'
 
 export default function GithubCard({ name }) {
   const { t } = useTranslation()

web/src/components/cards/GithubSearchCard.js

@@ -0,0 +1,26 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { FaGithub } from 'react-icons/fa'
+import fetch from 'isomorphic-unfetch'
+import { CustomSearchCard } from '../Cards'
+
+export default function GithubSearchCard({ name }) {
+  const { t } = useTranslation()
+
+  return (
+    <CustomSearchCard
+      title={t('providers.githubSearch')}
+      query={name}
+      link={`https://github.com/search/${name}`}
+      prefix="github.com/"
+      icon={<FaGithub />}>
+      {async (query) => {
+        const response = await fetch(
+          `https://api.github.com/repos/search?q=${query}`
+        )
+        const data = await response.json()
+        console.log(data)
+      }}
+    </CustomSearchCard>
+  )
+}

web/src/components/cards/HomebrewCard.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { IoIosBeer } from 'react-icons/io'
 import { Card } from '../Cards'
-import { ExistentialAvailability } from '../Availability'
+import { ExistentialAvailability } from '../Cards'
 
 export default function HomebrewCard({ name }) {
   const { t } = useTranslation()

web/src/components/cards/JsOrgCard.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { FaJsSquare } from 'react-icons/fa'
 import { Card } from '../Cards'
-import { DedicatedAvailability } from '../Availability'
+import { DedicatedAvailability } from '../Cards'
 
 export default function JsOrgCard({ name }) {
   const { t } = useTranslation()

web/src/components/cards/NpmCard.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { FaNpm } from 'react-icons/fa'
 import { Card } from '../Cards'
-import { DedicatedAvailability } from '../Availability'
+import { DedicatedAvailability } from '../Cards'
 
 export default function NpmCard({ name }) {
   const { t } = useTranslation()

web/src/components/cards/PypiCard.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { FaPython } from 'react-icons/fa'
 import { Card } from '../Cards'
-import { DedicatedAvailability } from '../Availability'
+import { DedicatedAvailability } from '../Cards'
 import { capitalize } from '../../util/text'
 
 export default function PypiCard({ name }) {

web/src/components/cards/RubyGemsCard.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { FaGem } from 'react-icons/fa'
 import { Card } from '../Cards'
-import { DedicatedAvailability } from '../Availability'
+import { DedicatedAvailability } from '../Cards'
 
 export default function RubyGemsCard({ name }) {
   const { t } = useTranslation()

web/src/components/cards/S3Card.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { FaAws } from 'react-icons/fa'
 import { Card } from '../Cards'
-import { DedicatedAvailability } from '../Availability'
+import { DedicatedAvailability } from '../Cards'
 
 export default function S3Card({ name }) {
   const { t } = useTranslation()

web/src/components/cards/SlackCard.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { FaSlack } from 'react-icons/fa'
 import { Card } from '../Cards'
-import { DedicatedAvailability } from '../Availability'
+import { DedicatedAvailability } from '../Cards'
 
 export default function SlackCard({ name }) {
   const { t } = useTranslation()

web/src/components/cards/TwitterCard.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { FaTwitter } from 'react-icons/fa'
 import { Card } from '../Cards'
-import { DedicatedAvailability } from '../Availability'
+import { DedicatedAvailability } from '../Cards'
 import { capitalize } from '../../util/text'
 
 export default function TwitterCard({ name }) {
@@ -13,11 +13,12 @@ export default function TwitterCard({ name }) {
       title={t('providers.twitter')}
       nameList={[name]}
       alternativeList={[
-        `${capitalize(name)}HQ`,
         `${name.toLowerCase()}app`,
-        `${name.toLowerCase()}-support`,
+        `hey${name.toLowerCase()}`,
         `${capitalize(name)}Team`,
-        `${capitalize(name)}Official`,
+        `${capitalize(name)}HQ`,
+        `${name.toLowerCase()}_official`,
+        `${name.toLowerCase()}-support`,
       ]}>
       {(name) => (
         <DedicatedAvailability