uetchy/namae
1
0
Fork 0
mirror of https://github.com/uetchy/namae.git synced 2025-03-18 04:50:32 +09:00
Code Issues Releases Activity

style: prettier

Browse Source
This commit is contained in:
uetchy 2020-08-20 00:57:33 +09:00
parent a31c13e725
commit c7bbe707a9
71 changed files with 1074 additions and 1089 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.prettierrc
View File

@ -1,5 +1,4 @@
{
"singleQuote": true,
"trailingComma": "all",
"arrowParens": "always"
"semi": false,
"singleQuote": true
}

42
api/services/appstore/[query].ts
View File

@ -1,39 +1,39 @@
import {send, sendError, fetch} from '../../../util/http';
import {NowRequest, NowResponse} from '@vercel/node';
import { send, sendError, fetch } from '../../../util/http'
import { NowRequest, NowResponse } from '@vercel/node'
interface App {
trackId: string;
trackName: string;
kind: string;
version: string;
price: string;
trackViewUrl: string;
trackId: string
trackName: string
kind: string
version: string
price: string
trackViewUrl: string
}
interface AppStoreResponse {
results: App[];
results: App[]
}
export default async function handler(
req: NowRequest,
res: NowResponse,
res: NowResponse
): Promise<void> {
const {query, country} = req.query;
const { query, country } = req.query
if (!query || typeof query !== 'string') {
return sendError(res, new Error('No query given'));
return sendError(res, new Error('No query given'))
}
const term = encodeURIComponent(query);
const countryCode = country || 'us';
const limit = 10;
const term = encodeURIComponent(query)
const countryCode = country || 'us'
const limit = 10
try {
const response = await fetch(
`https://itunes.apple.com/search?media=software&entity=software,iPadSoftware,macSoftware&country=${countryCode}&limit=${limit}&term=${term}`,
'GET',
);
const body: AppStoreResponse = await response.json();
'GET'
)
const body: AppStoreResponse = await response.json()
const apps = body.results.map((app) => ({
id: app.trackId,
name: app.trackName,
@ -41,9 +41,9 @@ export default async function handler(
version: app.version,
price: app.price,
viewURL: app.trackViewUrl,
}));
send(res, {result: apps || []});
}))
send(res, { result: apps || [] })
} catch (err) {
sendError(res, err);
sendError(res, err)
}
}

24
api/services/debian/[query].ts
View File

@ -1,29 +1,29 @@
import {send, sendError, fetch} from '../../../util/http';
import {NowRequest, NowResponse} from '@vercel/node';
import { send, sendError, fetch } from '../../../util/http'
import { NowRequest, NowResponse } from '@vercel/node'
export default async function handler(
req: NowRequest,
res: NowResponse,
res: NowResponse
): Promise<void> {
const {query} = req.query;
const { query } = req.query
if (!query || typeof query !== 'string') {
return sendError(res, new Error('No query given'));
return sendError(res, new Error('No query given'))
}
if (/[^a-zA-Z0-9_-]/.test(query)) {
return sendError(res, new Error('Invalid characters'));
return sendError(res, new Error('Invalid characters'))
}
try {
const response = await fetch(
`https://packages.debian.org/buster/${encodeURIComponent(query)}`,
'GET',
);
const body = await response.text();
const availability = body.includes('No such package');
send(res, {availability});
'GET'
)
const body = await response.text()
const availability = body.includes('No such package')
send(res, { availability })
} catch (err) {
sendError(res, err);
sendError(res, err)
}
}

30
api/services/dns/[query].ts
View File

@ -1,34 +1,34 @@
import dns from 'dns';
import {send, sendError} from '../../../util/http';
import {NowRequest, NowResponse} from '@vercel/node';
import dns from 'dns'
import { send, sendError } from '../../../util/http'
import { NowRequest, NowResponse } from '@vercel/node'
function resolvePromise(hostname: string): Promise<string[]> {
return new Promise((resolve, reject) => {
dns.resolve4(hostname, function (err, addresses) {
if (err) return reject(err);
resolve(addresses);
});
});
if (err) return reject(err)
resolve(addresses)
})
})
}
export default async function handler(
req: NowRequest,
res: NowResponse,
res: NowResponse
): Promise<void> {
const {query} = req.query;
const { query } = req.query
if (!query || typeof query !== 'string') {
return sendError(res, new Error('No query given'));
return sendError(res, new Error('No query given'))
}
try {
const response = await resolvePromise(query);
const availability = response && response.length > 0 ? false : true;
send(res, {availability});
const response = await resolvePromise(query)
const availability = response && response.length > 0 ? false : true
send(res, { availability })
} catch (err) {
if (err.code === 'ENODATA' || err.code === 'ENOTFOUND') {
return send(res, {availability: true});
return send(res, { availability: true })
}
sendError(res, err);
sendError(res, err)
}
}

20
api/services/domain/[query].ts
View File

@ -1,22 +1,22 @@
import whois from 'whois-json';
import {send, sendError} from '../../../util/http';
import {NowRequest, NowResponse} from '@vercel/node';
import whois from 'whois-json'
import { send, sendError } from '../../../util/http'
import { NowRequest, NowResponse } from '@vercel/node'
export default async function handler(
req: NowRequest,
res: NowResponse,
res: NowResponse
): Promise<void> {
const {query} = req.query;
const { query } = req.query
if (!query || typeof query !== 'string') {
return sendError(res, new Error('No query given'));
return sendError(res, new Error('No query given'))
}
try {
const response = await whois(query, {follow: 3, verbose: true});
const availability = response[0].data.domainName ? false : true;
send(res, {availability});
const response = await whois(query, { follow: 3, verbose: true })
const availability = response[0].data.domainName ? false : true
send(res, { availability })
} catch (err) {
sendError(res, err);
sendError(res, err)
}
}

26
api/services/existence/[query].ts
View File

@ -1,30 +1,30 @@
import isURL from 'validator/lib/isURL';
import {send, sendError, fetch} from '../../../util/http';
import {NowRequest, NowResponse} from '@vercel/node';
import isURL from 'validator/lib/isURL'
import { send, sendError, fetch } from '../../../util/http'
import { NowRequest, NowResponse } from '@vercel/node'
export default async function handler(
req: NowRequest,
res: NowResponse,
res: NowResponse
): Promise<void> {
const {query} = req.query;
const { query } = req.query
if (!query || typeof query !== 'string') {
return sendError(res, new Error('no query given'));
return sendError(res, new Error('no query given'))
}
if (!isURL(query)) {
return sendError(res, new Error('Invalid URL: ' + query));
return sendError(res, new Error('Invalid URL: ' + query))
}
try {
const response = await fetch(`https://${query}`);
const availability = response.status === 404;
send(res, {availability});
const response = await fetch(`https://${query}`)
const availability = response.status === 404
send(res, { availability })
} catch (err) {
console.log(err.code);
console.log(err.code)
if (err.code === 'ENOTFOUND') {
return send(res, {availability: true});
return send(res, { availability: true })
}
sendError(res, err);
sendError(res, err)
}
}

22
api/services/gitlab/[query].ts
View File

@ -1,28 +1,28 @@
import {send, sendError} from '../../../util/http';
import {NowRequest, NowResponse} from '@vercel/node';
import nodeFetch from 'node-fetch';
import { send, sendError } from '../../../util/http'
import { NowRequest, NowResponse } from '@vercel/node'
import nodeFetch from 'node-fetch'
export default async function handler(
req: NowRequest,
res: NowResponse,
res: NowResponse
): Promise<void> {
const {query} = req.query;
const { query } = req.query
if (!query || typeof query !== 'string') {
return sendError(res, new Error('No query given'));
return sendError(res, new Error('No query given'))
}
if (/[^a-zA-Z0-9_-]/.test(query)) {
return sendError(res, new Error('Invalid characters'));
return sendError(res, new Error('Invalid characters'))
}
try {
const response = await nodeFetch(`https://gitlab.com/${query}`, {
redirect: 'manual',
});
const availability = response.status === 302;
send(res, {availability});
})
const availability = response.status === 302
send(res, { availability })
} catch (err) {
sendError(res, err);
sendError(res, err)
}
}

24
api/services/launchpad/[query].ts
View File

@ -1,30 +1,30 @@
import {send, sendError, fetch} from '../../../util/http';
import {NowRequest, NowResponse} from '@vercel/node';
import { send, sendError, fetch } from '../../../util/http'
import { NowRequest, NowResponse } from '@vercel/node'
export default async function handler(
req: NowRequest,
res: NowResponse,
res: NowResponse
): Promise<void> {
const {query} = req.query;
const { query } = req.query
if (!query || typeof query !== 'string') {
return sendError(res, new Error('No query given'));
return sendError(res, new Error('No query given'))
}
if (/[^a-zA-Z0-9_-]/.test(query)) {
return sendError(res, new Error('Invalid characters'));
return sendError(res, new Error('Invalid characters'))
}
try {
const response = await fetch(
`https://api.launchpad.net/devel/ubuntu/+source/${encodeURIComponent(
query,
query
)}`,
'GET',
);
const availability = response.status !== 200;
send(res, {availability});
'GET'
)
const availability = response.status !== 200
send(res, { availability })
} catch (err) {
sendError(res, err);
sendError(res, err)
}
}

20
api/services/npm-org/[query].ts
View File

@ -1,24 +1,24 @@
import npmName from 'npm-name';
import {send, sendError} from '../../../util/http';
import {NowRequest, NowResponse} from '@vercel/node';
import npmName from 'npm-name'
import { send, sendError } from '../../../util/http'
import { NowRequest, NowResponse } from '@vercel/node'
export default async function handler(
req: NowRequest,
res: NowResponse,
res: NowResponse
): Promise<void> {
const {query} = req.query;
const { query } = req.query
if (!query || typeof query !== 'string') {
return sendError(res, new Error('No query given'));
return sendError(res, new Error('No query given'))
}
try {
const availability = await npmName(`@${query}`);
send(res, {availability});
const availability = await npmName(`@${query}`)
send(res, { availability })
} catch (err) {
if (err.code === 'ENOTFOUND') {
return send(res, {availability: true});
return send(res, { availability: true })
}
sendError(res, err);
sendError(res, err)
}
}

18
api/services/npm/[query].ts
View File

@ -1,21 +1,21 @@
import npmName from 'npm-name';
import {send, sendError} from '../../../util/http';
import {NowRequest, NowResponse} from '@vercel/node';
import npmName from 'npm-name'
import { send, sendError } from '../../../util/http'
import { NowRequest, NowResponse } from '@vercel/node'
export default async function handler(
req: NowRequest,
res: NowResponse,
res: NowResponse
): Promise<void> {
const {query} = req.query;
const { query } = req.query
if (!query || typeof query !== 'string') {
return sendError(res, new Error('No query given'));
return sendError(res, new Error('No query given'))
}
try {
const availability = await npmName(query);
send(res, {availability});
const availability = await npmName(query)
send(res, { availability })
} catch (err) {
sendError(res, err);
sendError(res, err)
}
}

40
api/services/nta/[query].ts
View File

