diff --git a/web/src/App.js b/web/src/App.js
index e2500a1..86830e4 100644
--- a/web/src/App.js
+++ b/web/src/App.js
@@ -28,10 +28,10 @@ import { mobile } from './util/css'
import { isStandalone } from './util/pwa'
export default function App() {
- const [query, setQuery] = useDeferredState('', 1000)
+ const [query, setQuery] = useDeferredState(1000, '')
const [inputValue, setInputValue] = useState('')
- const inputRef = useRef()
const [suggested, setSuggested] = useState(false)
+ const inputRef = useRef()
const { t } = useTranslation()
const queryGiven = query && query.length > 0
@@ -92,20 +92,20 @@ export default function App() {
{queryGiven ? (
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
diff --git a/web/src/components/Footer.js b/web/src/components/Footer.js
index 948cf40..c2218aa 100644
--- a/web/src/components/Footer.js
+++ b/web/src/components/Footer.js
@@ -1,7 +1,7 @@
import React from 'react'
import styled from 'styled-components'
-import { FaTwitter, FaGithubAlt } from 'react-icons/fa'
import { useTranslation } from 'react-i18next'
+import { FaTwitter, FaGithubAlt } from 'react-icons/fa'
import { ExternalLink } from './Links'
diff --git a/web/src/components/Suggestion.js b/web/src/components/Suggestion.js
index db74b6b..890cd97 100644
--- a/web/src/components/Suggestion.js
+++ b/web/src/components/Suggestion.js
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react'
import styled from 'styled-components'
import { useTranslation } from 'react-i18next'
import fetch from 'isomorphic-unfetch'
+
import { capitalize } from '../util/text'
const modifiers = [
diff --git a/web/src/components/cards/AppStoreCard.js b/web/src/components/cards/AppStoreCard.js
index bcb3a92..35956f0 100644
--- a/web/src/components/cards/AppStoreCard.js
+++ b/web/src/components/cards/AppStoreCard.js
@@ -11,7 +11,7 @@ function Search({ query }) {
const apps = response.result
return (
-
+ <>
{apps.map((app) => (
))}
-
+ >
)
}
diff --git a/web/src/components/cards/CratesioCard.js b/web/src/components/cards/CratesioCard.js
index 33a5b74..01e5382 100644
--- a/web/src/components/cards/CratesioCard.js
+++ b/web/src/components/cards/CratesioCard.js
@@ -4,9 +4,9 @@ import { DiRust } from 'react-icons/di'
import { Card, Repeater, DedicatedAvailability } from '../Cards'
-export default function CratesioCard({ name }) {
+export default function CratesioCard({ query }) {
const { t } = useTranslation()
- const lowerCase = name.toLowerCase()
+ const lowerCase = query.toLowerCase()
const names = [lowerCase]
diff --git a/web/src/components/cards/DomainCard.js b/web/src/components/cards/DomainCard.js
index 48819a1..b1a23bb 100644
--- a/web/src/components/cards/DomainCard.js
+++ b/web/src/components/cards/DomainCard.js
@@ -4,16 +4,17 @@ import { FaMapSigns } from 'react-icons/fa'
import { Card, Repeater, DedicatedAvailability } from '../Cards'
-export default function DomainCard({ name }) {
+export default function DomainCard({ query }) {
const { t } = useTranslation()
- const lowerCase = name.toLowerCase()
+ const lowerCase = query.toLowerCase()
- const names = [`${lowerCase}.com`, `${lowerCase}app.com`, `${lowerCase}.app`]
+ const names = [`${lowerCase}.com`, `${lowerCase}.app`]
const moreNames = [
+ `${lowerCase}app.com`,
+ `get${lowerCase}.com`,
`${lowerCase}.dev`,
`${lowerCase}.io`,
`${lowerCase}.tools`,
- `get${lowerCase}.com`,
]
return (
diff --git a/web/src/components/cards/GithubCard.js b/web/src/components/cards/GithubCard.js
index 61e5b80..0304aac 100644
--- a/web/src/components/cards/GithubCard.js
+++ b/web/src/components/cards/GithubCard.js
@@ -4,11 +4,11 @@ import { FaGithub } from 'react-icons/fa'
import { Card, Repeater, DedicatedAvailability } from '../Cards'
-export default function GithubCard({ name }) {
+export default function GithubCard({ query }) {
const { t } = useTranslation()
- const lowerCase = name.toLowerCase()
+ const lowerCase = query.toLowerCase()
- const names = [name]
+ const names = [query]
const moreNames = [
`${lowerCase}hq`,
`${lowerCase}-team`,
diff --git a/web/src/components/cards/GithubSearchCard.js b/web/src/components/cards/GithubSearchCard.js
index b13222a..f606bd7 100644
--- a/web/src/components/cards/GithubSearchCard.js
+++ b/web/src/components/cards/GithubSearchCard.js
@@ -13,7 +13,7 @@ function Search({ query }) {
const repos = response.items
return (
-
+ <>
{repos.map((repo) => (
))}
-
+ >
)
}
diff --git a/web/src/components/cards/HomebrewCard.js b/web/src/components/cards/HomebrewCard.js
index f280899..6f6a05a 100644
--- a/web/src/components/cards/HomebrewCard.js
+++ b/web/src/components/cards/HomebrewCard.js
@@ -4,9 +4,9 @@ import { IoIosBeer } from 'react-icons/io'
import { Card, Repeater, ExistentialAvailability } from '../Cards'
-export default function HomebrewCard({ name }) {
+export default function HomebrewCard({ query }) {
const { t } = useTranslation()
- const lowerCase = name.toLowerCase()
+ const lowerCase = query.toLowerCase()
const names = [lowerCase]
diff --git a/web/src/components/cards/JsOrgCard.js b/web/src/components/cards/JsOrgCard.js
index f9481a5..39de180 100644
--- a/web/src/components/cards/JsOrgCard.js
+++ b/web/src/components/cards/JsOrgCard.js
@@ -4,9 +4,9 @@ import { FaJsSquare } from 'react-icons/fa'
import { Card, Repeater, DedicatedAvailability } from '../Cards'
-export default function JsOrgCard({ name }) {
+export default function JsOrgCard({ query }) {
const { t } = useTranslation()
- const lowerCase = name.toLowerCase()
+ const lowerCase = query.toLowerCase()
const names = [lowerCase]
diff --git a/web/src/components/cards/LinuxCard.js b/web/src/components/cards/LinuxCard.js
index bac6db3..dd61c3d 100644
--- a/web/src/components/cards/LinuxCard.js
+++ b/web/src/components/cards/LinuxCard.js
@@ -5,9 +5,9 @@ import { DiDebian } from 'react-icons/di'
import { Card, Repeater, DedicatedAvailability } from '../Cards'
-export default function LinuxCard({ name }) {
+export default function LinuxCard({ query }) {
const { t } = useTranslation()
- const lowerCase = name.toLowerCase()
+ const lowerCase = query.toLowerCase()
const names = [lowerCase]
diff --git a/web/src/components/cards/NpmCard.js b/web/src/components/cards/NpmCard.js
index 5224cc6..79777b0 100644
--- a/web/src/components/cards/NpmCard.js
+++ b/web/src/components/cards/NpmCard.js
@@ -4,9 +4,9 @@ import { FaNpm } from 'react-icons/fa'
import { Card, Repeater, DedicatedAvailability } from '../Cards'
-export default function NpmCard({ name }) {
+export default function NpmCard({ query }) {
const { t } = useTranslation()
- const lowerCase = name.toLowerCase()
+ const lowerCase = query.toLowerCase()
const names = [lowerCase]
const moreNames = [`${lowerCase}-js`]
diff --git a/web/src/components/cards/PypiCard.js b/web/src/components/cards/PypiCard.js
index 4d543ac..80f14f7 100644
--- a/web/src/components/cards/PypiCard.js
+++ b/web/src/components/cards/PypiCard.js
@@ -5,11 +5,11 @@ import { FaPython } from 'react-icons/fa'
import { capitalize } from '../../util/text'
import { Card, DedicatedAvailability, Repeater } from '../Cards'
-export default function PypiCard({ name }) {
+export default function PypiCard({ query }) {
const { t } = useTranslation()
- const names = [name]
- const moreNames = [`Py${capitalize(name)}`]
+ const names = [query]
+ const moreNames = [`Py${capitalize(query)}`]
return (
diff --git a/web/src/components/cards/RubyGemsCard.js b/web/src/components/cards/RubyGemsCard.js
index 566b221..36c5284 100644
--- a/web/src/components/cards/RubyGemsCard.js
+++ b/web/src/components/cards/RubyGemsCard.js
@@ -4,11 +4,11 @@ import { FaGem } from 'react-icons/fa'
import { Card, Repeater, DedicatedAvailability } from '../Cards'
-export default function RubyGemsCard({ name }) {
+export default function RubyGemsCard({ query }) {
const { t } = useTranslation()
- const names = [name]
- const moreNames = [`${name.toLowerCase()}-rb`]
+ const names = [query]
+ const moreNames = [`${query.toLowerCase()}-rb`]
return (
diff --git a/web/src/components/cards/S3Card.js b/web/src/components/cards/S3Card.js
index 6c32573..d5b9ebf 100644
--- a/web/src/components/cards/S3Card.js
+++ b/web/src/components/cards/S3Card.js
@@ -4,9 +4,9 @@ import { FaAws } from 'react-icons/fa'
import { Card, DedicatedAvailability, Repeater } from '../Cards'
-export default function S3Card({ name }) {
+export default function S3Card({ query }) {
const { t } = useTranslation()
- const lowerCase = name.toLowerCase()
+ const lowerCase = query.toLowerCase()
const names = [lowerCase]
diff --git a/web/src/components/cards/SlackCard.js b/web/src/components/cards/SlackCard.js
index 03d28e9..fe6534f 100644
--- a/web/src/components/cards/SlackCard.js
+++ b/web/src/components/cards/SlackCard.js
@@ -4,9 +4,9 @@ import { FaSlack } from 'react-icons/fa'
import { Card, DedicatedAvailability, Repeater } from '../Cards'
-export default function SlackCard({ name }) {
+export default function SlackCard({ query }) {
const { t } = useTranslation()
- const lowerCase = name.toLowerCase()
+ const lowerCase = query.toLowerCase()
const names = [lowerCase]
diff --git a/web/src/components/cards/TwitterCard.js b/web/src/components/cards/TwitterCard.js
index 1d32af7..54f3968 100644
--- a/web/src/components/cards/TwitterCard.js
+++ b/web/src/components/cards/TwitterCard.js
@@ -5,17 +5,19 @@ import { FaTwitter } from 'react-icons/fa'
import { capitalize } from '../../util/text'
import { Card, Repeater, DedicatedAvailability } from '../Cards'
-export default function TwitterCard({ name }) {
+export default function TwitterCard({ query }) {
const { t } = useTranslation()
+ const lowerCase = query.toLowerCase()
+ const capitalCase = capitalize(query)
- const names = [name]
+ const names = [query]
const moreNames = [
- `${name.toLowerCase()}app`,
- `hey${name.toLowerCase()}`,
- `${capitalize(name)}Team`,
- `${capitalize(name)}HQ`,
- `${name.toLowerCase()}_official`,
- `${name.toLowerCase()}-support`,
+ `${lowerCase}app`,
+ `hey${lowerCase}`,
+ `${capitalCase}Team`,
+ `${capitalCase}HQ`,
+ `${lowerCase}_official`,
+ `${lowerCase}-support`,
]
return (
diff --git a/web/src/hooks/state.js b/web/src/hooks/state.js
index 8f247bf..a0876a3 100644
--- a/web/src/hooks/state.js
+++ b/web/src/hooks/state.js
@@ -1,6 +1,6 @@
import { useState, useEffect } from 'react'
-export function useDeferredState(initialValue = undefined, duration = 1000) {
+export function useDeferredState(duration = 1000, initialValue = undefined) {
const [response, setResponse] = useState(initialValue)
const [innerValue, setInnerValue] = useState(initialValue)