fix 323448355 : gcodereview buggs

xi-effect · Apr 26, 2024 · adf6b41 · adf6b41
1 parent 2468570
commit adf6b41
Show file tree

Hide file tree

Showing 3 changed files with 217 additions and 249 deletions.
diff --git a/packages/pkg.navigation/components/CategoryContainer.tsx b/packages/pkg.navigation/components/CategoryContainer.tsx
@@ -1,76 +1,61 @@
-import { useMemo } from "react";
-import { IChannel, ICategory } from "./types";
-import { SortableContext, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-import React from "react";
-import { Channel } from "./Channel";
+import { useMemo } from 'react';
+import { IChannel, ICategory } from './types';
+import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import React from 'react';
+import { Channel } from './Channel';
 
 interface ICategoryContainer {
-    category : ICategory;
-    channels : IChannel[]
-    setSlideIndex? : (arg : number) => void
+  category: ICategory;
+  channels: IChannel[];
+  setSlideIndex?: (arg: number) => void;
 }
 
-export function CategoryContainer({category , channels , setSlideIndex} : ICategoryContainer) {
-    const { title , subtitle , id } = category
-    const channelsIds = useMemo(() => {
-        return channels.map((channel : IChannel) => channel.elId);
-      }, [channels]);
+export function CategoryContainer({ category, channels, setSlideIndex }: ICategoryContainer) {
+  const { title, subtitle, id } = category;
+  const channelsIds = useMemo(() => {
+    return channels.map((channel: IChannel) => channel.elId);
+  }, [channels]);
 
-      const {
-        setNodeRef,
-        attributes,
-        listeners,
-        transform,
-        transition,
-        isDragging,
-      } = useSortable({
-        id: id,
-        data: {
-          type: "Category",
-          category,
-        },
-      });
+  const { setNodeRef, attributes, listeners, transform, transition, isDragging } = useSortable({
+    id: id,
+    data: {
+      type: 'Category',
+      category,
+    },
+  });
 
-    const categoryStyle = {
-        minHeight : '100px',
-        transition,
-        transform: CSS.Transform.toString(transform),
-    };
-
-    if (isDragging) {
-        return <div style={categoryStyle} ref={setNodeRef}>
-            <div className="h-[4px] rounded-[2px] border-b-brand-80 bg-brand-80"></div>
-        </div>  
-    }
+  const categoryStyle = {
+    minHeight: '100px',
+    transition,
+    transform: CSS.Transform.toString(transform),
+  };
 
+  if (isDragging) {
     return (
-        <div
-          ref={setNodeRef}
-          style={categoryStyle}
-        >
-          <div
-            {...attributes}
-            {...listeners}
-          >
-          { title && subtitle && 
-            <div className="flex p-2  flex-col items-start">
-                <span className="text-[16px] font-semibold">{title}</span>
-                <span className="text-[14px] font-normal">{subtitle}</span>
-            </div>
-          }
-          </div>
-          <div className="flex flex-grow flex-col gap-2 overflow-x-hidden overflow-y-hidden">
-            <SortableContext strategy={verticalListSortingStrategy} items={channelsIds}>
-              {channels.map((channel : IChannel) => {
-               return <Channel
-                  setSlideIndex={setSlideIndex}
-                  key={channel.elId}
-                  channel={channel}
-                />
-              })}
-            </SortableContext>
+      <div style={categoryStyle} ref={setNodeRef}>
+        <div className="border-b-brand-80 bg-brand-80 h-[4px] rounded-[2px]"></div>
+      </div>
+    );
+  }
+
+  return (
+    <div ref={setNodeRef} style={categoryStyle}>
+      <div {...attributes} {...listeners}>
+        {title && subtitle && (
+          <div className="flex flex-col items-start p-2">
+            <span className="text-[16px] font-semibold">{title}</span>
+            <span className="text-[14px] font-normal">{subtitle}</span>
           </div>
-        </div>
-      );
-}
+        )}
+      </div>
+      <div className="flex flex-grow flex-col gap-2 overflow-x-hidden overflow-y-hidden">
+        <SortableContext strategy={verticalListSortingStrategy} items={channelsIds}>
+          {channels.map((channel: IChannel) => {
+            return <Channel setSlideIndex={setSlideIndex} key={channel.elId} channel={channel} />;
+          })}
+        </SortableContext>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/pkg.navigation/components/Channel.tsx b/packages/pkg.navigation/components/Channel.tsx
@@ -1,86 +1,82 @@
 import { ReactNode, useState } from 'react';
-import { IChannel } from './types'
+import { IChannel } from './types';
 import { useSortable } from '@dnd-kit/sortable';
-import { CSS } from "@dnd-kit/utilities";
+import { CSS } from '@dnd-kit/utilities';
 import React from 'react';
 import { useRouter } from 'next/navigation';
-import { Announce, Calendar, Chat, Conference, Home, Task, Updates , Move} from '@xipkg/icons';
-
+import { Announce, Calendar, Chat, Conference, Home, Task, Updates, Move } from '@xipkg/icons';
 
 interface IChannelProps {
-    channel : IChannel;
-    setSlideIndex? : (arg : number) => void
+  channel: IChannel;
+  setSlideIndex?: (arg: number) => void;
 }
 
 interface IIconsDict {
   [key: string]: ReactNode;
-};
+}
 
-  const iconClassName = 'transition-colors ease-in group-hover:fill-brand-80';
+const iconClassName = 'transition-colors ease-in group-hover:fill-brand-80';
 
-  const iconsDict: IIconsDict = {
-    announce: <Announce className={iconClassName} />,
-    calendar: <Calendar className={iconClassName} />,
-    updates: <Updates className={iconClassName} />,
-    task: <Task className={iconClassName} />,
-    chat: <Chat className={iconClassName} />,
-    camera: <Conference className={iconClassName} />,
-    home : <Home className={iconClassName}/>
-  };
+const iconsDict: IIconsDict = {
+  announce: <Announce className={iconClassName} />,
+  calendar: <Calendar className={iconClassName} />,
+  updates: <Updates className={iconClassName} />,
+  task: <Task className={iconClassName} />,
+  chat: <Chat className={iconClassName} />,
+  camera: <Conference className={iconClassName} />,
+  home: <Home className={iconClassName} />,
+};
 
-export function Channel({channel , setSlideIndex } : IChannelProps) {  
-  const [mouseOver , setMouseOver] = useState(false);
-  const {
-        setNodeRef,
-        attributes,
-        listeners,
-        transform,
-        transition,
-        isDragging, 
-      } = useSortable({
-        id: channel.elId,
-        data: {
-          type: "Channel",
-          channel,
-        },
-      });
+export function Channel({ channel, setSlideIndex }: IChannelProps) {
+  const [mouseOver, setMouseOver] = useState(false);
+  const { setNodeRef, attributes, listeners, transform, transition, isDragging } = useSortable({
+    id: channel.elId,
+    data: {
+      type: 'Channel',
+      channel,
+    },
+  });
 
-      const router = useRouter();
-
-      const handleRouteChange = () => {
-      setSlideIndex && setSlideIndex(1);
-      router.push(channel.link);
-      };
-
+  const router = useRouter();
 
-      const style = {
-        height : '40px',
-        transition,
-        transform: CSS.Transform.toString(transform),
-      };
+  const handleRouteChange = () => {
+    setSlideIndex && setSlideIndex(1);
+    router.push(channel.link);
+  };
 
-      if (isDragging) {
-        return <div ref={setNodeRef}  style={style}>
-          <div className="h-[4px] rounded-[2px] border-b-brand-80 bg-brand-80"></div>
-        </div>
-      }
+  const style = {
+    height: '40px',
+    transition,
+    transform: CSS.Transform.toString(transform),
+  };
 
-      return (
-        <div 
-        onMouseEnter={() => setMouseOver(true)}
-        onMouseLeave={() => setMouseOver(false)}
-          ref={setNodeRef}
-          style={style}
-
-          onClick={() => handleRouteChange() }
-        >
-            <div className='justify-between text-gray-90 hover:bg-brand-0 hover:text-brand-80 group flex h-[40px] w-full flex-row items-center rounded-lg p-2 transition-colors ease-in hover:cursor-pointer'>
-                <div className='flex items-center'>
-                {iconsDict[channel.icon]}
-                 <span className="pl-2 text-[14px] font-normal">{channel.label}</span>
-                </div>
-                {mouseOver ? <div {...attributes} {...listeners}> <Move/></div> : null}
-            </div>
+  if (isDragging) {
+    return (
+      <div ref={setNodeRef} style={style}>
+        <div className="bg-brand-80 h-[4px] rounded-[2px]"></div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      onMouseEnter={() => setMouseOver(true)}
+      onMouseLeave={() => setMouseOver(false)}
+      ref={setNodeRef}
+      style={style}
+      onClick={() => handleRouteChange()}
+    >
+      <div className="text-gray-90 hover:bg-brand-0 hover:text-brand-80 group flex h-[40px] w-full flex-row items-center justify-between rounded-lg p-2 transition-colors ease-in hover:cursor-pointer">
+        <div className="flex items-center">
+          {iconsDict[channel.icon]}
+          <span className="pl-2 text-[14px] font-normal">{channel.label}</span>
         </div>
-      );
-}
+        {mouseOver ? (
+          <div {...attributes} {...listeners}>
+            <Move />
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}