uetchy/namae
1
0
Fork 0
mirror of https://github.com/uetchy/namae.git synced 2025-08-20 09:58:13 +09:00
Code Issues Releases Activity

chore: cosmetic changes

Browse Source
This commit is contained in:
uetchy
2019-09-17 14:30:26 +09:00
parent 2438518e3c
commit 6c84493360
56 changed files with 724 additions and 729 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
web/src/App.test.tsx
View File

@@ -1,14 +1,14 @@
import React, { Suspense } from 'react'
import { render, waitForElement } from '@testing-library/react'
import React, {Suspense} from 'react';
import {render, waitForElement} from '@testing-library/react';
import App from './App'
import App from './App';
it('renders welcome message', async () => {
const { getByText } = render(
const {getByText} = render(
<Suspense fallback={<div>loading</div>}>
<App />
</Suspense>
)
const text = await waitForElement(() => getByText('name new project'))
expect(text).toBeTruthy()
})
</Suspense>,
);
const text = await waitForElement(() => getByText('name new project'));
expect(text).toBeTruthy();
});

35
web/src/App.tsx
View File

@@ -1,22 +1,22 @@
import React, { useState } from 'react'
import styled, { createGlobalStyle } from 'styled-components'
import { Helmet } from 'react-helmet'
import { useTranslation } from 'react-i18next'
import React, {useState} from 'react';
import styled, {createGlobalStyle} from 'styled-components';
import {Helmet} from 'react-helmet';
import {useTranslation} from 'react-i18next';
import Welcome from './components/Welcome'
import Form from './components/Form'
import Cards from './components/cards'
import Footer from './components/Footer'
import Welcome from './components/Welcome';
import Form from './components/Form';
import Cards from './components/cards';
import Footer from './components/Footer';
import { mobile } from './util/css'
import { isStandalone } from './util/pwa'
import {mobile} from './util/css';
import {isStandalone} from './util/pwa';
export default function App() {
const [query, setQuery] = useState('')
const { t } = useTranslation()
const [query, setQuery] = useState('');
const {t} = useTranslation();
function onQuery(query: string) {
setQuery(query)
setQuery(query);
}
return (
@@ -37,7 +37,7 @@ export default function App() {
</Content>
<Footer />
</>
)
);
}
const GlobalStyle = createGlobalStyle`
@@ -58,11 +58,12 @@ body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: #ffffff;
${mobile} {
background: #f5f5f5;
}
}
`
`;
const Content = styled.div`
padding-top: 100px;
@@ -70,7 +71,7 @@ const Content = styled.div`
${mobile} {
padding-top: 60px;
}
`
`;
const Header = styled.header`
padding: 0 40px;
@@ -79,4 +80,4 @@ const Header = styled.header`
${mobile} {
padding: 0 20px;
}
`
`;

24
web/src/components/Footer.tsx
View File

@@ -1,12 +1,12 @@
import React from 'react'
import styled from 'styled-components'
import { useTranslation } from 'react-i18next'
import { FaTwitter, FaGithubAlt } from 'react-icons/fa'
import React from 'react';
import styled from 'styled-components';
import {useTranslation} from 'react-i18next';
import {FaTwitter, FaGithubAlt} from 'react-icons/fa';
import { ExternalLink } from './Links'
import {ExternalLink} from './Links';
export default function Footer() {
const { t } = useTranslation()
const {t} = useTranslation();
return (
<Container>
@@ -30,7 +30,7 @@ export default function Footer() {
<ExternalLink
aria-label="Tweet this page"
href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(
`namae — ${t('title')}`
`namae — ${t('title')}`,
)}&url=${encodeURIComponent('https://namae.dev')}`}>
<FaTwitter />
</ExternalLink>
@@ -50,7 +50,7 @@ export default function Footer() {
</a>
</Box>
</Container>
)
);
}
const Container = styled.div`
@@ -66,7 +66,7 @@ const Container = styled.div`
color: black;
text-decoration: none;
}
`
`;
const Box = styled.footer`
margin-bottom: 10px;
@@ -74,7 +74,7 @@ const Box = styled.footer`
flex-direction: row;
justify-content: center;
line-height: 1em;
`
`;
const Links = styled.div`
margin-left: 15px;
@@ -84,8 +84,8 @@ const Links = styled.div`
${ExternalLink} {
margin-right: 5px;
}
`
`;
const Bold = styled.span`
font-weight: bold;
`
`;

62
web/src/components/Form.tsx
View File

@@ -1,50 +1,50 @@
import React, { useState, useRef, useEffect } from 'react'
import styled from 'styled-components'
import { useTranslation } from 'react-i18next'
import React, {useState, useRef, useEffect} from 'react';
import styled from 'styled-components';
import {useTranslation} from 'react-i18next';
import { useDeferredState } from '../util/hooks'
import { mobile } from '../util/css'
import {useDeferredState} from '../util/hooks';
import {mobile} from '../util/css';
import Suggestion from './Suggestion'
import Suggestion from './Suggestion';
const Form: React.FC<{ onQuery: (query: string) => void }> = ({ onQuery }) => {
const [query, setQuery] = useDeferredState(800, '')
const [inputValue, setInputValue] = useState('')
const [suggested, setSuggested] = useState(false)
const inputRef = useRef<HTMLInputElement>(null)
const { t } = useTranslation()
const Form: React.FC<{onQuery: (query: string) => void}> = ({onQuery}) => {
const [query, setQuery] = useDeferredState(800, '');
const [inputValue, setInputValue] = useState('');
const [suggested, setSuggested] = useState(false);
const inputRef = useRef<HTMLInputElement>(null);
const {t} = useTranslation();
// set input value
function onInputChange(e: React.FormEvent<HTMLInputElement>) {
const value = e.currentTarget.value
setInputValue(value)
const value = e.currentTarget.value;
setInputValue(value);
}
// clear input form and focus on it
function onLogoClick(e: React.MouseEvent<HTMLDivElement>) {
setInputValue('')
inputRef.current!.focus()
setInputValue('');
inputRef.current!.focus();
}
// invoke when user clicked one of the suggested items
function onSuggestionCompleted(name: string) {
setInputValue(name)
setSuggested(true)
setInputValue(name);
setSuggested(true);
}
const queryGiven = query && query.length > 0
const queryGiven = query && query.length > 0;
useEffect(() => {
if (query.length === 0) {
setSuggested(false)
setSuggested(false);
}
onQuery(query)
}, [query, onQuery])
onQuery(query);
}, [query, onQuery]);
useEffect(() => {
const modifiedValue = inputValue.replace(/[\s@+!#$%^&*()[\]]/g, '')
setQuery(modifiedValue)
}, [inputValue, setQuery])
const modifiedValue = inputValue.replace(/[\s@+!#$%^&*()[\]]/g, '');
setQuery(modifiedValue);
}, [inputValue, setQuery]);
return (
<InputContainer>
@@ -60,10 +60,10 @@ const Form: React.FC<{ onQuery: (query: string) => void }> = ({ onQuery }) => {
<Suggestion onSubmit={onSuggestionCompleted} query={query} />
) : null}
</InputContainer>
)
}
);
};
export default Form
export default Form;
const InputContainer = styled.div`
transform: translateY(40px);
@@ -75,7 +75,7 @@ const InputContainer = styled.div`
${mobile} {
transform: translateY(20px);
}
`
`;
const Logo = styled.div`
margin-bottom: 5px;
@@ -89,7 +89,7 @@ const Logo = styled.div`
${mobile} {
font-size: 15px;
}
`
`;
const InputView = styled.input.attrs({
type: 'text',
@@ -109,4 +109,4 @@ const InputView = styled.input.attrs({
${mobile} {
font-size: 2rem;
}
`
`;

6
web/src/components/Icons.tsx
View File

@@ -1,4 +1,4 @@
import React from 'react'
import React from 'react';
export const SpectrumIcon = () => (
<svg
@@ -11,7 +11,7 @@ export const SpectrumIcon = () => (
xmlns="http://www.w3.org/2000/svg">
<path d="M6 14.5C6 15.3284 6.67157 16 7.5 16H9C12.866 16 16 19.134 16 23V24.5C16 25.3284 16.6716 26 17.5 26H24.5C25.3284 26 26 25.3284 26 24.5V23C26 13.6111 18.3889 6 9 6H7.5C6.67157 6 6 6.67157 6 7.5V14.5Z" />
</svg>
)
);
export const NowIcon = () => (
<svg
@@ -26,4 +26,4 @@ export const NowIcon = () => (
<polygon id="Logotype---Black" points="350 150 407 250 293 250"></polygon>
</g>
</svg>
)
);

4
web/src/components/Links.tsx
View File

@@ -1,6 +1,6 @@
import styled from 'styled-components'
import styled from 'styled-components';
export const ExternalLink = styled.a.attrs({
target: '_blank',
rel: 'noopener noreferrer',
})``
})``;

116
web/src/components/Suggestion.tsx
View File

@@ -1,15 +1,15 @@
import React, { useEffect, useState, useRef } from 'react'
import styled from 'styled-components'
import { useTranslation } from 'react-i18next'
import fetch from 'isomorphic-unfetch'
import { TiArrowSync } from 'react-icons/ti'
import React, {useEffect, useState, useRef} from 'react';
import styled from 'styled-components';
import {useTranslation} from 'react-i18next';
import fetch from 'isomorphic-unfetch';
import {TiArrowSync} from 'react-icons/ti';
import { capitalize } from '../util/text'
import { mobile } from '../util/css'
import {capitalize} from '../util/text';
import {mobile} from '../util/css';
type Modifier = (word: string) => string
type Modifier = (word: string) => string;
const maximumCount = 3
const maximumCount = 3;
const modifiers: Modifier[] = [
(word) => `${capitalize(word)}ify`,
(word) => `lib${lower(word)}`,
@@ -43,98 +43,98 @@ const modifiers: Modifier[] = [
(word) => `In${capitalize(word)}`,
(word) => `Uni${lower(word)}`,
(word) => `${capitalize(word)}`,
]
];
function lower(word: string) {
return word.toLowerCase()
return word.toLowerCase();
}
function shuffleArray(array: any[]) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1))
const temp = array[i]
array[i] = array[j]
array[j] = temp
const j = Math.floor(Math.random() * (i + 1));
const temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array
return array;
}
function sampleFromArray(array: any[], maximum: number) {
return shuffleArray(array).slice(0, maximum)
return shuffleArray(array).slice(0, maximum);
}
function modifyWord(word: string) {
return modifiers[Math.floor(Math.random() * modifiers.length)](word)
return modifiers[Math.floor(Math.random() * modifiers.length)](word);
}
function fillArray(array: any[], filler: string, maximum: number) {
const deficit = maximum - array.length
const deficit = maximum - array.length;
if (deficit > 0) {
array = [...array, ...Array(deficit).fill(filler)]
array = [...array, ...Array(deficit).fill(filler)];
}
return array
return array;
}
async function findSynonyms(word: string) {
try {
const response = await fetch(
`https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&dt=ss&ie=UTF-8&oe=UTF-8&dj=1&q=${encodeURIComponent(
word
)}`
)
word,
)}`,
);
const json: {
synsets: Array<{ entry: Array<{ synonym: string[] }> }>
} = await response.json()
synsets: Array<{entry: Array<{synonym: string[]}>}>;
} = await response.json();
const synonyms = Array.from(
new Set<string>(
json.synsets.reduce(
(sum, synset) => [...sum, ...synset.entry.map((e) => e.synonym[0])],
[] as string[]
)
)
).filter((word) => !word.match(/[\s-]/))
return synonyms
[] as string[],
),
),
).filter((word) => !word.match(/[\s-]/));
return synonyms;
} catch (err) {
return []
return [];
}
}
const Suggestion: React.FC<{
query: string
onSubmit: (name: string) => void
}> = ({ query, onSubmit }) => {
const { t } = useTranslation()
const synonymRef = useRef<string[]>([])
const [bestWords, setBestWords] = useState<string[]>([])
query: string;
onSubmit: (name: string) => void;
}> = ({query, onSubmit}) => {
const {t} = useTranslation();
const synonymRef = useRef<string[]>([]);
const [bestWords, setBestWords] = useState<string[]>([]);
function shuffle() {
const best = fillArray(
sampleFromArray(synonymRef.current, maximumCount),
query,
maximumCount
).map((word) => modifyWord(word))
setBestWords(best)
maximumCount,
).map((word) => modifyWord(word));
setBestWords(best);
}
function applyQuery(name: string) {
onSubmit(name)
onSubmit(name);
}
useEffect(() => {
const fn = async () => {
if (query && query.length > 0) {
const synonyms = await findSynonyms(query)
synonymRef.current = synonyms
const synonyms = await findSynonyms(query);
synonymRef.current = synonyms;
const best = fillArray(
sampleFromArray(synonyms, maximumCount),
query,
maximumCount
).map((word) => modifyWord(word))
setBestWords(best)
maximumCount,
).map((word) => modifyWord(word));
setBestWords(best);
}
}
fn()
}, [query])
};
fn();
}, [query]);
return (
<Container>
@@ -151,10 +151,10 @@ const Suggestion: React.FC<{
</Icon>
</Items>
</Container>
)
}
);
};
export default Suggestion
export default Suggestion;
const Container = styled.div`
margin-bottom: 10px;
@@ -163,7 +163,7 @@ const Container = styled.div`
align-items: center;
flex-wrap: wrap;
justify-content: center;
`
`;
const Title = styled.div`
margin-top: 15px;
@@ -171,7 +171,7 @@ const Title = styled.div`
color: gray;
border: 1px solid gray;
border-radius: 2em;
`
`;
const Items = styled.div`
margin-top: 2px;
@@ -184,7 +184,7 @@ const Items = styled.div`
flex-direction: column;
align-items: center;
}
`
`;
const Item = styled.div`
margin-top: 8px;
@@ -198,10 +198,10 @@ const Item = styled.div`
${mobile} {
margin-right: 0;
}
`
`;
const Icon = styled(Item)`
display: flex;
align-items: center;
border-bottom: none;
`
`;

32
web/src/components/Welcome.tsx
View File

@@ -1,6 +1,6 @@
import React from 'react'
import styled from 'styled-components'
import { useTranslation } from 'react-i18next'
import React from 'react';
import styled from 'styled-components';
import {useTranslation} from 'react-i18next';
import {
FaMapSigns,
@@ -15,15 +15,15 @@ import {
FaAws,
FaJsSquare,
FaBuilding,
} from 'react-icons/fa'
import { IoIosBeer } from 'react-icons/io'
import { DiRust, DiHeroku } from 'react-icons/di'
} from 'react-icons/fa';
import {IoIosBeer} from 'react-icons/io';
import {DiRust, DiHeroku} from 'react-icons/di';
import { SpectrumIcon, NowIcon } from './Icons'
import { mobile } from '../util/css'
import {SpectrumIcon, NowIcon} from './Icons';
import {mobile} from '../util/css';
export default function Welcome() {
const { t } = useTranslation()
const {t} = useTranslation();
return (
<Container>
@@ -88,7 +88,7 @@ export default function Welcome() {
</ListItem>
</List>
</Container>
)
);
}
const Container = styled.div`
@@ -105,7 +105,7 @@ const Container = styled.div`
padding-left: 40px;
font-size: 1.2rem;
}
`
`;
const Header = styled.h1`
font-size: 3.5em;
@@ -115,14 +115,14 @@ const Header = styled.h1`
${mobile} {
font-size: 3em;
}
`
`;
const Text = styled.p`
font-size: 1.2em;
color: #3c3c3c;
`
`;
const Hero = styled.div``
const Hero = styled.div``;
const List = styled.div`
margin-top: 50px;
@@ -139,7 +139,7 @@ const List = styled.div`
${mobile} {
flex-direction: column;
}
`
`;
const ListItem = styled.div`
margin: 15px;
@@ -155,4 +155,4 @@ const ListItem = styled.div`
svg {
margin-right: 5px;
}
`
`;

