Skip to content

Commit

Permalink
feat(frontend): Add all translate options for yup schema validation, …
Browse files Browse the repository at this point in the history
…improve imports for i18n
  • Loading branch information
oxyno-zeta committed Jun 5, 2022
1 parent adbf843 commit 8694668
Show file tree
Hide file tree
Showing 6 changed files with 157 additions and 7 deletions.
5 changes: 4 additions & 1 deletion frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
"@apollo/client": "^3.6.5",
"@emotion/react": "^11.9.0",
"@emotion/styled": "^11.8.1",
"@hookform/resolvers": "^2.9.0",
"@mui/icons-material": "^5.8.0",
"@mui/lab": "^5.0.0-alpha.83",
"@mui/material": "^5.8.1",
Expand Down Expand Up @@ -46,11 +47,13 @@
"prettier": "^2.6.2",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-hook-form": "^7.31.3",
"react-i18next": "^11.16.9",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"typescript": "^4.7.2",
"web-vitals": "^2.1.4"
"web-vitals": "^2.1.4",
"yup": "^0.32.11"
},
"scripts": {
"start": "react-scripts start",
Expand Down
40 changes: 39 additions & 1 deletion frontend/public/i18n-en.json
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,47 @@
"false": "False"
},
"fieldValidationError": {
"default": "Invalid",
"required": "Required",
"defined": "Must be defined",
"oneOf": "Must be one of the following values: {{values}}",
"notOneOf": "Must not be one of the following values: {{values}}",
"mustBeAString": "Must be a string",
"mustBeANumber": "Must be a number"
"mustBeANumber": "Must be a number",
"string": {
"length": "Must be exactly {{length}} characters",
"min": "Must be at least {{min}} characters",
"max": "Must be at most {{max}} characters",
"matches": "Must match the following: \"{{regex}}\"",
"email": "Must be a valid email",
"url": "Must be a valid URL",
"uuid": "Must be a valid UUID",
"trim": "Must be a trimmed string",
"lowercase": "Must be a lowercase string",
"uppercase": "Must be a upper case string"
},
"number": {
"min": "Must be greater than or equal to {{min}}",
"max": "Must be less than or equal to {{max}}",
"lessThan": "Must be less than {{less}}",
"moreThan": "Must be greater than {{more}}",
"positive": "Must be a positive number",
"negative": "Must be a negative number",
"integer": "Must be an integer"
},
"date": {
"min": "Field must be later than {{min}}",
"max": "Field must be at earlier than {{max}}"
},
"boolean": { "isValue": "Field must be {{value}" },
"object": {
"noUnknown": "Field has unspecified keys: {{unknown}}"
},
"array": {
"min": "Field must have at least {{min}} items",
"max": "Field must have less than or equal to {{max}} items",
"length": "Must have {{length}} item"
}
},
"filter": {
"dialogTitle": "Filter",
Expand Down
1 change: 1 addition & 0 deletions frontend/src/i18n.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,4 +27,5 @@ i18n
loadPath: '/i18n-{{lng}}.json',
},
});

export default i18n;
9 changes: 5 additions & 4 deletions frontend/src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,16 @@ import CssBaseline from '@mui/material/CssBaseline';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import * as dayjs from 'dayjs';
import localizedFormat from 'dayjs/plugin/localizedFormat';
// import i18n
import './i18n';
import './yup-i18n';

import App from './App';
import reportWebVitals from './reportWebVitals';
import MainPageCenterLoading from './components/MainPageCenterLoading';
import ConfigProvider from './components/ConfigProvider';
import TopBar from './components/TopBar';
import Footer from './components/Footer';
import reportWebVitals from './reportWebVitals';

// import i18n
import './i18n';
import ClientProvider from './components/ClientProvider';

// Extend dayjs
Expand Down
59 changes: 59 additions & 0 deletions frontend/src/yup-i18n.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import * as yup from 'yup';