@ -1,42 +1,42 @@
import {send, sendError, fetch} from '../../../util/http';
import {NowRequest, NowResponse} from '@vercel/node';
import { send, sendError, fetch } from '../../../util/http'
import { NowRequest, NowResponse } from '@vercel/node'
const APPLICATION_ID = process.env.NTA_APPLICATION_ID;
const APPLICATION_ID = process.env.NTA_APPLICATION_ID
export default async function handler(
req: NowRequest,
res: NowResponse,
res: NowResponse
): Promise<void> {
const {query} = req.query;
const { query } = req.query
if (!query || typeof query !== 'string') {
return sendError(res, new Error('No query given'));
return sendError(res, new Error('No query given'))
}
const encodedQuery = encodeURIComponent(
query.replace(/[A-Za-z0-9]/g, (str) =>
String.fromCharCode(str.charCodeAt(0) + 0xfee0),
),
);
String.fromCharCode(str.charCodeAt(0) + 0xfee0)
)
)
try {
const response = await fetch(
`https://api.houjin-bangou.nta.go.jp/4/name?id=${APPLICATION_ID}&name=${encodedQuery}&mode=1&target=1&type=02`,
'GET',
);
const body: string[] = (await response.text()).split('\n').slice(0, -1);
'GET'
)
const body: string[] = (await response.text()).split('\n').slice(0, -1)
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const header = body.shift()!.split(',');
const header = body.shift()!.split(',')
const result = body.map((csv) => {
const entry = csv.split(',').map((item) =>
item
.replace(/(^"|"$)/g, '')
.replace(/[Ａ-Ｚａ-ｚ０-９]/g, (str) =>
String.fromCharCode(str.charCodeAt(0) - 0xfee0),
String.fromCharCode(str.charCodeAt(0) - 0xfee0)
)
// eslint-disable-next-line no-irregular-whitespace
.replace(/　/g, ' '),
);
.replace(/　/g, ' ')
)
return {
index: entry[0],
@ -73,8 +73,8 @@ export default async function handler(
excluded: entry[29],
processSection: entry[2],
modifiedSection: entry[3],
};
});
}
})
send(res, {
meta: {
@ -91,8 +91,8 @@ export default async function handler(
englishName: entry.englishName,
}))
.slice(10) || [],
});
})
} catch (err) {
sendError(res, err);
sendError(res, err)
}
}

22
api/services/slack/[query].ts
View File

@ -1,27 +1,27 @@
import {send, sendError, fetch} from '../../../util/http';
import {NowRequest, NowResponse} from '@vercel/node';
import { send, sendError, fetch } from '../../../util/http'
import { NowRequest, NowResponse } from '@vercel/node'
export default async function handler(
req: NowRequest,
res: NowResponse,
res: NowResponse
): Promise<void> {
const {query} = req.query;
const { query } = req.query
if (!query || typeof query !== 'string') {
return sendError(res, new Error('No query given'));
return sendError(res, new Error('No query given'))
}
if (/[^a-zA-Z0-9_-]/.test(query)) {
return sendError(res, new Error('Invalid characters'));
return sendError(res, new Error('Invalid characters'))
}
try {
const response = await fetch(
`https://${encodeURIComponent(query)}.slack.com`,
);
const availability = response.status !== 200;
send(res, {availability});
`https://${encodeURIComponent(query)}.slack.com`
)
const availability = response.status !== 200
send(res, { availability })
} catch (err) {
sendError(res, err);
sendError(res, err)
}
}

26
api/services/spectrum/[query].ts
View File

@ -1,31 +1,31 @@
import {send, sendError, fetch} from '../../../util/http';
import {NowRequest, NowResponse} from '@vercel/node';
import { send, sendError, fetch } from '../../../util/http'
import { NowRequest, NowResponse } from '@vercel/node'
export default async function handler(
req: NowRequest,
res: NowResponse,
res: NowResponse
): Promise<void> {
const {query} = req.query;
const { query } = req.query
if (!query || typeof query !== 'string') {
return sendError(res, new Error('No query given'));
return sendError(res, new Error('No query given'))
}
if (/[^a-zA-Z0-9_-]/.test(query)) {
return sendError(res, new Error('Invalid characters'));
return sendError(res, new Error('Invalid characters'))
}
try {
const response = await fetch(
`https://spectrum.chat/${encodeURIComponent(query)}`,
'GET',
);
const body = await response.text();
'GET'
)
const body = await response.text()
const availability = body.includes(
'You may be trying to view something that is deleted',
);
send(res, {availability});
'You may be trying to view something that is deleted'
)
send(res, { availability })
} catch (err) {
sendError(res, err);
sendError(res, err)
}
}

22
api/services/twitter/[query].ts
View File

@ -1,28 +1,28 @@
import { NowRequest, NowResponse } from '@vercel/node';
import { fetch, send, sendError } from '../../../util/http';
import { NowRequest, NowResponse } from '@vercel/node'
import { fetch, send, sendError } from '../../../util/http'
export default async function handler(
req: NowRequest,
res: NowResponse,
res: NowResponse
): Promise<void> {
const { query } = req.query;
const { query } = req.query
if (!query || typeof query !== 'string') {
return sendError(res, new Error('No query given'));
return sendError(res, new Error('No query given'))
}
if (/[^a-zA-Z0-9_]/.test(query)) {
return sendError(res, new Error('Invalid characters'));
return sendError(res, new Error('Invalid characters'))
}
try {
const response = await fetch(
`https://api.twitter.com/i/users/username_available.json?username=${query}`,
'GET',
).then((res) => res.json());
const availability = response.valid;
send(res, { availability });
'GET'
).then((res) => res.json())
const availability = response.valid
send(res, { availability })
} catch (err) {
sendError(res, err);
sendError(res, err)
}
}

6
public/index.html
View File

@ -59,5 +59,11 @@
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script
async
defer
data-website-id="8d3a7603-b5f6-4a94-9c19-344cc57dfd52"
src="https://umami.uechi.io/umami.js"
></script>
</body>
</html>

20
src/App.test.tsx
View File

@ -1,8 +1,8 @@
import { render } from '@testing-library/react';
import 'mutationobserver-shim';
import React, { Suspense } from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';
import { render } from '@testing-library/react'
import 'mutationobserver-shim'
import React, { Suspense } from 'react'
import { BrowserRouter as Router } from 'react-router-dom'
import App from './App'
it('renders welcome message', async () => {
const { findByText } = render(
@ -10,8 +10,8 @@ it('renders welcome message', async () => {
<Router>
<App />
</Router>
</Suspense>,
);
const text = await findByText('Grab a slick name for your new app');
expect(text).toBeTruthy();
});
</Suspense>
)
const text = await findByText('Grab a slick name for your new app')
expect(text).toBeTruthy()
})

20
src/App.tsx
View File

@ -1,14 +1,14 @@
import React from 'react';
import { Redirect, Route, Switch } from 'react-router-dom';
import Footer from './components/Footer';
import Home from './pages/Home';
import Search from './pages/Search';
import { GlobalStyle } from './theme';
import { useOpenSearch } from './util/hooks';
import { isStandalone } from './util/pwa';
import React from 'react'
import { Redirect, Route, Switch } from 'react-router-dom'
import Footer from './components/Footer'
import Home from './pages/Home'
import Search from './pages/Search'
import { GlobalStyle } from './theme'
import { useOpenSearch } from './util/hooks'
import { isStandalone } from './util/pwa'
export default function App() {
const OpenSearch = useOpenSearch('/opensearch.xml');
const OpenSearch = useOpenSearch('/opensearch.xml')
return (
<>
@ -31,5 +31,5 @@ export default function App() {
{!isStandalone() && <Footer />}
</>
);
)
}

60
src/components/Contributors.tsx
View File

