40177321: message feed layout #146

Enchu · 2024-10-28T17:21:24Z

No description provided.

…leton of messages

vercel · 2024-10-28T17:21:29Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
xieffect	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 16, 2024 0:38am

unknownproperty

Проблема с тем, что тулбар пропадает при нажатии на сообщение никуда не делась. Также, мне кажется есть отхождения от макетов

unknownproperty · 2024-10-30T16:31:44Z

packages/pkg.module.chat/components/Chat.tsx

@@ -123,13 +92,13 @@ export const Chat = () => {
    rootMargin: '400px 0px 0px 0px',
  });

-  const scrollableRootRef = React.useRef<React.ElementRef<'div'> | null>(null);
-  const lastScrollDistanceToBottomRef = React.useRef<number>();
+  const scrollableRootRef = useRef<React.ElementRef<'div'> | null>(null);


Я всё же советую получать хуки из React, а не импортировать их отдельно, это повышает читабельность кода. Можно легко определить, где кастомные хуки, а где из React

unknownproperty · 2024-10-30T16:32:30Z

packages/pkg.module.chat/components/Chat.tsx

-            Loading
-          </li>
+          <div className="flex w-full p-2" ref={infiniteRef}>
+            <div className="mr-2 h-12 w-12 rounded-full bg-[#e1e3e4]" />


Мы используем цвета из нашей палитры

unknownproperty · 2024-10-30T16:34:24Z

packages/pkg.module.chat/components/Chat.tsx

+            <div className="flex-1">
+              <div className="flex items-center">
+                <div className="mr-2 h-6 w-36 rounded-lg bg-[#e1e3e4]" />
+                <div className="h-5 w-24 rounded-lg bg-[#e1e3e4] text-[14px] font-normal leading-[20px]" />


Также стараемся использовать для типографии наши токены из конфига tailwind – https://github.com/xi-effect/xi.kit/blob/main/packages/pkg.tailwind/design-system-preset.js#L128

unknownproperty · 2024-10-30T16:34:57Z

packages/pkg.module.chat/components/Chat.tsx

+        ) : (
+          mocksMessages.map(
+            (item: MessageItemT, index: number) =>
+              item != null && (


Всегда стоит использовать строгое сравнение

unknownproperty · 2024-10-30T16:36:05Z

packages/pkg.module.chat/components/Chat.tsx

+                    }}
+                  >
+                    <div className="flex w-full p-2 transition-colors">
+                      <img className="mr-2 h-12 w-12 rounded-full" src="" alt="User Avatar" />


Лучше сразу использовать компонент Аватара, в репозитории можно найти примеры

unknownproperty · 2024-10-30T16:37:20Z

packages/pkg.module.chat/components/Chat.tsx

+                              >
+                                <MenuDots />
+                              </Button>
+                            </DropdownMenuItem>


Нет никакого смысла добавлять кнопки эмоций, если мы не делаем их в рамках этой задачи

unknownproperty · 2024-10-30T16:37:52Z

packages/pkg.module.chat/components/Chat.tsx

+                            <DropdownMenuItem>
+                              <Trash className="fill-red-60 mr-2 h-4 w-4" />
+                              <span className="text-red-60 text-xs">Удалить</span>
+                            </DropdownMenuItem>


Странно, что при наведении не появляется ховер эффект на пунктах меню

unknownproperty · 2024-10-30T16:38:35Z

packages/pkg.module.chat/components/Header.tsx

+            onClick={() => console.log('search')}
+          >
+            <Search size="s" />
+          </Button>


Кнопку поиска я не добавлял, так как поиск мы будем делать в последнюю очередь

unknownproperty · 2024-10-30T16:41:15Z

packages/pkg.module.chat/components/Chat.tsx

+                      ref={(el: HTMLDivElement | null) => {
+                        menuRefs.current[item.id] = el;
+                      }}
+                      className={`pointer-events-none absolute right-1 top-4 ${hovered === item.id ? 'pointer-events-auto opacity-100' : 'opacity-0'}`}


Постарайся использовать https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state, такой подход уже лучше, чем стейт в каждом сообщении, но он всё равно далеко не лучший

unknownproperty · 2024-11-05T18:14:13Z

packages/pkg.module.chat/components/Chat.tsx

@@ -153,6 +122,48 @@ export const Chat = () => {
    }
  }, []);

