feat(reply): Integrate collaborators endpoint by mingzexiao6 · Pull Request #484 · box/box-annotations

mingzexiao6 · 2020-05-11T17:43:43Z

Fix tests
More tests

src/components/Popups/ReplyField/MentionItem.tsx

src/components/Popups/ReplyField/PopupList.scss

src/components/Popups/ReplyField/PopupList.tsx

src/components/Popups/ReplyField/MentionItem.tsx

src/components/Popups/ReplyField/PopupList.tsx

src/components/Popups/ReplyField/ReplyField.tsx

jstoffan

Strongly suggest breaking things up with less tight coupling between components.

src/components/Popups/ReplyField/PopupList.tsx

src/components/Popups/ReplyField/ReplyField.tsx

src/components/Popups/ReplyField/MentionItem.tsx

src/components/Popups/ReplyField/PopupList.scss

src/components/Popups/ReplyField/PopupList.tsx

src/components/Popups/ReplyField/ReplyField.tsx

src/components/Popups/ReplyField/MentionItem.tsx

src/components/Popups/ReplyField/ItemList.tsx

src/components/Popups/ReplyField/ReplyField.tsx

src/components/Popups/ReplyField/DefaultItemRow.tsx

src/components/Popups/ReplyField/ItemList.tsx

src/components/Popups/ReplyField/MentionItem.tsx

src/components/Popups/ReplyField/DefaultItemRow.tsx

src/components/Popups/ReplyField/PopupList.tsx

src/components/Popups/ReplyField/ReplyField.tsx

jstoffan · 2020-05-13T21:10:11Z

src/components/Popups/ReplyField/PopupList.tsx