38
web/src/components/cards/AppStore.tsx
View File

@@ -1,19 +1,19 @@
import React from 'react'
import useFetch from 'fetch-suspense'
import { useTranslation } from 'react-i18next'
import { FaAppStore, FaInfoCircle } from 'react-icons/fa'
import React from 'react';
import useFetch from 'fetch-suspense';
import {useTranslation} from 'react-i18next';
import {FaAppStore, FaInfoCircle} from 'react-icons/fa';
import { Card, Result } from './core'
import {Card, Result} from './core';
const Search: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const term = encodeURIComponent(query)
const Search: React.FC<{query: string}> = ({query}) => {
const {t} = useTranslation();
const term = encodeURIComponent(query);
const response = useFetch(
`/availability/appstore/${term}?country=${t('countryCode')}`
`/availability/appstore/${term}?country=${t('countryCode')}`,
) as {
result: Array<{ name: string; viewURL: string; price: number; id: string }>
}
const apps = response.result
result: Array<{name: string; viewURL: string; price: number; id: string}>;
};
const apps = response.result;
return (
<>
@@ -31,17 +31,17 @@ const Search: React.FC<{ query: string }> = ({ query }) => {
<Result title={t('noResult')} icon={<FaInfoCircle />} />
)}
</>
)
}
);
};
const AppStoreCard: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const AppStoreCard: React.FC<{query: string}> = ({query}) => {
const {t} = useTranslation();
return (
<Card title={t('providers.appStore')}>
<Search query={query} />
</Card>
)
}
);
};
export default AppStoreCard
export default AppStoreCard;

