Онбординг (#68)

src/app/providers/layout/AuthProvider.tsx

@@ -5,13 +5,17 @@ import { useLocation } from 'react-router-dom';
 import { IsAuthResponse } from '~/shared/api/types';
 import { AuthContext, initAuth } from '~/shared/contexts';
 import { useApi } from '~/shared/hooks';
+import { PATHS } from '~/shared/lib/router';
 import { Loader } from '~/shared/ui/Loader';
+import { StartLogo } from '~/shared/ui/StartLogo';
 
 export function AuthProvider({ children }: { children: React.ReactNode }) {
   const { userApi } = useApi();
   const location = useLocation();
   const [loaded, setLoaded] = useState(false);
 
+  const isOnboardingPage = location.pathname === PATHS.onboarding;
+
   const setAuth = (data: IsAuthResponse) => {
     setState({
       ...state,
@@ -41,7 +45,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     <AuthContext.Provider value={state}>
       {!loaded ? (
         <Flex justifyContent="center" alignItems="center" h="full">
-          <Loader />
+          {isOnboardingPage ? <StartLogo /> : <Loader />}
         </Flex>
       ) : (
         children

src/app/providers/layout/Layout.tsx

@@ -20,6 +20,7 @@ export const Layout = () => {
   const headerRef = useRef<HTMLDivElement>(null);
 
   const isNotFoundPage = location.pathname === PATHS.notFound;
+  const isOnboardingPage = location.pathname === PATHS.onboarding;
   const isDialogPage = new RegExp(`${PATHS.chats}/\\d+`).test(location.pathname);
 
   useEffect(() => {
@@ -40,7 +41,7 @@ export const Layout = () => {
                 </Flex>
                 <Box position="sticky" bottom="0" bg="bg">
                   <Box ref={footerRef}></Box>
-                  {!isDialogPage && <MenuBase />}
+                  {!isDialogPage && !isOnboardingPage && <MenuBase />}
                 </Box>
               </Stack>
             ) : (

src/app/providers/layout/Routes.tsx

@@ -1,7 +1,7 @@
-import { Routes as ReactRoutes, Route } from 'react-router-dom';
+import { Navigate, Routes as ReactRoutes, Route } from 'react-router-dom';
 
 import { useIsMobile, useAuth } from '~/shared/hooks';
-import { BasePage } from '~/shared/lib/router';
+import { BasePage, PATHS } from '~/shared/lib/router';
 
 import { normalRoutes } from '../router/config';
 
@@ -11,18 +11,34 @@ export function Routes() {
 
   return (
     <ReactRoutes>
-      {normalRoutes.map((props) => {
-        let Element = props.view.base as BasePage;
-        const desktop = props.view.desktop;
+      {normalRoutes
+        .map((props) => {
+          let Element = props.view.base as BasePage;
+          const desktop = props.view.desktop;
 
-        if (!isMobile && desktop) {
-          Element = desktop;
-        }
+          if (!isMobile && desktop) {
+            Element = desktop;
+          }
 
-        return (
-          <Route key={props.path} path={props.path} element={<Element user={user} />} />
-        );
-      })}
+          if (
+            user.isAuth &&
+            !user.isActivated &&
+            ![PATHS.onboarding, PATHS.notFound].includes(props.path)
+          ) {
+            return (
+              <Route
+                key={props.path}
+                path={props.path}
+                element={<Navigate to={PATHS.notFound} replace />}
+              />
+            );
+          }
+
+          return (
+            <Route key={props.path} path={props.path} element={<Element user={user} />} />
+          );
+        })
+        .filter(Boolean)}
     </ReactRoutes>
   );
 }

src/app/providers/router/config.tsx

@@ -10,6 +10,7 @@ import {
   NotificationsPage,
   NotificationsPageDesktop,
 } from '~/pages/notifications';
+import { OnboardingPage } from '~/pages/onboarding';
 import { ProfilePage, ProfilePageDesktop } from '~/pages/profile';
 import {
   AddProjectPage,
@@ -58,6 +59,10 @@ export const normalRoutes = [
     path: PATHS.search,
     view: { base: SearchPage, desktop: SearchPageDesktop },
   },
+  {
+    path: PATHS.onboarding,
+    view: { base: OnboardingPage },
+  },
   {
     path: PATHS.projects,
     view: {

src/features/user/update-user/UpdateUser.tsx

@@ -109,7 +109,7 @@ export function UpdateUser({ user, isAvatarExist, skills }: UpdateUserProps) {
     } catch (err) {
       if (err instanceof Error) {
         toast({
-          title: 'Ошибка создания проекта',
+          title: 'Ошибка обновления профиля',
           description: err.message,
           status: 'error',
           duration: 9000,

src/features/user/update-user/index.tsx

@@ -1 +1,3 @@
 export * from './UpdateUser';
+export * from './api';
+export * from './model';

src/pages/not-found/NotFoundPage.tsx

@@ -3,11 +3,11 @@ import { BsArrowRightShort } from 'react-icons/bs';
 import { useNavigate } from 'react-router-dom';
 
 import { useIsMobile } from '~/shared/hooks';
-import { PATHS } from '~/shared/lib/router';
+import { BasePageProps, PATHS } from '~/shared/lib/router';
 
 import NotFound from './notFound.svg';
 
-export const NotFoundPage = () => {
+export const NotFoundPage = ({ user }: BasePageProps) => {
   const navigate = useNavigate();
   const isMobile = useIsMobile();
 
@@ -49,15 +49,21 @@ export const NotFoundPage = () => {
       <Button
         aria-label="main-page"
         onClick={() => {
-          navigate(PATHS.root);
+          if (!user.isActivated && user.isAuth) {
+            navigate(PATHS.onboarding);
+          } else {
+            navigate(PATHS.root);
+          }
         }}
         maxW="100%"
         padding={isMobile ? 5 : 7}
         fontSize={isMobile ? 'sm' : 'md'}
         fontWeight="600"
         rightIcon={<Icon as={BsArrowRightShort} fontSize="2xl" />}
       >
-        Вернуться на главную страницу
+        {!user.isActivated && user.isAuth
+          ? 'Пройти онбординг'
+          : 'Вернуться на главную страницу'}
       </Button>
     </Flex>
   );

src/pages/onboarding/OnboardingPage.tsx

@@ -0,0 +1,7 @@
+import { Onboarding } from '~/widgets/onboarding';
+
+import { BasePageProps } from '~/shared/lib/router';
+
+export function OnboardingPage({ user }: BasePageProps) {
+  return user.userId ? <Onboarding userId={user.userId} /> : null;
+}

src/pages/onboarding/index.ts

@@ -0,0 +1 @@
+export * from './OnboardingPage';

src/shared/config/theme/theme.ts

@@ -45,6 +45,31 @@ const Tabs = defineMultiStyleConfig({
         p: 0,
       },
     }),
+    onboard: {
+      tablist: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: '2',
+      },
+      tab: {
+        borderBottom: '4px solid',
+        borderColor: 'blackAlpha.200',
+        borderRadius: 'full',
+        w: '44px',
+        py: '0',
+        _selected: {
+          borderColor: 'gray.400',
+        },
+        _disabled: {
+          borderColor: 'blackAlpha.200',
+          opacity: 1,
+        },
+      },
+      tabpanel: {
+        p: '0',
+      },
+    },
   },
 });
 

src/shared/lib/router/paths.ts

@@ -15,4 +15,5 @@ export const PATHS = {
   profileSettings: '/settings/profile',
   notificationsSettings: '/settings/notifications',
   notFound: '/404',
+  onboarding: '/onboarding',
 };

src/shared/ui/StartLogo/StartLogo.tsx

@@ -0,0 +1,7 @@
+import { Icon } from '@chakra-ui/react';
+
+import { ReactComponent as IconLogo } from './icon-logo.svg';
+
+export function StartLogo() {
+  return <Icon as={IconLogo} w={{ base: 100, sm: 190 }} height="auto" />;
+}

src/shared/ui/StartLogo/index.ts

@@ -0,0 +1 @@
+export * from './StartLogo';