@ -1,38 +1,38 @@
import React from 'react';
import styled from 'styled-components';
import useSWR from 'swr';
import React from 'react'
import styled from 'styled-components'
import useSWR from 'swr'
export interface Contributors {
projectName: string;
projectOwner: string;
repoType: string;
repoHost: string;
files: string[];
imageSize: number;
commit: boolean;
commitConvention: string;
contributors: Contributor[];
contributorsPerLine: number;
skipCi: boolean;
projectName: string
projectOwner: string
repoType: string
repoHost: string
files: string[]
imageSize: number
commit: boolean
commitConvention: string
contributors: Contributor[]
contributorsPerLine: number
skipCi: boolean
}
export interface Contributor {
login: string;
name: string;
avatar_url: string;
profile: string;
contributions: string[];
login: string
name: string
avatar_url: string
profile: string
contributions: string[]
}
const fetcher = (url: string) => fetch(url).then((r) => r.json());
const fetcher = (url: string) => fetch(url).then((r) => r.json())
const Contributors: React.FC = () => {
const { data } = useSWR<Contributors>(
'https://raw.githubusercontent.com/uetchy/namae/master/.all-contributorsrc',
fetcher,
);
fetcher
)
if (!data) return <Container>Loading</Container>;
if (!data) return <Container>Loading</Container>
return (
<Container>
@ -48,24 +48,24 @@ const Contributors: React.FC = () => {
</Item>
))}
</Container>
);
};
)
}
const Container = styled.div`
display: flex;
flex-direction: row;
`;
`
const Item = styled.div`
margin-left: 10px;
:first-child {
margin-left: 0;
}
`;
`
const avatarSize = 32;
const avatarSize = 32
const Avatar = styled.img.attrs({ width: avatarSize, height: avatarSize })`
border-radius: ${avatarSize}px;
`;
`
export default Contributors;
export default Contributors

62
src/components/Footer.tsx
View File

@ -1,12 +1,12 @@
import React from 'react';
import { OutboundLink } from 'react-ga';
import { useTranslation } from 'react-i18next';
import { FaGithub, FaProductHunt, FaTwitter } from 'react-icons/fa';
import { GoHeart } from 'react-icons/go';
import styled from 'styled-components';
import { Section } from '../theme';
import { tablet } from '../util/css';
import Contributors from '../components/Contributors';
import React from 'react'
import { OutboundLink } from 'react-ga'
import { useTranslation } from 'react-i18next'
import { FaGithub, FaProductHunt, FaTwitter } from 'react-icons/fa'
import { GoHeart } from 'react-icons/go'
import styled from 'styled-components'
import { Section } from '../theme'
import { tablet } from '../util/css'
import Contributors from '../components/Contributors'
const Footer: React.FC = () => {
return (
@ -15,12 +15,12 @@ const Footer: React.FC = () => {
<Community />
<About />
</Container>
);
};
export default Footer;
)
}
export default Footer
const Languages = () => {
const { t } = useTranslation();
const { t } = useTranslation()
return (
<Pane>
@ -46,11 +46,11 @@ const Languages = () => {
</li>
</ul>
</Pane>
);
};
)
}
const Community = () => {
const { t } = useTranslation();
const { t } = useTranslation()
return (
<Pane>
@ -92,11 +92,11 @@ const Community = () => {
<Contributors />
</Box>
</Pane>
);
};
)
}
const About = () => {
const { t } = useTranslation();
const { t } = useTranslation()
return (
<Pane>
@ -120,7 +120,7 @@ const About = () => {
<Links>
<OutboundLink
to={`https://twitter.com/intent/tweet?text=${encodeURIComponent(
`namae — ${t('title')}`,
`namae — ${t('title')}`
)}&url=${encodeURIComponent('https://namae.dev')}`}
eventLabel="Tweet"
aria-label="Tweet this page"
@ -158,8 +158,8 @@ const About = () => {
</Links>
</ShareBox>
</Pane>
);
};
)
}
const Container = styled(Section)`
--text: #bdbdbd;
@ -187,7 +187,7 @@ const Container = styled(Section)`
${tablet} {
flex-direction: column;
}
`;
`
const Pane = styled.div`
font-size: 1rem;
@ -195,19 +195,19 @@ const Pane = styled.div`
${tablet} {
margin-bottom: 50px;
}
`;
`
const Box = styled.div`
margin: 15px 0;
`;
`
const Title = styled.h3`
margin-bottom: 15px;
`;
`
const Subtitle = styled.h4`
margin-bottom: 12px;
`;
`
const Links = styled.div`
display: flex;
@ -216,7 +216,7 @@ const Links = styled.div`
a {
margin-right: 10px;
}
`;
`
const ShareBox = styled.div`
margin-top: 15px;
@ -224,10 +224,10 @@ const ShareBox = styled.div`
font-size: 1.5rem;
display: flex;
align-items: center;
`;
`
const Bold = styled.span`
font-weight: bold;
`;
`
const SponsorBadge = styled.div`
padding: 5px 13px 5px 10px;
@ -252,4 +252,4 @@ const SponsorBadge = styled.div`
color: rgb(236, 69, 171);
margin-right: 5px;
}
`;
`

76
src/components/Form.tsx
View File

@ -1,55 +1,55 @@
import React, { useState, useRef, useEffect } from 'react';
import styled from 'styled-components';
import { useTranslation } from 'react-i18next';
import { Link, useHistory } from 'react-router-dom';
import { sanitize } from '../util/text';
import { sendQueryEvent } from '../util/analytics';
import { mobile } from '../util/css';
import Suggestion from './Suggestion';
import { useDeferredState } from '../util/hooks';
import React, { useState, useRef, useEffect } from 'react'
import styled from 'styled-components'
import { useTranslation } from 'react-i18next'
import { Link, useHistory } from 'react-router-dom'
import { sanitize } from '../util/text'
import { sendQueryEvent } from '../util/analytics'
import { mobile } from '../util/css'
import Suggestion from './Suggestion'
import { useDeferredState } from '../util/hooks'
const Form: React.FC<{
initialValue?: string;
initialValue?: string
}> = ({ initialValue = '' }) => {
const history = useHistory();
const [inputValue, setInputValue] = useState(initialValue);
const [suggestionQuery, setSuggestionQuery] = useDeferredState(800, '');
const [suggested, setSuggested] = useState(false);
const inputRef = useRef<HTMLInputElement>(null);
const { t } = useTranslation();
const history = useHistory()
const [inputValue, setInputValue] = useState(initialValue)
const [suggestionQuery, setSuggestionQuery] = useDeferredState(800, '')
const [suggested, setSuggested] = useState(false)
const inputRef = useRef<HTMLInputElement>(null)
const { t } = useTranslation()
function search(query: string) {
sendQueryEvent(sanitize(query));
history.push(`/s/${query}`);
sendQueryEvent(sanitize(query))
history.push(`/s/${query}`)
}
// set input value
function onInputChange(e: React.FormEvent<HTMLInputElement>): void {
setInputValue(e.currentTarget.value);
setInputValue(e.currentTarget.value)
}
// invoke when user clicked one of the suggested items
function onSuggestionCompleted(name: string): void {
setInputValue(name);
search(name);
setSuggested(true);
setInputValue(name)
search(name)
setSuggested(true)
}
function onSubmitQuery(e: React.FormEvent) {
e.preventDefault();
inputRef.current!.blur();
e.preventDefault()
inputRef.current!.blur()
if (!inputValue || inputValue === '') {
return;
return
}
search(inputValue);
search(inputValue)
}
useEffect(() => {
const modifiedValue = sanitize(inputValue);
setSuggestionQuery(modifiedValue);
}, [inputValue, setSuggestionQuery]);
const modifiedValue = sanitize(inputValue)
setSuggestionQuery(modifiedValue)
}, [inputValue, setSuggestionQuery])
const queryGiven = suggestionQuery && suggestionQuery !== '';
const queryGiven = suggestionQuery && suggestionQuery !== ''
return (
<InputContainer>
@ -71,10 +71,10 @@ const Form: React.FC<{
<Suggestion onSubmit={onSuggestionCompleted} query={suggestionQuery} />
) : null}
</InputContainer>
);
};
)
}
export default Form;
export default Form
const InputContainer = styled.div`
display: flex;
@ -91,7 +91,7 @@ const InputContainer = styled.div`
transform: translateY(20px);
border-radius: 30px;
}
`;
`
const InputHeader = styled.div`
display: flex;
@ -99,7 +99,7 @@ const InputHeader = styled.div`
align-items: center;
justify-content: center;
margin: 12px 0 5px 0;
`;
`
const Logo = styled(Link)`
cursor: pointer;
@ -107,7 +107,7 @@ const Logo = styled(Link)`
${mobile} {
font-size: 15px;
}
`;
`
const LogoImage = styled.img`
width: 140px;
@ -115,7 +115,7 @@ const LogoImage = styled.img`
${mobile} {
width: 90px;
}
`;
`
const InputView = styled.input.attrs({
type: 'search',
@ -141,4 +141,4 @@ const InputView = styled.input.attrs({
::placeholder {
color: #c8cdda;
}
`;
`

10
src/components/Icons.tsx
View File

@ -1,4 +1,4 @@
import React from 'react';
import React from 'react'
export const SpectrumIcon: React.FC = () => (
<svg
@ -12,7 +12,7 @@ export const SpectrumIcon: React.FC = () => (
>
<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: React.FC = () => (
<svg
@ -28,7 +28,7 @@ export const NowIcon: React.FC = () => (
<polygon id="Logotype---Black" points="350 150 407 250 293 250"></polygon>
</g>
</svg>
);
)
export const NetlifyIcon: React.FC = () => (
<svg
@ -45,7 +45,7 @@ export const NetlifyIcon: React.FC = () => (
>
<path d="M185.532 88.839l-.094-.04a.396.396 0 0 1-.154-.087a.734.734 0 0 1-.187-.621l5.167-31.553l24.229 24.209l-25.198 10.709a.555.555 0 0 1-.22.04h-.101a.694.694 0 0 1-.134-.114a11.468 11.468 0 0 0-3.308-2.543zm35.144-1.923l25.906 25.878c5.38 5.381 8.075 8.065 9.057 11.177c.147.46.267.921.361 1.395l-61.913-26.192a4.868 4.868 0 0 0-.1-.04c-.248-.1-.535-.214-.535-.467c0-.254.294-.374.541-.474l.08-.034l26.603-11.243zm34.268 46.756c-1.337 2.51-3.944 5.114-8.355 9.527l-29.209 29.17l-37.777-7.858l-.2-.04c-.335-.054-.689-.114-.689-.414a11.387 11.387 0 0 0-4.378-7.965c-.154-.154-.113-.394-.067-.615c0-.033 0-.066.014-.093l7.105-43.571l.026-.147c.04-.334.1-.721.401-.721a11.566 11.566 0 0 0 7.754-4.44c.06-.067.1-.14.18-.18c.214-.1.468 0 .689.093l64.5 27.254h.006zm-44.28 45.407l-48.031 47.978l8.22-50.475l.014-.067a.905.905 0 0 1 .04-.193c.067-.16.24-.227.408-.294l.08-.034c1.8-.767 3.392-1.95 4.646-3.451c.16-.187.354-.368.601-.401c.064-.01.13-.01.194 0l33.82 6.944l.007-.007zm-58.198 58.133l-5.414 5.408l-59.854-86.408a2.831 2.831 0 0 0-.067-.094c-.093-.127-.194-.253-.173-.4c.006-.107.073-.2.147-.28l.066-.087c.18-.268.335-.535.502-.822l.133-.233l.02-.02c.094-.16.18-.314.341-.401c.14-.067.335-.04.488-.007l66.311 13.66c.186.03.36.105.508.22c.087.088.107.181.127.288a11.735 11.735 0 0 0 6.871 7.845c.187.093.107.3.02.52a1.588 1.588 0 0 0-.1.301c-.835 5.074-8 48.726-9.926 60.51zm-11.309 11.29c-3.99 3.946-6.343 6.035-9.003 6.877a13.382 13.382 0 0 1-8.06 0c-3.115-.989-5.809-3.672-11.19-9.054l-60.108-60.042l15.7-24.323a1 1 0 0 1 .268-.314c.167-.12.408-.066.608 0a16.285 16.285 0 0 0 10.948-.554c.18-.066.361-.113.502.014c.07.064.133.135.187.213l60.148 87.19v-.007zm-94.156-68.008l-13.789-13.773l27.23-11.604a.562.562 0 0 1 .221-.047c.227 0 .361.227.481.434c.274.42.564.83.87 1.229l.086.106c.08.114.027.227-.053.334l-15.04 23.321h-.006zM27.11 160.625L9.665 143.199c-2.968-2.964-5.12-5.114-6.617-6.963l53.043 10.99l.2.033c.328.053.69.113.69.42c0 .334-.395.488-.73.614l-.153.067l-28.988 12.265zM0 127.275a13.34 13.34 0 0 1 .602-3.304c.989-3.112 3.676-5.796 9.063-11.177l22.324-22.3a14524.43 14524.43 0 0 0 30.92 44.647c.18.24.38.507.174.707c-.976 1.075-1.952 2.25-2.64 3.526c-.075.163-.19.306-.335.413c-.087.054-.18.034-.28.014h-.014L0 127.269v.007zm37.965-42.75l30.017-29.984c2.82 1.235 13.087 5.568 22.27 9.44c6.952 2.939 13.288 5.61 15.28 6.477c.2.08.381.16.468.36c.053.12.027.274 0 .401a13.363 13.363 0 0 0 3.496 12.205c.2.2 0 .487-.174.734l-.094.14l-30.478 47.157c-.08.134-.154.247-.288.334c-.16.1-.387.053-.575.007a15.215 15.215 0 0 0-3.629-.494c-1.096 0-2.286.2-3.489.42h-.007c-.133.02-.254.047-.36-.033a1.403 1.403 0 0 1-.301-.34L37.965 84.525zm36.08-36.04l38.86-38.817c5.38-5.375 8.074-8.065 11.188-9.047a13.382 13.382 0 0 1 8.061 0c3.115.982 5.808 3.672 11.189 9.047l8.422 8.413l-27.638 42.756a1.035 1.035 0 0 1-.274.32c-.167.114-.401.067-.602 0a14.028 14.028 0 0 0-12.833 2.471c-.18.187-.448.08-.675-.02c-3.61-1.569-31.682-13.42-35.699-15.122zm83.588-24.542l25.52 25.49l-6.15 38.044v.1a.9.9 0 0 1-.053.254c-.067.133-.201.16-.335.2a12.237 12.237 0 0 0-3.662 1.823a1.029 1.029 0 0 0-.134.113c-.074.08-.147.154-.267.167a.763.763 0 0 1-.288-.047l-38.887-16.504l-.073-.034c-.248-.1-.542-.22-.542-.474a14.664 14.664 0 0 0-2.072-6.109c-.187-.307-.394-.627-.234-.941l27.177-42.082zM131.352 81.4l36.454 15.423c.2.093.421.18.508.387a.707.707 0 0 1 0 .38c-.107.535-.2 1.142-.2 1.757v1.021c0 .254-.261.36-.502.46l-.073.027c-5.775 2.464-81.076 34.538-81.19 34.538c-.113 0-.234 0-.347-.113c-.2-.2 0-.48.18-.735l.094-.133l29.957-46.335l.053-.08c.174-.281.375-.595.696-.595l.3.047c.682.093 1.284.18 1.892.18c4.545 0 8.756-2.21 11.296-5.989c.06-.1.137-.19.227-.267c.18-.133.448-.066.655.027zm-41.748 61.324l82.079-34.965s.12 0 .234.114c.447.447.828.747 1.196 1.028l.18.113c.168.094.335.2.348.374c0 .067 0 .107-.013.167l-7.032 43.144l-.027.174c-.046.333-.093.714-.407.714a11.558 11.558 0 0 0-9.177 5.655l-.034.053c-.093.154-.18.3-.334.38c-.14.068-.32.041-.468.008l-65.455-13.487c-.067-.013-1.016-3.465-1.09-3.472z" />
</svg>
);
)
export const OcamlIcon: React.FC = () => (
<svg
@ -96,4 +96,4 @@ export const OcamlIcon: React.FC = () => (
/>
</g>
</svg>
);
)

112
src/components/Suggestion.tsx
View File

@ -1,22 +1,22 @@
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 { motion } from 'framer-motion';
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 { motion } from 'framer-motion'
import { capitalize, stem, germanify, njoin, lower, upper } from '../util/text';
import { sampleFromArray, fillArray } from '../util/array';
import { mobile, slideUp } from '../util/css';
import { sanitize } from '../util/text';
import { capitalize, stem, germanify, njoin, lower, upper } from '../util/text'
import { sampleFromArray, fillArray } from '../util/array'
import { mobile, slideUp } from '../util/css'
import { sanitize } from '../util/text'
import {
sendShuffleSuggestionEvent,
sendAcceptSuggestionEvent,
} from '../util/analytics';
} from '../util/analytics'
type Modifier = (word: string) => string;
type Modifier = (word: string) => string
const maximumCount = 3;
const maximumCount = 3
const modifiers: Modifier[] = [
(word): string => `${capitalize(germanify(word))}`,
(word): string => `${capitalize(word)}`,
@ -144,83 +144,83 @@ const modifiers: Modifier[] = [
(word): string => njoin(capitalize(word), 'joy'),
(word): string => njoin(lower(word), 'lint', { elision: false }),
(word): string => njoin(lower(word), 'ly', { elision: false }),
];
]
function modifyWord(word: string): string {
return modifiers[Math.floor(Math.random() * modifiers.length)](word);
return modifiers[Math.floor(Math.random() * modifiers.length)](word)
}
async function findSynonyms(word: string): Promise<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[],
),
),
[] as string[]
)
)
)
.filter((word) => !/[\s-]/.exec(word))
.map((word) => sanitize(word));
return synonyms;
.map((word) => sanitize(word))
return synonyms
} catch (err) {
return [];
return []
}
}
const Suggestion: React.FC<{
query: string;
onSubmit: (name: string) => void;
query: string
onSubmit: (name: string) => void
}> = ({ query, onSubmit }) => {
const { t } = useTranslation();
const synonymRef = useRef<string[]>([]);
const [bestWords, setBestWords] = useState<string[]>([]);
const { t } = useTranslation()
const synonymRef = useRef<string[]>([])
const [bestWords, setBestWords] = useState<string[]>([])
function shuffle(): void {
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): void {
sendAcceptSuggestionEvent();
onSubmit(name);
sendAcceptSuggestionEvent()
onSubmit(name)
}
function onShuffleButtonClicked() {
sendShuffleSuggestionEvent();
shuffle();
sendShuffleSuggestionEvent()
shuffle()
}
useEffect(() => {
let isEffective = true;
let isEffective = true
const fn = async (): Promise<void> => {
if (query && query.length > 0) {
const synonyms = await findSynonyms(query);
const synonyms = await findSynonyms(query)
if (!isEffective) {
return;
return
}
synonymRef.current = [query, ...synonyms];
shuffle();
synonymRef.current = [query, ...synonyms]
shuffle()
}
};
fn();
}
fn()
return () => {
isEffective = false;
};
isEffective = false
}
// eslint-disable-next-line
}, [query]);
}, [query])
return (
<Container>
@ -241,10 +241,10 @@ const Suggestion: React.FC<{
<TiArrowSync />
</Button>
</Container>
);
};
)
}
export default Suggestion;
export default Suggestion
const Container = styled.div`
margin-top: 20px;
@ -258,7 +258,7 @@ const Container = styled.div`
${mobile} {
margin-top: 15px;
}
`;
`
const Title = styled.div`
padding: 0 10px;
@ -268,7 +268,7 @@ const Title = styled.div`
text-transform: uppercase;
font-size: 12px;
user-select: none;
`;
`
const Items = styled.div`
margin: 5px 0;
@ -281,7 +281,7 @@ const Items = styled.div`
flex-direction: column;
align-items: center;
}
`;
`
const Item = styled.div<{ delay: number }>`
margin: 10px 10px 0;
@ -305,7 +305,7 @@ const Item = styled.div<{ delay: number }>`
padding-bottom: 0;
font-size: 1rem;
}
`;
`
const Button = styled(motion.div).attrs({
whileHover: { scale: 1.1 },
@ -331,4 +331,4 @@ const Button = styled(motion.div).attrs({
&:active {
background: #a17ff5;
}
`;
`

50
src/components/Welcome.tsx
View File

@ -1,7 +1,7 @@
import React from 'react';
import styled from 'styled-components';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import React from 'react'
import styled from 'styled-components'
import { useTranslation } from 'react-i18next'
import { Link } from 'react-router-dom'
import {
FaMapSigns,
@ -18,13 +18,13 @@ import {
FaAws,
FaJsSquare,
FaBuilding,
} from 'react-icons/fa';
import { IoIosBeer } from 'react-icons/io';
import { DiRust, DiHeroku, DiFirebase } from 'react-icons/di';
} from 'react-icons/fa'
import { IoIosBeer } from 'react-icons/io'
import { DiRust, DiHeroku, DiFirebase } from 'react-icons/di'
import { SpectrumIcon, NowIcon, NetlifyIcon, OcamlIcon } from './Icons';
import { mobile } from '../util/css';
import { sendGettingStartedEvent } from '../util/analytics';
import { SpectrumIcon, NowIcon, NetlifyIcon, OcamlIcon } from './Icons'
import { mobile } from '../util/css'
import { sendGettingStartedEvent } from '../util/analytics'
const supportedProviders: Record<string, React.ReactNode> = {
domains: <FaMapSigns />,
@ -50,10 +50,10 @@ const supportedProviders: Record<string, React.ReactNode> = {
githubSearch: <FaGithub />,
appStore: <FaAppStore />,
nta: <FaBuilding />,
};
}
const Welcome: React.FC = () => {
const { t } = useTranslation();
const { t } = useTranslation()
return (
<Container>
@ -82,10 +82,10 @@ const Welcome: React.FC = () => {
<blockquote>Soon</blockquote>
</Section>
</Container>
);
};
)
}
export default Welcome;
export default Welcome
const Container = styled.div`
padding-bottom: 40px;
@ -97,7 +97,7 @@ const Container = styled.div`
text-align: left;
font-size: 1.1rem;
}
`;
`
const Section = styled.div`
padding: 100px 20vw;
@ -105,7 +105,7 @@ const Section = styled.div`
${mobile} {
padding: 60px 40px;
}
`;
`
const HighlightSection = styled.div`
padding: 100px 20vw;
@ -123,7 +123,7 @@ const HighlightSection = styled.div`
color: white;
/* background-image: linear-gradient(180deg, #a57bf3 0%, #4364e1 100%); */
background: #632bec;
`;
`
const Title = styled.h1`
line-height: 1.6em;
@ -133,23 +133,23 @@ const Title = styled.h1`
${mobile} {
font-size: 2.5em;
}
`;
`
const HeroTitle = styled(Title)`
padding-bottom: 30px;
line-height: 1em;
`;
`
const HeroText = styled.p`
font-size: 1.2em;
font-weight: 400;
line-height: 1.3em;
color: #3c3c3c;
`;
`
const ButtonContainer = styled.div`
margin: 10px 0 0 0;
`;
`
const List = styled.div`
display: flex;
@ -162,7 +162,7 @@ const List = styled.div`
${mobile} {
justify-content: flex-start;
}
`;
`
const ListItem = styled.div`
margin: 20px 25px;
@ -179,7 +179,7 @@ const ListItem = styled.div`
svg {
margin-right: 5px;
}
`;
`
const ListButton = styled.div`
margin: 10px 5px;
@ -204,4 +204,4 @@ const ListButton = styled.div`
background: black;
}
}
`;
`

