From aec32385906f40e242bb80e2f9add677495d8ad2 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Fri, 5 May 2023 11:16:58 +0800 Subject: [PATCH 1/6] Fix issue where incorrect username validation message was displayed during signup --- .../networking/queries/useValidateUsernameQuery.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/web/lib/networking/queries/useValidateUsernameQuery.tsx b/packages/web/lib/networking/queries/useValidateUsernameQuery.tsx index 8df55571b..c40dd9fc0 100644 --- a/packages/web/lib/networking/queries/useValidateUsernameQuery.tsx +++ b/packages/web/lib/networking/queries/useValidateUsernameQuery.tsx @@ -24,8 +24,12 @@ export function useValidateUsernameQuery({ // eslint-disable-next-line @typescript-eslint/no-explicit-any const isUsernameValid = (data as any)?.validateUsername ?? false - const usernameErrorMessage = validationErrorMessage(username) + if (isUsernameValid) { + return { isUsernameValid } + } + // Try to figure out why the username is invalid + const usernameErrorMessage = validationErrorMessage(username.toLowerCase()) if (usernameErrorMessage) { return { isUsernameValid: false, @@ -33,10 +37,6 @@ export function useValidateUsernameQuery({ } } - if (isUsernameValid) { - return { isUsernameValid } - } - return { isUsernameValid: false, usernameErrorMessage: 'This username is not available', From b1cf1225435a7a079a2adda45908e8d5f25b6a96 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Fri, 5 May 2023 11:34:46 +0800 Subject: [PATCH 2/6] Simplify style on signup pages --- packages/web/components/templates/ProfileLayout.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/web/components/templates/ProfileLayout.tsx b/packages/web/components/templates/ProfileLayout.tsx index 975ffafb1..228f67c06 100644 --- a/packages/web/components/templates/ProfileLayout.tsx +++ b/packages/web/components/templates/ProfileLayout.tsx @@ -16,8 +16,7 @@ export function ProfileLayout(props: ProfileLayoutProps): JSX.Element { css={{ // bg: '$omnivoreYellow', height: '100vh', - background: - '-webkit-linear-gradient(-65deg, rgba(255, 255, 255, 1.0) 45%, rgba(255, 210, 52, 1.0) 0%)', + bg: '$omnivoreYellow', }} > {props.children} From fde5ec29cf480a17fcdaf264002716aa9df0fc2c Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Fri, 5 May 2023 12:00:22 +0800 Subject: [PATCH 3/6] Dont allow descriptions to overflow their card width --- .../web/components/patterns/LibraryCards/LibraryCardStyles.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx b/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx index 8e1851ca4..b224994d7 100644 --- a/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx +++ b/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx @@ -58,6 +58,7 @@ export const DescriptionStyle = { '-webkit-box-orient': 'vertical', height: '45px', alignItems: 'start', + maxWidth: '-webkit-fill-available', } export const AuthorInfoStyle = { From aab332eefce12660c312fcbcd3e2f99d52b68362 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Fri, 5 May 2023 12:03:50 +0800 Subject: [PATCH 4/6] Sort labels by name --- .../components/patterns/LibraryCards/LibraryGridCard.tsx | 8 +++++--- .../components/patterns/LibraryCards/LibraryListCard.tsx | 8 +++++--- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx index 5d6de337a..6509c251c 100644 --- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx +++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx @@ -178,9 +178,11 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element { minHeight: '35px', }} > - {props.item.labels?.map(({ name, color }, index) => ( - - ))} + {props.item.labels + ?.sort((a, b) => a.name.localeCompare(b.name)) + .map(({ name, color }, index) => ( + + ))} - {props.item.labels?.map(({ name, color }, index) => ( - - ))} + {props.item.labels + ?.sort((a, b) => a.name.localeCompare(b.name)) + .map(({ name, color }, index) => ( + + ))} From f4a860e912a9e8c1d6e98655953e899f91e0e6b3 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Fri, 5 May 2023 12:36:30 +0800 Subject: [PATCH 5/6] Add label sorting on the web --- .../patterns/LibraryCards/LibraryGridCard.tsx | 9 ++--- .../patterns/LibraryCards/LibraryListCard.tsx | 9 ++--- packages/web/lib/labelsSort.ts | 36 +++++++++++++++++++ 3 files changed, 46 insertions(+), 8 deletions(-) create mode 100644 packages/web/lib/labelsSort.ts diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx index 6509c251c..dab543b99 100644 --- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx +++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx @@ -18,6 +18,7 @@ import { timeAgo, TitleStyle, } from './LibraryCardStyles' +import { sortedLabels } from '../../../lib/labelsSort' dayjs.extend(relativeTime) @@ -178,11 +179,11 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element { minHeight: '35px', }} > - {props.item.labels - ?.sort((a, b) => a.name.localeCompare(b.name)) - .map(({ name, color }, index) => ( + {sortedLabels(props.item.labels).map( + ({ name, color }, index) => ( - ))} + ) + )} - {props.item.labels - ?.sort((a, b) => a.name.localeCompare(b.name)) - .map(({ name, color }, index) => ( + {sortedLabels(props.item.labels).map( + ({ name, color }, index) => ( - ))} + ) + )} diff --git a/packages/web/lib/labelsSort.ts b/packages/web/lib/labelsSort.ts new file mode 100644 index 000000000..189852e9e --- /dev/null +++ b/packages/web/lib/labelsSort.ts @@ -0,0 +1,36 @@ +import { Label } from './networking/fragments/labelFragment' + +export const sortedLabels = (labels: Label[] | undefined): Label[] => { + if (!labels) { + return [] + } + + const colors = new Map() + for (const label of labels) { + let list = colors.get(label.color) ?? [] + list.push(label) + colors.set( + label.color, + list.sort((a, b) => a.name.localeCompare(b.name)) + ) + } + + const sortedColors = Array.from(colors.keys()).sort((a, b) => { + // Sort by the first element's name + const aname = colors.get(a)?.find(() => true)?.name ?? a + const bname = colors.get(b)?.find(() => true)?.name ?? b + return aname.localeCompare(bname) + }) + + const result: Label[] = [] + for (const key of sortedColors) { + const items = colors.get(key) + if (!items) { + continue + } + const sorted = items.sort((a, b) => a.name.localeCompare(b.name)) + result.push(...sorted) + } + + return result +} From fe7c0f2339f3da909f3c25e48ea11aabee6a29bd Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Fri, 5 May 2023 12:46:34 +0800 Subject: [PATCH 6/6] Linting fix --- packages/web/lib/labelsSort.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web/lib/labelsSort.ts b/packages/web/lib/labelsSort.ts index 189852e9e..d4205b793 100644 --- a/packages/web/lib/labelsSort.ts +++ b/packages/web/lib/labelsSort.ts @@ -7,7 +7,7 @@ export const sortedLabels = (labels: Label[] | undefined): Label[] => { const colors = new Map() for (const label of labels) { - let list = colors.get(label.color) ?? [] + const list = colors.get(label.color) ?? [] list.push(label) colors.set( label.color,