Merge branch 'staging' of github.com:xi-effect/xi.app into staging

xi-effect · Oct 22, 2024 · caf29ab · caf29ab
2 parents c2aca26 + 610e8a6
commit caf29ab
Show file tree

Hide file tree

Showing 13 changed files with 93 additions and 127 deletions.
diff --git a/packages/pkg.modal.add-community/AddCommunityModal.tsx b/packages/pkg.modal.add-community/AddCommunityModal.tsx
@@ -9,14 +9,19 @@ import FormJoin from './components/FormJoinStage';
 
 type AddCommunityModalT = {
   open: boolean;
-  onOpenChange: (value: boolean) => void;
+  setModal: (modalType: string | null) => void;
 };
 
-export const AddCommunityModal = ({ open, onOpenChange }: AddCommunityModalT) => {
+export const AddCommunityModal = ({ open, setModal }: AddCommunityModalT) => {
   const [stage, setStage] = useState<'create' | 'join'>('create');
 
+  const handleOpenChange = () => {
+    setModal(null);
+    setStage('create');
+  };
+
   return (
-    <M.Modal open={open} onOpenChange={onOpenChange}>
+    <M.Modal open={open} onOpenChange={handleOpenChange}>
       <M.ModalContent>
         <M.ModalCloseButton>
           <Close className="fill-gray-80 sm:fill-gray-0" />
@@ -26,7 +31,7 @@ export const AddCommunityModal = ({ open, onOpenChange }: AddCommunityModalT) =>
             <M.ModalHeader>
               <M.ModalTitle>Создание сообщества</M.ModalTitle>
             </M.ModalHeader>
-            <FormCreate onOpenChange={onOpenChange} />
+            <FormCreate onOpenChange={handleOpenChange} />
             <div className="bg-gray-5 flex flex-col items-center rounded-b-[16px] p-8">
               <p className="text-xl font-semibold">У вас есть приглашение?</p>
               <Button
@@ -45,7 +50,7 @@ export const AddCommunityModal = ({ open, onOpenChange }: AddCommunityModalT) =>
                 Присоединение к сообществу
               </M.ModalTitle>
             </M.ModalHeader>
-            <FormJoin setStage={setStage} onOpenChange={onOpenChange} />
+            <FormJoin setStage={setStage} onOpenChange={handleOpenChange} />
           </>
         )}
       </M.ModalContent>

diff --git a/packages/pkg.modal.category-create/CategoryCreate.tsx b/packages/pkg.modal.category-create/CategoryCreate.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import React from 'react';
 import * as M from '@xipkg/modal';
 import { Close } from '@xipkg/icons';
 import { Form } from './components/Form';

diff --git a/packages/pkg.navigation/ModalsProvider.tsx b/packages/pkg.navigation/ModalsProvider.tsx
@@ -0,0 +1,31 @@
+import React, { useCallback } from 'react';
+import { AddCommunityModal } from 'pkg.modal.add-community';
+import { InviteCommunityModal } from 'pkg.modal.invite-community';
+import { CategoryCreate } from 'pkg.modal.category-create';
+import { CommunityChannelCreate } from 'pkg.community.channel-create';
+import { CommunitySettingsModal } from './components/Community/CommunitySettingsModal';
+import { useCommunityStore } from './store/communityStore';
+import {
+  CATEGORY_CREATE,
+  CHANNEL_CREATE,
+  INVITE_COMMUNITY,
+  ADD_COMMUNITY,
+  OPEN_COMMUNITY_SETTINGS,
+} from './store/modalConst';
+
+export const ModalsProvider = ({ children }: { children: React.ReactNode }) => {
+  const { modal, setModal } = useCommunityStore();
+
+  const closeModal = useCallback(() => setModal(null), []);
+
+  return (
+    <>
+      <CommunitySettingsModal open={modal === OPEN_COMMUNITY_SETTINGS} onOpenChange={closeModal} />
+      <CategoryCreate open={modal === CATEGORY_CREATE} onOpenChange={closeModal} />
+      <CommunityChannelCreate open={modal === CHANNEL_CREATE} onOpenChange={closeModal} />
+      <InviteCommunityModal open={modal === INVITE_COMMUNITY} onOpenChange={closeModal} />
+      <AddCommunityModal open={modal === ADD_COMMUNITY} setModal={setModal} />
+      {children}
+    </>
+  );
+};
diff --git a/packages/pkg.navigation/Navigation.tsx b/packages/pkg.navigation/Navigation.tsx
@@ -10,6 +10,7 @@ import { useMainSt } from 'pkg.stores';
 import { toast } from 'sonner';
 import { nanoid } from 'nanoid';
 import { BottomBar, Menu } from './components';
+import { ModalsProvider } from './ModalsProvider';
 
 type NavigationPropT = {
   children: ReactNode;
@@ -244,7 +245,7 @@ export const Navigation = ({ children }: NavigationPropT) => {
   if (pathname.includes('/empty/')) return children;
 
   return (
-    <>
+    <ModalsProvider>
       <div className="relative hidden flex-row md:flex">
         <div className="fixed flex h-screen min-h-screen min-w-[350px] flex-col p-6">
           <Menu setSlideIndex={setSlideIndex} />
@@ -255,6 +256,6 @@ export const Navigation = ({ children }: NavigationPropT) => {
         {children}
       </BottomBar>
       <WelcomeModal open={modalOpen} setModalOpen={setModalOpen} />
-    </>
+    </ModalsProvider>
   );
 };
diff --git a/packages/pkg.navigation/components/BottomBar.tsx b/packages/pkg.navigation/components/BottomBar.tsx
@@ -9,7 +9,8 @@ import { UserProfile } from '@xipkg/userprofile';
 import { useMainSt } from 'pkg.stores';
 import { useParams } from 'next/navigation';
 import { Swiper, SwiperSlide, SwiperRef, SwiperClass } from 'swiper/react';
-import { CommunityItems, CommunityMenu } from './Community';
+import { CommunityItems } from './Community';
+import { DropdownMenuBasic } from './Dropdown';
 
 import 'swiper/css';
 
@@ -49,7 +50,7 @@ export const BottomBar = ({ children, slideIndex, setSlideIndex }: BottomBarT) =
         <SwiperSlide>
           <div className="w-full overflow-auto">
             <div className="sticky left-0 top-0 px-4 pt-4">
-              <CommunityMenu />
+              <DropdownMenuBasic />
             </div>
             <CommunityItems setSlideIndex={onChangeSlideIndex} />
           </div>

diff --git a/packages/pkg.navigation/components/Community/CommunityMenu.tsx b/packages/pkg.navigation/components/Community/CommunityMenu.tsx
diff --git a/packages/pkg.navigation/components/Community/CommunitySettingsModal.tsx b/packages/pkg.navigation/components/Community/CommunitySettingsModal.tsx
@@ -0,0 +1,15 @@
+import { Modal, ModalContent } from '@xipkg/modal';
+import { CommunitySettings } from 'pkg.community.settings';
+
+type CommunitySettingsModalT = {
+  open: boolean;
+  onOpenChange: () => void;
+};
+
+export const CommunitySettingsModal = ({ open, onOpenChange }: CommunitySettingsModalT) => (
+  <Modal open={open} onOpenChange={onOpenChange}>
+    <ModalContent variant="full" className="p-4 lg:p-6">
+      <CommunitySettings />
+    </ModalContent>
+  </Modal>
+);
diff --git a/packages/pkg.navigation/components/Community/index.ts b/packages/pkg.navigation/components/Community/index.ts
@@ -1,4 +1,3 @@
 export { CommunityItems } from './CommunityItems';
 export { CommunityItemsSkeleton } from './CommunityItemsSkeleton';
-export { CommunityMenu } from './CommunityMenu';
 export { CommunityLink } from './CommunityLink';
diff --git a/packages/pkg.navigation/components/Dropdown/DropdownMenu.tsx b/packages/pkg.navigation/components/Dropdown/DropdownMenu.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState, useMemo } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -14,21 +14,19 @@ import { toast } from 'sonner';
 import { DropdownHeader } from './DropdownHeader';
 import { CommunityLink } from '../Community';
 import { useCommunityStore } from '../../store/communityStore';
+import {
+  CATEGORY_CREATE,
+  CHANNEL_CREATE,
+  INVITE_COMMUNITY,
+  ADD_COMMUNITY,
+  OPEN_COMMUNITY_SETTINGS,
+} from '../../store/modalConst';
 import { RetrieveCommunityT } from '../types';
 
 export const DropdownMenuBasic = () => {
   const [isOpen, setIsOpen] = useState(false);
 
-  const {
-    isInviteCommunityModalOpen,
-    setIsInviteCommunityModalOpen,
-    isCommunityChannelCreateOpen,
-    setIsCommunityChannelCreateOpen,
-    setIsAddCommunityModalOpen,
-    setIsCategoryCreateOpen,
-    isCategoryCreateOpen,
-    setIsOpenCommunitySettings,
-  } = useCommunityStore();
+  const { setModal } = useCommunityStore();
 
   // из-за warn в консоли я решил вернуть обратно и оставить получения свйоств из стора в таком виде
   const currentCommunity = useMainSt((state) => state.communityMeta);
@@ -60,6 +58,11 @@ export const DropdownMenuBasic = () => {
 
   const handleClose = () => setIsOpen(false);
 
+  const handleMenuItemClick = (modalType: string) => () => {
+    setModal(modalType);
+    setIsOpen(false);
+  };
+
   const handleLeaveCommunity = () => {
     socket?.emit('leave-community', { community_id: currentCommunity.id }, (status: number) => {
       if (status === 204 && otherCommunities) {
@@ -121,19 +124,13 @@ export const DropdownMenuBasic = () => {
               <>
                 <DropdownMenuItem
                   className="group sm:w-[302px]"
-                  onClick={() => {
-                    setIsInviteCommunityModalOpen(!isInviteCommunityModalOpen);
-                    handleClose();
-                  }}
+                  onClick={handleMenuItemClick(INVITE_COMMUNITY)}
                 >
                   <span>Пригласить людей</span>
                   <PeopleInvite size="s" className="ml-auto h-4 w-4 group-hover:fill-gray-100" />
                 </DropdownMenuItem>
                 <DropdownMenuItem
-                  onClick={() => {
-                    setIsOpenCommunitySettings(true);
-                    handleClose();
-                  }}
+                  onClick={handleMenuItemClick(OPEN_COMMUNITY_SETTINGS)}
                   className="group sm:w-[302px]"
                 >
                   <span>Настройки сообщества</span>
@@ -142,20 +139,14 @@ export const DropdownMenuBasic = () => {
                 <DropdownMenuSeparator />
                 <DropdownMenuItem
                   className="group sm:w-[302px]"
-                  onClick={() => {
-                    setIsCommunityChannelCreateOpen(!isCommunityChannelCreateOpen);
-                    handleClose();
-                  }}
+                  onClick={handleMenuItemClick(CHANNEL_CREATE)}
                 >
                   <span>Создать канал</span>
                   <ChannelAdd size="s" className="ml-auto h-4 w-4 group-hover:fill-gray-100" />
                 </DropdownMenuItem>
                 <DropdownMenuItem
                   className="group sm:w-[302px]"
-                  onClick={() => {
-                    setIsCategoryCreateOpen(!isCategoryCreateOpen);
-                    handleClose();
-                  }}
+                  onClick={handleMenuItemClick(CATEGORY_CREATE)}
                 >
                   <span>Создать категорию</span>
                   <CategoryAdd size="s" className="ml-auto h-4 w-4 group-hover:fill-gray-100" />
@@ -189,10 +180,7 @@ export const DropdownMenuBasic = () => {
           <DropdownMenuSeparator />
           <DropdownMenuItem
             className="group text-gray-50 sm:w-[302px]"
-            onClick={() => {
-              setIsAddCommunityModalOpen(true);
-              handleClose();
-            }}
+            onClick={handleMenuItemClick(ADD_COMMUNITY)}
           >
             <span>Присоединиться к сообществу</span>
             <Plus size="s" className="ml-auto h-4 w-4 fill-gray-50 group-hover:fill-gray-100" />

diff --git a/packages/pkg.navigation/components/Menu.tsx b/packages/pkg.navigation/components/Menu.tsx
@@ -14,7 +14,8 @@ import 'driver.js/dist/driver.css';
 import '../utils/driver.css';
 import { useMainSt } from 'pkg.stores';
 import { createRoot } from 'react-dom/client';
-import { CommunityItems, CommunityMenu } from './Community';
+import { CommunityItems } from './Community';
+import { DropdownMenuBasic } from './Dropdown';
 
 type MenuT = {
   setSlideIndex: (value: number) => void;
@@ -129,7 +130,7 @@ export const Menu = ({ setSlideIndex }: MenuT) => {
       <div id="header-logo" className="flex h-8 w-fit flex-wrap p-2">
         <Logo height={16} width={134} logoVariant="navigation" logoSize="default" />
       </div>
-      <CommunityMenu />
+      <DropdownMenuBasic />
       <CommunityItems setSlideIndex={setSlideIndex} />
       <div className="bg-gray-0 fixed bottom-0 flex flex-col pb-6 sm:w-[302px]">
         <Modal open={menuIsOpen}>

diff --git a/packages/pkg.navigation/components/index.ts b/packages/pkg.navigation/components/index.ts
@@ -1,5 +1,4 @@
 export { CommunityItems } from './Community/CommunityItems';
-export { CommunityMenu } from './Community/CommunityMenu';
 export { BottomBar } from './BottomBar';
 export { Menu } from './Menu';
 export { ItemContextMenu } from './ItemContextMenu';
diff --git a/packages/pkg.navigation/store/communityStore.ts b/packages/pkg.navigation/store/communityStore.ts
@@ -1,30 +1,11 @@
 import { create } from 'zustand';
 
 type CommunityStateT = {
-  isOpenCommunitySettings: boolean;
-  isInviteCommunityModalOpen: boolean;
-  isAddCommunityModalOpen: boolean;
-  isCategoryCreateOpen: boolean;
-  isCommunityChannelCreateOpen: boolean;
-
-  setIsOpenCommunitySettings: (isOpen: boolean) => void;
-  setIsInviteCommunityModalOpen: (isOpen: boolean) => void;
-  setIsAddCommunityModalOpen: (isOpen: boolean) => void;
-  setIsCategoryCreateOpen: (isOpen: boolean) => void;
-  setIsCommunityChannelCreateOpen: (isOpen: boolean) => void;
+  modal: string | null;
+  setModal: (modalType: string | null) => void;
 };
 
 export const useCommunityStore = create<CommunityStateT>((set) => ({
-  isOpenCommunitySettings: false,
-  isInviteCommunityModalOpen: false,
-  isAddCommunityModalOpen: false,
-  isCategoryCreateOpen: false,
-  isCommunityChannelCreateOpen: false,
-
-  setIsOpenCommunitySettings: (isOpen: boolean) => set({ isOpenCommunitySettings: isOpen }),
-  setIsInviteCommunityModalOpen: (isOpen: boolean) => set({ isInviteCommunityModalOpen: isOpen }),
-  setIsAddCommunityModalOpen: (isOpen: boolean) => set({ isAddCommunityModalOpen: isOpen }),
-  setIsCategoryCreateOpen: (isOpen: boolean) => set({ isCategoryCreateOpen: isOpen }),
-  setIsCommunityChannelCreateOpen: (isOpen: boolean) =>
-    set({ isCommunityChannelCreateOpen: isOpen }),
+  modal: null,
+  setModal: (modalType: string | null) => set({ modal: modalType }),
 }));
diff --git a/packages/pkg.navigation/store/modalConst.ts b/packages/pkg.navigation/store/modalConst.ts
@@ -0,0 +1,5 @@
+export const CATEGORY_CREATE = 'categoryCreate';
+export const CHANNEL_CREATE = 'channelCreate';
+export const INVITE_COMMUNITY = 'inviteCommunity';
+export const ADD_COMMUNITY = 'addCommunity';
+export const OPEN_COMMUNITY_SETTINGS = 'openCommunitySettings';