192
src/components/cards/core.tsx
View File

@ -1,21 +1,21 @@
import useFetch from 'fetch-suspense';
import Tooltip from 'rc-tooltip';
import React, { Suspense, useEffect, useState } from 'react';
import { OutboundLink } from 'react-ga';
import { useTranslation } from 'react-i18next';
import { GoInfo } from 'react-icons/go';
import { IoIosFlash } from 'react-icons/io';
import BarLoader from 'react-spinners/BarLoader';
import styled from 'styled-components';
import { useStoreActions } from '../../store';
import { sendError, sendExpandEvent } from '../../util/analytics';
import { mobile } from '../../util/css';
import useFetch from 'fetch-suspense'
import Tooltip from 'rc-tooltip'
import React, { Suspense, useEffect, useState } from 'react'
import { OutboundLink } from 'react-ga'
import { useTranslation } from 'react-i18next'
import { GoInfo } from 'react-icons/go'
import { IoIosFlash } from 'react-icons/io'
import BarLoader from 'react-spinners/BarLoader'
import styled from 'styled-components'
import { useStoreActions } from '../../store'
import { sendError, sendExpandEvent } from '../../util/analytics'
import { mobile } from '../../util/css'
export const COLORS = {
available: '#6e00ff',
unavailable: 'darkgrey',
error: '#ff388b',
};
}
export const Card: React.FC<{ title: string }> = ({ title, children }) => {
return (
@ -25,25 +25,25 @@ export const Card: React.FC<{ title: string }> = ({ title, children }) => {
<ErrorHandler>{children}</ErrorHandler>
</CardContent>
</CardContainer>
);
};
)
}
export const Repeater: React.FC<{
items: string[];
moreItems?: string[];
children: (name: string) => React.ReactNode;
items: string[]
moreItems?: string[]
children: (name: string) => React.ReactNode
}> = ({ items = [], moreItems = [], children }) => {
const [revealAlternatives, setRevealAlternatives] = useState(false);
const { t } = useTranslation();
const [revealAlternatives, setRevealAlternatives] = useState(false)
const { t } = useTranslation()
function onClick() {
sendExpandEvent();
setRevealAlternatives(true);
sendExpandEvent()
setRevealAlternatives(true)
}
useEffect(() => {
setRevealAlternatives(false);
}, [items, moreItems]);
setRevealAlternatives(false)
}, [items, moreItems])
return (
<>
@ -60,38 +60,38 @@ export const Repeater: React.FC<{
<Button onClick={onClick}>{t('showMore')}</Button>
) : null}
</>
);
};
)
}
interface Response {
error?: string;
availability: boolean;
error?: string
availability: boolean
}
class APIError extends Error {
constructor(message?: string) {
super(message);
Object.setPrototypeOf(this, APIError.prototype);
super(message)
Object.setPrototypeOf(this, APIError.prototype)
}
}
class NotFoundError extends Error {
constructor(message?: string) {
super(message);
Object.setPrototypeOf(this, NotFoundError.prototype);
super(message)
Object.setPrototypeOf(this, NotFoundError.prototype)
}
}
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,
@ -104,19 +104,19 @@ export const DedicatedAvailability: React.FC<{
suffix = '',
icon,
}) => {
const increaseCounter = useStoreActions((actions) => actions.stats.add);
const increaseCounter = useStoreActions((actions) => actions.stats.add)
const response = useFetch(
`/api/services/${service}/${encodeURIComponent(query || name)}`,
) as Response;
`/api/services/${service}/${encodeURIComponent(query || name)}`
) as Response
if (response.error) {
throw new APIError(`${service}: ${response.error}`);
throw new APIError(`${service}: ${response.error}`)
}
useEffect(() => {
increaseCounter(response.availability);
increaseCounter(response.availability)
// eslint-disable-next-line
}, []);
}, [])
return (
<Result
@ -128,19 +128,19 @@ export const DedicatedAvailability: React.FC<{
suffix={suffix}
availability={response.availability}
/>
);
};
)
}
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 = '',
@ -152,19 +152,19 @@ export const ExistentialAvailability: React.FC<{
suffix = '',
icon,
}) => {
const increaseCounter = useStoreActions((actions) => actions.stats.add);
const response = useFetch(target, undefined, { metadata: true });
const increaseCounter = useStoreActions((actions) => actions.stats.add)
const response = useFetch(target, undefined, { metadata: true })
if (response.status !== 404 && response.status !== 200) {
throw new NotFoundError(`${name}: ${response.status}`);
throw new NotFoundError(`${name}: ${response.status}`)
}
const availability = response.status === 404;
const availability = response.status === 404
useEffect(() => {
increaseCounter(availability);
increaseCounter(availability)
// eslint-disable-next-line
}, []);
}, [])
return (
<Result
@ -176,17 +176,17 @@ export const ExistentialAvailability: React.FC<{
suffix={suffix}
availability={availability}
/>
);
};
)
}
export const Result: React.FC<{
title: string;
message?: string;
link?: string;
icon: React.ReactNode;
prefix?: string;
suffix?: string;
availability?: boolean;
title: string
message?: string
link?: string
icon: React.ReactNode
prefix?: string
suffix?: string
availability?: boolean
}> = ({
title,
message = '',
@ -202,13 +202,13 @@ export const Result: React.FC<{
{title}
{suffix}
</>
);
)
const itemColor =
availability === undefined
? 'inherit'
: availability
? COLORS.available
: COLORS.unavailable;
: COLORS.unavailable
return (
<ResultContainer>
<Tooltip overlay={message} placement="top" trigger={['hover']}>
@ -235,8 +235,8 @@ export const Result: React.FC<{
</ResultItem>
</Tooltip>
</ResultContainer>
);
};
)
}
// 1. getDerivedStateFromError
// 2. render()
@ -247,23 +247,23 @@ class ErrorBoundary extends React.Component<
{ hasError: boolean; message: string; eventId?: string }
> {
constructor(props: {}) {
super(props);
this.state = { hasError: false, message: '', eventId: undefined };
super(props)
this.state = { hasError: false, message: '', eventId: undefined }
}
// used in SSR
static getDerivedStateFromError(error: Error) {
return { hasError: true, message: error.message };
return { hasError: true, message: error.message }
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
componentDidCatch(error: Error, errorInfo: any) {
if (error instanceof APIError || error instanceof NotFoundError) {
return;
return
}
sendError(error, errorInfo).then((eventId) => {
this.setState({ eventId });
});
this.setState({ eventId })
})
}
render() {
@ -285,9 +285,9 @@ class ErrorBoundary extends React.Component<
</ResultItem>
</Tooltip>
</ResultContainer>
);
)
}
return this.props.children;
return this.props.children
}
}
@ -303,7 +303,7 @@ const ErrorHandler: React.FC = ({ children }) => (
{children}
</Suspense>
</ErrorBoundary>
);
)
const CardContainer = styled.div`
padding: 40px;
@ -314,7 +314,7 @@ const CardContainer = styled.div`
margin-bottom: 40px;
padding: 0px;
}
`;
`
const CardTitle = styled.div`
margin-bottom: 15px;
@ -327,7 +327,7 @@ const CardTitle = styled.div`
font-size: 1.2rem;
font-weight: 600;
}
`;
`
const CardContent = styled.div`
border-radius: 2px;
@ -339,7 +339,7 @@ const CardContent = styled.div`
border-radius: 0;
font-size: 1.2em;
}
`;
`
const Button = styled.div`
margin-top: 5px;
@ -350,17 +350,17 @@ const Button = styled.div`
cursor: pointer;
font-family: monospace;
font-size: 0.8em;
`;
`
const ResultContainer = styled.div`
display: flex;
align-items: center;
padding: 4px 0;
`;
`
export const ResultIcon = styled.div`
width: 1em;
`;
`
export const ResultItem = styled.div`
display: flex;
@ -368,7 +368,7 @@ export const ResultItem = styled.div`
align-items: flex-start;
word-break: break-all;
color: ${({ color }) => color};
`;
`
export const ResultName = styled.div`
margin-left: 6px;
@ -378,7 +378,7 @@ export const ResultName = styled.div`
text-decoration: none;
color: inherit;
}
`;
`
export const AvailableIcon = styled.div`
margin-top: 2px;
@ -388,4 +388,4 @@ export const AvailableIcon = styled.div`
text-align: center;
font-size: 13px;
height: 15px;
`;
`

