Improve first loading behavior

2024-06-17 21:30:58 +03:00 · 2024-06-17 21:30:58 +03:00 · 5068d4952e
commit 5068d4952e
parent 28eb0c981a
6 changed files with 270 additions and 231 deletions
--- a/rsconcept/frontend/src/components/wrap/RequireAuth.tsx
+++ b/rsconcept/frontend/src/components/wrap/RequireAuth.tsx
@ -1,27 +1,34 @@
 'use client';

+import { AnimatePresence } from 'framer-motion';
+
 import { useAuth } from '@/context/AuthContext';

+import Loader from '../ui/Loader';
 import TextURL from '../ui/TextURL';
+import AnimateFade from './AnimateFade';

 interface RequireAuthProps {
  children: React.ReactNode;
 }

 function RequireAuth({ children }: RequireAuthProps) {
-  const { user } = useAuth();
-  if (user) {
-    return children;
-  } else {
-    return (
-      <div className='flex flex-col items-center gap-1 mt-2'>
-        <p className='mb-2'>Пожалуйста войдите в систему</p>
-        <TextURL text='Войти в Портал' href='/login' />
-        <TextURL text='Зарегистрироваться' href='/signup' />
-        <TextURL text='Начальная страница' href='/' />
-      </div>
-    );
-  }
+  const { user, loading } = useAuth();
+
+  return (
+    <AnimatePresence mode='wait'>
+      {loading ? <Loader key='auth-loader' /> : null}
+      {!loading && user ? <AnimateFade key='auth-data'>{children}</AnimateFade> : null}
+      {!loading && !user ? (
+        <AnimateFade key='auth-no-user' className='flex flex-col items-center gap-1 mt-2'>
+          <p className='mb-2'>Пожалуйста войдите в систему</p>
+          <TextURL text='Войти в Портал' href='/login' />
+          <TextURL text='Зарегистрироваться' href='/signup' />
+          <TextURL text='Начальная страница' href='/' />
+        </AnimateFade>
+      ) : null}
+    </AnimatePresence>
+  );
 }

 export default RequireAuth;
--- a/rsconcept/frontend/src/pages/HomePage.tsx
+++ b/rsconcept/frontend/src/pages/HomePage.tsx
@ -1,27 +1,30 @@
 import { useLayoutEffect } from 'react';

 import { urls } from '@/app/urls';
+import Loader from '@/components/ui/Loader';
 import { useAuth } from '@/context/AuthContext';
 import { useConceptNavigation } from '@/context/NavigationContext';
 import { PARAMETER } from '@/utils/constants';

 function HomePage() {
  const router = useConceptNavigation();
-  const { user } = useAuth();
+  const { user, loading } = useAuth();

  useLayoutEffect(() => {
-    if (!user) {
-      setTimeout(() => {
-        router.push(urls.manuals);
-      }, PARAMETER.refreshTimeout);
-    } else {
-      setTimeout(() => {
-        router.push(urls.library);
-      }, PARAMETER.refreshTimeout);
+    if (!loading) {
+      if (!user) {
+        setTimeout(() => {
+          router.push(urls.manuals);
+        }, PARAMETER.refreshTimeout);
+      } else {
+        setTimeout(() => {
+          router.push(urls.library);
+        }, PARAMETER.refreshTimeout);
+      }
    }
-  }, [router, user]);
+  }, [router, user, loading]);

-  return <div />;
+  return <Loader />;
 }

 export default HomePage;
