Page MenuHomePhabricator
Differential D10523

[web] update chat tabs to use the new tabs component
ClosedPublic
Actions

Authored by ginsu on Jan 4 2024, 1:35 AM.
Tags
None
Referenced Files
Unknown Object (File)
Sun, Mar 16, 10:01 PM
Unknown Object (File)
Sun, Mar 16, 10:01 PM
Unknown Object (File)
Sun, Mar 16, 10:01 PM
Unknown Object (File)
Sun, Mar 16, 10:00 PM
Unknown Object (File)
Sun, Mar 16, 9:59 PM
Unknown Object (File)
Wed, Mar 5, 8:09 AM
Unknown Object (File)
Feb 12 2025, 10:15 PM
Unknown Object (File)
Feb 12 2025, 10:15 PM
View All 80 Files
Subscribers
ashoat
tomek

Details

Reviewers
atul
inka
Commits
rCOMMf5f5e19cb87e: [web] update chat tabs to use the new tabs component
Summary

This diff updates the chat tabs to use the new tab components. Since we decoupled the tabs from the tab content with this new tab component, the chat tabs now needs to be responsible for rendering the correct tab content.

Depends on D10522

Test Plan

Please see the demo video below to confirm that there are no regressions

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

ginsu created this revision.Jan 4 2024, 1:35 AM
Herald added subscribers: tomek, ashoat. · View Herald TranscriptJan 4 2024, 1:36 AM
ginsu edited the summary of this revision. (Show Details)Jan 4 2024, 1:38 AM
ginsu edited the test plan for this revision. (Show Details)
ginsu added reviewers: atul, inka.
ginsu added a parent revision: D10522: [web] update thread settings modal to use the new tabs component.
ginsu mentioned this in D10524: [web] deprecate and clean up unused tabs code.Jan 4 2024, 1:43 AM
ginsu added a child revision: D10524: [web] deprecate and clean up unused tabs code.
Harbormaster completed remote builds in B25475: Diff 35189.Jan 4 2024, 1:54 AM
ginsu requested review of this revision.Jan 4 2024, 1:54 AM
atul accepted this revision.Jan 4 2024, 1:22 PM
atul added inline comments.
web/chat/chat-tabs.react.js
56–62 ↗(On Diff #35189)

Wouldn't hurt to memoize

This revision is now accepted and ready to land.Jan 4 2024, 1:22 PM
ginsu updated this revision to Diff 35309.Jan 5 2024, 12:55 PM

address comments + rebase before landing

Harbormaster completed remote builds in B25554: Diff 35309.Jan 5 2024, 1:12 PM
Closed by commit rCOMMf5f5e19cb87e: [web] update chat tabs to use the new tabs component (authored by ginsu). · Explain WhyJan 5 2024, 1:39 PM
This revision was automatically updated to reflect the committed changes.
ginsu added a commit: rCOMMf5f5e19cb87e: [web] update chat tabs to use the new tabs component.

Revision Contents
Changeset List

Diff 35319

View Options

web/chat/chat-tabs.css

div.container { div.container {
width: 400px; width: 400px;
background-color: var(--bg); background-color: var(--bg);
border-right: 1px solid var(--border-color); border-right: 1px solid var(--border-color);
display: flex; display: flex;
} flex-direction: column;
div.tabItem {
display: flex;
align-items: center;
}
div.tabItem svg {
padding-right: 8px;
} }
div.threadList { div.threadList {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
border-top: 1px solid var(--border-color);
} }
View Options

web/chat/chat-tabs.react.js

// @flow // @flow
import invariant from 'invariant'; import invariant from 'invariant';
import * as React from 'react'; import * as React from 'react';
import { unreadBackgroundCount } from 'lib/selectors/thread-selectors.js'; import { unreadBackgroundCount } from 'lib/selectors/thread-selectors.js';
import css from './chat-tabs.css'; import css from './chat-tabs.css';
import ChatThreadList from './chat-thread-list.react.js'; import ChatThreadList from './chat-thread-list.react.js';
import ChatThreadTab from './chat-thread-tab.react.js';
import { ThreadListContext } from './thread-list-provider.js'; import { ThreadListContext } from './thread-list-provider.js';
import Tabs from '../components/tabs-legacy.react.js'; import Tabs, { type TabData } from '../components/tabs.react.js';
import { useSelector } from '../redux/redux-utils.js'; import { useSelector } from '../redux/redux-utils.js';
type TabType = 'Background' | 'Focus';
function ChatTabs(): React.Node { function ChatTabs(): React.Node {
let backgroundTitle = 'Background'; let backgroundTitle = 'Background';
const unreadBackgroundCountVal = useSelector(unreadBackgroundCount); const unreadBackgroundCountVal = useSelector(unreadBackgroundCount);
if (unreadBackgroundCountVal) { if (unreadBackgroundCountVal) {
backgroundTitle += ` (${unreadBackgroundCountVal})`; backgroundTitle += ` (${unreadBackgroundCountVal})`;
} }
const tabsData: $ReadOnlyArray<TabData<TabType>> = React.useMemo(
() => [
{
id: 'Focus',
header: 'Focused',
},
{
id: 'Background',
header: backgroundTitle,
},
],
[backgroundTitle],
);
const threadListContext = React.useContext(ThreadListContext); const threadListContext = React.useContext(ThreadListContext);
invariant( invariant(
threadListContext, threadListContext,
'threadListContext should be set in ChatThreadList', 'threadListContext should be set in ChatThreadList',
); );
const { activeTab, setActiveTab } = threadListContext; const { activeTab, setActiveTab } = threadListContext;
const setActiveChatTab = React.useCallback( const tabs = React.useMemo(
(newTab: 'Background' | 'Focus') => { () => (
setActiveTab(newTab); <Tabs
}, tabItems={tabsData}
[setActiveTab], activeTab={activeTab}
setTab={setActiveTab}
headerStyle="pill"
/>
),
[activeTab, setActiveTab, tabsData],
); );
const chatThreadList = React.useMemo( const chatTabs = React.useMemo(
() => ( () => (
<div className={css.container}>
{tabs}
<div className={css.threadList}> <div className={css.threadList}>
<ChatThreadList /> <ChatThreadList />
</div> </div>
</div>
), ),
[], [tabs],
);
const focusTabsItem = React.useMemo(
() => (
<Tabs.Item id="Focus" header={<ChatThreadTab title="Focused" />}>
{chatThreadList}
</Tabs.Item>
),
[chatThreadList],
);
const backgroundTabsItem = React.useMemo(
() => (
<Tabs.Item
id="Background"
header={<ChatThreadTab title={backgroundTitle} />}
>
{chatThreadList}
</Tabs.Item>
),
[backgroundTitle, chatThreadList],
); );
return ( return chatTabs;
<div className={css.container}>
<Tabs.Container
activeTab={activeTab}
setTab={setActiveChatTab}
headerStyle="pill"
>
{focusTabsItem}
{backgroundTabsItem}
</Tabs.Container>
</div>
);
} }
export default ChatTabs; export default ChatTabs;
View Options

web/chat/chat-thread-tab.react.js

  • This file was deleted.
This file was completely deleted. Show File Contents