feat: Improve message template view #1207

chohongm · 2024-08-27T09:43:31Z

Changelogs

Will be added soon.

How to test?

그룹채널에 유저 두명:
test_liam_1, test_liam_2 (닉네임도 유저id와 동일 함)

로컬 url:
http://localhost:5173/group_channel?appId=5D27A98C-D935-4EDA-846A-BCCD90E8E55B&userId=test_liam_1&nickname=test_liam_1&accessToken=3810634cd02e61956f08edf4fd614bfbe9e3e505

대시보드:
https://dashboard.sendbird.com/5D27A98C-D935-4EDA-846A-BCCD90E8E55B/settings/general

Figma

https://www.figma.com/design/SVbXU00FhjztekD8AiVukK/WIP_UIKit_React?node-id=2924-4031&m=dev

Default container type rendering (template message only)

WIP_UIKit_React.Figma.webm

netlify · 2024-08-27T09:43:48Z

✅ Deploy Preview for sendbird-uikit-react ready!

Name	Link
🔨 Latest commit	`8b20f7b`
🔍 Latest deploy log	https://app.netlify.com/sites/sendbird-uikit-react/deploys/66f4f1debf47f2000854ab9e
😎 Deploy Preview	https://deploy-preview-1207--sendbird-uikit-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

src/ui/ContextMenu/index.scss

src/ui/MessageContent/index.scss

src/utils/index.ts

src/ui/MessageContent/index.tsx

bang9 · 2024-08-28T05:20:44Z

혹시 메세지 보내져있는 채널에 로그인 할 수 있는 정보 하나만 알려주실 수 있을까용!

chohongm · 2024-08-28T05:31:48Z

@bang9 어제까지만해도 아래걸로 테스트했었는데 오늘은 안되네요..?
http://localhost:5173/group_channel?appId=6b9b0bdb-2761-4316-850c-118a518cc2e5&userId=test-liam-01&nickname=test-liam-01

src/ui/TemplateMessageItemBody/types.ts

src/ui/MessageContent/index.tsx

…n carousel type

src/utils/index.ts

src/ui/TemplateMessageItemBody/index.tsx

bang9 · 2024-08-31T15:43:45Z

변경된 carousel template 구조로는 https://github.com/sendbird/sendbird-uikit-core-ts/pull/150 이 브랜치에서
react 용 메세지 템플릿 패키지를 빌드하고 resolutions 로 연결하여 테스트 하고 계시면 될 것 같습니다.

캐러셀이 아직 버그가 수정은 안돼서 렌더링은 되지만 동작은 안할텐데요
UIKit 에서는 변경된 구조의 Carousel syntax 반영을 하는 목적으로 먼저 진행 부탁드리겠습니다.

[중요]

그리고 argb 를 rgba 로 처리하는 코드도 삭제하셔야 할거에요!
템플릿 데이터의 string 을 number 로 변환하는 코드가 있다면, 이것도 제거해도 됩니다.

src/ui/TemplateMessageItemBody/index.tsx

src/ui/MessageContent/MessageBody/index.tsx

src/ui/MessageContent/index.tsx

src/ui/TemplateMessageItemBody/temp.json

src/ui/TemplateMessageItemBody/index.tsx

src/ui/ChannelAvatar/__tests__/ChannelAvatar.spec.js

Co-authored-by: Hyungu Kang | Airen <gusrn1423@naver.com>

src/ui/MessageContent/index.tsx

src/ui/MessageContent/messageContentForTemplateMessage.tsx

src/ui/MessageContent/index.tsx

bang9 · 2024-09-26T00:26:28Z

src/ui/MessageContent/index.tsx

  };

-  const totalBottom = useMemo(() => getTotalBottom(), [isTimestampBottom]);
+  const totalBottom = useMemo(() => getTotalBottom(), []);


이 totalBottom 도, wide 같은 layout 때문에 추가되었던 것 같은데.. 혹시 이전 상태 기억 나시나요?
돌리는게 좋을까요, 아니면 일단 두는게 좋을까요?