22
web/src/components/cards/Cratesio.tsx
View File

@@ -1,14 +1,14 @@
import React from 'react'
import { useTranslation } from 'react-i18next'
import { DiRust } from 'react-icons/di'
import React from 'react';
import {useTranslation} from 'react-i18next';
import {DiRust} from 'react-icons/di';
import { Card, Repeater, DedicatedAvailability } from './core'
import {Card, Repeater, DedicatedAvailability} from './core';
const CratesioCard: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const lowerCase = query.toLowerCase()
const CratesioCard: React.FC<{query: string}> = ({query}) => {
const {t} = useTranslation();
const lowerCase = query.toLowerCase();
const names = [lowerCase]
const names = [lowerCase];
return (
<Card title={t('providers.rust')}>
@@ -24,7 +24,7 @@ const CratesioCard: React.FC<{ query: string }> = ({ query }) => {
)}
</Repeater>
</Card>
)
}
);
};
export default CratesioCard
export default CratesioCard;

24
web/src/components/cards/Domains.tsx
View File

@@ -1,21 +1,21 @@
import React from 'react'
import { useTranslation } from 'react-i18next'
import { FaMapSigns } from 'react-icons/fa'
import React from 'react';
import {useTranslation} from 'react-i18next';
import {FaMapSigns} from 'react-icons/fa';
import { Card, Repeater, DedicatedAvailability } from './core'
import {Card, Repeater, DedicatedAvailability} from './core';
const DomainCard: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const lowerCase = query.toLowerCase()
const DomainCard: React.FC<{query: string}> = ({query}) => {
const {t} = useTranslation();
const lowerCase = query.toLowerCase();
const names = [`${lowerCase}.com`, `${lowerCase}.app`]
const names = [`${lowerCase}.com`, `${lowerCase}.app`];
const moreNames = [
`${lowerCase}app.com`,
`get${lowerCase}.com`,
`${lowerCase}.dev`,
`${lowerCase}.io`,
`${lowerCase}.tools`,
]
];
return (
<Card title={t('providers.domains')}>
@@ -31,7 +31,7 @@ const DomainCard: React.FC<{ query: string }> = ({ query }) => {
)}
</Repeater>
</Card>
)
}
);
};
export default DomainCard
export default DomainCard;

24
web/src/components/cards/GitHubRepository.tsx
View File

