Merge pull request #82 from Quiddlee/fix/fix_small_issues

fix: fix password validation. Add translation for docs section
Quiddlee · Jan 7, 2024 · 0454df8 · 0454df8
2 parents e381d54 + 7eb7672
commit 0454df8
Show file tree

Hide file tree

Showing 13 changed files with 97 additions and 31 deletions.
diff --git a/src/components/DocsComp/DocsComp.tsx b/src/components/DocsComp/DocsComp.tsx
@@ -1,5 +1,7 @@
 import { lazy, Suspense } from 'react';
 
+import { useLanguage } from '@/shared/Context/hooks';
+
 import useSchemaExplorer from './lib/hooks/useSchemaExplorer';
 import DocsFallback from './ui/DocsFallback';
 import DocsOverlay from './ui/DocsOverlay';
@@ -15,12 +17,14 @@ const DocsModal = lazy(() => import('./ui/DocsModal'));
 
 const DocsComp = ({ isShown, setIsDocsShown }: PropsType) => {
   const schemaExplorer = useSchemaExplorer();
+  const { translation } = useLanguage();
+  const { fallback, suspense } = translation.docsSection;
   return (
     <DocsOverlay isShown={isShown} setIsDocsShown={setIsDocsShown} explorer={schemaExplorer}>
-      <ErrorBoundary fallback={<DocsFallback />}>
+      <ErrorBoundary fallback={<DocsFallback text={fallback} />}>
         <>
           <span className="absolute left-0 top-0 m-auto h-full w-[270px] origin-left animate-fade-in-docs rounded-r-4xl bg-surface sm:w-[420px]" />
-          <Suspense fallback={<SuspenseFallback />}>
+          <Suspense fallback={<SuspenseFallback text={suspense} />}>
             <DocsModal setIsDocsShown={setIsDocsShown} explorer={schemaExplorer} />
           </Suspense>
         </>

diff --git a/src/components/DocsComp/ui/DocsFallback.tsx b/src/components/DocsComp/ui/DocsFallback.tsx
@@ -1,13 +1,23 @@
+import { FC } from 'react';
+
 import DocsModalLayout from '@/layouts/DocsModalLayout';
 
-const DocsFallback = () => {
+type PropsType = {
+  text: {
+    partOne: string;
+    partTwo: string;
+  };
+};
+
+const DocsFallback: FC<PropsType> = ({ text }) => {
+  const { partOne, partTwo } = text;
   return (
     <DocsModalLayout>
       <div className="flex h-full w-full items-center justify-center">
         <p className="p-6 text-center">
-          Something gone wrong with our docs... <br />
+          {partOne} <br />
           <br />
-          Please, reload docs section to continue browsing schema documentation.
+          {partTwo}
         </p>
       </div>
     </DocsModalLayout>

diff --git a/src/components/DocsComp/ui/DocsLoader.tsx b/src/components/DocsComp/ui/DocsLoader.tsx
@@ -1,12 +1,16 @@
+import { FC } from 'react';
+
 import DocsModalLayout from '@/layouts/DocsModalLayout';
 import Spinner from '@/shared/ui/Spinner';
 
-const DocsLoader = () => {
+type PropsType = { text: string };
+
+const DocsLoader: FC<PropsType> = ({ text }) => {
   return (
     <DocsModalLayout>
       <div className="flex h-full w-full flex-col items-center justify-center">
         <Spinner indeterminate />
-        <p className="mt-10 text-on-surface">We are loading your docs...</p>
+        <p className="mt-10 text-on-surface">{text}</p>
       </div>
     </DocsModalLayout>
   );

diff --git a/src/components/DocsComp/ui/DocsModal.tsx b/src/components/DocsComp/ui/DocsModal.tsx
@@ -1,7 +1,7 @@
 import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 
 import DocsModalLayout from '@/layouts/DocsModalLayout';
-import { useAppContext } from '@/shared/Context/hooks';
+import { useAppContext, useLanguage } from '@/shared/Context/hooks';
 import { DocsExplorerType, SchemaTypeObj } from '@/shared/types';
 import Icon from '@shared/ui/Icon';
 import IconButton from '@shared/ui/IconButton';
@@ -20,16 +20,19 @@ type PropsType = {
 const DocsModal = ({ setIsDocsShown, explorer }: PropsType) => {
   const { currEndpoint, setEndpointSchema, endpointSchema } = useAppContext();
   const [isLoading, setIsLoading] = useState(false);
+  const { translation } = useLanguage();
+
+  const { loader, schemaFallback, rootDocsComp } = translation.docsSection;
 
   useEffect(() => {
     getEndpointSchema(currEndpoint, setEndpointSchema, setIsLoading);
   }, [currEndpoint, setEndpointSchema]);
 
-  if (isLoading) return <DocsLoader />;
-  if (!endpointSchema) return <SchemaFallbackUi closeModal={setIsDocsShown} />;
+  if (isLoading) return <DocsLoader text={loader} />;
+  if (!endpointSchema) return <SchemaFallbackUi closeModal={setIsDocsShown} text={schemaFallback} />;
 
   const content = explorer.isDocs() ? (
-    <DocsRootComp types={endpointSchema.types as SchemaTypeObj[]} explorer={explorer} />
+    <DocsRootComp types={endpointSchema.types as SchemaTypeObj[]} explorer={explorer} translation={rootDocsComp} />
   ) : (
     <DocsTypeComp
       explorer={explorer}

diff --git a/src/components/DocsComp/ui/DocsRootComp.tsx b/src/components/DocsComp/ui/DocsRootComp.tsx
@@ -1,7 +1,21 @@
+import { FC } from 'react';
+
 import useScrollbar from '@/shared/lib/hooks/useScrollbar';
 import { DocsExplorerType, SchemaTypeObj } from '@/shared/types';
 
-const DocsRootComp = ({ types, explorer }: { types: SchemaTypeObj[]; explorer: DocsExplorerType }) => {
+type PropsType = {
+  translation: {
+    title: string;
+    subtitle: string;
+    rootTypes: string;
+    allTypesTitle: string;
+  };
+  types: SchemaTypeObj[];
+  explorer: DocsExplorerType;
+};
+
+const DocsRootComp: FC<PropsType> = ({ types, explorer, translation }) => {
+  const { title, subtitle, rootTypes, allTypesTitle } = translation;
   function clinkHandler(e: React.MouseEvent<HTMLAnchorElement, MouseEvent>, typeName: string) {
     e.preventDefault();
     explorer.next(typeName);
@@ -28,14 +42,12 @@ const DocsRootComp = ({ types, explorer }: { types: SchemaTypeObj[]; explorer: D
   return (
     <div ref={rootRef} className="h-full animate-fade-in-section">
       <div className="animate-fade-in-section rounded-[24px] bg-surface-container px-8 py-10 text-left text-on-surface ease-emphasized-decelerate sm:p-[56px]">
-        <h3 className="text-[36px] font-[500] sm:text-[57px]">Docs</h3>
-        <p className="sm:text-md mt-10 text-left text-sm">
-          A GraphQL schema provides a root type for each kind of operation.
-        </p>
+        <h3 className="text-[36px] font-[500] sm:text-[57px]">{title}</h3>
+        <p className="sm:text-md mt-10 text-left text-sm">{subtitle}</p>
       </div>
       <div className="mt-0 pl-10 pr-4 pt-10 text-left font-[500] ease-emphasized-decelerate sm:mt-[56px] sm:p-10 sm:px-[56px]">
         <h4 className="animation-delay-200 animate-fade-in-section text-2xl ease-emphasized-decelerate sm:text-[28px]">
-          Root types:
+          {rootTypes}
         </h4>
         <p className="animation-delay-200 mt-4 animate-fade-in-section ease-emphasized-decelerate">
           query:&nbsp;
@@ -48,7 +60,7 @@ const DocsRootComp = ({ types, explorer }: { types: SchemaTypeObj[]; explorer: D
           </a>
         </p>
         <h4 className="animation-delay-300 mt-8 animate-fade-in-section text-2xl ease-emphasized-decelerate sm:mt-[56px] sm:text-[28px]">
-          All schema types:
+          {allTypesTitle}
         </h4>
         <ul className="animation-delay-300 mt-4 animate-fade-in-section ease-emphasized-decelerate">{allTypes}</ul>
       </div>

diff --git a/src/components/DocsComp/ui/SchemaFallbackUi.tsx b/src/components/DocsComp/ui/SchemaFallbackUi.tsx
@@ -6,9 +6,10 @@ import IconButton from '@/shared/ui/IconButton';
 
 type PropsType = {
   closeModal: (value: SetStateAction<boolean>) => void;
+  text: string;
 };
 
-const SchemaFallbackUi: FC<PropsType> = ({ closeModal }) => {
+const SchemaFallbackUi: FC<PropsType> = ({ closeModal, text }) => {
   return (
     <DocsModalLayout>
       <IconButton
@@ -21,7 +22,7 @@ const SchemaFallbackUi: FC<PropsType> = ({ closeModal }) => {
         <Icon>close</Icon>
       </IconButton>
       <div className="flex h-full w-full items-center p-6">
-        <p className="w-full text-center text-on-surface">There is no schema at provided endpoint :(</p>
+        <p className="w-full text-center text-on-surface">{text}</p>
       </div>
     </DocsModalLayout>
   );

diff --git a/src/components/DocsComp/ui/SuspenseFallback.tsx b/src/components/DocsComp/ui/SuspenseFallback.tsx
@@ -1,12 +1,18 @@
+import { FC } from 'react';
+
 import DocsModalLayout from '@/layouts/DocsModalLayout';
 import Spinner from '@/shared/ui/Spinner';
 
-const SuspenseFallback = () => {
+type PropsType = {
+  text: string;
+};
+
+const SuspenseFallback: FC<PropsType> = ({ text }) => {
   return (
     <DocsModalLayout>
       <div className="flex h-full w-full flex-col items-center justify-center">
         <Spinner indeterminate />
-        <p className="mt-10 text-on-surface">Soon here will be docs section...</p>
+        <p className="mt-10 text-on-surface">{text}</p>
       </div>
     </DocsModalLayout>
   );

diff --git a/src/components/Editor/lib/hooks/useEditorUrlState.ts b/src/components/Editor/lib/hooks/useEditorUrlState.ts
@@ -18,7 +18,7 @@ function useEditorUrlState(urlParam: UrlParams) {
 
 	useEffect(() => {
 		if (urlState === null) {
-			handleActiveView(activeView);
+			handleActiveView?.(activeView);
 		}
 	}, [activeView, handleActiveView, urlState]);
 

diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -6,7 +6,7 @@ import cn from '@shared/lib/helpers/cn';
 
 const Footer: FC<HTMLAttributes<HTMLElement>> = ({ className }) => {
   return (
-    <footer className={cn('grid items-center justify-center justify-items-center gap-1.5', className)}>
+    <footer className={cn('grid items-center justify-center justify-items-center gap-1.5 text-on-surface', className)}>
       <div className="flex gap-3">
         <a href="https://github.com/Quiddlee" className="flex gap-[7px]">
           <img src={ghIcon} alt="" />

diff --git a/src/locales/en.ts b/src/locales/en.ts
@@ -187,6 +187,21 @@ const en = {
 			},
 		},
 	},
+	docsSection: {
+		fallback: {
+			partOne: 'Something gone wrong with our docs...',
+			partTwo: 'Please, reload docs section to continue browsing schema documentation.',
+		},
+		suspense: 'Soon here will be docs section...',
+		loader: 'We are loading your docs...',
+		schemaFallback: 'There is no schema at provided endpoint :(',
+		rootDocsComp: {
+			title: 'Docs',
+			subtitle: 'A GraphQL schema provides a root type for each kind of operation.',
+			rootTypes: 'Root types:',
+			allTypesTitle: 'All schema types:',
+		},
+	},
 };
 
 export default en;
diff --git a/src/locales/ru.ts b/src/locales/ru.ts
@@ -189,6 +189,21 @@ const ru = {
 			},
 		},
 	},
+	docsSection: {
+		fallback: {
+			partOne: 'Что-то пошло не так с документацией...',
+			partTwo: 'Пожалуйста, перезагрузите секцию документации, чтобы использовать её.',
+		},
+		suspense: 'Скоро тут появится документация...',
+		loader: 'Загружаем документацию...',
+		schemaFallback: 'По данному адресу документация отсутствует...',
+		rootDocsComp: {
+			title: 'Схема',
+			subtitle: 'Схема GraphQL предоставляет корневой типа для каждого типа запроса.',
+			rootTypes: 'Корневые типы:',
+			allTypesTitle: 'Все типы схемы:',
+		},
+	},
 };
 
 export default ru;
diff --git a/src/shared/constants/validationSchema.ts b/src/shared/constants/validationSchema.ts
@@ -2,8 +2,7 @@ import * as Yup from 'yup';
 
 const emailRegEx = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
 const atLeastOneDigit = /[0-9]/;
-const atLeastOneLowerCase = /[a-z]/;
-const atLeastOneUpperCase = /[A-Z]/;
+const atLeastOneUnicodeChar = /^(?=.*\p{L})[^\s]+$/u;
 const atLeastOneSpecialCharacter = /[^\w\s]/g;
 
 const email = () => {
@@ -17,8 +16,7 @@ const password = () => {
 		password: Yup.string()
 			.min(8, 'code3')
 			.matches(atLeastOneDigit, 'code12')
-			.matches(atLeastOneLowerCase, 'code13')
-			.matches(atLeastOneUpperCase, 'code14')
+			.matches(atLeastOneUnicodeChar, 'code13')
 			.matches(atLeastOneSpecialCharacter, 'code15')
 			.required('code5'),
 	};

diff --git a/src/shared/helpers/notationLocalizer.ts b/src/shared/helpers/notationLocalizer.ts
@@ -10,8 +10,7 @@ const enLocale = {
 	code10: 'Error, email is occupied',
 	code11: 'Unexpected error have happened...',
 	code12: 'Must contain at least 1 digit',
-	code13: 'Must contain at least 1 lowercase letter',
-	code14: 'Must contain at least 1 uppercase letter',
+	code13: 'Must contain at least 1 letter',
 	code15: 'Must contain at least 1 special character',
 };
 const ruLocale = {
@@ -27,7 +26,6 @@ const ruLocale = {
 	code11: 'Произошла непредвиденная ошибка...',
 	code12: 'Должен содержать как минимум 1 цифру',
 	code13: 'Должен содержать как минимум 1 букву',
-	code14: 'Должен содержать как минимум 1 загл. букву',
 	code15: 'Должен содержать как минимум 1 спец. символ',
 };