64
src/components/cards/index.tsx
View File

@ -1,35 +1,35 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import styled from 'styled-components';
import { mobile } from '../../util/css';
import AppStoreCard from './providers/AppStore';
import CratesioCard from './providers/Cratesio';
import DomainCard from './providers/Domains';
import FirebaseCard from './providers/Firebase';
import GithubCard from './providers/GitHubRepository';
import GithubSearchCard from './providers/GitHubSearch';
import GitLabCard from './providers/GitLab';
import HerokuCard from './providers/Heroku';
import HomebrewCard from './providers/Homebrew';
import InstagramCard from './providers/Instagram';
import JsOrgCard from './providers/JsOrg';
import LinuxCard from './providers/Linux';
import NetlifyCard from './providers/Netlify';
import NpmCard from './providers/Npm';
import NtaCard from './providers/Nta';
import OcamlCard from './providers/Ocaml';
import PypiCard from './providers/PyPI';
import RubyGemsCard from './providers/RubyGems';
import S3Card from './providers/S3';
import SlackCard from './providers/Slack';
import SpectrumCard from './providers/Spectrum';
import TwitterCard from './providers/Twitter';
import VercelCard from './providers/Vercel';
import React from 'react'
import { useTranslation } from 'react-i18next'
import styled from 'styled-components'
import { mobile } from '../../util/css'
import AppStoreCard from './providers/AppStore'
import CratesioCard from './providers/Cratesio'
import DomainCard from './providers/Domains'
import FirebaseCard from './providers/Firebase'
import GithubCard from './providers/GitHubRepository'
import GithubSearchCard from './providers/GitHubSearch'
import GitLabCard from './providers/GitLab'
import HerokuCard from './providers/Heroku'
import HomebrewCard from './providers/Homebrew'
import InstagramCard from './providers/Instagram'
import JsOrgCard from './providers/JsOrg'
import LinuxCard from './providers/Linux'
import NetlifyCard from './providers/Netlify'
import NpmCard from './providers/Npm'
import NtaCard from './providers/Nta'
import OcamlCard from './providers/Ocaml'
import PypiCard from './providers/PyPI'
import RubyGemsCard from './providers/RubyGems'
import S3Card from './providers/S3'
import SlackCard from './providers/Slack'
import SpectrumCard from './providers/Spectrum'
import TwitterCard from './providers/Twitter'
import VercelCard from './providers/Vercel'
const Index: React.FC<{ query: string }> = ({ query }) => {
const {
i18n: { language },
} = useTranslation();
} = useTranslation()
return (
<>
@ -61,10 +61,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;
@ -75,4 +75,4 @@ const Cards = styled.div`
${mobile} {
flex-direction: column;
}
`;
`

34
src/components/cards/providers/AppStore.tsx
View File

@ -1,18 +1,18 @@
import useFetch from 'fetch-suspense';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { FaAppStore, FaInfoCircle } from 'react-icons/fa';
import { Card, Result } from '../core';
import useFetch from 'fetch-suspense'
import React from 'react'
import { useTranslation } from 'react-i18next'
import { FaAppStore, FaInfoCircle } from 'react-icons/fa'
import { Card, Result } from '../core'
const Search: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation();
const term = encodeURIComponent(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 (
<>
@ -30,17 +30,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 { t } = useTranslation()
return (
<Card title={t('providers.appStore')}>
<Search query={query} />
</Card>
);
};
)
}
export default AppStoreCard;
export default AppStoreCard

23
src/components/cards/providers/Cratesio.tsx
View File

@ -1,14 +1,13 @@
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, DedicatedAvailability, Repeater } 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')}>
@ -25,7 +24,7 @@ const CratesioCard: React.FC<{query: string}> = ({query}) => {
)}
</Repeater>
</Card>
);
};
)
}
export default CratesioCard;
export default CratesioCard

34
src/components/cards/providers/Domains.tsx
View File

@ -1,17 +1,15 @@
import React from 'react';
import {useTranslation} from 'react-i18next';
import {MdDomain} from 'react-icons/md';
import React from 'react'
import { useTranslation } from 'react-i18next'
import { MdDomain } from 'react-icons/md'
import {Card, Repeater, DedicatedAvailability} from '../core';
import {zones} from '../../../util/zones';
import { Card, Repeater, DedicatedAvailability } from '../core'
import { zones } from '../../../util/zones'
const DomainCard: React.FC<{query: string}> = ({query}) => {
const {t} = useTranslation();
const DomainCard: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const sanitizedQuery = query
.replace(/[^0-9a-zA-Z_-]/g, '')
.replace(/_/g, '-');
const lowerCase = sanitizedQuery.toLowerCase();
const sanitizedQuery = query.replace(/[^0-9a-zA-Z_-]/g, '').replace(/_/g, '-')
const lowerCase = sanitizedQuery.toLowerCase()
const domainHackSuggestions = zones
.map((zone) => new RegExp(`${zone}$`).exec(lowerCase.slice(1)))
@ -20,8 +18,8 @@ const DomainCard: React.FC<{query: string}> = ({query}) => {
(m) =>
lowerCase.substring(0, m.index + 1) +
'.' +
lowerCase.substring(m.index + 1),
);
lowerCase.substring(m.index + 1)
)
const names = [
`${lowerCase}.com`,
@ -31,7 +29,7 @@ const DomainCard: React.FC<{query: string}> = ({query}) => {
`${lowerCase}.org`,
`${lowerCase}.io`,
...domainHackSuggestions,
];
]
const moreNames = [
`${lowerCase}.sh`,
`${lowerCase}.tools`,
@ -44,7 +42,7 @@ const DomainCard: React.FC<{query: string}> = ({query}) => {
`${lowerCase}.info`,
`${lowerCase}.biz`,
`${lowerCase}.website`,
];
]
return (
<Card title={t('providers.domains')}>
@ -60,7 +58,7 @@ const DomainCard: React.FC<{query: string}> = ({query}) => {
)}
</Repeater>
</Card>
);
};
)
}
export default DomainCard;
export default DomainCard

26
src/components/cards/providers/Firebase.tsx
View File

@ -1,18 +1,16 @@
import React from 'react';
import {useTranslation} from 'react-i18next';
import {DiFirebase} from 'react-icons/di';
import React from 'react'
import { useTranslation } from 'react-i18next'
import { DiFirebase } from 'react-icons/di'
import {Card, Repeater, DedicatedAvailability} from '../core';
import { Card, Repeater, DedicatedAvailability } from '../core'
const FirebaseCard: React.FC<{query: string}> = ({query}) => {
const {t} = useTranslation();
const FirebaseCard: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const sanitizedQuery = query
.replace(/[^0-9a-zA-Z_-]/g, '')
.replace(/_/g, '-');
const lowerCase = sanitizedQuery.toLowerCase();
const sanitizedQuery = query.replace(/[^0-9a-zA-Z_-]/g, '').replace(/_/g, '-')
const lowerCase = sanitizedQuery.toLowerCase()
const names = [lowerCase];
const names = [lowerCase]
return (
<Card title={t('providers.firebase')}>
@ -29,7 +27,7 @@ const FirebaseCard: React.FC<{query: string}> = ({query}) => {
)}
</Repeater>
</Card>
);
};
)
}
export default FirebaseCard;
export default FirebaseCard

19
src/components/cards/providers/GitHubRepository.tsx
View File

@ -1,12 +1,11 @@
import React from 'react';
import {useTranslation} from 'react-i18next';
import {FaGithub} from 'react-icons/fa';
import {Card, Repeater, DedicatedAvailability} from '../core';
import React from 'react'
import { useTranslation } from 'react-i18next'
import { FaGithub } from 'react-icons/fa'
import { Card, DedicatedAvailability, Repeater } from '../core'
const GithubCard: React.FC<{ query: string }> = ({ query }) => {
const {t} = useTranslation();
const lowerCase = query.toLowerCase();
const { t } = useTranslation()
const lowerCase = query.toLowerCase()
const names = [query, `${lowerCase}-dev`, `${lowerCase}-org`]
const moreNames = [
@ -32,7 +31,7 @@ const GithubCard: React.FC<{ query: string }> = ({ query }) => {
)}
</Repeater>
</Card>
);
};
)
}
export default GithubCard;
export default GithubCard

50
src/components/cards/providers/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
src/components/cards/providers/GitLab.tsx
View File

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

26
src/components/cards/providers/Heroku.tsx
View File

@ -1,18 +1,16 @@
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 HerokuCard: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const sanitizedQuery = query
.replace(/[^0-9a-zA-Z_-]/g, '')
.replace(/_/g, '-');
const lowerCase = sanitizedQuery.toLowerCase();
const sanitizedQuery = query.replace(/[^0-9a-zA-Z_-]/g, '').replace(/_/g, '-')
const lowerCase = sanitizedQuery.toLowerCase()
const names = [lowerCase];
const names = [lowerCase]
return (
<Card title={t('providers.heroku')}>
@ -28,7 +26,7 @@ const HerokuCard: React.FC<{query: string}> = ({query}) => {
)}
</Repeater>
</Card>
);
};
)
}
export default HerokuCard;
export default HerokuCard

22
src/components/cards/providers/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')}>
@ -34,7 +34,7 @@ const HomebrewCard: React.FC<{query: string}> = ({query}) => {
)}
</Repeater>
</Card>
);
};
)
}
export default HomebrewCard;
export default HomebrewCard

24
src/components/cards/providers/Instagram.tsx
View File

@ -1,15 +1,15 @@
import React from 'react';
import {useTranslation} from 'react-i18next';
import {FaInstagram} from 'react-icons/fa';
import React from 'react'
import { useTranslation } from 'react-i18next'
import { FaInstagram } from 'react-icons/fa'
import {Card, Repeater, ExistentialAvailability} from '../core';
import { Card, Repeater, ExistentialAvailability } from '../core'
const InstagramCard: React.FC<{query: string}> = ({query}) => {
const {t} = useTranslation();
const lowerCase = query.toLowerCase();
const InstagramCard: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const lowerCase = query.toLowerCase()
const names = [query];
const moreNames = [`${lowerCase}app`, `${lowerCase}_hq`, `get.${lowerCase}`];
const names = [query]
const moreNames = [`${lowerCase}app`, `${lowerCase}_hq`, `get.${lowerCase}`]
return (
<Card title={t('providers.instagram')}>
@ -25,7 +25,7 @@ const InstagramCard: React.FC<{query: string}> = ({query}) => {
)}
</Repeater>
</Card>
);
};
)
}
export default InstagramCard;
export default InstagramCard

26
src/components/cards/providers/JsOrg.tsx
View File

@ -1,18 +1,16 @@
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 JsOrgCard: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const sanitizedQuery = query
.replace(/[^0-9a-zA-Z_-]/g, '')
.replace(/_/g, '-');
const lowerCase = sanitizedQuery.toLowerCase();
const sanitizedQuery = query.replace(/[^0-9a-zA-Z_-]/g, '').replace(/_/g, '-')
const lowerCase = sanitizedQuery.toLowerCase()
const names = [lowerCase];
const names = [lowerCase]
return (
<Card title={t('providers.jsorg')}>
@ -30,7 +28,7 @@ const JsOrgCard: React.FC<{query: string}> = ({query}) => {
)}
</Repeater>
</Card>
);
};
)
}
export default JsOrgCard;
export default JsOrgCard

24
src/components/cards/providers/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')}>
@ -34,7 +34,7 @@ const LinuxCard: React.FC<{query: string}> = ({query}) => {
)}
</Repeater>
</Card>
);
};
)
}
export default LinuxCard;
export default LinuxCard

26
src/components/cards/providers/Netlify.tsx
View File

@ -1,18 +1,16 @@
import React from 'react';
import {useTranslation} from 'react-i18next';
import {NetlifyIcon} from '../../Icons';
import React from 'react'
import { useTranslation } from 'react-i18next'
import { NetlifyIcon } from '../../Icons'
import {Card, Repeater, DedicatedAvailability} from '../core';
import { Card, Repeater, DedicatedAvailability } from '../core'
const NetlifyCard: React.FC<{query: string}> = ({query}) => {
const {t} = useTranslation();
const NetlifyCard: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const sanitizedQuery = query
.replace(/[^0-9a-zA-Z_-]/g, '')
.replace(/_/g, '-');
const lowerCase = sanitizedQuery.toLowerCase();
const sanitizedQuery = query.replace(/[^0-9a-zA-Z_-]/g, '').replace(/_/g, '-')
const lowerCase = sanitizedQuery.toLowerCase()
const names = [lowerCase];
const names = [lowerCase]
return (
<Card title={t('providers.netlify')}>
@ -28,7 +26,7 @@ const NetlifyCard: React.FC<{query: string}> = ({query}) => {
)}
</Repeater>
</Card>
);
};
)
}
export default NetlifyCard;
export default NetlifyCard

24
src/components/cards/providers/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, `${lowerCase}-js`];
const moreNames = [`${lowerCase}js`];
const names = [lowerCase, `${lowerCase}-js`]
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
src/components/cards/providers/Nta.tsx
View File

@ -1,18 +1,18 @@
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(`/api/services/nta/${term}`) as {
result: Array<{name: string; phoneticName: string}>;
};
result: Array<{ name: string; phoneticName: string }>
}
const apps = response.result;
const apps = response.result
return (
<>
@ -29,17 +29,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
src/components/cards/providers/Ocaml.tsx
View File

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

24
src/components/cards/providers/PyPI.tsx
View File

@ -1,15 +1,15 @@
import React from 'react';
import {useTranslation} from 'react-i18next';
import {FaPython} from 'react-icons/fa';
import React from 'react'
import { useTranslation } from 'react-i18next'
import { FaPython } from 'react-icons/fa'
import {capitalize} from '../../../util/text';
import {Card, DedicatedAvailability, Repeater} from '../core';
import { capitalize } from '../../../util/text'
import { Card, DedicatedAvailability, Repeater } from '../core'
const PypiCard: React.FC<{query: string}> = ({query}) => {
const {t} = useTranslation();
const PypiCard: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const names = [query];
const moreNames = [`Py${capitalize(query)}`];
const names = [query]
const moreNames = [`Py${capitalize(query)}`]
return (
<Card title={t('providers.pypi')}>
@ -28,7 +28,7 @@ const PypiCard: React.FC<{query: string}> = ({query}) => {
)}
</Repeater>
</Card>
);
};
)
}
export default PypiCard;
export default PypiCard

22
src/components/cards/providers/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')}>
@ -25,7 +25,7 @@ const RubyGemsCard: React.FC<{query: string}> = ({query}) => {
)}
</Repeater>
</Card>
);
};
)
}
export default RubyGemsCard;
export default RubyGemsCard

26
src/components/cards/providers/S3.tsx
View File

@ -1,18 +1,16 @@
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 S3Card: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const sanitizedQuery = query
.replace(/[^0-9a-zA-Z_-]/g, '')
.replace(/_/g, '-');
const lowerCase = sanitizedQuery.toLowerCase();
const sanitizedQuery = query.replace(/[^0-9a-zA-Z_-]/g, '').replace(/_/g, '-')
const lowerCase = sanitizedQuery.toLowerCase()
const names = [lowerCase];
const names = [lowerCase]
return (
<Card title={t('providers.s3')}>
@ -30,7 +28,7 @@ const S3Card: React.FC<{query: string}> = ({query}) => {
)}
</Repeater>
</Card>
);
};
)
}
export default S3Card;
export default S3Card

26
src/components/cards/providers/Slack.tsx
View File

@ -1,18 +1,16 @@
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 SlackCard: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const sanitizedQuery = query
.replace(/[^0-9a-zA-Z_-]/g, '')
.replace(/_/g, '-');
const lowerCase = sanitizedQuery.toLowerCase();
const sanitizedQuery = query.replace(/[^0-9a-zA-Z_-]/g, '').replace(/_/g, '-')
const lowerCase = sanitizedQuery.toLowerCase()
const names = [lowerCase];
const names = [lowerCase]
return (
<Card title={t('providers.slack')}>
@ -31,7 +29,7 @@ const SlackCard: React.FC<{query: string}> = ({query}) => {
)}
</Repeater>
</Card>
);
};
)
}
export default SlackCard;
export default SlackCard

20
src/components/cards/providers/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

32
src/components/cards/providers/Twitter.tsx
View File

@ -1,20 +1,18 @@
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 TwitterCard: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const sanitizedQuery = query
.replace(/[^0-9a-zA-Z_-]/g, '')
.replace(/-/g, '_');
const lowerCase = sanitizedQuery.toLowerCase();
const capitalCase = capitalize(sanitizedQuery);
const sanitizedQuery = query.replace(/[^0-9a-zA-Z_-]/g, '').replace(/-/g, '_')
const lowerCase = sanitizedQuery.toLowerCase()
const capitalCase = capitalize(sanitizedQuery)
const names = [sanitizedQuery, `${capitalCase}App`, `${lowerCase}hq`];
const names = [sanitizedQuery, `${capitalCase}App`, `${lowerCase}hq`]
const moreNames = [
`hey${lowerCase}`,
`${capitalCase}Team`,
@ -22,7 +20,7 @@ const TwitterCard: React.FC<{query: string}> = ({query}) => {
`${lowerCase}_org`,
`${lowerCase}_app`,
`${capitalCase}JS`,
];
]
return (
<Card title={t('providers.twitter')}>
@ -39,7 +37,7 @@ const TwitterCard: React.FC<{query: string}> = ({query}) => {
)}
</Repeater>
</Card>
);
};
)
}
export default TwitterCard;
export default TwitterCard

26
src/components/cards/providers/Vercel.tsx
View File

@ -1,18 +1,16 @@
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 VercelCard: React.FC<{query: string}> = ({query}) => {
const {t} = useTranslation();
const VercelCard: React.FC<{ query: string }> = ({ query }) => {
const { t } = useTranslation()
const sanitizedQuery = query
.replace(/[^0-9a-zA-Z_-]/g, '')
.replace(/_/g, '-');
const lowerCase = sanitizedQuery.toLowerCase();
const sanitizedQuery = query.replace(/[^0-9a-zA-Z_-]/g, '').replace(/_/g, '-')
const lowerCase = sanitizedQuery.toLowerCase()
const names = [lowerCase];
const names = [lowerCase]
return (
<Card title={t('providers.now')}>
@ -39,7 +37,7 @@ const VercelCard: React.FC<{query: string}> = ({query}) => {
)}
</Repeater>
</Card>
);
};
)
}
export default VercelCard;
export default VercelCard

54
src/index.tsx
View File

@ -1,28 +1,28 @@
import { StoreProvider } from 'easy-peasy';
import { createBrowserHistory } from 'history';
import 'rc-tooltip/assets/bootstrap.css';
import React from 'react';
import ReactDOM from 'react-dom';
import { Router } from 'react-router-dom';
import { toast, ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { store, wrapHistoryWithStoreHandler } from './store';
import { initSentry, wrapHistoryWithGA } from './util/analytics';
import { compose } from './util/array';
import { initCrisp } from './util/crisp';
import './util/i18n';
import { FullScreenSuspense } from './util/suspense';
import { StoreProvider } from 'easy-peasy'
import { createBrowserHistory } from 'history'
import 'rc-tooltip/assets/bootstrap.css'
import React from 'react'
import ReactDOM from 'react-dom'
import { Router } from 'react-router-dom'
import { toast, ToastContainer } from 'react-toastify'
import 'react-toastify/dist/ReactToastify.css'
import App from './App'
import * as serviceWorker from './serviceWorker'
import { store, wrapHistoryWithStoreHandler } from './store'
import { initSentry, wrapHistoryWithGA } from './util/analytics'
import { compose } from './util/array'
import { initCrisp } from './util/crisp'
import './util/i18n'
import { FullScreenSuspense } from './util/suspense'
initSentry();
initCrisp();
initSentry()
initCrisp()
const history = compose(
createBrowserHistory(),
wrapHistoryWithStoreHandler,
wrapHistoryWithGA,
);
wrapHistoryWithGA
)
ReactDOM.render(
<StoreProvider store={store}>
@ -33,25 +33,25 @@ ReactDOM.render(
</FullScreenSuspense>
<ToastContainer />
</StoreProvider>,
document.getElementById('root'),
);
document.getElementById('root')
)
serviceWorker.register({
onUpdate: (registration) => {
console.log('Update available');
console.log('Update available')
toast.dark('New version available! Click here to update.', {
onClose: () => {
window.location.reload();
window.location.reload()
},
position: 'top-right',
autoClose: false,
closeButton: false,
closeOnClick: true,
});
})
if (registration && registration.waiting) {
registration.waiting.postMessage({ type: 'SKIP_WAITING' });
registration.waiting.postMessage({ type: 'SKIP_WAITING' })
}
},
});
})

16
src/pages/Home.tsx
View File

@ -1,11 +1,11 @@
import React from 'react';
import { Helmet } from 'react-helmet';
import { useTranslation } from 'react-i18next';
import { Content, Header } from '../theme';
import Form from '../components/Form';
import Welcome from '../components/Welcome';
import React from 'react'
import { Helmet } from 'react-helmet'
import { useTranslation } from 'react-i18next'
import { Content, Header } from '../theme'
import Form from '../components/Form'
import Welcome from '../components/Welcome'
export default function Home() {
const { t } = useTranslation();
const { t } = useTranslation()
return (
<>
@ -21,5 +21,5 @@ export default function Home() {
<Welcome />
</Content>
</>
);
)
}

58
src/pages/Search.tsx
View File

@ -1,28 +1,28 @@
import Tooltip from 'rc-tooltip';
import React from 'react';
import { Helmet } from 'react-helmet';
import { useTranslation } from 'react-i18next';
import { IoIosFlash, IoIosRocket } from 'react-icons/io';
import { useParams } from 'react-router-dom';
import styled from 'styled-components';
import Cards from '../components/cards';
import Tooltip from 'rc-tooltip'
import React from 'react'
import { Helmet } from 'react-helmet'
import { useTranslation } from 'react-i18next'
import { IoIosFlash, IoIosRocket } from 'react-icons/io'
import { useParams } from 'react-router-dom'
import styled from 'styled-components'
import Cards from '../components/cards'
import {
AvailableIcon,
COLORS as ResultColor,
ResultIcon,
ResultItem,
ResultName,
} from '../components/cards/core';
import Form from '../components/Form';
import { useStoreState } from '../store';
import { Content, Header } from '../theme';
import { mobile } from '../util/css';
import { sanitize } from '../util/text';
} from '../components/cards/core'
import Form from '../components/Form'
import { useStoreState } from '../store'
import { Content, Header } from '../theme'
import { mobile } from '../util/css'
import { sanitize } from '../util/text'
export default function Search() {
const { query } = useParams<{ query: string }>();
const currentQuery = sanitize(query);
const { t } = useTranslation();
const { query } = useParams<{ query: string }>()
const currentQuery = sanitize(query)
const { t } = useTranslation()
return (
<>
@ -54,24 +54,24 @@ export default function Search() {
<Cards query={currentQuery} />
</Content>
</>
);
)
}
function Stat() {
const totalCount = useStoreState((state) => state.stats.totalCount);
const availableCount = useStoreState((state) => state.stats.availableCount);
const { t } = useTranslation();
const totalCount = useStoreState((state) => state.stats.totalCount)
const availableCount = useStoreState((state) => state.stats.availableCount)
const { t } = useTranslation()
const uniqueness = availableCount !== 0 ? availableCount / totalCount : 0.0;
const uniqueness = availableCount !== 0 ? availableCount / totalCount : 0.0
const uniquenessText = ((n) => {
if (n > 0.7 && n <= 1.0) {
return t('uniqueness.high');
return t('uniqueness.high')
} else if (n > 0.4 && n <= 0.7) {
return t('uniqueness.moderate');
return t('uniqueness.moderate')
} else {
return t('uniqueness.low');
return t('uniqueness.low')
}
})(uniqueness);
})(uniqueness)
return (
<UniquenessIndicator>
@ -85,7 +85,7 @@ function Stat() {
</span>
</Tooltip>
</UniquenessIndicator>
);
)
}
export const Legend = styled.div`
@ -109,8 +109,8 @@ export const Legend = styled.div`
> * {
margin: 0 10px 0;
}
`;
`
export const UniquenessIndicator = styled.div`
color: #7b7b7b;
`;
`

76
src/serviceWorker.ts
View File

@ -18,23 +18,23 @@ const isLocalhost = Boolean(
window.location.hostname === '[::1]' ||
// 127.0.0.0/8 are considered localhost for IPv4.
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/.exec(
window.location.hostname,
),
);
window.location.hostname
)
)
type Config = {
onSuccess?: (registration: ServiceWorkerRegistration) => void;
onUpdate?: (registration: ServiceWorkerRegistration) => void;
};
onSuccess?: (registration: ServiceWorkerRegistration) => void
onUpdate?: (registration: ServiceWorkerRegistration) => void
}
function registerValidSW(swUrl: string, config?: Config) {
navigator.serviceWorker
.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') {
@ -44,41 +44,41 @@ 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) {
// Check if the service worker can be found. If it can't reload the page.
fetch(swUrl, {
headers: {'Service-Worker': 'script'},
headers: { 'Service-Worker': 'script' },
})
.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.includes('javascript'))
@ -86,52 +86,52 @@ 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 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.env.PUBLIC_URL, window.location.href);
const publicUrl = new URL(process.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)
}
});
})
}
}
@ -139,10 +139,10 @@ export function unregister() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready
.then((registration) => {
registration.unregister();
registration.unregister()
})
.catch((error) => {
console.error(error.message);
});
console.error(error.message)
})
}
}