@@ -1,20 +1,20 @@
import React from 'react'
import { useTranslation } from 'react-i18next'
import { FaGithub } from 'react-icons/fa'
import React from 'react';
import {useTranslation} from 'react-i18next';
import {FaGithub} from 'react-icons/fa';
import { Card, Repeater, DedicatedAvailability } from './core'
import {Card, Repeater, DedicatedAvailability} from './core';
const GithubCard: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const lowerCase = query.toLowerCase()
const GithubCard: React.FC<{query: string}> = ({query}) => {
const {t} = useTranslation();
const lowerCase = query.toLowerCase();
const names = [query]
const names = [query];
const moreNames = [
`${lowerCase}hq`,
`${lowerCase}-team`,
`${lowerCase}-org`,
`${lowerCase}-js`,
]
];
return (
<Card title={t('providers.github')}>
@@ -34,7 +34,7 @@ const GithubCard: React.FC<{ query: string }> = ({ query }) => {
)}
</Repeater>
</Card>
)
}
);
};
export default GithubCard
export default GithubCard;

50
web/src/components/cards/GitHubSearch.tsx
View File

@@ -1,26 +1,26 @@
import React from 'react'
import useFetch from 'fetch-suspense'
import { useTranslation } from 'react-i18next'
import { FaGithub, FaInfoCircle } from 'react-icons/fa'
import React from 'react';
import useFetch from 'fetch-suspense';
import {useTranslation} from 'react-i18next';
import {FaGithub, FaInfoCircle} from 'react-icons/fa';
import { Card, Result } from './core'
import {Card, Result} from './core';
const Search: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const searchQuery = encodeURIComponent(`${query} in:name`)
const limit = 10
const Search: React.FC<{query: string}> = ({query}) => {
const {t} = useTranslation();
const searchQuery = encodeURIComponent(`${query} in:name`);
const limit = 10;
const response = useFetch(
`https://api.github.com/search/repositories?q=${searchQuery}&per_page=${limit}`
`https://api.github.com/search/repositories?q=${searchQuery}&per_page=${limit}`,
) as {
items: Array<{
full_name: string
description: string
stargazers_count: number
html_url: string
id: string
}>
}
const repos = response.items
full_name: string;
description: string;
stargazers_count: number;
html_url: string;
id: string;
}>;
};
const repos = response.items;
return (
<>
@@ -40,17 +40,17 @@ const Search: React.FC<{ query: string }> = ({ query }) => {
<Result title={t('noResult')} icon={<FaInfoCircle />} />
)}
</>
)
}
);
};
const GithubSearchCard: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const GithubSearchCard: React.FC<{query: string}> = ({query}) => {
const {t} = useTranslation();
return (
<Card title={t('providers.githubSearch')}>
<Search query={query} />
</Card>
)
}
);
};
export default GithubSearchCard
export default GithubSearchCard;

22
web/src/components/cards/Heroku.tsx
View File

@@ -1,14 +1,14 @@
import React from 'react'
import { useTranslation } from 'react-i18next'
import { DiHeroku } from 'react-icons/di'
import React from 'react';
import {useTranslation} from 'react-i18next';
import {DiHeroku} from 'react-icons/di';
import { Card, Repeater, DedicatedAvailability } from './core'
import {Card, Repeater, DedicatedAvailability} from './core';
const HerokuCard: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const lowerCase = query.toLowerCase()
const HerokuCard: React.FC<{query: string}> = ({query}) => {
const {t} = useTranslation();
const lowerCase = query.toLowerCase();
const names = [lowerCase]
const names = [lowerCase];
return (
<Card title={t('providers.heroku')}>
@@ -24,7 +24,7 @@ const HerokuCard: React.FC<{ query: string }> = ({ query }) => {
)}
</Repeater>
</Card>
)
}
);
};
export default HerokuCard
export default HerokuCard;

22
web/src/components/cards/Homebrew.tsx
View File

@@ -1,14 +1,14 @@
import React from 'react'
import { useTranslation } from 'react-i18next'
import { IoIosBeer } from 'react-icons/io'
import React from 'react';
import {useTranslation} from 'react-i18next';
import {IoIosBeer} from 'react-icons/io';
import { Card, Repeater, ExistentialAvailability } from './core'
import {Card, Repeater, ExistentialAvailability} from './core';
const HomebrewCard: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const lowerCase = query.toLowerCase()
const HomebrewCard: React.FC<{query: string}> = ({query}) => {
const {t} = useTranslation();
const lowerCase = query.toLowerCase();
const names = [lowerCase]
const names = [lowerCase];
return (
<Card title={t('providers.homebrew')}>
@@ -38,7 +38,7 @@ const HomebrewCard: React.FC<{ query: string }> = ({ query }) => {
)}
</Repeater>
</Card>
)
}
);
};
export default HomebrewCard
export default HomebrewCard;

22
web/src/components/cards/JsOrg.tsx
View File

@@ -1,14 +1,14 @@
import React from 'react'
import { useTranslation } from 'react-i18next'
import { FaJsSquare } from 'react-icons/fa'
import React from 'react';
import {useTranslation} from 'react-i18next';
import {FaJsSquare} from 'react-icons/fa';
import { Card, Repeater, DedicatedAvailability } from './core'
import {Card, Repeater, DedicatedAvailability} from './core';
const JsOrgCard: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const lowerCase = query.toLowerCase()
const JsOrgCard: React.FC<{query: string}> = ({query}) => {
const {t} = useTranslation();
const lowerCase = query.toLowerCase();
const names = [lowerCase]
const names = [lowerCase];
return (
<Card title={t('providers.jsorg')}>
@@ -26,7 +26,7 @@ const JsOrgCard: React.FC<{ query: string }> = ({ query }) => {
)}
</Repeater>
</Card>
)
}
);
};
export default JsOrgCard
export default JsOrgCard;

24
web/src/components/cards/Linux.tsx
View File

@@ -1,15 +1,15 @@
import React from 'react'
import { useTranslation } from 'react-i18next'
import { DiUbuntu } from 'react-icons/di'
import { DiDebian } from 'react-icons/di'
import React from 'react';
import {useTranslation} from 'react-i18next';
import {DiUbuntu} from 'react-icons/di';
import {DiDebian} from 'react-icons/di';
import { Card, Repeater, DedicatedAvailability } from './core'
import {Card, Repeater, DedicatedAvailability} from './core';
const LinuxCard: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const lowerCase = query.toLowerCase()
const LinuxCard: React.FC<{query: string}> = ({query}) => {
const {t} = useTranslation();
const lowerCase = query.toLowerCase();
const names = [lowerCase]
const names = [lowerCase];
return (
<Card title={t('providers.linux')}>
@@ -32,7 +32,7 @@ const LinuxCard: React.FC<{ query: string }> = ({ query }) => {
)}
</Repeater>
</Card>
)
}
);
};
export default LinuxCard
export default LinuxCard;

22
web/src/components/cards/Now.tsx
View File