+  const formatDate = (dateString: string) => {


Хм, а большой ли смысл держать в теле компонента эту функцию?

unknownproperty · 2024-11-05T18:14:32Z

packages/pkg.module.chat/components/Chat.tsx

+    return dateFormat;
+  };
+
+  const shouldShowDate = (index: number, messages: MessageItemT[]) => {


Тоже, что и выше

unknownproperty · 2024-11-05T20:17:50Z

packages/pkg.module.chat/components/SmartInput.tsx

+        type="button"
+        className="flex h-12 w-12 items-center rounded-lg bg-[#445AFF] p-4 text-white"
+      >
+        <Send size="m" color="white" className="!important fill-white" />


Что-то странное, мы так не пишем код. Что не так с иконкой?

unknownproperty · 2024-11-05T20:18:17Z

packages/pkg.module.chat/components/SmartInput.tsx

+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <File className="mr-2 h-5 w-5" />
+            <span className="text-[14px]">Файл</span>


Можно использовать токены для текста из нашего конфига tailwind

unknownproperty · 2024-11-05T20:19:21Z

packages/pkg.module.chat/components/Chat.tsx

+                              className={`m-0 h-6 w-6 rounded p-1 ${
+                                lockedHovered === item.id ? 'bg-gray-10' : 'hover:bg-gray-10'
+                              }`}
+                              onClick={() => {


Для чистоты кода я всегда советую выносить из атрибутов те функции, где больше одного действия

unknownproperty · 2024-11-12T06:05:56Z

packages/pkg.module.chat/components/ChatMessage.tsx

+export const ChatMessage: React.FC<ChatMessageProps> = ({ item, index, mocksMessages }) => {
+  const { id, name, time, message } = item;
+
+  const getContainerClassNames = (


А в чём смысл держать эту функцию в теле компонента? При каждом ререндере компонента она будет создаваться вновь и вновь, тоже касается функций ниже

unknownproperty · 2024-11-12T06:06:47Z

packages/pkg.module.chat/components/DateChat.tsx

+  time: string;
+};
+
+export const DateChat: React.FC<DateMessageProps> = ({ index, mocksMessages, time }) => {


Лучше не использовать FC, он может ломать типы, лучше точечно их настраивать

unknownproperty · 2024-11-12T06:07:53Z

packages/pkg.module.chat/components/DateChat.tsx

+};
+
+export const DateChat: React.FC<DateMessageProps> = ({ index, mocksMessages, time }) => {
+  const shouldShowDate = (index: number, messages: MessageItemT[]) => {


Опять же, функции, которые никак не зависят от других функций или переменных (или они переданы как аргументы, как здесь), мы выносим за пределы теа компонента, тоже касается функции ниже

unknownproperty · 2024-11-12T06:08:26Z

packages/pkg.module.chat/components/DateChat.tsx

+      month: 'long',
+    });
+
+    return dateFormat;


Можно, сделать чуть красивее и возвращать сразу то, что на 28 строке, не создавая лишнюю переменную

unknownproperty · 2024-11-12T06:08:51Z

packages/pkg.module.chat/components/SkeletMessage.tsx

+};
+
+export const SkeletMessage: React.FC<LoadingSkeletonProps> = ({ refProp }) => {
+  console.log('skelet message');


Забытый console

unknownproperty · 2024-11-12T06:09:04Z

packages/pkg.module.chat/components/SkeletMessage.tsx

+  refProp: React.Ref<HTMLDivElement>;
+};
+
+export const SkeletMessage: React.FC<LoadingSkeletonProps> = ({ refProp }) => {


Тоже тут нет смысла в FC

https://fettblog.eu/typescript-react-why-i-dont-use-react-fc/

unknownproperty · 2024-11-16T07:09:31Z

Тут появились конфликты, их стоит решить, сохранив изменения из ветки staging. Ещё в одном месте стоит вынести функции из тела компонента

…177321

Enchu added 2 commits October 20, 2024 20:48

fix(40177321): message menu, ellipsis with dropdown, items in it. ske…

7a8a20b

…leton of messages

fix(40177321): fixing hover effect

ee55ef0

vercel bot deployed to Preview October 28, 2024 17:25 View deployment

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

bc15cc1

vercel bot deployed to Preview October 28, 2024 18:38 View deployment

fix(40177321): fixing dates, fixing layout

dcdad34

vercel bot deployed to Preview October 29, 2024 18:09 View deployment

unknownproperty reviewed Oct 30, 2024

View reviewed changes

Enchu changed the title ~~fix(40177321): fixing hover effect~~ fixing hover effect Nov 4, 2024

fix(40177321): message feed layout

07777f8

vercel bot deployed to Preview November 4, 2024 16:33 View deployment

unknownproperty reviewed Nov 5, 2024

View reviewed changes

fix(40177321): refactor components

44872ba

vercel bot deployed to Preview November 11, 2024 15:32 View deployment

unknownproperty reviewed Nov 12, 2024

View reviewed changes

fix(40177321): change of types, moved out extra data to avoid redrawing

26872dd

vercel bot deployed to Preview November 14, 2024 14:45 View deployment

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

77f8b2c

…177321

Enchu changed the title ~~fixing hover effect~~ 40177321: message feed layout Nov 16, 2024

vercel bot deployed to Preview November 16, 2024 12:38 View deployment

unknownproperty approved these changes Nov 16, 2024

View reviewed changes

unknownproperty merged commit 30b3fd7 into staging Nov 16, 2024
6 checks passed

unknownproperty deleted the 40177321 branch November 16, 2024 12:57

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

40177321: message feed layout #146

40177321: message feed layout #146

Enchu commented Oct 28, 2024

vercel bot commented Oct 28, 2024 •

edited

Loading

unknownproperty left a comment

unknownproperty Oct 30, 2024

unknownproperty Oct 30, 2024

unknownproperty Oct 30, 2024

unknownproperty Oct 30, 2024

unknownproperty Oct 30, 2024

unknownproperty Oct 30, 2024

unknownproperty Oct 30, 2024

unknownproperty Oct 30, 2024

unknownproperty Oct 30, 2024

unknownproperty Nov 5, 2024

unknownproperty Nov 5, 2024

unknownproperty Nov 5, 2024

unknownproperty Nov 5, 2024

unknownproperty Nov 5, 2024

unknownproperty Nov 12, 2024

unknownproperty Nov 12, 2024

unknownproperty Nov 12, 2024

unknownproperty Nov 12, 2024

unknownproperty Nov 12, 2024

unknownproperty Nov 12, 2024

unknownproperty Nov 12, 2024

unknownproperty commented Nov 16, 2024

40177321: message feed layout #146

40177321: message feed layout #146

Conversation

Enchu commented Oct 28, 2024

vercel bot commented Oct 28, 2024 • edited Loading

unknownproperty left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

unknownproperty commented Nov 16, 2024

vercel bot commented Oct 28, 2024 •

edited

Loading