14
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
},
});
})

42
src/store.tsx
View File

@ -1,47 +1,47 @@
import { action, Action, createStore, createTypedHooks } from 'easy-peasy';
import { History } from 'history';
import { action, Action, createStore, createTypedHooks } from 'easy-peasy'
import { History } from 'history'
interface StatsModel {
availableCount: number;
totalCount: number;
add: Action<StatsModel, boolean>;
reset: Action<StatsModel, void>;
availableCount: number
totalCount: number
add: Action<StatsModel, boolean>
reset: Action<StatsModel, void>
}
interface StoreModel {
stats: StatsModel;
stats: StatsModel
}
const statsModel: StatsModel = {
availableCount: 0,
totalCount: 0,
add: action((state, isAvailable) => {
state.totalCount += 1;
state.totalCount += 1
if (isAvailable) {
state.availableCount += 1;
state.availableCount += 1
}
}),
reset: action((state) => {
state.totalCount = 0;
state.availableCount = 0;
state.totalCount = 0
state.availableCount = 0
}),
};
}
const storeModel: StoreModel = {
stats: statsModel,
};
}
export const store = createStore(storeModel);
export const store = createStore(storeModel)
export function wrapHistoryWithStoreHandler(history: History) {
history.listen(() => {
// reset stats counter
store.getActions().stats.reset();
});
return history;
store.getActions().stats.reset()
})
return history
}
const typedHooks = createTypedHooks<StoreModel>();
export const useStoreActions = typedHooks.useStoreActions;
export const useStoreDispatch = typedHooks.useStoreDispatch;
export const useStoreState = typedHooks.useStoreState;
const typedHooks = createTypedHooks<StoreModel>()
export const useStoreActions = typedHooks.useStoreActions
export const useStoreDispatch = typedHooks.useStoreDispatch
export const useStoreState = typedHooks.useStoreState