@@ -1,14 +1,14 @@
import React from 'react'
import { useTranslation } from 'react-i18next'
import { NowIcon } from '../Icons'
import React from 'react';
import {useTranslation} from 'react-i18next';
import {NowIcon} from '../Icons';
import { Card, Repeater, DedicatedAvailability } from './core'
import {Card, Repeater, DedicatedAvailability} from './core';
const NowCard: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const lowerCase = query.toLowerCase()
const NowCard: React.FC<{query: string}> = ({query}) => {
const {t} = useTranslation();
const lowerCase = query.toLowerCase();
const names = [lowerCase]
const names = [lowerCase];
return (
<Card title={t('providers.now')}>
@@ -24,7 +24,7 @@ const NowCard: React.FC<{ query: string }> = ({ query }) => {
)}
</Repeater>
</Card>
)
}
);
};
export default NowCard
export default NowCard;

24
web/src/components/cards/Npm.tsx
View File

@@ -1,15 +1,15 @@
import React from 'react'
import { useTranslation } from 'react-i18next'
import { FaNpm } from 'react-icons/fa'
import React from 'react';
import {useTranslation} from 'react-i18next';
import {FaNpm} from 'react-icons/fa';
import { Card, Repeater, DedicatedAvailability } from './core'
import {Card, Repeater, DedicatedAvailability} from './core';
const NpmCard: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const lowerCase = query.toLowerCase()
const NpmCard: React.FC<{query: string}> = ({query}) => {
const {t} = useTranslation();
const lowerCase = query.toLowerCase();
const names = [lowerCase]
const moreNames = [`${lowerCase}-js`]
const names = [lowerCase];
const moreNames = [`${lowerCase}-js`];
return (
<Card title={t('providers.npm')}>
@@ -40,7 +40,7 @@ const NpmCard: React.FC<{ query: string }> = ({ query }) => {
)}
</Repeater>
</Card>
)
}
);
};
export default NpmCard
export default NpmCard;

36
web/src/components/cards/Nta.tsx
View File

@@ -1,17 +1,17 @@
import React from 'react'
import useFetch from 'fetch-suspense'
import { useTranslation } from 'react-i18next'
import { FaBuilding, FaInfoCircle } from 'react-icons/fa'
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 './core'
import {Card, Result} from './core';
const Search: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const term = encodeURIComponent(query)
const Search: React.FC<{query: string}> = ({query}) => {
const {t} = useTranslation();
const term = encodeURIComponent(query);
const response = useFetch(`/availability/nta/${term}`) as {
result: Array<{ name: string; phoneticName: string }>
}
const apps = response.result
result: Array<{name: string; phoneticName: string}>;
};
const apps = response.result;
return (
<>
@@ -28,17 +28,17 @@ const Search: React.FC<{ query: string }> = ({ query }) => {
<Result title={t('noResult')} icon={<FaInfoCircle />} />
)}
</>
)
}
);
};
const NtaCard: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const NtaCard: React.FC<{query: string}> = ({query}) => {
const {t} = useTranslation();
return (
<Card title={t('providers.nta')}>
<Search query={query} />
</Card>
)
}
);
};
export default NtaCard
export default NtaCard;

22
web/src/components/cards/RubyGems.tsx
View File

@@ -1,14 +1,14 @@
import React from 'react'
import { useTranslation } from 'react-i18next'
import { FaGem } from 'react-icons/fa'
import React from 'react';
import {useTranslation} from 'react-i18next';
import {FaGem} from 'react-icons/fa';
import { Card, Repeater, DedicatedAvailability } from './core'
import {Card, Repeater, DedicatedAvailability} from './core';
const RubyGemsCard: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const RubyGemsCard: React.FC<{query: string}> = ({query}) => {
const {t} = useTranslation();
const names = [query]
const moreNames = [`${query.toLowerCase()}-rb`]
const names = [query];
const moreNames = [`${query.toLowerCase()}-rb`];
return (
<Card title={t('providers.rubygems')}>
@@ -27,7 +27,7 @@ const RubyGemsCard: React.FC<{ query: string }> = ({ query }) => {
)}
</Repeater>
</Card>
)
}
);
};
export default RubyGemsCard
export default RubyGemsCard;

22
web/src/components/cards/S3.tsx
View File

@@ -1,14 +1,14 @@
import React from 'react'
import { useTranslation } from 'react-i18next'
import { FaAws } from 'react-icons/fa'
import React from 'react';
import {useTranslation} from 'react-i18next';
import {FaAws} from 'react-icons/fa';
import { Card, DedicatedAvailability, Repeater } from './core'
import {Card, DedicatedAvailability, Repeater} from './core';
const S3Card: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const lowerCase = query.toLowerCase()
const S3Card: React.FC<{query: string}> = ({query}) => {
const {t} = useTranslation();
const lowerCase = query.toLowerCase();
const names = [lowerCase]
const names = [lowerCase];
return (
<Card title={t('providers.s3')}>
@@ -28,7 +28,7 @@ const S3Card: React.FC<{ query: string }> = ({ query }) => {
)}
</Repeater>
</Card>
)
}
);
};
export default S3Card
export default S3Card;

22
web/src/components/cards/Slack.tsx
View File

@@ -1,14 +1,14 @@
import React from 'react'
import { useTranslation } from 'react-i18next'
import { FaSlack } from 'react-icons/fa'
import React from 'react';
import {useTranslation} from 'react-i18next';
import {FaSlack} from 'react-icons/fa';
import { Card, DedicatedAvailability, Repeater } from './core'
import {Card, DedicatedAvailability, Repeater} from './core';
const SlackCard: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const lowerCase = query.toLowerCase()
const SlackCard: React.FC<{query: string}> = ({query}) => {
const {t} = useTranslation();
const lowerCase = query.toLowerCase();
const names = [lowerCase]
const names = [lowerCase];
return (
<Card title={t('providers.slack')}>
@@ -27,7 +27,7 @@ const SlackCard: React.FC<{ query: string }> = ({ query }) => {
)}
</Repeater>
</Card>
)
}
);
};
export default SlackCard
export default SlackCard;

20
web/src/components/cards/Spectrum.tsx
View File

@@ -1,11 +1,11 @@
import React from 'react'
import { useTranslation } from 'react-i18next'
import { Card, Repeater, DedicatedAvailability } from './core'
import { SpectrumIcon } from '../Icons'
import React from 'react';
import {useTranslation} from 'react-i18next';
import {Card, Repeater, DedicatedAvailability} from './core';
import {SpectrumIcon} from '../Icons';
const SpectrumCard: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const names = [query]
const SpectrumCard: React.FC<{query: string}> = ({query}) => {
const {t} = useTranslation();
const names = [query];
return (
<Card title={t('providers.spectrum')}>
@@ -25,7 +25,7 @@ const SpectrumCard: React.FC<{ query: string }> = ({ query }) => {
)}
</Repeater>
</Card>
)
}
);
};
export default SpectrumCard
export default SpectrumCard;

28
web/src/components/cards/Twitter.tsx
View File

