Page MenuHomePhabricator
Differential D3373

[web] Refactor `ChatTabs` to use `Tabs` component
ClosedPublic
Actions

Authored by • jacek on Mar 9 2022, 3:20 AM.
Tags
None
Referenced Files
Unknown Object (File)
Fri, Apr 11, 5:43 AM
Unknown Object (File)
Tue, Apr 8, 7:00 PM
Unknown Object (File)
Tue, Apr 8, 3:42 PM
Unknown Object (File)
Tue, Apr 8, 7:44 AM
Unknown Object (File)
Tue, Apr 8, 7:31 AM
Unknown Object (File)
Tue, Apr 8, 7:24 AM
Unknown Object (File)
Tue, Apr 8, 7:22 AM
Unknown Object (File)
Tue, Apr 8, 7:09 AM
View All Files
Subscribers
• adrian
ashoat
atul
• benschac
• karol

Details

Reviewers
tomek
• benschac
atul
ashoat
Commits
rCOMMed8a73deeb7d: [web] Refactor `ChatTabs` to use `Tabs` component
Summary

Used introduced Tabs component in ChatTabs, replacing existing solution. Chat borders design now matches Figma design and elements have onHover effect. The behavior of panel should remain the same.

Before:

Screenshot_Google Chrome_2022-03-09_122729.png (152×834 px, 14 KB)

After:

Screenshot_Google Chrome_2022-03-09_122708.png (164×844 px, 14 KB)

Test Plan

Run web app and try to switch Between Focus and Background tabs. It should work as before.

Diff Detail

Repository
rCOMM Comm
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

• jacek created this revision.Mar 9 2022, 3:20 AM
Herald added subscribers: • benschac, • karol, atul and 2 others. · View Herald TranscriptMar 9 2022, 3:20 AM
Harbormaster completed remote builds in B7232: Diff 10186.Mar 9 2022, 3:25 AM
• jacek requested review of this revision.Mar 9 2022, 3:25 AM
• jacek edited the summary of this revision. (Show Details)Mar 9 2022, 3:28 AM
• jacek added reviewers: • benschac, atul.
• jacek added a parent revision: D3369: [web] Introduce common `Tabs` component.Mar 9 2022, 5:56 AM
tomek requested changes to this revision.Mar 10 2022, 2:50 AM

Just an idea: we can consider using children instead of a prop with an array. Initially I thought it might be complicated, but I used this approach in D3341 and it wasn't that hard

