CloudHost/LingvAI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Blocking behaviour while typing fixed + added spinner (#6)

Browse Source 
* Some README tweaks

* Next's staticProps blocking beheaviour while typing fixed + Added spinner

* Testing for previous fix

* Faker deprecational update
This commit is contained in:
David
2021-04-01 15:40:25 +02:00
committed by GitHub
parent e60be0663b
commit ea8c1bad57
10 changed files with 677 additions and 571 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@@ -52,7 +52,7 @@ Nearly all the *Lingva* instances should supply a pair of public developer APIs:
### REST API v1
+ `/api/v1/:source/:target/:query`
+ GET `/api/v1/:source/:target/:query`
```typescript
{
translation?: string,
@@ -60,7 +60,7 @@ Nearly all the *Lingva* instances should supply a pair of public developer APIs:
}
```
+ `/api/v1/audio/:lang/:query`
+ GET `/api/v1/audio/:lang/:query`
```typescript
{
audio?: number[],
@@ -85,7 +85,7 @@ query {
audio: [Int]
}
}
audio(lang: String query: String!) {
audio(lang: String! query: String!) {
lang: String!
text: String
audio: [Int]

22
components/TranslationArea.tsx
View File

@@ -1,5 +1,5 @@
import { FC, ChangeEvent } from "react";
import { Box, HStack, Textarea, IconButton, Tooltip, useBreakpointValue, useClipboard } from "@chakra-ui/react";
import { Box, HStack, Textarea, IconButton, Tooltip, Spinner, useBreakpointValue, useColorModeValue, useClipboard } from "@chakra-ui/react";
import { FaCopy, FaCheck, FaPlay, FaStop } from "react-icons/fa";
import { useAudioFromBuffer } from "../hooks";
@@ -9,12 +9,19 @@ type Props = {
readOnly?: true,
audio?: number[],
canCopy?: boolean,
isLoading?: boolean,
[key: string]: any
};
const TranslationArea: FC<Props> = ({ value, onChange, readOnly, audio, canCopy, ...props }) => {
const TranslationArea: FC<Props> = ({ value, onChange, readOnly, audio, canCopy, isLoading, ...props }) => {
const { hasCopied, onCopy } = useClipboard(value);
const { audioExists, isAudioPlaying, onAudioClick } = useAudioFromBuffer(audio);
const spinnerProps = {
size: useBreakpointValue(["lg", null, "xl"]) ?? undefined,
color: useColorModeValue("lingva.500", "lingva.200"),
emptyColor: useColorModeValue("gray.300", "gray.600")
};
return (
<Box
position="relative"
@@ -58,6 +65,17 @@ const TranslationArea: FC<Props> = ({ value, onChange, readOnly, audio, canCopy,
/>
</Tooltip>
</HStack>
{isLoading && <Spinner
position="absolute"
top="0"
bottom="0"
left="0"
right="0"
m="auto"
thickness="3px"
label="Loading translation"
{...spinnerProps}
/>}
</Box>
);
};

28
cypress/integration/app.spec.ts
View File

@@ -6,20 +6,25 @@ beforeEach(() => {
cy.visit("/");
});
it("switches page correctly on inputs change", () => {
it("switches page on inputs change & goes back correctly", () => {
// query change
cy.findByRole("textbox", { name: /translation query/i })
.as("query")
.type("palabra");
cy.findByText(/loading translation/i)
.should("be.visible");
cy.findByRole("textbox", { name: /translation result/i })
.as("translation")
.should("have.value", "word")
.url()
.should("include", "/auto/en/palabra");
// source change
cy.findByRole("combobox", { name: /source language/i })
.as("source")
.select("es")
.url()
.should("include", "/es/en/palabra");
// target change
cy.findByRole("combobox", { name: /target language/i })
.as("target")
.select("ca")
@@ -27,6 +32,7 @@ it("switches page correctly on inputs change", () => {
.should("have.value", "paraula")
.url()
.should("include", "/es/ca/palabra");
// lang switch
cy.findByRole("button", { name: /switch languages/i })
.click()
.get("@source")
@@ -39,6 +45,26 @@ it("switches page correctly on inputs change", () => {
.should("have.value", "palabra")
.url()
.should("include", "/ca/es/paraula");
// history back
cy.go("back")
.get("@translation")
.should("have.value", "paraula");
cy.go("back")
.get("@source")
.should("have.value", "es")
.get("@translation")
.should("have.value", "word");
cy.go("back")
.get("@source")
.should("have.value", "auto")
.get("@translation")
.should("have.value", "word");
cy.go("back")
.get("@translation")
.should("be.empty")
.get("@query")
.should("be.empty");
});
it("switches first loaded page and back and forth on language change", () => {

29
pages/[[...slug]].tsx
View File

@@ -10,7 +10,7 @@ import { retrieveFiltered, replaceBoth } from "../utils/language";
import langReducer, { Actions, initialState } from "../utils/reducer";
const Page: FC<InferGetStaticPropsType<typeof getStaticProps>> = ({ home, translationRes, audio, errorMsg, initial }) => {
const [{ source, target, query, delayedQuery, translation }, dispatch] = useReducer(langReducer, initialState);
const [{ source, target, query, delayedQuery, translation, isLoading }, dispatch] = useReducer(langReducer, initialState);
const handleChange = (e: ChangeEvent<HTMLTextAreaElement | HTMLSelectElement>) => {
dispatch({
@@ -23,9 +23,16 @@ const Page: FC<InferGetStaticPropsType<typeof getStaticProps>> = ({ home, transl
};
useEffect(() => {
const state = { ...initial, delayedQuery: initial?.query, translation: translationRes };
initial && dispatch({ type: Actions.SET_ALL, payload: { state }});
}, [initial, translationRes]);
if (home)
return dispatch({ type: Actions.SET_ALL, payload: { state: { ...initialState, isLoading: false } } });
if (!initial)
return;
dispatch({
type: Actions.SET_ALL,
payload: { state: { ...initial, delayedQuery: initial.query, translation: translationRes, isLoading: false } }
});
}, [initial, translationRes, home]);
useEffect(() => {
const timeout = setTimeout(() =>
@@ -35,6 +42,8 @@ const Page: FC<InferGetStaticPropsType<typeof getStaticProps>> = ({ home, transl
}, [query]);
useEffect(() => {
if (isLoading)
return;
if (!delayedQuery || delayedQuery === initialState.query)
return;
if (!home && !initial)
@@ -42,8 +51,15 @@ const Page: FC<InferGetStaticPropsType<typeof getStaticProps>> = ({ home, transl
if (!home && delayedQuery === initial.query && source === initial.source && target === initial.target)
return;
dispatch({ type: Actions.SET_FIELD, payload: { key: "isLoading", value: true }});
Router.push(`/${source}/${target}/${encodeURIComponent(delayedQuery)}`);
}, [source, target, delayedQuery, initial, home]);
}, [source, target, delayedQuery, initial, home, isLoading]);
useEffect(() => {
const handler = () => dispatch({ type: Actions.SET_FIELD, payload: { key: "isLoading", value: true }});
Router.events.on("beforeHistoryChange", handler);
return () => Router.events.off("beforeHistoryChange", handler);
}, []);
const { sourceLangs, targetLangs } = retrieveFiltered(source, target);
const { source: transLang, target: queryLang } = replaceBoth("exception", { source: target, target: source });
@@ -88,7 +104,7 @@ const Page: FC<InferGetStaticPropsType<typeof getStaticProps>> = ({ home, transl
aria-label="Translation query"
placeholder="Text"
value={query}
onChange={handleChange}
onChange={e => isLoading || handleChange(e)}
lang={queryLang}
audio={audio?.source}
/>
@@ -101,6 +117,7 @@ const Page: FC<InferGetStaticPropsType<typeof getStaticProps>> = ({ home, transl
lang={transLang}
audio={audio?.target}
canCopy={true}
isLoading={isLoading}
/>
</Stack>
</VStack>

4
tests/components/CustomError.test.tsx
View File

@@ -2,7 +2,7 @@ import { render, screen } from "../reactUtils";
import faker from "faker";
import CustomError from "../../components/CustomError";
const code = faker.random.number({ min: 400, max: 599 });
const code = faker.datatype.number({ min: 400, max: 599 });
const text = faker.random.words();
it("loads the layout correctly", async () => {
@@ -16,7 +16,7 @@ it("loads the layout correctly", async () => {
});
it("renders the correct status code & text", () => {
const code = faker.random.number({ min: 400, max: 599 });
const code = faker.datatype.number({ min: 400, max: 599 });
render(<CustomError statusCode={code} statusText={text} />);
expect(screen.getByText(code)).toBeVisible();

12
tests/pages/[[...slug]].test.tsx
View File

@@ -61,7 +61,7 @@ describe("getStaticProps", () => {
describe("Page", () => {
const translationRes = faker.random.words();
const randomAudio = Array.from({ length: 10 }, () => faker.random.number(100));
const randomAudio = Array.from({ length: 10 }, () => faker.datatype.number(100));
const audio = {
source: randomAudio,
target: randomAudio
@@ -84,11 +84,17 @@ describe("Page", () => {
userEvent.type(query, faker.random.words());
await waitFor(
() => expect(Router.push).not.toHaveBeenCalled(),
() => {
expect(Router.push).not.toHaveBeenCalled();
expect(screen.queryByText(/loading translation/i)).not.toBeInTheDocument();
},
{ timeout: 250 }
);
await waitFor(
() => expect(Router.push).toHaveBeenCalledTimes(1),
() => {
expect(Router.push).toHaveBeenCalledTimes(1);
expect(screen.getByText(/loading translation/i)).toBeInTheDocument();
},
{ timeout: 2500 }
);
});

6
tests/utils/reducer.test.ts
View File

@@ -21,7 +21,8 @@ it("changes all fields", () => {
target: faker.random.locale(),
query,
delayedQuery: query,
translation: faker.random.words()
translation: faker.random.words(),
isLoading: faker.datatype.boolean()
};
const res = langReducer(initialState, {
@@ -46,7 +47,8 @@ it("switches the languages & the translations", () => {
target: state.source,
query: state.translation,
delayedQuery: state.translation,
translation: ""
translation: "",
isLoading: initialState.isLoading
});
});

6
tests/utils/translate.test.ts
View File

@@ -20,7 +20,7 @@ describe("googleScrape", () => {
});
it("returns correct message on request error", async () => {
const status = faker.random.number({ min: 400, max: 499 });
const status = faker.datatype.number({ min: 400, max: 499 });
resolveFetchWith({ status });
const res = await googleScrape(source, target, query);
@@ -61,7 +61,7 @@ describe("extractSlug", () => {
it("returns empty object on 0 or >4 params", () => {
expect(extractSlug([])).toStrictEqual({});
const length = faker.random.number({ min: 4, max: 50 });
const length = faker.datatype.number({ min: 4, max: 50 });
const array = Array(length).fill("");
expect(extractSlug(array)).toStrictEqual({});
});
@@ -74,7 +74,7 @@ describe("textToSpeechScrape", () => {
});
it("returns 'null' on request error", async () => {
const status = faker.random.number({ min: 400, max: 499 });
const status = faker.datatype.number({ min: 400, max: 499 });
resolveFetchWith({ status });
expect(await textToSpeechScrape(target, query)).toBeNull();
});

5
utils/reducer.ts
View File

@@ -5,7 +5,8 @@ export const initialState = {
target: "en",
query: "",
delayedQuery: "",
translation: ""
translation: "",
isLoading: true
}
type State = typeof initialState;
@@ -20,7 +21,7 @@ type Action = {
type: Actions.SET_FIELD,
payload: {
key: string,
value: string
value: any
}
} | {
type: Actions.SET_ALL,

1130
yarn.lock
View File

File diff suppressed because it is too large Load Diff