@@ -1,16 +1,16 @@
import React from 'react'
import { useTranslation } from 'react-i18next'
import { FaTwitter } from 'react-icons/fa'
import React from 'react';
import {useTranslation} from 'react-i18next';
import {FaTwitter} from 'react-icons/fa';
import { capitalize } from '../../util/text'
import { Card, Repeater, DedicatedAvailability } from './core'
import {capitalize} from '../../util/text';
import {Card, Repeater, DedicatedAvailability} from './core';
const TwitterCard: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const lowerCase = query.toLowerCase()
const capitalCase = capitalize(query)
const TwitterCard: React.FC<{query: string}> = ({query}) => {
const {t} = useTranslation();
const lowerCase = query.toLowerCase();
const capitalCase = capitalize(query);
const names = [query]
const names = [query];
const moreNames = [
`${lowerCase}app`,
`hey${lowerCase}`,
@@ -18,7 +18,7 @@ const TwitterCard: React.FC<{ query: string }> = ({ query }) => {
`${capitalCase}HQ`,
`${lowerCase}_official`,
`${lowerCase}-support`,
]
];
return (
<Card title={t('providers.twitter')}>
@@ -36,7 +36,7 @@ const TwitterCard: React.FC<{ query: string }> = ({ query }) => {
)}
</Repeater>
</Card>
)
}
);
};
export default TwitterCard
export default TwitterCard;

166
web/src/components/cards/core.tsx
View File