web/chat/chat-tabs.react.js
29–33 ↗(On Diff #10186)

Can we use more concrete type, e.g. 'Background' | 'Focus' and avoid using invariants?

66 ↗(On Diff #10186)
This revision now requires changes to proceed.Mar 10 2022, 2:50 AM
• jacek updated this revision to Diff 10301.Mar 11 2022, 7:27 AM

Used Tabs.Container and Tabs.Item

• jacek mentioned this in D3369: [web] Introduce common `Tabs` component.Mar 11 2022, 7:30 AM
Harbormaster completed remote builds in B7302: Diff 10301.Mar 11 2022, 7:32 AM
• jacek updated this revision to Diff 10303.Mar 11 2022, 7:46 AM

removed invariant

Harbormaster completed remote builds in B7304: Diff 10303.Mar 11 2022, 7:52 AM
tomek accepted this revision.Mar 14 2022, 9:54 AM
tomek added a reviewer: ashoat.
tomek added inline comments.
web/chat/chat-tabs.react.js
29

Just to make sure, as it looks really interesting. So does that mean that if we try to use a tab with a different id a flow error would be returned?

• jacek added inline comments.Mar 14 2022, 10:07 AM
web/chat/chat-tabs.react.js
29

Yes, if we try to execute this callback with other id, flow error is thrown.

ashoat accepted this revision.Mar 14 2022, 9:21 PM

Makes sense to me! The Tabs.Item header prop probably could've been a Tabs.Header component, but it doesn't matter that much

This revision is now accepted and ready to land.Mar 14 2022, 9:21 PM
• jacek updated this revision to Diff 10859.Mar 31 2022, 2:22 AM

rebase

Harbormaster completed remote builds in B7743: Diff 10859.Mar 31 2022, 2:53 AM
• jacek updated this revision to Diff 10932.Apr 1 2022, 2:45 AM

rebase

Harbormaster completed remote builds in B7790: Diff 10932.Apr 1 2022, 2:52 AM
Closed by commit rCOMMed8a73deeb7d: [web] Refactor `ChatTabs` to use `Tabs` component (authored by • jacek). · Explain WhyApr 1 2022, 3:50 AM
This revision was automatically updated to reflect the committed changes.
• jacek added a commit: rCOMMed8a73deeb7d: [web] Refactor `ChatTabs` to use `Tabs` component.

Revision Contents
Changeset List

PathSize
web/
chat/
25 lines
62 lines
12 lines

Diff 10303

View Options

web/chat/chat-tabs.css

Show All 18 Lines
#include <memory> #include <memory>
#include <string> #include <string>
namespace comm { namespace comm {
namespace network { namespace network {
namespace database { namespace database {
class DatabaseManager : public DatabaseManagerBase { class DatabaseManager : public DatabaseManagerBase {
private:
template <class T>
T populatePutRequestFromMessageItem(T &putRequest, const MessageItem &item);
public: public:
static DatabaseManager &getInstance(); static DatabaseManager &getInstance();
bool isTableAvailable(const std::string &tableName); bool isTableAvailable(const std::string &tableName);
void putSessionItem(const DeviceSessionItem &item); void putSessionItem(const DeviceSessionItem &item);
std::shared_ptr<DeviceSessionItem> std::shared_ptr<DeviceSessionItem>
findSessionItem(const std::string &deviceID); findSessionItem(const std::string &deviceID);
void removeSessionItem(const std::string &sessionID); void removeSessionItem(const std::string &sessionID);
void putSessionSignItem(const SessionSignItem &item); void putSessionSignItem(const SessionSignItem &item);
std::shared_ptr<SessionSignItem> std::shared_ptr<SessionSignItem>
findSessionSignItem(const std::string &deviceID); findSessionSignItem(const std::string &deviceID);
void removeSessionSignItem(const std::string &deviceID); void removeSessionSignItem(const std::string &deviceID);
void putPublicKeyItem(const PublicKeyItem &item); void putPublicKeyItem(const PublicKeyItem &item);
std::shared_ptr<PublicKeyItem> findPublicKeyItem(const std::string &deviceID); std::shared_ptr<PublicKeyItem> findPublicKeyItem(const std::string &deviceID);
void removePublicKeyItem(const std::string &deviceID); void removePublicKeyItem(const std::string &deviceID);
void putMessageItem(const MessageItem &item); void putMessageItem(const MessageItem &item);
void putMessageItemsByBatch(std::vector<MessageItem> &messageItems);
std::shared_ptr<MessageItem> findMessageItem(const std::string &messageID); std::shared_ptr<MessageItem> findMessageItem(const std::string &messageID);
std::vector<std::shared_ptr<MessageItem>> std::vector<std::shared_ptr<MessageItem>>
findMessageItemsByReceiver(const std::string &toDeviceID); findMessageItemsByReceiver(const std::string &toDeviceID);
void removeMessageItem(const std::string &messageID); void removeMessageItem(const std::string &messageID);
}; };
} // namespace database } // namespace database
} // namespace network } // namespace network
} // namespace comm } // namespace comm
View Options

web/chat/chat-tabs.react.js

Show All 18 Lines
#include <memory> #include <memory>
#include <string> #include <string>
namespace comm { namespace comm {
namespace network { namespace network {
namespace database { namespace database {
class DatabaseManager : public DatabaseManagerBase { class DatabaseManager : public DatabaseManagerBase {
private:
template <class T>
T populatePutRequestFromMessageItem(T &putRequest, const MessageItem &item);
public: public:
static DatabaseManager &getInstance(); static DatabaseManager &getInstance();
bool isTableAvailable(const std::string &tableName); bool isTableAvailable(const std::string &tableName);
void putSessionItem(const DeviceSessionItem &item); void putSessionItem(const DeviceSessionItem &item);
std::shared_ptr<DeviceSessionItem> std::shared_ptr<DeviceSessionItem>
findSessionItem(const std::string &deviceID); findSessionItem(const std::string &deviceID);
void removeSessionItem(const std::string &sessionID); void removeSessionItem(const std::string &sessionID);
void putSessionSignItem(const SessionSignItem &item); void putSessionSignItem(const SessionSignItem &item);
std::shared_ptr<SessionSignItem> std::shared_ptr<SessionSignItem>
findSessionSignItem(const std::string &deviceID); findSessionSignItem(const std::string &deviceID);
void removeSessionSignItem(const std::string &deviceID); void removeSessionSignItem(const std::string &deviceID);
void putPublicKeyItem(const PublicKeyItem &item); void putPublicKeyItem(const PublicKeyItem &item);
std::shared_ptr<PublicKeyItem> findPublicKeyItem(const std::string &deviceID); std::shared_ptr<PublicKeyItem> findPublicKeyItem(const std::string &deviceID);
void removePublicKeyItem(const std::string &deviceID); void removePublicKeyItem(const std::string &deviceID);
void putMessageItem(const MessageItem &item); void putMessageItem(const MessageItem &item);
void putMessageItemsByBatch(std::vector<MessageItem> &messageItems);
std::shared_ptr<MessageItem> findMessageItem(const std::string &messageID); std::shared_ptr<MessageItem> findMessageItem(const std::string &messageID);
std::vector<std::shared_ptr<MessageItem>> std::vector<std::shared_ptr<MessageItem>>
findMessageItemsByReceiver(const std::string &toDeviceID); findMessageItemsByReceiver(const std::string &toDeviceID);
void removeMessageItem(const std::string &messageID); void removeMessageItem(const std::string &messageID);
}; };
} // namespace database } // namespace database
} // namespace network } // namespace network
} // namespace comm } // namespace comm
View Options

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

Show All 18 Lines
#include <memory> #include <memory>
#include <string> #include <string>
namespace comm { namespace comm {
namespace network { namespace network {
namespace database { namespace database {
class DatabaseManager : public DatabaseManagerBase { class DatabaseManager : public DatabaseManagerBase {
private:
template <class T>
T populatePutRequestFromMessageItem(T &putRequest, const MessageItem &item);
public: public:
static DatabaseManager &getInstance(); static DatabaseManager &getInstance();
bool isTableAvailable(const std::string &tableName); bool isTableAvailable(const std::string &tableName);
void putSessionItem(const DeviceSessionItem &item); void putSessionItem(const DeviceSessionItem &item);
std::shared_ptr<DeviceSessionItem> std::shared_ptr<DeviceSessionItem>
findSessionItem(const std::string &deviceID); findSessionItem(const std::string &deviceID);
void removeSessionItem(const std::string &sessionID); void removeSessionItem(const std::string &sessionID);
void putSessionSignItem(const SessionSignItem &item); void putSessionSignItem(const SessionSignItem &item);
std::shared_ptr<SessionSignItem> std::shared_ptr<SessionSignItem>
findSessionSignItem(const std::string &deviceID); findSessionSignItem(const std::string &deviceID);
void removeSessionSignItem(const std::string &deviceID); void removeSessionSignItem(const std::string &deviceID);
void putPublicKeyItem(const PublicKeyItem &item); void putPublicKeyItem(const PublicKeyItem &item);
std::shared_ptr<PublicKeyItem> findPublicKeyItem(const std::string &deviceID); std::shared_ptr<PublicKeyItem> findPublicKeyItem(const std::string &deviceID);
void removePublicKeyItem(const std::string &deviceID); void removePublicKeyItem(const std::string &deviceID);
void putMessageItem(const MessageItem &item); void putMessageItem(const MessageItem &item);
void putMessageItemsByBatch(std::vector<MessageItem> &messageItems);
std::shared_ptr<MessageItem> findMessageItem(const std::string &messageID); std::shared_ptr<MessageItem> findMessageItem(const std::string &messageID);
std::vector<std::shared_ptr<MessageItem>> std::vector<std::shared_ptr<MessageItem>>
findMessageItemsByReceiver(const std::string &toDeviceID); findMessageItemsByReceiver(const std::string &toDeviceID);
void removeMessageItem(const std::string &messageID); void removeMessageItem(const std::string &messageID);
}; };
} // namespace database } // namespace database
} // namespace network } // namespace network
} // namespace comm } // namespace comm