요건 없애는게 맞습니다. container type 이 default 가 아닐 때 bottom 값을 지정해두는 로직이었습니다. 이제는 없어졌기 때문에 위 로직도 같이 없애주는게 맞습니다.

export enum UI_CONTAINER_TYPES { DEFAULT = '', WIDE = 'ui_container_type__wide', DEFAULT_CAROUSEL = 'ui_container_type__default-carousel', }

https://github.com/sendbird/sendbird-uikit-react/pull/999/files#diff-0ad613792affc251d9a2e9dbe1135dec1c7ae22cb10f94be24bf9be3c34bbe87R142 의 변경사항들을 revert 하는 후속 작업으로 진행

@liamcho 요고는 티켓 만들어서 진행해주시면 감사하겠습니다!

두는게 좋아보입니다. useMemo() 는 없애야 할것 같습니다. 있으면 실시간 업뎃이 안되네요. profile 의 bottom 위치를 메세지에 feedback button 들이 있을때, 또 thread replies 가 있을 때 계산하는 로직이라 필요합니다. 이전 로직은

.sendbird-message-content__left__avatar.use-thread-replies { bottom: 35px; }

를 사용했는데 extensible 하지 않고 constant 값을 사용해서 별로 좋은 방법 같지는 않습니다.

src/ui/MessageContent/index.tsx

Co-authored-by: Hyungu Kang | Airen <gusrn1423@naver.com>

bang9

lgtm!

chohongm added the DO_NOT_MERGE Do not merge this PR yet label Aug 27, 2024

chohongm self-assigned this Aug 27, 2024

bang9 reviewed Aug 28, 2024

View reviewed changes

src/ui/ContextMenu/index.scss Show resolved Hide resolved

bang9 reviewed Aug 28, 2024

View reviewed changes

src/ui/MessageContent/index.scss Show resolved Hide resolved

bang9 reviewed Aug 28, 2024

View reviewed changes

src/utils/index.ts Outdated Show resolved Hide resolved

bang9 reviewed Aug 28, 2024

View reviewed changes

src/ui/MessageContent/index.tsx Outdated Show resolved Hide resolved

bang9 reviewed Aug 28, 2024

View reviewed changes

src/ui/TemplateMessageItemBody/types.ts Show resolved Hide resolved

bang9 reviewed Aug 28, 2024

View reviewed changes

src/ui/MessageContent/index.tsx Outdated Show resolved Hide resolved

chohongm marked this pull request as draft August 29, 2024 01:17

chohongm added 6 commits August 30, 2024 17:40

feat: Improve message template view

02f95af

remove max 10 items in carousel limitation logic

3cfb580

Remove MessageContentMiddleContainerType

df530ab

update container type logic

0fb7498

Update template logic to render multiple items even when items contai…

e9719a3

…n carousel type

Add MessageContentForTemplateMessage

a52d9f1

chohongm force-pushed the feat/CLNP-4852-improve-message-template-view branch from 73913bf to a52d9f1 Compare August 30, 2024 08:41

minor bug fix

24dfd42

chohongm requested a review from bang9 August 30, 2024 08:55

chohongm marked this pull request as ready for review August 30, 2024 08:55

chohongm removed the DO_NOT_MERGE Do not merge this PR yet label Aug 30, 2024

bang9 reviewed Aug 31, 2024

View reviewed changes

src/utils/index.ts Outdated Show resolved Hide resolved

bang9 reviewed Aug 31, 2024

View reviewed changes

src/ui/TemplateMessageItemBody/index.tsx Outdated Show resolved Hide resolved

bang9 reviewed Aug 31, 2024

View reviewed changes

src/ui/TemplateMessageItemBody/index.tsx Outdated Show resolved Hide resolved

apply feeds

f3219fd

bang9 changed the title ~~feat: Improve message template view (draft)~~ feat: Improve message template view Sep 2, 2024

remove unused

4d57770

bang9 reviewed Sep 23, 2024

View reviewed changes