12
src/theme/index.tsx
View File

@ -1,5 +1,5 @@
import styled, { createGlobalStyle } from 'styled-components';
import { mobile } from '../util/css';
import styled, { createGlobalStyle } from 'styled-components'
import { mobile } from '../util/css'
export const GlobalStyle = createGlobalStyle`
* {
@ -25,7 +25,7 @@ body {
background: #f5f5f5;
}
}
`;
`
export const Content = styled.div`
padding-top: 100px;
@ -33,7 +33,7 @@ export const Content = styled.div`
${mobile} {
padding-top: 60px;
}
`;
`
export const Header = styled.header`
padding: 0 40px;
@ -42,7 +42,7 @@ export const Header = styled.header`
${mobile} {
padding: 0 20px;
}
`;
`
export const Section = styled.div`
padding: 100px 20vw;
@ -50,4 +50,4 @@ export const Section = styled.div`
${mobile} {
padding: 60px 40px;
}
`;
`

54
src/util/analytics.ts
View File

@ -1,18 +1,18 @@
import ReactGA from 'react-ga';
import * as Sentry from '@sentry/browser';
import {History} from 'history';
import ReactGA from 'react-ga'
import * as Sentry from '@sentry/browser'
import { History } from 'history'
const isProduction = process.env.NODE_ENV !== 'development';
const isProduction = process.env.NODE_ENV !== 'development'
export function wrapHistoryWithGA(history: History) {
if (isProduction) {
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)
history.listen((location) => {
ReactGA.pageview(location.pathname + location.search);
});
ReactGA.pageview(location.pathname + location.search)
})
}
return history;
return history
}
export function trackEvent({
@ -21,10 +21,10 @@ export function trackEvent({
label = undefined,
value = undefined,
}: {
category: string;
action: string;
label?: string;
value?: number;
category: string
action: string
label?: string
value?: number
}) {
if (isProduction) {
ReactGA.event({
@ -32,35 +32,35 @@ export function trackEvent({
action,
label,
value,
});
})
}
}
export function sendQueryEvent(query: string): void {
trackEvent({category: 'Search', action: 'Invoke New Search', label: query});
trackEvent({ category: 'Search', action: 'Invoke New Search', label: query })
}
export function sendGettingStartedEvent(): void {
trackEvent({category: 'Search', action: 'Getting Started'});
trackEvent({ category: 'Search', action: 'Getting Started' })
}
export function sendExpandEvent(): void {
trackEvent({category: 'Result', action: 'Expand Card'});
trackEvent({ category: 'Result', action: 'Expand Card' })
}
export function sendAcceptSuggestionEvent(): void {
trackEvent({category: 'Suggestion', action: 'Accept'});
trackEvent({ category: 'Suggestion', action: 'Accept' })
}
export function sendShuffleSuggestionEvent(): void {
trackEvent({category: 'Suggestion', action: 'Shuffle'});
trackEvent({ category: 'Suggestion', action: 'Shuffle' })
}
export function initSentry(): void {
if (isProduction) {
Sentry.init({
dsn: 'https://7ab2df74aead499b950ebef190cc40b7@sentry.io/1759299',
});
})
}
}
@ -68,16 +68,16 @@ export function sendError(
error: Error,
errorInfo: {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
[key: string]: any;
},
[key: string]: any
}
): Promise<string> {
return new Promise((resolve) => {
if (isProduction) {
Sentry.withScope((scope) => {
scope.setExtras(errorInfo);
const eventId = Sentry.captureException(error);
resolve(eventId);
});
scope.setExtras(errorInfo)
const eventId = Sentry.captureException(error)
resolve(eventId)
})
}
});
})
}

20
src/util/array.ts
View File

@ -1,25 +1,25 @@
export function shuffleArray<T>(array: T[]): T[] {
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
}
export function sampleFromArray<T>(array: T[], maximum: number): T[] {
return shuffleArray(array).slice(0, maximum);
return shuffleArray(array).slice(0, maximum)
}
export function fillArray<T>(array: T[], filler: string, maximum: number): T[] {
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
}
export function compose<T>(arg: T, ...fn: ((arg: T) => T)[]): T {
return fn.reduce((arg, f) => f(arg), arg);
return fn.reduce((arg, f) => f(arg), arg)
}

18
src/util/crisp.ts
View File

@ -1,14 +1,14 @@
interface CrispWindow extends Window {
$crisp: unknown[];
CRISP_WEBSITE_ID: string;
$crisp: unknown[]
CRISP_WEBSITE_ID: string
}
declare let window: CrispWindow;
declare let window: CrispWindow
export function initCrisp(): void {
window.$crisp = [];
window.CRISP_WEBSITE_ID = '92b2e096-6892-47dc-bf4a-057bad52d82e';
const s = document.createElement('script');
s.src = 'https://client.crisp.chat/l.js';
s.async = true;
document.getElementsByTagName('head')[0].appendChild(s);
window.$crisp = []
window.CRISP_WEBSITE_ID = '92b2e096-6892-47dc-bf4a-057bad52d82e'
const s = document.createElement('script')
s.src = 'https://client.crisp.chat/l.js'
s.async = true
document.getElementsByTagName('head')[0].appendChild(s)
}

8
src/util/css.ts
View File

@ -1,7 +1,7 @@
import { keyframes } from 'styled-components';
import { keyframes } from 'styled-components'
export const mobile = '@media screen and (max-width: 800px)';
export const tablet = '@media screen and (max-width: 1200px)';
export const mobile = '@media screen and (max-width: 800px)'
export const tablet = '@media screen and (max-width: 1200px)'
export const slideUp = keyframes`
from {
@ -10,4 +10,4 @@ from {
to {
transform: translateY(0) skewY(0);
}
`;
`

32
src/util/hooks.test.tsx
View File

@ -1,22 +1,22 @@
import { render, waitFor } from '@testing-library/react';
import 'mutationobserver-shim';
import React from 'react';
import { useDeferredState } from './hooks';
import { render, waitFor } from '@testing-library/react'
import 'mutationobserver-shim'
import React from 'react'
import { useDeferredState } from './hooks'
const App: React.FC = () => {
const [value, setValue] = useDeferredState(500, 0);
const [value, setValue] = useDeferredState(500, 0)
React.useEffect(() => {
setValue(1);
setValue(2);
setValue(3);
}, [setValue]);
return <div data-testid="root">{value}</div>;
};
setValue(1)
setValue(2)
setValue(3)
}, [setValue])
return <div data-testid="root">{value}</div>
}
it('provoke state flow after certain time passed', async () => {
const { getByTestId } = render(<App />);
expect(getByTestId('root').textContent).toBe('0');
const { getByTestId } = render(<App />)
expect(getByTestId('root').textContent).toBe('0')
await waitFor(() => {
expect(getByTestId('root').textContent).toBe('3');
});
});
expect(getByTestId('root').textContent).toBe('3')
})
})

