handling sidebarchanges over time

.env.local

@@ -1,6 +1,6 @@
-NEXT_PUBLIC_API_HOST=https://pig.staging.vault48.org/
+# NEXT_PUBLIC_API_HOST=https://pig.staging.vault48.org/
-NEXT_PUBLIC_REMOTE_CURRENT=https://pig.staging.vault48.org/static/
+# NEXT_PUBLIC_REMOTE_CURRENT=https://pig.staging.vault48.org/static/
-#NEXT_PUBLIC_API_HOST=http://localhost:8888/
+NEXT_PUBLIC_API_HOST=http://localhost:8888/
-#NEXT_PUBLIC_REMOTE_CURRENT=http://localhost:8888/static/
+NEXT_PUBLIC_REMOTE_CURRENT=http://localhost:8888/static/
 # NEXT_PUBLIC_API_HOST=https://pig.vault48.org/
 # NEXT_PUBLIC_REMOTE_CURRENT=https://pig.vault48.org/static/

src/components/sidebar/SidebarStack/index.tsx

@@ -69,6 +69,7 @@ const SidebarStack = function({
   );
 
   useEffect(() => setActiveTab(tab), [tab]);
+
   return (
     <SidebarStackContext.Provider
       value={{ activeTab, setActiveTab: onChangeTab, closeAllTabs }}

src/constants/sidebar/components.ts

@@ -0,0 +1,9 @@
+import { ProfileSidebar } from "~/containers/sidebars/ProfileSidebar";
+
+import { SidebarName } from "./index";
+
+export const sidebarComponents = {
+  [SidebarName.Settings]: ProfileSidebar,
+};
+
+export type SidebarComponents = typeof sidebarComponents;

src/constants/sidebar/index.ts

@@ -1,11 +1,5 @@
-import { FC, ReactNode } from "react";
-
 import { ProfileSidebar } from "~/containers/sidebars/ProfileSidebar";
 
 export enum SidebarName {
-  Settings = 'settings'
+  Settings = "settings",
-}
-
-export const sidebarComponents = {
-  [SidebarName.Settings]: ProfileSidebar
 }

src/containers/sidebars/ProfileSidebar/index.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, VFC } from "react";
+import React, { useCallback, useMemo, VFC } from "react";
 
 import { isNil } from "ramda";
 
@@ -9,35 +9,38 @@ import { SidebarStackCard } from "~/components/sidebar/SidebarStackCard";
 import { SidebarName } from "~/constants/sidebar";
 import { ProfileSidebarMenu } from "~/containers/profile/ProfileSidebarMenu";
 import { SidebarWrapper } from "~/containers/sidebars/SidebarWrapper";
-import { SidebarComponentProps } from "~/types/sidebar";
+import type { SidebarComponentProps } from "~/types/sidebar";
-import { useSidebar } from "~/utils/providers/SidebarProvider";
 
-type TabName = "profile" | "bookmarks";
+const tabs = ["profile", "bookmarks"] as const;
-interface ProfileSidebarProps extends SidebarComponentProps {
+type TabName = typeof tabs[number];
+
+interface ProfileSidebarProps
+  extends SidebarComponentProps<SidebarName.Settings> {
   page?: TabName;
 }
 
-const tabs: TabName[] = ["profile", "bookmarks"];
+const ProfileSidebar: VFC<ProfileSidebarProps> = ({
-
+  onRequestClose,
-const ProfileSidebar: VFC<ProfileSidebarProps> = ({ onRequestClose, page }) => {
+  page,
-  const initialTab = useMemo(
+  openSidebar,
-    () => (page ? Math.min(tabs.indexOf(page), 0) : undefined),
+}) => {
+  const tab = useMemo(
+    () => (page ? Math.max(tabs.indexOf(page), 0) : undefined),
     [page],
   );
 
-  const { open } = useSidebar();
-
   const onTabChange = useCallback(
     (val: number | undefined) => {
-      console.log({ val });
+      openSidebar(SidebarName.Settings, {
-      open(SidebarName.Settings, { page: !isNil(val) ? tabs[val] : undefined });
+        page: !isNil(val) ? tabs[val] : undefined,
+      });
     },
     [open],
   );
 
   return (
     <SidebarWrapper onClose={onRequestClose}>
-      <SidebarStack tab={initialTab} onTabChange={onTabChange}>
+      <SidebarStack tab={tab} onTabChange={onTabChange}>
         <SidebarStackCard
           headerFeature="close"
           title="Профиль"

src/types/sidebar/index.ts

@@ -1,3 +1,20 @@
-export interface SidebarComponentProps {
+import { FunctionComponent } from "react";
+
+import type { SidebarComponents } from "~/constants/sidebar/components";
+
+export type SidebarComponent = keyof SidebarComponents;
+
+// TODO: use it to store props for sidebar
+export type SidebarProps<
+  T extends SidebarComponent
+> = SidebarComponents[T] extends FunctionComponent<infer U>
+  ? U extends object
+    ? U extends SidebarComponentProps<T>
+      ? Omit<U, keyof SidebarComponentProps<T>>
+      : U
+    : U
+  : {};
+export interface SidebarComponentProps<T extends SidebarComponent> {
   onRequestClose: () => void;
+  openSidebar: (name: T, props: SidebarProps<T>) => void;
 }

src/utils/providers/SidebarProvider.tsx

@@ -2,7 +2,6 @@ import {
   Context,
   createContext,
   createElement,
-  FunctionComponent,
   PropsWithChildren,
   useCallback,
   useContext,
@@ -13,31 +12,19 @@ import { useRouter } from "next/router";
 import { has, omit } from "ramda";
 
 import { ModalWrapper } from "~/components/dialogs/ModalWrapper";
-import { sidebarComponents, SidebarName } from "~/constants/sidebar";
+import { SidebarName } from "~/constants/sidebar";
-import { DialogComponentProps } from "~/types/modal";
+import { sidebarComponents } from "~/constants/sidebar/components";
-import { SidebarComponentProps } from "~/types/sidebar";
+import { SidebarComponent, SidebarProps } from "~/types/sidebar";
 
 type ContextValue = typeof SidebarContext extends Context<infer U> ? U : never;
-type Name = keyof typeof sidebarComponents;
-
-// TODO: use it to store props for sidebar
-type Props<
-  T extends Name
-> = typeof sidebarComponents[T] extends FunctionComponent<infer U>
-  ? U extends object
-    ? U extends SidebarComponentProps
-      ? Omit<U, "onRequestClose">
-      : U
-    : U
-  : {};
 
 const SidebarContext = createContext({
   current: undefined as SidebarName | undefined,
-  open: <T extends Name>(name: T, props: Props<T>) => {},
+  open: <T extends SidebarComponent>(name: T, props: SidebarProps<T>) => {},
   close: () => {},
 });
 
-export const SidebarProvider = <T extends Name>({
+export const SidebarProvider = <T extends SidebarComponent>({
   children,
 }: PropsWithChildren<{}>) => {
   const router = useRouter();
@@ -48,7 +35,7 @@ export const SidebarProvider = <T extends Name>({
   }, [router]);
 
   const open = useCallback(
-    <T extends Name>(name: T, props: Props<T>) => {
+    <T extends SidebarComponent>(name: T, props: SidebarProps<T>) => {
       const [path] = router.asPath.split("?");
       const query = Object.entries(props as {})
         .filter(([, val]) => val)
@@ -89,6 +76,7 @@ export const SidebarProvider = <T extends Name>({
         <ModalWrapper onOverlayClick={close}>
           {createElement(sidebarComponents[current], {
             onRequestClose: close,
+            openSidebar: open,
             ...omit(["sidebar"], router.query),
           } as any)}
         </ModalWrapper>