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

fix: show spinner when fetching suggestions

Browse Source
This commit is contained in:
uetchy 2022-04-21 15:42:58 +09:00
parent 24bbfc1af4
commit 6a82963690
3 changed files with 33 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/Form.tsx
View File

@ -11,7 +11,8 @@ import Suggestion from './Suggestion';
const Form: React.FC<{ const Form: React.FC<{
initialValue?: string; initialValue?: string;
}> = ({ initialValue = '' }) => { useSuggestion?: boolean;
}> = ({ initialValue = '', useSuggestion = true }) => {
const reset = useStoreActions((actions) => actions.stats.reset); const reset = useStoreActions((actions) => actions.stats.reset);
const navigate = useNavigate(); const navigate = useNavigate();
const [inputValue, setInputValue] = useState(initialValue); const [inputValue, setInputValue] = useState(initialValue);
@ -53,8 +54,6 @@ const Form: React.FC<{
setSuggestionQuery(modifiedValue); setSuggestionQuery(modifiedValue);
}, [inputValue, setSuggestionQuery]); }, [inputValue, setSuggestionQuery]);
const queryGiven = suggestionQuery && suggestionQuery !== '';
return ( return (
<InputContainer> <InputContainer>
<InputHeader> <InputHeader>
@ -71,7 +70,7 @@ const Form: React.FC<{
aria-label="Search" aria-label="Search"
/> />
</form> </form>
{queryGiven && !suggested ? ( {useSuggestion && !suggested ? (
<Suggestion onSubmit={onSuggestionCompleted} query={suggestionQuery} /> <Suggestion onSubmit={onSuggestionCompleted} query={suggestionQuery} />
) : null} ) : null}
</InputContainer> </InputContainer>

42
src/components/Suggestion.tsx
View File

@ -3,6 +3,7 @@ import { motion } from 'framer-motion';
import React, { useEffect, useRef, useState } from 'react'; import React, { useEffect, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { TiArrowSync } from 'react-icons/ti'; import { TiArrowSync } from 'react-icons/ti';
import { PropagateLoader } from 'react-spinners';
import styled from 'styled-components'; import styled from 'styled-components';
import { import {
sendAcceptSuggestionEvent, sendAcceptSuggestionEvent,
@ -22,7 +23,7 @@ import {
type Modifier = (word: string) => string; type Modifier = (word: string) => string;
const modifiers: Modifier[] = [ const MODIFIERS: Modifier[] = [
(word): string => `${capitalize(germanify(word))}`, (word): string => `${capitalize(germanify(word))}`,
(word): string => `${capitalize(word)}`, (word): string => `${capitalize(word)}`,
(word): string => njoin('Air', capitalize(word), { elision: false }), (word): string => njoin('Air', capitalize(word), { elision: false }),
@ -154,19 +155,19 @@ const modifiers: Modifier[] = [
(word): string => capitalize(word) + ' by Design', (word): string => capitalize(word) + ' by Design',
]; ];
const fontFamilies = [ const FONT_FAMILIES = [
`'Helvetica', sans-serif`, `'Helvetica', sans-serif`,
`'Avenir', sans-serif`, `'Avenir', sans-serif`,
`'Futura', sans-serif`, `'Futura', sans-serif`,
`'Montserrat', sans-serif`, `'Montserrat', sans-serif`,
]; ];
const fontWeight = [300, 600, 900]; const FONT_WEIGHTS = [300, 600, 900];
const numSuggestion = 3; const NUM_SUGGESTION = 3;
function modifyWord(word: string): string { function modifyWord(word: string): string {
return sample(modifiers)(word); return sample(MODIFIERS)(word);
} }
async function getSynonyms(word: string): Promise<string[]> { async function getSynonyms(word: string): Promise<string[]> {
@ -206,7 +207,7 @@ const Suggestion: React.FC<{
function shuffle(): void { function shuffle(): void {
const best = sampleMany( const best = sampleMany(
[...synonymRef.current.filter((s) => s.length < 8), ...times(query, 10)], [...synonymRef.current.filter((s) => s.length < 8), ...times(query, 10)],
numSuggestion NUM_SUGGESTION
).map((word) => modifyWord(word)); ).map((word) => modifyWord(word));
setBestWords(best); setBestWords(best);
} }
@ -223,6 +224,7 @@ const Suggestion: React.FC<{
useEffect(() => { useEffect(() => {
let isEffective = true; let isEffective = true;
const fn = async (): Promise<void> => { const fn = async (): Promise<void> => {
if (query && query.length > 0) { if (query && query.length > 0) {
const synonyms = await getSynonyms(query); const synonyms = await getSynonyms(query);
@ -243,13 +245,14 @@ const Suggestion: React.FC<{
return ( return (
<Container> <Container>
<Title>{t('try')}</Title> <Title>{t('try')}</Title>
<Items>
{bestWords && {bestWords.length > 0 ? (
bestWords.map((name, i) => ( <Items>
{bestWords.map((name, i) => (
<Item <Item
style={{ style={{
fontFamily: sample(fontFamilies), fontFamily: sample(FONT_FAMILIES),
fontWeight: sample(fontWeight), fontWeight: sample(FONT_WEIGHTS),
}} }}
key={name + i} key={name + i}
onClick={(): void => applyQuery(name)} onClick={(): void => applyQuery(name)}
@ -257,8 +260,21 @@ const Suggestion: React.FC<{
> >
<span>{name}</span> <span>{name}</span>
</Item> </Item>
))} ))}{' '}
</Items> </Items>
) : (
<div
style={{
height: '50px',
display: 'flex',
justifyContent: 'center',
flexDirection: 'column',
}}
>
<PropagateLoader size={10} />
</div>
)}
<Button onClick={onShuffleButtonClicked}> <Button onClick={onShuffleButtonClicked}>
<TiArrowSync /> <TiArrowSync />
</Button> </Button>

2
src/pages/Home.tsx
View File

@ -15,7 +15,7 @@ export default function Home() {
</Helmet> </Helmet>
<Header> <Header>
<Form /> <Form useSuggestion={false} />
</Header> </Header>
<Content> <Content>