24
src/util/hooks.tsx
View File

@ -1,24 +1,24 @@
import React, { useEffect, useState } from 'react';
import { Helmet } from 'react-helmet';
import React, { useEffect, useState } from 'react'
import { Helmet } from 'react-helmet'
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 (): void => {
clearTimeout(fn);
};
}, [duration, innerValue]);
clearTimeout(fn)
}
}, [duration, innerValue])
return [response, setInnerValue];
return [response, setInnerValue]
}
export function useOpenSearch(xmlPath: string) {
@ -31,5 +31,5 @@ export function useOpenSearch(xmlPath: string) {
href={xmlPath}
/>
</Helmet>
);
)
}

18
src/util/i18n.ts
View File

@ -1,11 +1,11 @@
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'
const TRANSLATION_VERSION = '3';
const TRANSLATION_VERSION = '3'
i18n
.use(Backend)
@ -32,6 +32,6 @@ i18n
interpolation: {
escapeValue: false, // not needed for react as it escapes by default
},
});
})
export default i18n;
export default i18n

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

@ -1,5 +1,5 @@
import {isStandalone} from './pwa';
import { isStandalone } from './pwa'
it('recognize standalone mode', () => {
expect(isStandalone()).toEqual(false);
});
expect(isStandalone()).toEqual(false)
})

6
src/util/pwa.ts
View File

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

16
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: React.FC = () => (
<Container>
<BarLoader />
</Container>
);
)

14
src/util/text.test.ts
View File

@ -1,9 +1,9 @@
import {capitalize} from './text';
import { capitalize } from './text'
it('capitalize text', () => {
expect(capitalize('test')).toEqual('Test');
expect(capitalize('Test')).toEqual('Test');
expect(capitalize('tEST')).toEqual('Test');
expect(capitalize('TEST')).toEqual('Test');
expect(capitalize('')).toEqual('');
});
expect(capitalize('test')).toEqual('Test')
expect(capitalize('Test')).toEqual('Test')
expect(capitalize('tEST')).toEqual('Test')
expect(capitalize('TEST')).toEqual('Test')
expect(capitalize('')).toEqual('')
})

18
src/util/text.ts
View File

@ -1,37 +1,37 @@
export function capitalize(text: string): string {
if (text.length === 0) return '';
return text[0].toUpperCase() + text.slice(1).toLowerCase();
if (text.length === 0) return ''
return text[0].toUpperCase() + text.slice(1).toLowerCase()
}
export function sanitize(text: string): string {
return text
.replace(/[\s@+!#$%^&*()[\]./<>{}]/g, '')
.normalize('NFD')
.replace(/[\u0300-\u036f]/g, '');
.replace(/[\u0300-\u036f]/g, '')
}
export function upper(word: string): string {
return word.toUpperCase();
return word.toUpperCase()
}
export function lower(word: string): string {
return word.toLowerCase();
return word.toLowerCase()
}
export function stem(word: string): string {
return word.replace(/[aiueo]$/, '');
return word.replace(/[aiueo]$/, '')
}
export function germanify(word: string): string {
return word.replace('c', 'k').replace('C', 'K');
return word.replace('c', 'k').replace('C', 'K')
}
export function njoin(
lhs: string,
rhs: string,
{elision = true}: {elision?: boolean} = {},
{ elision = true }: { elision?: boolean } = {}
): string {
return elision
? lhs + rhs.replace(new RegExp(`^${lhs[-1]}`, 'i'), '')
: lhs + rhs;
: lhs + rhs
}

2
src/util/zones.ts
View File

@ -1753,4 +1753,4 @@ export const zones = [
'삼성',
'테스트',
'한국',
];
]

24
tests/existense.test.ts
View File

@ -1,18 +1,18 @@
import nock from 'nock';
import provider from '../api/services/existence/[query]';
import { mockProvider } from '../util/testHelpers';
import nock from 'nock'
import provider from '../api/services/existence/[query]'
import { mockProvider } from '../util/testHelpers'
test('return false if name is taken', async () => {
const result = await mockProvider(provider, { query: 'github.com/uetchy' });
expect(result).toStrictEqual({ availability: false });
});
const result = await mockProvider(provider, { query: 'github.com/uetchy' })
expect(result).toStrictEqual({ availability: false })
})
test('return true if name is not taken', async () => {
const result = await mockProvider(provider, {
query: 'github.com/uetchyasdf',
});
expect(result).toStrictEqual({ availability: true });
});
})
expect(result).toStrictEqual({ availability: true })
})
beforeEach(() => {
nock('https://github.com:443', { encodedQueryParams: true })
@ -44,7 +44,7 @@ beforeEach(() => {
"default-src 'none'; base-uri 'self'; connect-src 'self'; form-action 'self'; img-src 'self' data:; script-src,'self'; style-src 'unsafe-inline'",
'Content-Encoding': 'gzip',
'X-GitHub-Request-Id': 'BA06:51D6:125A0F:1A9B4A:5D53E806',
});
})
nock('https://github.com:443', { encodedQueryParams: true })
.head('/uetchy')
.reply(200, [], {
@ -76,5 +76,5 @@ beforeEach(() => {
"default-src 'none'; base-uri 'self'; block-all-mixed-content; connect-src 'self' uploads.github.com www.githubstatus.com collector.githubapp.com api.github.com www.google-analytics.com github-cloud.s3.amazonaws.com github-production-repository-file-5c1aeb.s3.amazonaws.com github-production-upload-manifest-file-7fdce7.s3.amazonaws.com github-production-user-asset-6210df.s3.amazonaws.com wss://live.github.com; font-src github.githubassets.com; form-action 'self' github.com gist.github.com; frame-ancestors 'none'; frame-src render.githubusercontent.com; img-src 'self' data: github.githubassets.com identicons.github.com collector.githubapp.com github-cloud.s3.amazonaws.com *.githubusercontent.com; manifest-src 'self'; media-src 'none'; script-src github.githubassets.com; style-src 'unsafe-inline' github.githubassets.com",
'Content-Encoding': 'gzip',
'X-GitHub-Request-Id': 'A922:19B1:AD411:FB69F:5D53E5BC',
});
});
})
})

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

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

2
types/whois-json.d.ts vendored
View File

@ -1 +1 @@
declare module 'whois-json';
declare module 'whois-json'