yup.setLocale({
mixed: {
default: () => ({ key: 'common.fieldValidationError.default' }),
required: () => ({ key: 'common.fieldValidationError.required' }),
defined: () => ({ key: 'common.fieldValidationError.defined' }),
notOneOf: ({ values }) => ({ key: 'common.fieldValidationError.notOneOf', values: { values } }),
oneOf: ({ values }) => ({ key: 'common.fieldValidationError.oneOf', values: { values } }),
},
array: {
length: ({ length }) => ({ key: 'common.fieldValidationError.array.length', values: { length } }),
max: ({ max }) => ({ key: 'common.fieldValidationError.array.max', values: { max } }),
min: ({ min }) => ({ key: 'common.fieldValidationError.array.min', values: { min } }),
},
boolean: {
isValue: () => ({ key: 'common.fieldValidationError.boolean.isValue' }),
},
date: {
max: ({ max }) => ({ key: 'common.fieldValidationError.date.max', values: { max } }),
min: ({ min }) => ({ key: 'common.fieldValidationError.date.min', values: { min } }),
},
object: {
noUnknown: () => ({ key: 'common.fieldValidationError.object.noUnknown' }),
},
string: {
email: () => ({ key: 'common.fieldValidationError.string.email' }),
length: ({ length }) => ({ key: 'common.fieldValidationError.string.length', values: { length } }),
max: ({ max }) => ({ key: 'common.fieldValidationError.string.max', values: { max } }),
min: ({ min }) => ({ key: 'common.fieldValidationError.string.min', values: { min } }),
lowercase: () => ({ key: 'common.fieldValidationError.string.lowercase' }),
uppercase: () => ({ key: 'common.fieldValidationError.string.lowercase' }),
matches: ({ regex }) => ({ key: 'common.fieldValidationError.string.matches', values: { regex } }),
trim: () => ({ key: 'common.fieldValidationError.string.trim' }),
uuid: () => ({ key: 'common.fieldValidationError.string.uuid' }),
url: () => ({ key: 'common.fieldValidationError.string.url' }),
},
number: {
max: ({ max }) => ({ key: 'common.fieldValidationError.number.max', values: { max } }),
min: ({ min }) => ({ key: 'common.fieldValidationError.number.min', values: { min } }),
integer: () => ({ key: 'common.fieldValidationError.number.integer' }),
positive: () => ({ key: 'common.fieldValidationError.number.positive' }),
negative: () => ({ key: 'common.fieldValidationError.number.negative' }),
lessThan: ({ less }) => ({ key: 'common.fieldValidationError.number.lessThan', values: { less } }),
moreThan: ({ more }) => ({ key: 'common.fieldValidationError.number.moreThan', values: { more } }),
},
});

// now use Yup schemas AFTER you defined your custom dictionary
const schema = yup.object().shape({
name: yup.string().required(),
name2: yup.string().required(),
d: yup.bool().isTrue(),
});

schema.validate({ name: 'jimmy', age: 11 }).catch((err) => {
console.log(err);
console.log(err.message.key);
});
50 changes: 49 additions & 1 deletion frontend/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -1044,7 +1044,7 @@
core-js-pure "^3.20.2"
regenerator-runtime "^0.13.4"

"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.5", "@babel/runtime@^7.14.6", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.5", "@babel/runtime@^7.14.6", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
version "7.18.3"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.3.tgz#c7b654b57f6f63cf7f8b418ac9ca04408c4579f4"
integrity sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==
Expand Down Expand Up @@ -1333,6 +1333,11 @@
resolved "https://registry.yarnpkg.com/@graphql-typed-document-node/core/-/core-3.1.1.tgz#076d78ce99822258cf813ecc1e7fa460fa74d052"
integrity sha512-NQ17ii0rK1b34VZonlmT2QMJFI70m0TRwbknO/ihlbatXyaktDhN/98vBiUU6kNBPljqGqyIrl2T4nY2RpFANg==

"@hookform/resolvers@^2.9.0":
version "2.9.0"
resolved "https://registry.yarnpkg.com/@hookform/resolvers/-/resolvers-2.9.0.tgz#0e8c5188fb030f1c21764892db0d04058d5413f0"
integrity sha512-fW/buf863gDiU60RxCTKooJRf1YRvcMy0MTXGsyv7y0sutx0iYeZwoFNQRLBtS+hi+lo60ZV3Kf8AdqGY+sZVw==

"@humanwhocodes/config-array@^0.9.2":
version "0.9.5"
resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.9.5.tgz#2cbaf9a89460da24b5ca6531b8bbfc23e1df50c7"
Expand Down Expand Up @@ -2218,6 +2223,11 @@
resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==