src/ui/MessageContent/MessageBody/index.tsx Show resolved Hide resolved

bang9 reviewed Sep 23, 2024

View reviewed changes

src/ui/MessageContent/index.tsx Outdated Show resolved Hide resolved

bang9 reviewed Sep 23, 2024

View reviewed changes

src/ui/TemplateMessageItemBody/temp.json Outdated Show resolved Hide resolved

chohongm added 3 commits September 24, 2024 14:38

apply feeds

8260f45

update snapshots

b388132

lock file update

9e42fba

chohongm requested a review from bang9 September 24, 2024 06:05

bang9 reviewed Sep 24, 2024

View reviewed changes

src/ui/TemplateMessageItemBody/index.tsx Outdated Show resolved Hide resolved

bang9 reviewed Sep 24, 2024

View reviewed changes

src/ui/TemplateMessageItemBody/index.tsx Outdated Show resolved Hide resolved

bang9 reviewed Sep 24, 2024

View reviewed changes

src/ui/ChannelAvatar/__tests__/ChannelAvatar.spec.js Show resolved Hide resolved

chohongm and others added 3 commits September 24, 2024 15:47

Update src/ui/TemplateMessageItemBody/index.tsx

7ec3d10

Co-authored-by: Hyungu Kang | Airen <gusrn1423@naver.com>

apply feeds

28185c5

apply feeds

4be3798

chohongm requested a review from bang9 September 25, 2024 07:52

bang9 reviewed Sep 26, 2024

View reviewed changes

src/ui/MessageContent/index.tsx Show resolved Hide resolved

bang9 reviewed Sep 26, 2024

View reviewed changes

src/ui/MessageContent/messageContentForTemplateMessage.tsx Show resolved Hide resolved

bang9 reviewed Sep 26, 2024

View reviewed changes

src/ui/MessageContent/index.tsx Show resolved Hide resolved

bang9 reviewed Sep 26, 2024

View reviewed changes

src/ui/MessageContent/index.tsx Outdated Show resolved Hide resolved

chohongm and others added 5 commits September 26, 2024 13:48

Update src/ui/MessageContent/index.tsx

3dab003

Co-authored-by: Hyungu Kang | Airen <gusrn1423@naver.com>

Update src/ui/MessageContent/index.tsx

9252030

Co-authored-by: Hyungu Kang | Airen <gusrn1423@naver.com>

rename file

412bdf3

apply feeds

7d34767

apply feeds

8b20f7b

chohongm requested a review from bang9 September 26, 2024 04:59

chohongm force-pushed the feat/CLNP-4852-improve-message-template-view branch from 7e01cd9 to 8b20f7b Compare September 26, 2024 05:32

bang9 approved these changes Sep 26, 2024

View reviewed changes

chohongm merged commit 6fb1baa into main Sep 26, 2024
10 checks passed

chohongm deleted the feat/CLNP-4852-improve-message-template-view branch September 26, 2024 06:05

HoonBaek added the v3.15.5 label Sep 26, 2024

feat: Improve message template view #1207

feat: Improve message template view #1207

Uh oh!

Conversation

chohongm commented Aug 27, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelogs

How to test?

Figma

Default container type rendering (template message only)

Uh oh!

netlify bot commented Aug 27, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for sendbird-uikit-react ready!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

bang9 commented Aug 28, 2024

Uh oh!

chohongm commented Aug 28, 2024

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

bang9 commented Aug 31, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

[중요]

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

bang9 Sep 26, 2024

Choose a reason for hiding this comment

Uh oh!

chohongm Sep 26, 2024

Choose a reason for hiding this comment

Uh oh!

bang9 Sep 26, 2024

Choose a reason for hiding this comment

Uh oh!

bang9 Sep 27, 2024

Choose a reason for hiding this comment

Uh oh!

chohongm Nov 19, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

bang9 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

chohongm commented Aug 27, 2024 •

edited

Loading

netlify bot commented Aug 27, 2024 •

edited

Loading

bang9 commented Aug 31, 2024 •

edited

Loading