From 13a8332d294eedba72694f0d2c7622903c8dc405 Mon Sep 17 00:00:00 2001 From: Alexandre Valsamou-Stanislawski Date: Tue, 7 Dec 2021 15:30:02 +0100 Subject: [PATCH] Ajoute des alias et refactor des hooks --- ...ElMjBSaHVtZXJpZSZib29zdD1wb3B1bGF0aW9u.json | 1 + ...V4dC9qb2hhbiUyMGdpcm9kP3Blcl9wYWdlPTE1.json | 5 +++ ...Z1bGxfdGV4dC9tZW5vej9wZXJfcGFnZT0xNQ==.json | 16 ++++++++++ site/source/hooks/useDebounce.ts | 22 +++++++++++++ site/source/hooks/useSearchCompany.ts | 32 +++++++++++++++++++ site/tsconfig.json | 4 ++- site/webpack.common.js | 2 ++ 7 files changed, 81 insertions(+), 1 deletion(-) create mode 100644 site/cypress/fixtures/demande-mobilité/aHR0cHM6Ly9nZW8uYXBpLmdvdXYuZnIvY29tbXVuZXM/ZmllbGRzPW5vbSxjb2RlLGRlcGFydGVtZW50LHJlZ2lvbixjb2Rlc1Bvc3RhdXgmbm9tPSUyMHJ1ZSUyMGRlJTIwbGElMjBSaHVtZXJpZSZib29zdD1wb3B1bGF0aW9u.json create mode 100644 site/cypress/fixtures/gérer/aHR0cHM6Ly9lbnRyZXByaXNlLmRhdGEuZ291di5mci9hcGkvc2lyZW5lL3YxL2Z1bGxfdGV4dC9qb2hhbiUyMGdpcm9kP3Blcl9wYWdlPTE1.json create mode 100644 site/cypress/fixtures/gérer/aHR0cHM6Ly9lbnRyZXByaXNlLmRhdGEuZ291di5mci9hcGkvc2lyZW5lL3YxL2Z1bGxfdGV4dC9tZW5vej9wZXJfcGFnZT0xNQ==.json create mode 100644 site/source/hooks/useDebounce.ts create mode 100644 site/source/hooks/useSearchCompany.ts diff --git a/site/cypress/fixtures/demande-mobilité/aHR0cHM6Ly9nZW8uYXBpLmdvdXYuZnIvY29tbXVuZXM/ZmllbGRzPW5vbSxjb2RlLGRlcGFydGVtZW50LHJlZ2lvbixjb2Rlc1Bvc3RhdXgmbm9tPSUyMHJ1ZSUyMGRlJTIwbGElMjBSaHVtZXJpZSZib29zdD1wb3B1bGF0aW9u.json b/site/cypress/fixtures/demande-mobilité/aHR0cHM6Ly9nZW8uYXBpLmdvdXYuZnIvY29tbXVuZXM/ZmllbGRzPW5vbSxjb2RlLGRlcGFydGVtZW50LHJlZ2lvbixjb2Rlc1Bvc3RhdXgmbm9tPSUyMHJ1ZSUyMGRlJTIwbGElMjBSaHVtZXJpZSZib29zdD1wb3B1bGF0aW9u.json new file mode 100644 index 000000000..0637a088a --- /dev/null +++ b/site/cypress/fixtures/demande-mobilité/aHR0cHM6Ly9nZW8uYXBpLmdvdXYuZnIvY29tbXVuZXM/ZmllbGRzPW5vbSxjb2RlLGRlcGFydGVtZW50LHJlZ2lvbixjb2Rlc1Bvc3RhdXgmbm9tPSUyMHJ1ZSUyMGRlJTIwbGElMjBSaHVtZXJpZSZib29zdD1wb3B1bGF0aW9u.json @@ -0,0 +1 @@ +[] \ No newline at end of file diff --git a/site/cypress/fixtures/gérer/aHR0cHM6Ly9lbnRyZXByaXNlLmRhdGEuZ291di5mci9hcGkvc2lyZW5lL3YxL2Z1bGxfdGV4dC9qb2hhbiUyMGdpcm9kP3Blcl9wYWdlPTE1.json b/site/cypress/fixtures/gérer/aHR0cHM6Ly9lbnRyZXByaXNlLmRhdGEuZ291di5mci9hcGkvc2lyZW5lL3YxL2Z1bGxfdGV4dC9qb2hhbiUyMGdpcm9kP3Blcl9wYWdlPTE1.json new file mode 100644 index 000000000..13e153e1d --- /dev/null +++ b/site/cypress/fixtures/gérer/aHR0cHM6Ly9lbnRyZXByaXNlLmRhdGEuZ291di5mci9hcGkvc2lyZW5lL3YxL2Z1bGxfdGV4dC9qb2hhbiUyMGdpcm9kP3Blcl9wYWdlPTE1.json @@ -0,0 +1,5 @@ +{ + "message": "no results found", + "spellcheck": null, + "suggestions": [] +} \ No newline at end of file diff --git a/site/cypress/fixtures/gérer/aHR0cHM6Ly9lbnRyZXByaXNlLmRhdGEuZ291di5mci9hcGkvc2lyZW5lL3YxL2Z1bGxfdGV4dC9tZW5vej9wZXJfcGFnZT0xNQ==.json b/site/cypress/fixtures/gérer/aHR0cHM6Ly9lbnRyZXByaXNlLmRhdGEuZ291di5mci9hcGkvc2lyZW5lL3YxL2Z1bGxfdGV4dC9tZW5vej9wZXJfcGFnZT0xNQ==.json new file mode 100644 index 000000000..eaa693863 --- /dev/null +++ b/site/cypress/fixtures/gérer/aHR0cHM6Ly9lbnRyZXByaXNlLmRhdGEuZ291di5mci9hcGkvc2lyZW5lL3YxL2Z1bGxfdGV4dC9tZW5vej9wZXJfcGFnZT0xNQ==.json @@ -0,0 +1,16 @@ +{ + "message": "no results found", + "spellcheck": null, + "suggestions": [ + "menoz", + "menozzi*albertini/marie agnes/", + "menozzi*dominique emile/", + "menoz compagnie yado", + "menozzi champagne", + "menozzi cite", + "menozzi holding", + "menozzi industrie", + "menozzi vaise", + "menozzi*amerio/laurence/" + ] +} \ No newline at end of file diff --git a/site/source/hooks/useDebounce.ts b/site/source/hooks/useDebounce.ts new file mode 100644 index 000000000..671701f99 --- /dev/null +++ b/site/source/hooks/useDebounce.ts @@ -0,0 +1,22 @@ +import { useEffect, useState } from 'react' + +export function useDebounce(value: T, delay: number) { + const [debouncedValue, setDebouncedValue] = useState(value) + useEffect( + () => { + // Update debounced value after delay + const handler = setTimeout(() => { + setDebouncedValue(value) + }, delay) + + // Cancel the timeout if value changes (also on delay change or unmount) + // This is how we prevent debounced value from updating if value is changed ... + // .. within the delay period. Timeout gets cleared and restarted. + return () => { + clearTimeout(handler) + } + }, + [value, delay] // Only re-call effect if value or delay changes + ) + return debouncedValue +} diff --git a/site/source/hooks/useSearchCompany.ts b/site/source/hooks/useSearchCompany.ts new file mode 100644 index 000000000..cb4428728 --- /dev/null +++ b/site/source/hooks/useSearchCompany.ts @@ -0,0 +1,32 @@ +import { Etablissement, searchDenominationOrSiren } from 'api/sirene' +import { useEffect, useState } from 'react' +import { useDebounce } from './useDebounce' + +export default function useSearchCompany( + value: string +): [boolean, Array] { + const [result, setResult] = useState>([]) + const [searchPending, setSearchPending] = useState(!!value) + const debouncedValue = useDebounce(value, 300) + + useEffect(() => { + setSearchPending(!!value) + + if (!value) { + setResult([]) + } + }, [value, setResult, setSearchPending]) + + useEffect(() => { + if (!debouncedValue) { + return + } + + searchDenominationOrSiren(debouncedValue).then((établissements) => { + setResult(établissements || []) + setSearchPending(false) + }) + }, [debouncedValue, setResult, setSearchPending]) + + return [searchPending && result.length <= 0, result.slice(0, 6)] +} diff --git a/site/tsconfig.json b/site/tsconfig.json index 113999ef5..b61a5846c 100644 --- a/site/tsconfig.json +++ b/site/tsconfig.json @@ -19,7 +19,9 @@ "Selectors/*": ["selectors/*"], "Types/*": ["types/*"], "DesignSystem/*": ["design-system/*"], - "Data/*": ["data/*"] + "Data/*": ["data/*"], + "Hooks/*": ["hooks/*"], + "API/*": ["api/*"] }, "typeRoots": ["./types/", "./node_modules/@types"], "noEmit": true, diff --git a/site/webpack.common.js b/site/webpack.common.js index edfe69197..256a47770 100644 --- a/site/webpack.common.js +++ b/site/webpack.common.js @@ -114,6 +114,8 @@ module.exports.default = { Images: path.resolve('source/static/images/'), DesignSystem: path.resolve('source/design-system'), Data: path.resolve('source/data'), + Hooks: path.resolve('source/hooks'), + API: path.resolve('source/api'), }, extensions: ['.js', '.ts', '.tsx'], },