Merge pull request #125 from xi-effect/31224764

31224764: adding animation for dropdown, code refactoring

packages/pkg.navigation/components/AvatarPreview.tsx

@@ -0,0 +1,19 @@
+import { Avatar, AvatarFallback, AvatarImage } from '@xipkg/avatar';
+
+type AvatarPreviewPropsT = {
+  communityId: number;
+};
+
+export const AvatarPreview = ({ communityId }: AvatarPreviewPropsT) => (
+  <Avatar size="m">
+    <AvatarImage
+      src={`https://api.xieffect.ru/files/communities/${communityId}/avatar.webp`}
+      imageProps={{
+        src: `https://api.xieffect.ru/files/communities/${communityId}/avatar.webp`,
+        alt: 'community user',
+      }}
+      alt="community avatar"
+    />
+    <AvatarFallback size="m" />
+  </Avatar>
+);

packages/pkg.navigation/components/BottomBar.tsx

@@ -10,8 +10,7 @@ import { Logo } from 'pkg.logo';
 import { UserProfile } from '@xipkg/userprofile';
 import { useMainSt } from 'pkg.stores';
 import { useParams } from 'next/navigation';
-import { CommunityItems } from './CommunityItems';
-import { CommunityMenu } from './CommunityMenu';
+import { CommunityItems, CommunityMenu } from './Community';
 
 type BottomBarT = {
   slideIndex: number;

packages/pkg.navigation/components/CategoryContainer.tsx

@@ -7,8 +7,7 @@ import { useMedia } from 'pkg.utils.client';
 import { ItemContextMenu } from './ItemContextMenu';
 import { ChannelT, CategoryT } from './types';
 import { Channel } from './Channel';
-import { EditChannelModal } from './EditChannelModal';
-import { EditCategoryModal } from './EditCategoryModal';
+import { EditCategoryModal, EditChannelModal } from './EditModal';
 
 type CategoryContainerT = {
   category: CategoryT;

packages/pkg.navigation/components/CommunityItems.tsx → packages/pkg.navigation/components/Community/CommunityItems.tsx

@@ -26,9 +26,9 @@ import { Home, Plus } from '@xipkg/icons';
 import { DropdownMenuSeparator } from '@xipkg/dropdown';
 import { CategoryCreate } from 'pkg.modal.category-create';
 import { toast } from 'sonner';
-import { CategoryContainer } from './CategoryContainer';
-import { ChannelT, CategoryT } from './types';
-import { Channel } from './Channel';
+import { CategoryContainer } from '../CategoryContainer';
+import { ChannelT, CategoryT } from '../types';
+import { Channel } from '../Channel';
 import { CommunityItemsSkeleton } from './CommunityItemsSkeleton';
 
 type CommunityItemsPropsT = {

packages/pkg.navigation/components/Community/CommunityLink.tsx

@@ -0,0 +1,114 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+
+import { useMainSt } from 'pkg.stores';
+import { useRouter } from 'next/navigation';
+import { useGetUrlWithParams } from 'pkg.utils.client';
+import { useEffect, useRef, useState } from 'react';
+import { toast } from 'sonner';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@xipkg/tooltip';
+import { RetrieveCommunityT } from '../types';
+import { AvatarPreview } from '../AvatarPreview';
+import { CommunityTemplateT } from '../../type';
+
+export const CommunityLink = ({
+  community,
+  handleClose,
+}: {
+  community: CommunityTemplateT;
+  handleClose: () => void;
+}) => {
+  const socket = useMainSt((state) => state.socket);
+  const currentCommunityId = useMainSt((state) => state.communityMeta.id);
+  const updateCommunityMeta = useMainSt((state) => state.updateCommunityMeta);
+
+  const router = useRouter();
+  const getUrlWithParams = useGetUrlWithParams();
+
+  const communityTitleRef = useRef<HTMLDivElement>(null);
+  const [isTooltipActive, setIsTooltipActive] = useState(false);
+
+  const handleClick = () => {
+    socket?.emit(
+      'close-community',
+      {
+        community_id: currentCommunityId,
+      },
+      (data: number) => {
+        if (data === 204) {
+          socket?.emit(
+            'retrieve-community',
+            {
+              community_id: community.id,
+            },
+            (status: number, { community, participant }: RetrieveCommunityT) => {
+              if (status === 200) {
+                updateCommunityMeta({
+                  id: community.id,
+                  isOwner: participant.is_owner,
+                  name: community.name,
+                  description: community.description,
+                });
+
+                router.push(getUrlWithParams(`/communities/${community.id}/home`));
+                if (handleClose) handleClose();
+              }
+              if (status === 404) {
+                toast('Сообщества не существует');
+                socket.emit(
+                  'retrieve-any-community',
+                  (status: number, { community, participant }: RetrieveCommunityT) => {
+                    if (status === 200) {
+                      updateCommunityMeta({
+                        id: community.id,
+                        isOwner: participant.is_owner,
+                        name: community.name,
+                        description: community.description,
+                      });
+
+                      if (community) {
+                        router.replace(getUrlWithParams(`/communities/${community.id}/home`));
+                        router.refresh();
+                      }
+                    }
+                  },
+                );
+              }
+            },
+          );
+        }
+      },
+    );
+  };
+
+  useEffect(() => {
+    const element = communityTitleRef.current;
+    if (element && element.clientWidth < element.scrollWidth) {
+      setIsTooltipActive(true);
+    }
+  }, []);
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger className="overflow-hidden bg-transparent" asChild>
+          <div
+            onClick={handleClick}
+            className="hover:bg-gray-5 flex h-12 w-full items-center rounded-xl px-2.5 py-2 transition-colors ease-in hover:cursor-pointer"
+          >
+            <AvatarPreview communityId={community.id} />
+            <div
+              className="ml-2 self-center truncate text-[16px] font-semibold text-gray-100"
+              ref={communityTitleRef}
+            >
+              {community.name}
+            </div>
+          </div>
+        </TooltipTrigger>
+        <TooltipContent className={`max-w-[300px] ${isTooltipActive ? 'flex' : 'hidden'}`}>
+          <p className="text-gray-100">{community.name}</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+};

packages/pkg.navigation/components/Community/CommunityMenu.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+
+import { Modal, ModalContent } from '@xipkg/modal';
+import { CategoryCreate } from 'pkg.modal.category-create';
+import { CommunitySettings } from 'pkg.community.settings';
+import { AddCommunityModal } from 'pkg.modal.add-community';
+import { CommunityChannelCreate } from 'pkg.community.channel-create';
+import { InviteCommunityModal } from 'pkg.modal.invite-community';
+
+import { useCommunityStore } from '../../store/communityStore';
+import { DropdownMenuBasic } from '../Dropdown';
+
+export const CommunityMenu = () => {
+  const {
+    isOpenCommunitySettings,
+    isInviteCommunityModalOpen,
+    isAddCommunityModalOpen,
+    isCategoryCreateOpen,
+    isCommunityChannelCreateOpen,
+    setIsOpenCommunitySettings,
+    setIsInviteCommunityModalOpen,
+    setIsAddCommunityModalOpen,
+    setIsCategoryCreateOpen,
+    setIsCommunityChannelCreateOpen,
+  } = useCommunityStore();
+
+  return (
+    <>
+      <Modal
+        open={isOpenCommunitySettings}
+        onOpenChange={() => setIsOpenCommunitySettings(!isOpenCommunitySettings)}
+      >
+        <ModalContent variant="full" className="p-4 lg:p-6">
+          <CommunitySettings />
+        </ModalContent>
+      </Modal>
+      <CategoryCreate
+        open={isCategoryCreateOpen}
+        onOpenChange={() => setIsCategoryCreateOpen(!isCategoryCreateOpen)}
+      />
+      <CommunityChannelCreate
+        open={isCommunityChannelCreateOpen}
+        onOpenChange={() => setIsCommunityChannelCreateOpen(!isCommunityChannelCreateOpen)}
+      />
+      <InviteCommunityModal
+        open={isInviteCommunityModalOpen}
+        onOpenChange={() => setIsInviteCommunityModalOpen(!isInviteCommunityModalOpen)}
+      />
+      <AddCommunityModal
+        open={isAddCommunityModalOpen}
+        onOpenChange={() => setIsAddCommunityModalOpen(!isAddCommunityModalOpen)}
+      />
+      <DropdownMenuBasic />
+    </>
+  );
+};

packages/pkg.navigation/components/Community/index.ts

@@ -0,0 +1,4 @@
+export { CommunityItems } from './CommunityItems';
+export { CommunityItemsSkeleton } from './CommunityItemsSkeleton';
+export { CommunityMenu } from './CommunityMenu';
+export { CommunityLink } from './CommunityLink';