--- a/rsconcept/frontend/src/pages/RegisterPage.tsx
+++ b/rsconcept/frontend/src/pages/RegisterPage.tsx
@ -1,207 +0,0 @@
-'use client';
-
-import axios from 'axios';
-import clsx from 'clsx';
-import { useEffect, useMemo, useState } from 'react';
-import { toast } from 'react-toastify';
-
-import { urls } from '@/app/urls';
-import { IconHelp } from '@/components/Icons';
-import InfoError, { ErrorData } from '@/components/info/InfoError';
-import Button from '@/components/ui/Button';
-import Checkbox from '@/components/ui/Checkbox';
-import FlexColumn from '@/components/ui/FlexColumn';
-import Overlay from '@/components/ui/Overlay';
-import PrettyJson from '@/components/ui/PrettyJSON';
-import SubmitButton from '@/components/ui/SubmitButton';
-import TextInput from '@/components/ui/TextInput';
-import TextURL from '@/components/ui/TextURL';
-import Tooltip from '@/components/ui/Tooltip';
-import AnimateFade from '@/components/wrap/AnimateFade';
-import ExpectedAnonymous from '@/components/wrap/ExpectedAnonymous';
-import { useAuth } from '@/context/AuthContext';
-import { useConceptNavigation } from '@/context/NavigationContext';
-import { HelpTopic } from '@/models/miscellaneous';
-import { IUserSignupData } from '@/models/user';
-import { globals, patterns } from '@/utils/constants';
-
-function RegisterPage() {
-  const router = useConceptNavigation();
-  const { user, signup, loading, error, setError } = useAuth();
-
-  const [username, setUsername] = useState('');
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [password2, setPassword2] = useState('');
-  const [firstName, setFirstName] = useState('');
-  const [lastName, setLastName] = useState('');
-
-  const [acceptPrivacy, setAcceptPrivacy] = useState(false);
-  const [acceptRules, setAcceptRules] = useState(false);
-
-  const isValid = useMemo(
-    () => acceptPrivacy && acceptRules && !!email && !!username,
-    [acceptPrivacy, acceptRules, email, username]
-  );
-
-  useEffect(() => {
-    setError(undefined);
-  }, [username, email, password, password2, setError]);
-
-  function handleCancel() {
-    if (router.canBack()) {
-      router.back();
-    } else {
-      router.push(urls.library);
-    }
-  }
-
-  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    if (!loading) {
-      const data: IUserSignupData = {
-        username,
-        email,
-        password,
-        password2,
-        first_name: firstName,
-        last_name: lastName
-      };
-      signup(data, createdUser => {
-        router.push(urls.login_hint(createdUser.username));
-        toast.success(`Пользователь успешно создан: ${createdUser.username}`);
-      });
-    }
-  }
-
-  if (user) {
-    return (
-      <AnimateFade>
-        <ExpectedAnonymous />
-      </AnimateFade>
-    );
-  }
-  return (
-    <AnimateFade>
-      <form className={clsx('cc-column', 'mx-auto w-[36rem]', 'px-6 py-3')} onSubmit={handleSubmit}>
-        <h1>
-          <span>Новый пользователь</span>
-          <Overlay id={globals.password_tooltip} position='top-[5.4rem] left-[3.5rem]'>
-            <IconHelp size='1.25rem' className='icon-primary' />
-          </Overlay>
-          <Tooltip anchorSelect={`#${globals.password_tooltip}`} offset={6}>
-            используйте уникальный пароль для каждого сайта
-          </Tooltip>
-          <Overlay id={globals.email_tooltip} position='top-[0.5rem] right-[1.75rem]'>
-            <IconHelp size='1.25rem' className='icon-primary' />
-          </Overlay>
-          <Tooltip anchorSelect={`#${globals.email_tooltip}`} offset={6}>
-            электронная почта используется для восстановления пароля
-          </Tooltip>
-        </h1>
-        <div className='flex gap-12'>
-          <FlexColumn>
-            <TextInput
-              id='username'
-              autoComplete='username'
-              required
-              label='Имя пользователя (логин)'
-              pattern={patterns.login}
-              title='Минимум 3 знака. Латинские буквы и цифры. Не может начинаться с цифры'
-              value={username}
-              className='w-[15rem]'
-              onChange={event => setUsername(event.target.value)}
-            />
-            <TextInput
-              id='password'
-              type='password'
-              autoComplete='new-password'
-              required
-              label='Пароль'
-              className='w-[15rem]'
-              value={password}
-              onChange={event => setPassword(event.target.value)}
-            />
-            <TextInput
-              id='password2'
-              type='password'
-              label='Повторите пароль'
-              autoComplete='new-password'
-              required
-              className='w-[15rem]'
-              value={password2}
-              onChange={event => setPassword2(event.target.value)}
-            />
-          </FlexColumn>
-
-          <FlexColumn className='w-[15rem]'>
-            <TextInput
-              id='email'
-              autoComplete='email'
-              required
-              label='Электронная почта (email)'
-              title='электронная почта в корректном формате, например: i.petrov@mycompany.ru.com'
-              value={email}
-              onChange={event => setEmail(event.target.value)}
-            />
-            <TextInput
-              id='first_name'
-              label='Отображаемое имя'
-              autoComplete='given-name'
-              value={firstName}
-              onChange={event => setFirstName(event.target.value)}
-            />
-            <TextInput
-              id='last_name'
-              label='Отображаемая фамилия'
-              autoComplete='family-name'
-              value={lastName}
-              onChange={event => setLastName(event.target.value)}
-            />
-          </FlexColumn>
-        </div>
-
-        <div className='flex gap-1 text-sm'>
-          <Checkbox id='accept_terms' label='Принимаю условия' value={acceptPrivacy} setValue={setAcceptPrivacy} />
-          <TextURL text='обработки персональных данных...' href={urls.help_topic(HelpTopic.INFO_PRIVACY)} />
-        </div>
-        <div className='flex gap-1 text-sm'>
-          <Checkbox id='accept_rules' label='Принимаю ' value={acceptRules} setValue={setAcceptRules} />
-          <TextURL text='правила поведения на Портале...' href={urls.help_topic(HelpTopic.INFO_RULES)} />
-        </div>
-
-        <div className='flex justify-around my-3'>
-          <SubmitButton text='Регистрировать' className='min-w-[10rem]' loading={loading} disabled={!isValid} />
-          <Button text='Назад' className='min-w-[10rem]' onClick={() => handleCancel()} />
-        </div>
-        {error ? <ProcessError error={error} /> : null}
-      </form>
-    </AnimateFade>
-  );
-}
-
-export default RegisterPage;
-
-// ====== Internals =========
-function ProcessError({ error }: { error: ErrorData }): React.ReactElement {
-  if (axios.isAxiosError(error) && error.response && error.response.status === 400) {
-    if ('email' in error.response.data) {
-      return (
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-        <div className='mx-auto text-sm select-text clr-text-red'>{error.response.data.email}.</div>
-      );
-    } else if ('username' in error.response.data) {
-      return (
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-        <div className='mx-auto text-sm select-text clr-text-red'>{error.response.data.username}.</div>
-      );
-    } else {
-      return (
-        <div className='mx-auto text-sm select-text clr-text-red'>
-          <PrettyJson data={error.response} />
-        </div>
-      );
-    }
-  }
-  return <InfoError error={error} />;
-}
--- a/rsconcept/frontend/src/pages/RegisterPage/FormSignup.tsx
+++ b/rsconcept/frontend/src/pages/RegisterPage/FormSignup.tsx
@ -0,0 +1,195 @@
+'use client';
+
+import axios from 'axios';
+import clsx from 'clsx';
+import { useEffect, useMemo, useState } from 'react';
+import { toast } from 'react-toastify';
+
+import { urls } from '@/app/urls';
+import { IconHelp } from '@/components/Icons';
+import InfoError, { ErrorData } from '@/components/info/InfoError';
+import Button from '@/components/ui/Button';
+import Checkbox from '@/components/ui/Checkbox';
+import FlexColumn from '@/components/ui/FlexColumn';
+import Overlay from '@/components/ui/Overlay';
+import PrettyJson from '@/components/ui/PrettyJSON';
+import SubmitButton from '@/components/ui/SubmitButton';
+import TextInput from '@/components/ui/TextInput';
+import TextURL from '@/components/ui/TextURL';
+import Tooltip from '@/components/ui/Tooltip';
+import { useAuth } from '@/context/AuthContext';
+import { useConceptNavigation } from '@/context/NavigationContext';
+import { HelpTopic } from '@/models/miscellaneous';
+import { IUserSignupData } from '@/models/user';
+import { globals, patterns } from '@/utils/constants';
+
+function FormSignup() {
+  const router = useConceptNavigation();
+  const { signup, loading, error, setError } = useAuth();
+
+  const [username, setUsername] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [password2, setPassword2] = useState('');
+  const [firstName, setFirstName] = useState('');
+  const [lastName, setLastName] = useState('');
+
+  const [acceptPrivacy, setAcceptPrivacy] = useState(false);
+  const [acceptRules, setAcceptRules] = useState(false);
+
+  const isValid = useMemo(
+    () => acceptPrivacy && acceptRules && !!email && !!username,
+    [acceptPrivacy, acceptRules, email, username]
+  );
+
+  useEffect(() => {
+    setError(undefined);
+  }, [username, email, password, password2, setError]);
+
+  function handleCancel() {
+    if (router.canBack()) {
+      router.back();
+    } else {
+      router.push(urls.library);
+    }
+  }
+
+  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (!loading) {
+      const data: IUserSignupData = {
+        username,
+        email,
+        password,
+        password2,
+        first_name: firstName,
+        last_name: lastName
+      };
+      signup(data, createdUser => {
+        router.push(urls.login_hint(createdUser.username));
+        toast.success(`Пользователь успешно создан: ${createdUser.username}`);
+      });
+    }
+  }
+  return (
+    <form className={clsx('cc-column', 'mx-auto w-[36rem]', 'px-6 py-3')} onSubmit={handleSubmit}>
+      <h1>
+        <span>Новый пользователь</span>
+        <Overlay id={globals.password_tooltip} position='top-[5.4rem] left-[3.5rem]'>
+          <IconHelp size='1.25rem' className='icon-primary' />
+        </Overlay>
+        <Tooltip anchorSelect={`#${globals.password_tooltip}`} offset={6}>
+          используйте уникальный пароль для каждого сайта
+        </Tooltip>
+        <Overlay id={globals.email_tooltip} position='top-[0.5rem] right-[1.75rem]'>
+          <IconHelp size='1.25rem' className='icon-primary' />
+        </Overlay>
+        <Tooltip anchorSelect={`#${globals.email_tooltip}`} offset={6}>
+          электронная почта используется для восстановления пароля
+        </Tooltip>
+      </h1>
+      <div className='flex gap-12'>
+        <FlexColumn>
+          <TextInput
+            id='username'
+            autoComplete='username'
+            required
+            label='Имя пользователя (логин)'
+            pattern={patterns.login}
+            title='Минимум 3 знака. Латинские буквы и цифры. Не может начинаться с цифры'
+            value={username}
+            className='w-[15rem]'
+            onChange={event => setUsername(event.target.value)}
+          />
+          <TextInput
+            id='password'
+            type='password'
+            autoComplete='new-password'
+            required
+            label='Пароль'
+            className='w-[15rem]'
+            value={password}
+            onChange={event => setPassword(event.target.value)}
+          />
+          <TextInput
+            id='password2'
+            type='password'
+            label='Повторите пароль'
+            autoComplete='new-password'
+            required
+            className='w-[15rem]'
+            value={password2}
+            onChange={event => setPassword2(event.target.value)}
+          />
+        </FlexColumn>
+
+        <FlexColumn className='w-[15rem]'>
+          <TextInput
+            id='email'
+            autoComplete='email'
+            required
+            label='Электронная почта (email)'
+            title='электронная почта в корректном формате, например: i.petrov@mycompany.ru.com'
+            value={email}
+            onChange={event => setEmail(event.target.value)}
+          />
+          <TextInput
+            id='first_name'
+            label='Отображаемое имя'
+            autoComplete='given-name'
+            value={firstName}
+            onChange={event => setFirstName(event.target.value)}
+          />
+          <TextInput
+            id='last_name'
+            label='Отображаемая фамилия'
+            autoComplete='family-name'
+            value={lastName}
+            onChange={event => setLastName(event.target.value)}
+          />
+        </FlexColumn>
+      </div>
+
+      <div className='flex gap-1 text-sm'>
+        <Checkbox id='accept_terms' label='Принимаю условия' value={acceptPrivacy} setValue={setAcceptPrivacy} />
+        <TextURL text='обработки персональных данных...' href={urls.help_topic(HelpTopic.INFO_PRIVACY)} />
+      </div>
+      <div className='flex gap-1 text-sm'>
+        <Checkbox id='accept_rules' label='Принимаю ' value={acceptRules} setValue={setAcceptRules} />
+        <TextURL text='правила поведения на Портале...' href={urls.help_topic(HelpTopic.INFO_RULES)} />
+      </div>
+
+      <div className='flex justify-around my-3'>
+        <SubmitButton text='Регистрировать' className='min-w-[10rem]' loading={loading} disabled={!isValid} />
+        <Button text='Назад' className='min-w-[10rem]' onClick={() => handleCancel()} />
+      </div>
+      {error ? <ProcessError error={error} /> : null}
+    </form>
+  );
+}
+
+export default FormSignup;
+
+// ====== Internals =========
+function ProcessError({ error }: { error: ErrorData }): React.ReactElement {
+  if (axios.isAxiosError(error) && error.response && error.response.status === 400) {
+    if ('email' in error.response.data) {
+      return (
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        <div className='mx-auto text-sm select-text clr-text-red'>{error.response.data.email}.</div>
+      );
+    } else if ('username' in error.response.data) {
+      return (
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        <div className='mx-auto text-sm select-text clr-text-red'>{error.response.data.username}.</div>
+      );
+    } else {
+      return (
+        <div className='mx-auto text-sm select-text clr-text-red'>
+          <PrettyJson data={error.response} />
+        </div>
+      );
+    }
+  }
+  return <InfoError error={error} />;
+}
--- a/rsconcept/frontend/src/pages/RegisterPage/RegisterPage.tsx
+++ b/rsconcept/frontend/src/pages/RegisterPage/RegisterPage.tsx
@ -0,0 +1,40 @@
+import { AnimatePresence } from 'framer-motion';
+
+import Loader from '@/components/ui/Loader';
+import AnimateFade from '@/components/wrap/AnimateFade';
+import ExpectedAnonymous from '@/components/wrap/ExpectedAnonymous';
+import { useAuth } from '@/context/AuthContext';
+
+import FormSignup from './FormSignup';
+
+function RegisterPage() {
+  const { user, loading } = useAuth();
+
+  if (loading) {
+    return <Loader />;
+  }
+  if (user && !loading) {
+    return (
+      <AnimateFade>
+        <ExpectedAnonymous />
+      </AnimateFade>
+    );
+  }
+  return (
+    <AnimatePresence mode='wait'>
+      {loading ? <Loader key='signup-loader' /> : null}
+      {!loading && user ? (
+        <AnimateFade key='signup-has-user'>
+          <ExpectedAnonymous />
+        </AnimateFade>
+      ) : null}
+      {!loading && !user ? (
+        <AnimateFade key='signup-no-user'>
+          <FormSignup />
+        </AnimateFade>
+      ) : null}
+    </AnimatePresence>
+  );
+}
+
+export default RegisterPage;
--- a/rsconcept/frontend/src/pages/RegisterPage/index.tsx
+++ b/rsconcept/frontend/src/pages/RegisterPage/index.tsx
@ -0,0 +1 @@
+export { default } from './RegisterPage';