"@types/lodash@^4.14.175":
version "4.14.182"
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.182.tgz#05301a4d5e62963227eaafe0ce04dd77c54ea5c2"
integrity sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==

"@types/mime@^1":
version "1.3.2"
resolved "https://registry.yarnpkg.com/@types/mime/-/mime-1.3.2.tgz#93e25bf9ee75fe0fd80b594bc4feb0e862111b5a"
Expand Down Expand Up @@ -6338,6 +6348,11 @@ locate-path@^6.0.0:
dependencies:
p-locate "^5.0.0"

lodash-es@^4.17.21:
version "4.17.21"
resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==

lodash.debounce@^4.0.8:
version "4.0.8"
resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
Expand Down Expand Up @@ -6560,6 +6575,11 @@ multicast-dns@^7.2.4:
dns-packet "^5.2.2"
thunky "^1.0.2"

nanoclone@^0.2.1:
version "0.2.1"
resolved "https://registry.yarnpkg.com/nanoclone/-/nanoclone-0.2.1.tgz#dd4090f8f1a110d26bb32c49ed2f5b9235209ed4"
integrity sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA==

nanoid@^3.3.4:
version "3.3.4"
resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
Expand Down Expand Up @@ -7601,6 +7621,11 @@ prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
object-assign "^4.1.1"
react-is "^16.13.1"

property-expr@^2.0.4:
version "2.0.5"
resolved "https://registry.yarnpkg.com/property-expr/-/property-expr-2.0.5.tgz#278bdb15308ae16af3e3b9640024524f4dc02cb4"
integrity sha512-IJUkICM5dP5znhCckHSv30Q4b5/JA5enCtkRHYaOVOAocnH/1BQEYTC5NMfT3AVl/iXKdr3aqQbQn9DxyWknwA==

proxy-addr@~2.0.7:
version "2.0.7"
resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.7.tgz#f19fe69ceab311eeb94b42e70e8c2070f9ba1025"
Expand Down Expand Up @@ -7725,6 +7750,11 @@ react-error-overlay@^6.0.11:
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==

react-hook-form@^7.31.3:
version "7.31.3"
resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.31.3.tgz#b61bafb9a7435f91695351a7a9f714d8c4df0121"
integrity sha512-NVZdCWViIWXXXlQ3jxVQH0NuNfwPf8A/0KvuCxrM9qxtP1qYosfR2ZudarziFrVOC7eTUbWbm1T4OyYCwv9oSQ==

react-i18next@^11.16.9:
version "11.16.9"
resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-11.16.9.tgz#890cdac0c49120e075d6c520b43dbad3f91bd2df"
Expand Down Expand Up @@ -8792,6 +8822,11 @@ toidentifier@1.0.1:
resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"
integrity sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==

toposort@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/toposort/-/toposort-2.0.2.tgz#ae21768175d1559d48bef35420b2f4962f09c330"
integrity sha1-riF2gXXRVZ1IvvNUILL0li8JwzA=

tough-cookie@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.0.0.tgz#d822234eeca882f991f0f908824ad2622ddbece4"
Expand Down Expand Up @@ -9547,6 +9582,19 @@ yocto-queue@^0.1.0:
resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==

yup@^0.32.11:
version "0.32.11"
resolved "https://registry.yarnpkg.com/yup/-/yup-0.32.11.tgz#d67fb83eefa4698607982e63f7ca4c5ed3cf18c5"
integrity sha512-Z2Fe1bn+eLstG8DRR6FTavGD+MeAwyfmouhHsIUgaADz8jvFKbO/fXc2trJKZg+5EBjh4gGm3iU/t3onKlXHIg==
dependencies:
"@babel/runtime" "^7.15.4"
"@types/lodash" "^4.14.175"
lodash "^4.17.21"
lodash-es "^4.17.21"
nanoclone "^0.2.1"
property-expr "^2.0.4"
toposort "^2.0.2"

zen-observable-ts@^1.2.5:
version "1.2.5"
resolved "https://registry.yarnpkg.com/zen-observable-ts/-/zen-observable-ts-1.2.5.tgz#6c6d9ea3d3a842812c6e9519209365a122ba8b58"
Expand Down

0 comments on commit 8694668

Please sign in to comment.