Page MenuHomePhabricator
Differential D3378

[web] Introduce `Label` component
ClosedPublic
Actions

Authored by • jacek on Mar 9 2022, 4:33 AM.
Tags
None
Referenced Files
F5314901: D3378.id.diff
Tue, Apr 8, 5:24 PM
F5314041: D3378.id10945.diff
Tue, Apr 8, 3:40 PM
F5311649: D3378.diff
Tue, Apr 8, 8:36 AM
F5311479: D3378.id10194.diff
Tue, Apr 8, 8:29 AM
F5309491: D3378.id10522.diff
Tue, Apr 8, 6:57 AM
Unknown Object (File)
Tue, Apr 1, 2:27 AM
Unknown Object (File)
Sun, Mar 30, 9:56 PM
Unknown Object (File)
Sun, Mar 30, 3:07 PM
View All Files
Subscribers
• adrian
ashoat
atul
• benschac
• karol
tomek

Details

Reviewers
tomek
• benschac
atul
Commits
rCOMM4ad6a81bd401: [web] Introduce `Label` component
Summary

Introduce a simple label component (for e.g. displaying member's role). It will be used in the next diff.

Screenshot_Google Chrome_2022-03-09_144255.png (96×418 px, 16 KB)

Figma:
https://www.figma.com/file/a1nkbWgbgjRlrOY9LVurTz/Comm-%2F-Desktop-app?node-id=1132%3A76670

Test Plan

No changes in the app. The component will appear in members modal.

Diff Detail

Repository
rCOMM Comm
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

• jacek created this revision.Mar 9 2022, 4:33 AM
Herald added subscribers: • benschac, • karol, atul and 3 others. · View Herald TranscriptMar 9 2022, 4:33 AM
Harbormaster completed remote builds in B7240: Diff 10194.Mar 9 2022, 4:40 AM
• jacek requested review of this revision.Mar 9 2022, 4:40 AM
• jacek edited the summary of this revision. (Show Details)Mar 9 2022, 5:43 AM
• jacek added reviewers: tomek, • benschac, atul.
• jacek added a child revision: D3379: [web] Introduce `ThreadMember` component.Mar 9 2022, 5:54 AM
atul accepted this revision.Mar 9 2022, 8:37 PM

Looks good to me! Are there corresponding designs on Figma? I don't remember seeing a label component, but I could be wrong. Would be good to include a link/screenshot in the description if there are designs.

web/components/label.react.js
15–28 ↗(On Diff #10194)

I wonder if it would be easier to understand as something like:

const {size, color, bg, children} = props;

const labelStyle = React.useMemo(() => {
  fontSize: size ?? '12px',
  color: color ?? 'var(--label-default-color)`
  background: bg ?? 'var(--label-default-bg)'
}, [bg, color, size]);

Not suggesting we should make the change.. just curious what you think

This revision is now accepted and ready to land.Mar 9 2022, 8:37 PM
ashoat added inline comments.Mar 11 2022, 6:50 AM
web/components/label.react.js
15–28 ↗(On Diff #10194)

Note that you need parens () around the curly braces in the block {} to directly return an object, eg.:

const returnsObject = () => ({
  key1: 'one',
  key2: 'two',
});
tomek accepted this revision.Mar 15 2022, 10:28 AM
• jacek edited the summary of this revision. (Show Details)Mar 18 2022, 6:34 AM
• jacek updated this revision to Diff 10522.Mar 18 2022, 6:34 AM

simplified lambda

Harbormaster completed remote builds in B7470: Diff 10522.Mar 18 2022, 6:40 AM
• jacek updated this revision to Diff 10864.Mar 31 2022, 2:27 AM

rebase

Harbormaster completed remote builds in B7748: Diff 10864.Mar 31 2022, 3:27 AM
Closed by commit rCOMM4ad6a81bd401: [web] Introduce `Label` component (authored by • jacek). · Explain WhyApr 1 2022, 3:51 AM
This revision was automatically updated to reflect the committed changes.
• jacek added a commit: rCOMM4ad6a81bd401: [web] Introduce `Label` component.

Revision Contents
Changeset List

PathSize
web/
components/
5 lines
38 lines
2 lines

Diff 10864

View Options

web/components/label.css

Show First 20 Lines • Show All 342 Lines • ▼ Show 20 Lines query.append(SQL`
ORDER BY tw.threadID, tw.time DESC, tw.id DESC ORDER BY tw.threadID, tw.time DESC, tw.id DESC
`); `);
const [result] = await dbQuery(query); const [result] = await dbQuery(query);
const derivedMessages = await fetchDerivedMessages(result, viewer); const derivedMessages = await fetchDerivedMessages(result, viewer);
const messages = await parseMessageSQLResult(result, derivedMessages, viewer); const messages = await parseMessageSQLResult(result, derivedMessages, viewer);
const rawMessageInfos = []; const rawMessageInfos = [];
const threadToMessageCount = new Map(); const threadToMessageCount = new Map<string, number>();
for (const message of messages) { for (const message of messages) {
const { rawMessageInfo } = message; const { rawMessageInfo } = message;
rawMessageInfos.push(rawMessageInfo); rawMessageInfos.push(rawMessageInfo);
const { threadID } = rawMessageInfo; const { threadID } = rawMessageInfo;
const currentCountValue = threadToMessageCount.get(threadID); const currentCountValue = threadToMessageCount.get(threadID);
const currentCount = currentCountValue ? currentCountValue : 0; const currentCount = currentCountValue ? currentCountValue : 0;
threadToMessageCount.set(threadID, currentCount + 1); threadToMessageCount.set(threadID, currentCount + 1);
} }
▲ Show 20 Lines • Show All 479 Lines • ▼ Show 20 Lines SELECT m.id, (
ORDER BY time DESC, id DESC ORDER BY time DESC, id DESC
LIMIT 1 LIMIT 1
) content ) content
FROM messages m FROM messages m
WHERE m.id IN(${messageIDs}) WHERE m.id IN(${messageIDs})
`; `;
const [result] = await dbQuery(latestEditedMessageQuery); const [result] = await dbQuery(latestEditedMessageQuery);
const latestContentByID = new Map(); const latestContentByID = new Map<string, EditMessageContent>();
for (const row of result) { for (const row of result) {
if (!row.content) { if (!row.content) {
continue; continue;
} }
const content = JSON.parse(row.content); const content = JSON.parse(row.content);
latestContentByID.set(row.id.toString(), content); latestContentByID.set(row.id.toString(), content);
} }
▲ Show 20 Lines • Show All 181 Lines • Show Last 20 Lines
View Options

web/components/label.react.js

Show First 20 Lines • Show All 342 Lines • ▼ Show 20 Lines query.append(SQL`
ORDER BY tw.threadID, tw.time DESC, tw.id DESC ORDER BY tw.threadID, tw.time DESC, tw.id DESC
`); `);
const [result] = await dbQuery(query); const [result] = await dbQuery(query);
const derivedMessages = await fetchDerivedMessages(result, viewer); const derivedMessages = await fetchDerivedMessages(result, viewer);
const messages = await parseMessageSQLResult(result, derivedMessages, viewer); const messages = await parseMessageSQLResult(result, derivedMessages, viewer);
const rawMessageInfos = []; const rawMessageInfos = [];
const threadToMessageCount = new Map(); const threadToMessageCount = new Map<string, number>();
for (const message of messages) { for (const message of messages) {
const { rawMessageInfo } = message; const { rawMessageInfo } = message;
rawMessageInfos.push(rawMessageInfo); rawMessageInfos.push(rawMessageInfo);
const { threadID } = rawMessageInfo; const { threadID } = rawMessageInfo;
const currentCountValue = threadToMessageCount.get(threadID); const currentCountValue = threadToMessageCount.get(threadID);
const currentCount = currentCountValue ? currentCountValue : 0; const currentCount = currentCountValue ? currentCountValue : 0;
threadToMessageCount.set(threadID, currentCount + 1); threadToMessageCount.set(threadID, currentCount + 1);
} }
▲ Show 20 Lines • Show All 479 Lines • ▼ Show 20 Lines SELECT m.id, (
ORDER BY time DESC, id DESC ORDER BY time DESC, id DESC
LIMIT 1 LIMIT 1
) content ) content
FROM messages m FROM messages m
WHERE m.id IN(${messageIDs}) WHERE m.id IN(${messageIDs})
`; `;
const [result] = await dbQuery(latestEditedMessageQuery); const [result] = await dbQuery(latestEditedMessageQuery);
const latestContentByID = new Map(); const latestContentByID = new Map<string, EditMessageContent>();
for (const row of result) { for (const row of result) {
if (!row.content) { if (!row.content) {
continue; continue;
} }
const content = JSON.parse(row.content); const content = JSON.parse(row.content);
latestContentByID.set(row.id.toString(), content); latestContentByID.set(row.id.toString(), content);
} }
▲ Show 20 Lines • Show All 181 Lines • Show Last 20 Lines
View Options

web/theme.css

Show First 20 Lines • Show All 342 Lines • ▼ Show 20 Lines query.append(SQL`
ORDER BY tw.threadID, tw.time DESC, tw.id DESC ORDER BY tw.threadID, tw.time DESC, tw.id DESC
`); `);
const [result] = await dbQuery(query); const [result] = await dbQuery(query);
const derivedMessages = await fetchDerivedMessages(result, viewer); const derivedMessages = await fetchDerivedMessages(result, viewer);
const messages = await parseMessageSQLResult(result, derivedMessages, viewer); const messages = await parseMessageSQLResult(result, derivedMessages, viewer);
const rawMessageInfos = []; const rawMessageInfos = [];
const threadToMessageCount = new Map(); const threadToMessageCount = new Map<string, number>();
for (const message of messages) { for (const message of messages) {
const { rawMessageInfo } = message; const { rawMessageInfo } = message;
rawMessageInfos.push(rawMessageInfo); rawMessageInfos.push(rawMessageInfo);
const { threadID } = rawMessageInfo; const { threadID } = rawMessageInfo;
const currentCountValue = threadToMessageCount.get(threadID); const currentCountValue = threadToMessageCount.get(threadID);
const currentCount = currentCountValue ? currentCountValue : 0; const currentCount = currentCountValue ? currentCountValue : 0;
threadToMessageCount.set(threadID, currentCount + 1); threadToMessageCount.set(threadID, currentCount + 1);
} }
▲ Show 20 Lines • Show All 479 Lines • ▼ Show 20 Lines SELECT m.id, (
ORDER BY time DESC, id DESC ORDER BY time DESC, id DESC
LIMIT 1 LIMIT 1
) content ) content
FROM messages m FROM messages m
WHERE m.id IN(${messageIDs}) WHERE m.id IN(${messageIDs})
`; `;
const [result] = await dbQuery(latestEditedMessageQuery); const [result] = await dbQuery(latestEditedMessageQuery);
const latestContentByID = new Map(); const latestContentByID = new Map<string, EditMessageContent>();
for (const row of result) { for (const row of result) {
if (!row.content) { if (!row.content) {
continue; continue;
} }
const content = JSON.parse(row.content); const content = JSON.parse(row.content);
latestContentByID.set(row.id.toString(), content); latestContentByID.set(row.id.toString(), content);
} }
▲ Show 20 Lines • Show All 181 Lines • Show Last 20 Lines