@@ -1,22 +1,22 @@
import React, { useState, useEffect, Suspense } from 'react'
import styled from 'styled-components'
import useFetch from 'fetch-suspense'
import { Tooltip } from 'react-tippy'
import 'react-tippy/dist/tippy.css'
import BarLoader from 'react-spinners/BarLoader'
import { GoInfo } from 'react-icons/go'
import { useTranslation } from 'react-i18next'
import React, {useState, useEffect, Suspense} from 'react';
import styled from 'styled-components';
import useFetch from 'fetch-suspense';
import {Tooltip} from 'react-tippy';
import 'react-tippy/dist/tippy.css';
import BarLoader from 'react-spinners/BarLoader';
import {GoInfo} from 'react-icons/go';
import {useTranslation} from 'react-i18next';
import { mobile } from '../../util/css'
import { ExternalLink } from '../Links'
import {mobile} from '../../util/css';
import {ExternalLink} from '../Links';
const COLORS = {
available: '#6e00ff',
unavailable: 'darkgrey',
error: '#ff388b',
}
};
export const Card: React.FC<{ title: string }> = ({ title, children }) => {
export const Card: React.FC<{title: string}> = ({title, children}) => {
return (
<CardContainer>
<CardTitle>{title}</CardTitle>
@@ -33,24 +33,24 @@ export const Card: React.FC<{ title: string }> = ({ title, children }) => {
</ErrorBoundary>
</CardContent>
</CardContainer>
)
}
);
};
export const Repeater: React.FC<{
items: string[]
moreItems?: string[]
children: (name: string) => React.ReactNode
}> = ({ items = [], moreItems = [], children }) => {
const [revealAlternatives, setRevealAlternatives] = useState(false)
const { t } = useTranslation()
items: string[];
moreItems?: string[];
children: (name: string) => React.ReactNode;
}> = ({items = [], moreItems = [], children}) => {
const [revealAlternatives, setRevealAlternatives] = useState(false);
const {t} = useTranslation();
function onClick() {
setRevealAlternatives(true)
setRevealAlternatives(true);
}
useEffect(() => {
setRevealAlternatives(false)
}, [items, moreItems])
setRevealAlternatives(false);
}, [items, moreItems]);
return (
<>
@@ -67,25 +67,25 @@ export const Repeater: React.FC<{
<Button onClick={onClick}>{t('showMore')}</Button>
) : null}
</>
)
}
);
};
interface Response {
error?: string
availability: boolean
error?: string;
availability: boolean;
}
export const DedicatedAvailability: React.FC<{
name: string
query?: string
message?: string
messageIfTaken?: string
service: string
link: string
linkIfTaken?: string
prefix?: string
suffix?: string
icon: React.ReactNode
name: string;
query?: string;
message?: string;
messageIfTaken?: string;
service: string;
link: string;
linkIfTaken?: string;
prefix?: string;
suffix?: string;
icon: React.ReactNode;
}> = ({
name,
query = undefined,
@@ -99,11 +99,11 @@ export const DedicatedAvailability: React.FC<{
icon,
}) => {
const response = useFetch(
`/availability/${service}/${encodeURIComponent(query || name)}`
) as Response
`/availability/${service}/${encodeURIComponent(query || name)}`,
) as Response;
if (response.error) {
throw new Error(`${service}: ${response.error}`)
throw new Error(`${service}: ${response.error}`);
}
return (
@@ -116,19 +116,19 @@ export const DedicatedAvailability: React.FC<{
prefix={prefix}
suffix={suffix}
/>
)
}
);
};
export const ExistentialAvailability: React.FC<{
name: string
target: string
message?: string
messageIfTaken?: string
link: string
linkIfTaken?: string
prefix?: string
suffix?: string
icon: React.ReactNode
name: string;
target: string;
message?: string;
messageIfTaken?: string;
link: string;
linkIfTaken?: string;
prefix?: string;
suffix?: string;
icon: React.ReactNode;
}> = ({
name,
message = '',
@@ -140,13 +140,13 @@ export const ExistentialAvailability: React.FC<{
suffix = '',
icon,
}) => {
const response = useFetch(target, undefined, { metadata: true })
const response = useFetch(target, undefined, {metadata: true});
if (response.status !== 404 && response.status !== 200) {
throw new Error(`${name}: ${response.status}`)
throw new Error(`${name}: ${response.status}`);
}
const availability = response.status === 404
const availability = response.status === 404;
return (
<Result
@@ -158,17 +158,17 @@ export const ExistentialAvailability: React.FC<{
prefix={prefix}
suffix={suffix}
/>
)
}
);
};
export const Result: React.FC<{
title: string
message?: string
link?: string
icon: React.ReactNode
color?: string
prefix?: string
suffix?: string
title: string;
message?: string;
link?: string;
icon: React.ReactNode;
color?: string;
prefix?: string;
suffix?: string;
}> = ({
title,
message = '',
@@ -184,7 +184,7 @@ export const Result: React.FC<{
{title}
{suffix}
</>
)
);
return (
<ResultContainer>
<Tooltip
@@ -205,20 +205,20 @@ export const Result: React.FC<{
</ResultItem>
</Tooltip>
</ResultContainer>
)
}
);
};
class ErrorBoundary extends React.Component<
{},
{ hasError: boolean; message: string }
{hasError: boolean; message: string}
> {
constructor(props: {}) {
super(props)
this.state = { hasError: false, message: '' }
super(props);
this.state = {hasError: false, message: ''};
}
static getDerivedStateFromError(error: Error) {
return { hasError: true, message: error.message }
return {hasError: true, message: error.message};
}
render() {
@@ -239,13 +239,13 @@ class ErrorBoundary extends React.Component<
</ResultItem>
</ResultContainer>
</Tooltip>
)
);
}
return this.props.children
return this.props.children;
}
}
const CellError: React.FC = ({ children }) => (
const CellError: React.FC = ({children}) => (
<ErrorBoundary>
<Suspense
fallback={
@@ -256,7 +256,7 @@ const CellError: React.FC = ({ children }) => (
{children}
</Suspense>
</ErrorBoundary>
)
);
const CardContainer = styled.div`
padding: 40px;
@@ -265,7 +265,7 @@ const CardContainer = styled.div`
margin-bottom: 40px;
padding: 0px;
}
`
`;
const CardTitle = styled.div`
margin-bottom: 15px;
@@ -275,7 +275,7 @@ const CardTitle = styled.div`
${mobile} {
padding-left: 20px;
}
`
`;
const CardContent = styled.div`
border-radius: 2px;
@@ -286,7 +286,7 @@ const CardContent = styled.div`
background: white;
border-radius: 0;
}
`
`;
const Button = styled.div`
margin-top: 5px;
@@ -297,25 +297,25 @@ const Button = styled.div`
cursor: pointer;
font-family: monospace;
font-size: 0.8em;
`
`;
const ResultContainer = styled.div`
display: flex;
align-items: center;
margin-top: 8px;
`
`;
const ResultIcon = styled.div`
width: 1em;
`
`;
const ResultItem = styled.div`
display: flex;
flex-direction: row;
align-items: flex-start;
word-break: break-all;
color: ${({ color }) => color};
`
color: ${({color}) => color};
`;
const ResultName = styled.div`
margin-left: 6px;
@@ -327,4 +327,4 @@ const ResultName = styled.div`
text-decoration: none;
color: inherit;
}
`
`;

58
web/src/components/cards/index.tsx
View File

@@ -1,31 +1,31 @@
import React from 'react'
import styled from 'styled-components'
import { useTranslation } from 'react-i18next'
import React from 'react';
import styled from 'styled-components';
import {useTranslation} from 'react-i18next';
import { mobile } from '../../util/css'
import DomainCard from './Domains'
import GithubCard from './GitHubRepository'
import NpmCard from './Npm'
import PypiCard from './PyPI'
import RubyGemsCard from './RubyGems'
import CratesioCard from './Cratesio'
import HomebrewCard from './Homebrew'
import LinuxCard from './Linux'
import TwitterCard from './Twitter'
import SpectrumCard from './Spectrum'
import SlackCard from './Slack'
import S3Card from './S3'
import JsOrgCard from './JsOrg'
import GithubSearchCard from './GitHubSearch'
import AppStoreCard from './AppStore'
import HerokuCard from './Heroku'
import NowCard from './Now'
import NtaCard from './Nta'
import {mobile} from '../../util/css';
import DomainCard from './Domains';
import GithubCard from './GitHubRepository';
import NpmCard from './Npm';
import PypiCard from './PyPI';
import RubyGemsCard from './RubyGems';
import CratesioCard from './Cratesio';
import HomebrewCard from './Homebrew';
import LinuxCard from './Linux';
import TwitterCard from './Twitter';
import SpectrumCard from './Spectrum';
import SlackCard from './Slack';
import S3Card from './S3';
import JsOrgCard from './JsOrg';
import GithubSearchCard from './GitHubSearch';
import AppStoreCard from './AppStore';
import HerokuCard from './Heroku';
import NowCard from './Now';
import NtaCard from './Nta';
const Index: React.FC<{ query: string }> = ({ query }) => {
const Index: React.FC<{query: string}> = ({query}) => {
const {
i18n: { language },
} = useTranslation()
i18n: {language},
} = useTranslation();
return (
<>
@@ -52,10 +52,10 @@ const Index: React.FC<{ query: string }> = ({ query }) => {
{language === 'ja' ? <NtaCard query={query} /> : null}
</Cards>
</>
)
}
);
};
export default Index
export default Index;
const Cards = styled.div`
display: flex;
@@ -66,4 +66,4 @@ const Cards = styled.div`
${mobile} {
flex-direction: column;
}
`
`;

24
web/src/index.tsx
View File

@@ -1,24 +1,24 @@
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import * as serviceWorker from './serviceWorker'
import { FullScreenSuspense } from './util/suspense'
import './util/i18n'
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
import {FullScreenSuspense} from './util/suspense';
import './util/i18n';
const Container = () => (
<FullScreenSuspense>
<App />
</FullScreenSuspense>
)
);
ReactDOM.render(<Container />, document.getElementById('root'))
ReactDOM.render(<Container />, document.getElementById('root'));
// register Google Analytics
if (process.env.NODE_ENV !== 'development') {
import('react-ga').then((ReactGA) => {
ReactGA.initialize('UA-28919359-15')
ReactGA.pageview(window.location.pathname + window.location.search)
})
ReactGA.initialize('UA-28919359-15');
ReactGA.pageview(window.location.pathname + window.location.search);
});
}
serviceWorker.register({})
serviceWorker.register({});

76
web/src/serviceWorker.ts
View File

@@ -16,49 +16,49 @@ const isLocalhost = Boolean(
window.location.hostname === '[::1]' ||
// 127.0.0.1/8 is considered localhost for IPv4.
window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
)
)
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/,
),
);
type Config = {
onSuccess?: (registration: ServiceWorkerRegistration) => void
onUpdate?: (registration: ServiceWorkerRegistration) => void
}
onSuccess?: (registration: ServiceWorkerRegistration) => void;
onUpdate?: (registration: ServiceWorkerRegistration) => void;
};
export function register(config?: Config) {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
// The URL constructor is available in all browsers that support SW.
const publicUrl = new URL(
(process as { env: { [key: string]: string } }).env.PUBLIC_URL,
window.location.href
)
(process as {env: {[key: string]: string}}).env.PUBLIC_URL,
window.location.href,
);
if (publicUrl.origin !== window.location.origin) {
// Our service worker won't work if PUBLIC_URL is on a different origin
// from what our page is served on. This might happen if a CDN is used to
// serve assets; see https://github.com/facebook/create-react-app/issues/2374
return
return;
}
window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
if (isLocalhost) {
// This is running on localhost. Let's check if a service worker still exists or not.
checkValidServiceWorker(swUrl, config)
checkValidServiceWorker(swUrl, config);
// Add some additional logging to localhost, pointing developers to the
// service worker/PWA documentation.
navigator.serviceWorker.ready.then(() => {
console.log(
'This web app is being served cache-first by a service ' +
'worker. To learn more, visit https://bit.ly/CRA-PWA'
)
})
'worker. To learn more, visit https://bit.ly/CRA-PWA',
);
});
} else {
// Is not localhost. Just register service worker
registerValidSW(swUrl, config)
registerValidSW(swUrl, config);
}
})
});
}
}
@@ -67,9 +67,9 @@ function registerValidSW(swUrl: string, config?: Config) {
.register(swUrl)
.then((registration) => {
registration.onupdatefound = () => {
const installingWorker = registration.installing
const installingWorker = registration.installing;
if (installingWorker == null) {
return
return;
}
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
@@ -79,31 +79,31 @@ function registerValidSW(swUrl: string, config?: Config) {
// content until all client tabs are closed.
console.log(
'New content is available and will be used when all ' +
'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
)
'tabs for this page are closed. See https://bit.ly/CRA-PWA.',
);
// Execute callback
if (config && config.onUpdate) {
config.onUpdate(registration)
config.onUpdate(registration);
}
} else {
// At this point, everything has been precached.
// It's the perfect time to display a
// "Content is cached for offline use." message.
console.log('Content is cached for offline use.')
console.log('Content is cached for offline use.');
// Execute callback
if (config && config.onSuccess) {
config.onSuccess(registration)
config.onSuccess(registration);
}
}
}
}
}
};
};
})
.catch((error) => {
console.error('Error during service worker registration:', error)
})
console.error('Error during service worker registration:', error);
});
}
function checkValidServiceWorker(swUrl: string, config?: Config) {
@@ -111,7 +111,7 @@ function checkValidServiceWorker(swUrl: string, config?: Config) {
fetch(swUrl)
.then((response) => {
// Ensure service worker exists, and that we really are getting a JS file.
const contentType = response.headers.get('content-type')
const contentType = response.headers.get('content-type');
if (
response.status === 404 ||
(contentType != null && contentType.indexOf('javascript') === -1)
@@ -119,25 +119,25 @@ function checkValidServiceWorker(swUrl: string, config?: Config) {
// No service worker found. Probably a different app. Reload the page.
navigator.serviceWorker.ready.then((registration) => {
registration.unregister().then(() => {
window.location.reload()
})
})
window.location.reload();
});
});
} else {
// Service worker found. Proceed as normal.
registerValidSW(swUrl, config)
registerValidSW(swUrl, config);
}
})
.catch(() => {
console.log(
'No internet connection found. App is running in offline mode.'
)
})
'No internet connection found. App is running in offline mode.',
);
});
}
export function unregister() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready.then((registration) => {
registration.unregister()
})
registration.unregister();
});
}
}

14
web/src/setupTests.ts
View File

@@ -1,12 +1,12 @@
// this adds jest-dom's custom assertions
import '@testing-library/jest-dom/extend-expect'
import '@testing-library/jest-dom/extend-expect';
// i18next
import { join } from 'path'
import i18n from 'i18next'
import Backend from 'i18next-node-fs-backend'
import LanguageDetector from 'i18next-browser-languagedetector'
import { initReactI18next } from 'react-i18next'
import {join} from 'path';
import i18n from 'i18next';
import Backend from 'i18next-node-fs-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
import {initReactI18next} from 'react-i18next';
i18n
.use(Backend)
@@ -23,4 +23,4 @@ i18n
interpolation: {
escapeValue: false, // not needed for react as it escapes by default
},
})
});

2
web/src/types/react-tippy.d.ts vendored
View File

@@ -1 +1 @@
declare module 'react-tippy'
declare module 'react-tippy';

2
web/src/util/css.ts
View File

@@ -1 +1 @@
export const mobile = '@media screen and (max-width: 800px)'
export const mobile = '@media screen and (max-width: 800px)';

20
web/src/util/hooks.ts
View File

@@ -1,21 +1,21 @@
import { useState, useEffect } from 'react'
import {useState, useEffect} from 'react';
export function useDeferredState<T>(
duration = 1000,
initialValue: T
initialValue: T,
): [T, React.Dispatch<React.SetStateAction<T>>] {
const [response, setResponse] = useState(initialValue)
const [innerValue, setInnerValue] = useState(initialValue)
const [response, setResponse] = useState(initialValue);
const [innerValue, setInnerValue] = useState(initialValue);
useEffect(() => {
const fn = setTimeout(() => {
setResponse(innerValue)
}, duration)
setResponse(innerValue);
}, duration);
return () => {
clearTimeout(fn)
}
}, [duration, innerValue])
clearTimeout(fn);
};
}, [duration, innerValue]);
return [response, setInnerValue]
return [response, setInnerValue];
}

18
web/src/util/i18n.ts
View File

@@ -1,9 +1,9 @@
import i18n from 'i18next'
import Backend from 'i18next-chained-backend'
import LocalStorageBackend from 'i18next-localstorage-backend'
import XHR from 'i18next-xhr-backend'
import LanguageDetector from 'i18next-browser-languagedetector'
import { initReactI18next } from 'react-i18next'
import i18n from 'i18next';
import Backend from 'i18next-chained-backend';
import LocalStorageBackend from 'i18next-localstorage-backend';
import XHR from 'i18next-xhr-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
import {initReactI18next} from 'react-i18next';
i18n
.use(Backend)
@@ -14,7 +14,7 @@ i18n
backends: [LocalStorageBackend, XHR],
backendOptions: [
{
versions: { en: '1.5', ja: '1.5' },
versions: {en: '1.5', ja: '1.5'},
},
],
},
@@ -23,6 +23,6 @@ i18n
interpolation: {
escapeValue: false, // not needed for react as it escapes by default
},
})
});
export default i18n
export default i18n;

6
web/src/util/pwa.ts
View File

@@ -1,8 +1,8 @@
interface CustomNavigator extends Navigator {
standalone?: boolean
standalone?: boolean;
}
export function isStandalone() {
const navigator: CustomNavigator = window.navigator
return 'standalone' in navigator && navigator.standalone
const navigator: CustomNavigator = window.navigator;
return 'standalone' in navigator && navigator.standalone;
}

16
web/src/util/suspense.tsx
View File

@@ -1,10 +1,10 @@
import React, { Suspense } from 'react'
import styled from 'styled-components'
import BarLoader from 'react-spinners/BarLoader'
import React, {Suspense} from 'react';
import styled from 'styled-components';
import BarLoader from 'react-spinners/BarLoader';
export const FullScreenSuspense: React.FC = ({ children }) => {
return <Suspense fallback={<Fallback />}>{children}</Suspense>
}
export const FullScreenSuspense: React.FC = ({children}) => {
return <Suspense fallback={<Fallback />}>{children}</Suspense>;
};
const Container = styled.div`
width: 100vw;
@@ -13,10 +13,10 @@ const Container = styled.div`
flex-direction: column;
justify-content: center;
align-items: center;
`
`;
const Fallback = () => (
<Container>
<BarLoader />
</Container>
)
);

2
web/src/util/text.ts
View File

@@ -1,3 +1,3 @@
export function capitalize(text: string) {
return text[0].toUpperCase() + text.slice(1).toLowerCase()
return text[0].toUpperCase() + text.slice(1).toLowerCase();
}