Добавили заметки в сайдбар (#126)

* added notes sidebar

* added note dropping and editing

* added sidebar navigation

* handling sidebarchanges over time

* using router back for closing sidebar

* fixed tripping inside single sidebar

* added superpowers toggle to sidebar

* user button opens sidebar now

* added profile cover for profile sidebar

* removed profile sidebar completely

* ran prettier over project

* added note not found error literal

src/containers/sidebars/ProfileSidebar/index.tsx

@@ -1,22 +1,72 @@
-import { VFC } from 'react';
+import React, { useCallback, useEffect, useMemo, VFC } from 'react';
 
+import { isNil } from 'ramda';
+
+import { CoverBackdrop } from '~/components/containers/CoverBackdrop';
 import { ProfileSidebarNotes } from '~/components/profile/ProfileSidebarNotes';
 import { ProfileSidebarSettings } from '~/components/profile/ProfileSidebarSettings';
 import { SidebarStack } from '~/components/sidebar/SidebarStack';
 import { SidebarStackCard } from '~/components/sidebar/SidebarStackCard';
+import { SidebarName } from '~/constants/sidebar';
 import { ProfileSidebarMenu } from '~/containers/profile/ProfileSidebarMenu';
 import { SidebarWrapper } from '~/containers/sidebars/SidebarWrapper';
-import { DialogComponentProps } from '~/types/modal';
+import { useAuth } from '~/hooks/auth/useAuth';
+import { useUser } from '~/hooks/auth/useUser';
+import type { SidebarComponentProps } from '~/types/sidebar';
 
-interface ProfileSidebarProps extends DialogComponentProps {
-  page: string;
+const tabs = ['profile', 'bookmarks'] as const;
+type TabName = typeof tabs[number];
+
+interface ProfileSidebarProps
+  extends SidebarComponentProps<SidebarName.Settings> {
+  page?: TabName;
 }
 
-const ProfileSidebar: VFC<ProfileSidebarProps> = ({ onRequestClose }) => {
+const ProfileSidebar: VFC<ProfileSidebarProps> = ({
+  onRequestClose,
+  page,
+  openSidebar,
+}) => {
+  const { isUser } = useAuth();
+  const {
+    user: { cover },
+  } = useUser();
+
+  const tab = useMemo(
+    () => (page ? Math.max(tabs.indexOf(page), 0) : undefined),
+    [page],
+  );
+
+  const onTabChange = useCallback(
+    (val: number | undefined) => {
+      openSidebar(SidebarName.Settings, {
+        page: !isNil(val) ? tabs[val] : undefined,
+      });
+    },
+    [open, onRequestClose],
+  );
+
+  useEffect(() => {
+    if (!isUser) {
+      onRequestClose();
+    }
+  }, [isUser]);
+
+  if (!isUser) {
+    return null;
+  }
+
   return (
-    <SidebarWrapper onClose={onRequestClose}>
-      <SidebarStack>
-        <SidebarStackCard headerFeature="close" title="Профиль" onBackPress={onRequestClose}>
+    <SidebarWrapper
+      onClose={onRequestClose}
+      backdrop={cover && <CoverBackdrop cover={cover} />}
+    >
+      <SidebarStack tab={tab} onTabChange={onTabChange}>
+        <SidebarStackCard
+          headerFeature="close"
+          title="Профиль"
+          onBackPress={onRequestClose}
+        >
           <ProfileSidebarMenu onClose={onRequestClose} />
         </SidebarStackCard>
 

src/containers/sidebars/SidebarWrapper/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useRef } from 'react';
+import React, { FC, ReactNode, useEffect, useRef } from 'react';
 
 import { clearAllBodyScrollLocks, disableBodyScroll } from 'body-scroll-lock';
 
@@ -9,9 +9,15 @@ import styles from './styles.module.scss';
 interface IProps {
   onClose?: () => void;
   closeOnBackdropClick?: boolean;
+  backdrop?: ReactNode;
 }
 
-const SidebarWrapper: FC<IProps> = ({ children, onClose, closeOnBackdropClick = true }) => {
+const SidebarWrapper: FC<IProps> = ({
+  children,
+  onClose,
+  closeOnBackdropClick = true,
+  backdrop,
+}) => {
   const ref = useRef<HTMLDivElement>(null);
 
   useCloseOnEscape(onClose);
@@ -25,7 +31,12 @@ const SidebarWrapper: FC<IProps> = ({ children, onClose, closeOnBackdropClick =
 
   return (
     <div className={styles.wrapper} ref={ref}>
-      {closeOnBackdropClick && <div className={styles.backdrop} onClick={onClose} />}
+      {(closeOnBackdropClick || backdrop) && (
+        <div className={styles.backdrop} onClick={onClose}>
+          {backdrop}
+        </div>
+      )}
+
       {children}
     </div>
   );