UsersPage: pluralize words using the lib "polish-plurals"

fix warning about loadUser

package.json

@@ -21,6 +21,7 @@
     "graphql": "^15.5.0",
     "lodash": "^4.17.21",
     "notistack": "^1.0.5",
+    "polish-plurals": "^1.1.0",
     "query-string": "^6.14.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",

src/features/UsersPage/UsersPage.tsx

@@ -8,6 +8,7 @@ import {
   withDefault,
 } from 'use-query-params';
 import { useSnackbar } from 'notistack';
+import { polishPlurals } from 'polish-plurals';
 import SortParam, { decodeSort } from 'libs/serialize-query-params/SortParam';
 import { useAuth } from 'libs/auth';
 import { useScrollToElement } from 'libs/hooks';
@@ -242,7 +243,12 @@ const UsersPage = () => {
       <Snackbar
         open={selectedUsers.length > 0}
         anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-        message={`Wybrani użytkownicy: ${selectedUsers.length}`}
+        message={`Wybrano ${selectedUsers.length} ${polishPlurals(
+          'użytkownika',
+          'użytkowników',
+          'użytkowników',
+          selectedUsers.length
+        )}`}
         action={
           <>
             <Button onClick={handleDeleteUsers} color="secondary">

src/features/UsersPage/components/FormDialog/FormDialog.tsx

@@ -1,5 +1,6 @@
 import { useForm } from 'react-hook-form';
 import { pick } from 'lodash';
+import { polishPlurals } from 'polish-plurals';
 import isEmail from 'validator/es/lib/isEmail';
 import { formatRole } from '../../utils';
 import {
@@ -82,7 +83,12 @@ const FormDialog = ({ open, onClose, user, onSubmit }: FormDialogProps) => {
               },
               maxLength: {
                 value: MAX_DISPLAY_NAME_LENGTH,
-                message: `Maksymalna długość nazwy użytkownika to ${MAX_DISPLAY_NAME_LENGTH} znaki.`,
+                message: `Maksymalna długość nazwy użytkownika to ${MAX_DISPLAY_NAME_LENGTH} ${polishPlurals(
+                  'znak',
+                  'znaki',
+                  'znaków',
+                  MAX_DISPLAY_NAME_LENGTH
+                )}.`,
               },
             })}
             error={!!errors.displayName}
@@ -113,11 +119,21 @@ const FormDialog = ({ open, onClose, user, onSubmit }: FormDialogProps) => {
               required: editMode ? false : 'Te pole jest wymagane.',
               minLength: {
                 value: MIN_PASSWORD_LENGTH,
-                message: `Hasło musi zawierać co najmniej ${MIN_PASSWORD_LENGTH} znaków.`,
+                message: `Hasło musi zawierać co najmniej ${MIN_PASSWORD_LENGTH} ${polishPlurals(
+                  'znak',
+                  'znaki',
+                  'znaków',
+                  MIN_PASSWORD_LENGTH
+                )}.`,
               },
               maxLength: {
                 value: MAX_PASSWORD_LENGTH,
-                message: `Hasło może zawierać co najwyżej ${MAX_PASSWORD_LENGTH} znaki.`,
+                message: `Hasło może zawierać co najwyżej ${MAX_PASSWORD_LENGTH} ${polishPlurals(
+                  'znak',
+                  'znaki',
+                  'znaków',
+                  MAX_PASSWORD_LENGTH
+                )}.`,
               },
             })}
             error={!!errors.password}
@@ -126,7 +142,7 @@ const FormDialog = ({ open, onClose, user, onSubmit }: FormDialogProps) => {
           <FormControl>
             <FormLabel>Rola</FormLabel>
             <RadioGroup name="role" defaultValue={user?.role ?? Role.User}>
-              {[Role.Admin, Role.User].map(role => {
+              {Object.values(Role).map(role => {
                 return (
                   <FormControlLabel
                     value={role}

src/libs/auth/Provider.tsx

@@ -7,6 +7,7 @@ import { MutationSignInArgs, Mutation } from 'libs/graphql/types';
 import TokenStorage from '../tokenstorage/TokenStorage';
 import { QUERY_ME } from './queries';
 import { MUTATION_SIGN_IN } from './mutations';
+import { useCallback } from 'react';
 
 export interface AuthProviderProps {
   tokenStorage?: TokenStorage;
@@ -27,12 +28,7 @@ export function AuthProvider(props: AuthProviderProps) {
     }
     return new TokenStorage();
   }, [props.tokenStorage]);
-
-  useEffect(() => {
-    loadUser();
-  }, []);
-
-  const loadUser = async () => {
+  const loadUser = useCallback(async () => {
     if (tokenStorage.token) {
       try {
         const result = await client.query<MeQueryResult>({
@@ -45,7 +41,10 @@ export function AuthProvider(props: AuthProviderProps) {
       } catch (e) {}
     }
     setLoading(false);
-  };
+  }, [setUser, setLoading, client, tokenStorage]);
+  useEffect(() => {
+    loadUser();
+  }, [loadUser]);
 
   const signIn: AuthContext['signIn'] = async (
     email: string,

yarn.lock

@@ -10153,6 +10153,11 @@ pnp-webpack-plugin@1.6.4:
   dependencies:
     ts-pnp "^1.1.6"
 
+polish-plurals@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/polish-plurals/-/polish-plurals-1.1.0.tgz#c512cc06df8881c7f199dd12aba197552c3dada8"
+  integrity sha512-Sect6u4dScUC15pUZGhbfr7Q5o6CRAIpBj/KdkYf27EUa5Ls6+MkK5LXUH3PQL5aPAmFGnmJMXhdXzNLGc5V5A==
+
 popper.js@1.16.1-lts:
   version "1.16.1-lts"
   resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1-lts.tgz#cf6847b807da3799d80ee3d6d2f90df8a3f50b05"