-);
+const PopupList = ({ items, reference, options, ...rest }: Props): JSX.Element => {
+    return (
+        <PopupBase className="ba-PopupList" options={{ ...defaultOptions, ...options }} reference={reference}>


This will probably cause the popper to be re-rendered constantly due to the object reference changing per-render.

What was the finding here?

What was the finding here?

I feel I eventually need to pass in options in the future. But since it's not used in this pr, I will remove it.

src/components/Popups/ReplyField/PopupList.tsx

src/components/Popups/ReplyField/ReplyField.tsx

src/components/Popups/ReplyField/__tests__/ItemList-test.tsx

src/components/Popups/ReplyField/__tests__/MentionItem-test.tsx

src/components/Popups/ReplyField/withMentionDecorator.tsx

src/components/Popups/ReplyField/ItemRow.tsx

src/components/Popups/ReplyField/PopupList.tsx

ConradJChan · 2020-05-14T17:03:10Z

src/components/Popups/ReplyField/PopupList.tsx

+    activeItemIndex?: number;
+    itemRowAs?: JSX.Element;
+    items: Record<string, unknown>[];
+    onSelect: (index: number, event: React.SyntheticEvent) => void;


Is the event used anywhere?

Is the event used anywhere?

not now, but I think we should provide this info to the parent and parent can choose to use it or not.

src/components/Popups/ReplyField/ReplyField.tsx

ConradJChan · 2020-05-14T17:10:09Z

src/components/Popups/ReplyField/ReplyField.tsx

    componentDidMount(): void {
        this.focusEditor();
+        // restore PopupList if it was active
+        this.updatePopupReference();


When would this occur?

When would this occur?

zoom in/out

But it also has popper position problem when you zoom in/out. I'll remove this line in this pr and address popper issue in an another pr.

src/components/Popups/ReplyField/ReplyField.tsx

src/components/Popups/ReplyField/__tests__/ItemList-test.tsx

src/components/Popups/ReplyField/ItemList.tsx

jstoffan · 2020-05-14T22:23:02Z

src/components/Popups/ReplyField/PopupList.tsx

-);
+const PopupList = ({ items, reference, options, ...rest }: Props): JSX.Element => {
+    return (
+        <PopupBase className="ba-PopupList" options={{ ...defaultOptions, ...options }} reference={reference}>


What was the finding here?

src/components/Popups/ReplyField/ReplyField.tsx

src/components/Popups/ReplyField/__tests__/ReplyField-test.tsx

jstoffan · 2020-05-14T22:27:04Z

src/components/Popups/ReplyField/withMentionDecorator.tsx

@@ -0,0 +1,24 @@
+import { CompositeDecorator, ContentBlock, ContentState, EditorState } from 'draft-js';


This file probably move to a more common location, like src/components.

This file probably move to a more common location, like src/components.

But it's only used in the ReplyField. Also MentionItem has to move to src/components with it, which may be confusing to people. It makes more sense to me to put it under its only consumer folder.

src/components/Popups/ReplyField/ReplyField.tsx

jstoffan · 2020-05-14T23:03:47Z

src/components/Popups/ReplyField/PopupList.tsx

+        <PopupBase className="ba-PopupList" options={{ ...defaultOptions, ...options }} reference={reference}>
+            {isEmpty(items) ? (
+                <div className="ba-PopupList-prompt">
+                    <FormattedMessage {...messages.popupListPrompt} />


Should there be a separate message for when a user has typed in a filter query but there are no results?

Should there be a separate message for when a user has typed in a filter query but there are no results?

Waiting for designer's response.

Rohit said that is ok

src/components/Popups/ReplyField/PopupList.scss

src/components/Popups/ReplyField/ItemRow.scss

src/components/ItemList/ItemRow.scss

src/components/Popups/ReplyField/PopupList.scss

src/components/Popups/ReplyField/ReplyField.scss

src/components/Popups/ReplyField/ReplyField.tsx

src/components/Popups/ReplyField/__tests__/MentionItem-test.tsx

src/components/Popups/ReplyField/__tests__/ReplyField-test.tsx

jstoffan · 2020-05-15T21:09:37Z

src/components/Popups/ReplyField/PopupList.tsx

@@ -1,12 +1,19 @@
-import * as React from 'react';
+import React from 'react';
+import isEmpty from 'lodash/isEmpty';


Looks like this is a new import. Is it needed or can we do !items.length?

mingzexiao6 requested a review from a team as a code owner May 11, 2020 17:43

mingzexiao6 marked this pull request as draft May 11, 2020 18:05

mickr reviewed May 11, 2020

View reviewed changes

jstoffan reviewed May 11, 2020

View reviewed changes

ConradJChan reviewed May 11, 2020

View reviewed changes

src/components/Popups/ReplyField/PopupList.scss Outdated Show resolved Hide resolved

src/components/Popups/ReplyField/PopupList.tsx Outdated Show resolved Hide resolved

mingzexiao6 force-pushed the collab-mentions-2 branch from c34f654 to 71fd902 Compare May 12, 2020 17:46

jstoffan suggested changes May 12, 2020

View reviewed changes

mingzexiao6 force-pushed the collab-mentions-2 branch 2 times, most recently from adce7c8 to 228ae85 Compare May 13, 2020 06:38

mingzexiao6 marked this pull request as ready for review May 13, 2020 17:33

ConradJChan reviewed May 13, 2020

View reviewed changes

jstoffan reviewed May 13, 2020

View reviewed changes

src/components/Popups/ReplyField/ReplyField.tsx Outdated Show resolved Hide resolved

jstoffan reviewed May 13, 2020

View reviewed changes

mingzexiao6 force-pushed the collab-mentions-2 branch from 6c0ef80 to eb20b7f Compare May 14, 2020 01:25

ConradJChan reviewed May 14, 2020

View reviewed changes

mingzexiao6 force-pushed the collab-mentions-2 branch from 6a0caf6 to 11bf610 Compare May 14, 2020 21:15

jstoffan reviewed May 14, 2020

View reviewed changes

jstoffan self-requested a review May 14, 2020 22:33

jstoffan reviewed May 14, 2020

View reviewed changes

src/components/Popups/ReplyField/ReplyField.tsx Outdated Show resolved Hide resolved

jstoffan reviewed May 14, 2020

View reviewed changes

src/components/Popups/ReplyField/PopupList.scss Show resolved Hide resolved

src/components/Popups/ReplyField/ItemRow.scss Show resolved Hide resolved

jstoffan reviewed May 15, 2020

View reviewed changes

feat(reply): Integrate collaborators endpoint

0c40590

mingzexiao6 force-pushed the collab-mentions-2 branch from 904e751 to 0c40590 Compare May 15, 2020 20:58

mingzexiao6 requested a review from jstoffan May 15, 2020 20:59

jstoffan reviewed May 15, 2020

View reviewed changes

jstoffan approved these changes May 15, 2020

View reviewed changes

mingzexiao6 added the ready-to-merge label May 15, 2020

mergify bot merged commit 619e7be into box:master May 15, 2020

mingzexiao6 deleted the collab-mentions-2 branch August 13, 2020 00:00

		@@ -0,0 +1,24 @@
		import { CompositeDecorator, ContentBlock, ContentState, EditorState } from 'draft-js';

Conversation

mingzexiao6 commented May 11, 2020 • 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!

jstoffan left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mingzexiao6 May 14, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mingzexiao6 commented May 11, 2020 •

edited

Loading

mingzexiao6 May 14, 2020 •

edited

Loading

mingzexiao6 May 15, 2020 •

edited

Loading