From a84e375ca1edf1b5a6eac7e1b80d54643cf9e64c Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Wed, 8 Jan 2025 11:10:50 +0000 Subject: [PATCH 1/8] Add Bluesky to Profile Social Links --- .../shared/src/components/icons/Bluesky/color.svg | 12 ++++++++++++ .../shared/src/components/icons/Bluesky/index.tsx | 10 ++++++++++ .../shared/src/components/icons/Bluesky/mono.svg | 12 ++++++++++++ packages/shared/src/components/icons/index.ts | 1 + .../src/components/profile/ProfileWidgets.spec.tsx | 10 ++++++++++ .../shared/src/components/profile/SocialChips.tsx | 8 ++++++++ packages/shared/src/graphql/users.ts | 2 ++ packages/shared/src/hooks/useProfileForm.ts | 3 +++ packages/shared/src/lib/user.ts | 2 ++ packages/webapp/__tests__/AccountProfilePage.tsx | 4 ++++ .../layouts/AccountLayout/Profile/index.tsx | 14 ++++++++++++-- 11 files changed, 76 insertions(+), 2 deletions(-) create mode 100644 packages/shared/src/components/icons/Bluesky/color.svg create mode 100644 packages/shared/src/components/icons/Bluesky/index.tsx create mode 100644 packages/shared/src/components/icons/Bluesky/mono.svg diff --git a/packages/shared/src/components/icons/Bluesky/color.svg b/packages/shared/src/components/icons/Bluesky/color.svg new file mode 100644 index 0000000000..f8f14735e4 --- /dev/null +++ b/packages/shared/src/components/icons/Bluesky/color.svg @@ -0,0 +1,12 @@ + + + \ No newline at end of file diff --git a/packages/shared/src/components/icons/Bluesky/index.tsx b/packages/shared/src/components/icons/Bluesky/index.tsx new file mode 100644 index 0000000000..87c6815540 --- /dev/null +++ b/packages/shared/src/components/icons/Bluesky/index.tsx @@ -0,0 +1,10 @@ +import type { ReactElement } from 'react'; +import React from 'react'; +import type { IconProps } from '../../Icon'; +import Icon from '../../Icon'; +import MonoIcon from './mono.svg'; +import ColorIcon from './color.svg'; + +export const BlueskyIcon = (props: IconProps): ReactElement => ( + +); diff --git a/packages/shared/src/components/icons/Bluesky/mono.svg b/packages/shared/src/components/icons/Bluesky/mono.svg new file mode 100644 index 0000000000..16b74284f1 --- /dev/null +++ b/packages/shared/src/components/icons/Bluesky/mono.svg @@ -0,0 +1,12 @@ + + + \ No newline at end of file diff --git a/packages/shared/src/components/icons/index.ts b/packages/shared/src/components/icons/index.ts index 8a23faebd7..c199fb1997 100644 --- a/packages/shared/src/components/icons/index.ts +++ b/packages/shared/src/components/icons/index.ts @@ -8,6 +8,7 @@ export * from './Arrow'; export * from './At'; export * from './Bell'; export * from './Block'; +export * from './Bluesky'; export * from './Bookmark'; export * from './BringForward'; export * from './Calendar'; diff --git a/packages/shared/src/components/profile/ProfileWidgets.spec.tsx b/packages/shared/src/components/profile/ProfileWidgets.spec.tsx index d2d5b6bbab..68a8b9a8d7 100644 --- a/packages/shared/src/components/profile/ProfileWidgets.spec.tsx +++ b/packages/shared/src/components/profile/ProfileWidgets.spec.tsx @@ -44,6 +44,7 @@ const defaultLoggedUser: LoggedUser = { youtube: 'idoshamun', linkedin: 'idoshamun', mastodon: 'https://mastodon.social/@idoshamun', + bluesky: 'https://bsky.app/profile/dailydotdev.bsky.social', }; const defaultProfile: PublicProfile = { @@ -69,6 +70,8 @@ const defaultProfile: PublicProfile = { youtube: 'dailydotdev', linkedin: 'dailydotdev', mastodon: 'https://mastodon.social/@dailydotdev', + bluesky: 'https://bsky.app/profile/dailydotdev.bsky.social' + }; const defaultMemberships: Connection = { @@ -289,6 +292,13 @@ it('should show mastodon link', () => { expect(el).toHaveTextContent('mastodon.social/@dailydotdev'); }); +it('should show bluesky link', () => { + renderComponent(); + const el = screen.getByTestId('bluesky'); + expect(el).toHaveAttribute('href', 'https://bsky.app/profile/dailydotdev.bsky.social'); + expect(el).toHaveTextContent('bsky.app/profile/dailydotdev.bsky.social'); +}); + it('should show portfolio link', async () => { renderComponent(); const el = screen.getByTestId('portfolio'); diff --git a/packages/shared/src/components/profile/SocialChips.tsx b/packages/shared/src/components/profile/SocialChips.tsx index 74c1ee8b95..c88b470775 100644 --- a/packages/shared/src/components/profile/SocialChips.tsx +++ b/packages/shared/src/components/profile/SocialChips.tsx @@ -10,6 +10,7 @@ import { RedditIcon, RoadmapIcon, MastodonIcon, + BlueskyIcon, ThreadsIcon, CodePenIcon, } from '../icons'; @@ -32,6 +33,7 @@ export interface SocialChipsProps { youtube?: string; linkedin?: string; mastodon?: string; + bluesky?: string; }; } @@ -89,6 +91,11 @@ const handlers: Record< href: (x) => x, label: (x) => withoutProtocol(x), }, + bluesky: { + icon: , + href: (x) => x, + label: (x) => withoutProtocol(x), + }, threads: { icon: , href: (x) => `https://threads.net/@${x}`, @@ -111,6 +118,7 @@ const order: (keyof SocialChipsProps['links'])[] = [ 'roadmap', 'codepen', 'mastodon', + 'bluesky', 'threads', ]; diff --git a/packages/shared/src/graphql/users.ts b/packages/shared/src/graphql/users.ts index a268a8dee4..3c3dc0d412 100644 --- a/packages/shared/src/graphql/users.ts +++ b/packages/shared/src/graphql/users.ts @@ -45,6 +45,7 @@ export const USER_BY_ID_STATIC_FIELDS_QUERY = ` youtube linkedin mastodon + bluesky timezone portfolio reputation @@ -304,6 +305,7 @@ export const UPDATE_USER_PROFILE_MUTATION = gql` youtube linkedin mastodon + bluesky createdAt infoConfirmed timezone diff --git a/packages/shared/src/hooks/useProfileForm.ts b/packages/shared/src/hooks/useProfileForm.ts index 48aac6b05c..d4dddc80e7 100644 --- a/packages/shared/src/hooks/useProfileForm.ts +++ b/packages/shared/src/hooks/useProfileForm.ts @@ -27,6 +27,7 @@ export interface ProfileFormHint { youtube?: string; linkedin?: string; mastodon?: string; + bluesky?: string; } export interface UpdateProfileParameters extends Partial { @@ -64,6 +65,7 @@ type Handles = Pick< | 'youtube' | 'linkedin' | 'mastodon' + | 'bluesky' >; const socials: Array = [ 'github', @@ -77,6 +79,7 @@ const socials: Array = [ 'youtube', 'linkedin', 'mastodon', + 'bluesky' ]; export const onValidateHandles = ( diff --git a/packages/shared/src/lib/user.ts b/packages/shared/src/lib/user.ts index e400b6d1fe..6ef79c0410 100644 --- a/packages/shared/src/lib/user.ts +++ b/packages/shared/src/lib/user.ts @@ -39,6 +39,7 @@ export interface PublicProfile { youtube?: string; linkedin?: string; mastodon?: string; + bluesky?: string; bio?: string; createdAt: string; premium: boolean; @@ -81,6 +82,7 @@ export interface UserProfile { youtube?: string; linkedin?: string; mastodon?: string; + bluesky?: string; portfolio?: string; bio?: string; acceptedMarketing?: boolean; diff --git a/packages/webapp/__tests__/AccountProfilePage.tsx b/packages/webapp/__tests__/AccountProfilePage.tsx index dd5eb4c111..27dd064ce6 100644 --- a/packages/webapp/__tests__/AccountProfilePage.tsx +++ b/packages/webapp/__tests__/AccountProfilePage.tsx @@ -36,6 +36,7 @@ const defaultLoggedUser: LoggedUser = { youtube: 'dailydotdev', linkedin: 'dailydotdev', mastodon: 'https://mastodon.social/@dailydotdev', + bluesky: 'https://bsky.app/profile/dailydotdev.bsky.social' }; const updateUser = jest.fn(); @@ -122,4 +123,7 @@ it('should show profile social links', () => { const mastodon = screen.getByPlaceholderText('Mastodon'); expect(mastodon).toBeInTheDocument(); expect(mastodon).toHaveValue(defaultLoggedUser.mastodon); + const bluesky = screen.getByPlaceholderText('Bluesky'); + expect(bluesky).toBeInTheDocument(); + expect(bluesky).toHaveValue(defaultLoggedUser.bluesky); }); diff --git a/packages/webapp/components/layouts/AccountLayout/Profile/index.tsx b/packages/webapp/components/layouts/AccountLayout/Profile/index.tsx index fe7b07c03c..14fdbea425 100644 --- a/packages/webapp/components/layouts/AccountLayout/Profile/index.tsx +++ b/packages/webapp/components/layouts/AccountLayout/Profile/index.tsx @@ -13,6 +13,7 @@ import { LinkedInIcon, LinkIcon, MastodonIcon, + BlueskyIcon, RedditIcon, RoadmapIcon, StackOverflowIcon, @@ -88,6 +89,7 @@ const ProfileIndex = ({ youtube: values.youtube, linkedin: values.linkedin, mastodon: values.mastodon ? withHttps(values.mastodon) : null, + bluesky: values.bluesky ? withHttps(values.bluesky) : null, experienceLevel: values.experienceLevel, onUpdateSuccess: () => router.push(`/${values.username}`).then(() => { @@ -285,7 +287,6 @@ const ProfileIndex = ({ hint={hint.portfolio} valid={!hint.portfolio} name="portfolio" - type="url" value={user?.portfolio} placeholder="example.com" /> @@ -356,10 +357,19 @@ const ProfileIndex = ({ hint={hint.mastodon} valid={!hint.mastodon} name="mastodon" - type="url" value={user?.mastodon} placeholder="mastodon.social/@username" /> + } + label="Bluesky" + inputId="bluesky" + hint={hint.bluesky} + valid={!hint.bluesky} + name="bluesky" + value={user?.bluesky} + placeholder="https//bsky.app/profile/username" + /> } label="Threads" From bd233721bcdee144c3efa59781c7b122dfddebce Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Wed, 8 Jan 2025 11:31:34 +0000 Subject: [PATCH 2/8] Fix placeholder --- .../webapp/components/layouts/AccountLayout/Profile/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/webapp/components/layouts/AccountLayout/Profile/index.tsx b/packages/webapp/components/layouts/AccountLayout/Profile/index.tsx index 14fdbea425..164148c59e 100644 --- a/packages/webapp/components/layouts/AccountLayout/Profile/index.tsx +++ b/packages/webapp/components/layouts/AccountLayout/Profile/index.tsx @@ -368,7 +368,7 @@ const ProfileIndex = ({ valid={!hint.bluesky} name="bluesky" value={user?.bluesky} - placeholder="https//bsky.app/profile/username" + placeholder="bsky.app/profile/username" /> } From 68d96215c4552a3f6ea0eadaea5eb6f6beaf803d Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Wed, 8 Jan 2025 11:47:31 +0000 Subject: [PATCH 3/8] Fix lint error --- .../shared/src/components/profile/ProfileWidgets.spec.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/shared/src/components/profile/ProfileWidgets.spec.tsx b/packages/shared/src/components/profile/ProfileWidgets.spec.tsx index 68a8b9a8d7..a8c9b90d56 100644 --- a/packages/shared/src/components/profile/ProfileWidgets.spec.tsx +++ b/packages/shared/src/components/profile/ProfileWidgets.spec.tsx @@ -295,7 +295,10 @@ it('should show mastodon link', () => { it('should show bluesky link', () => { renderComponent(); const el = screen.getByTestId('bluesky'); - expect(el).toHaveAttribute('href', 'https://bsky.app/profile/dailydotdev.bsky.social'); + expect(el).toHaveAttribute( + 'href', + 'https://bsky.app/profile/dailydotdev.bsky.social', + ); expect(el).toHaveTextContent('bsky.app/profile/dailydotdev.bsky.social'); }); From 685c2adabf0b002df9e37aa2a3651b790609e4ea Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Wed, 8 Jan 2025 11:57:05 +0000 Subject: [PATCH 4/8] Fix small linting error --- packages/webapp/__tests__/AccountProfilePage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/webapp/__tests__/AccountProfilePage.tsx b/packages/webapp/__tests__/AccountProfilePage.tsx index 27dd064ce6..f8b3e2948b 100644 --- a/packages/webapp/__tests__/AccountProfilePage.tsx +++ b/packages/webapp/__tests__/AccountProfilePage.tsx @@ -36,7 +36,7 @@ const defaultLoggedUser: LoggedUser = { youtube: 'dailydotdev', linkedin: 'dailydotdev', mastodon: 'https://mastodon.social/@dailydotdev', - bluesky: 'https://bsky.app/profile/dailydotdev.bsky.social' + bluesky: 'https://bsky.app/profile/dailydotdev.bsky.social', }; const updateUser = jest.fn(); From c03b11ecafde06a67ec2214e98af793021bc9e6d Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Wed, 8 Jan 2025 12:03:51 +0000 Subject: [PATCH 5/8] Another lint error --- packages/shared/src/hooks/useProfileForm.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/shared/src/hooks/useProfileForm.ts b/packages/shared/src/hooks/useProfileForm.ts index d4dddc80e7..0a46a89d54 100644 --- a/packages/shared/src/hooks/useProfileForm.ts +++ b/packages/shared/src/hooks/useProfileForm.ts @@ -79,7 +79,7 @@ const socials: Array = [ 'youtube', 'linkedin', 'mastodon', - 'bluesky' + 'bluesky', ]; export const onValidateHandles = ( From 4b573b4374d609e3faf323e9ce91b147583bc1be Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Wed, 8 Jan 2025 12:10:19 +0000 Subject: [PATCH 6/8] Another lint fix --- packages/shared/src/components/profile/ProfileWidgets.spec.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/shared/src/components/profile/ProfileWidgets.spec.tsx b/packages/shared/src/components/profile/ProfileWidgets.spec.tsx index a8c9b90d56..41151c87cd 100644 --- a/packages/shared/src/components/profile/ProfileWidgets.spec.tsx +++ b/packages/shared/src/components/profile/ProfileWidgets.spec.tsx @@ -70,8 +70,7 @@ const defaultProfile: PublicProfile = { youtube: 'dailydotdev', linkedin: 'dailydotdev', mastodon: 'https://mastodon.social/@dailydotdev', - bluesky: 'https://bsky.app/profile/dailydotdev.bsky.social' - + bluesky: 'https://bsky.app/profile/dailydotdev.bsky.social', }; const defaultMemberships: Connection = { From 06286396aa7755e0a145347eae6b05326206c582 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Wed, 8 Jan 2025 13:21:11 +0000 Subject: [PATCH 7/8] Delete bluesky color icon --- .../shared/src/components/icons/Bluesky/color.svg | 12 ------------ .../shared/src/components/icons/Bluesky/index.tsx | 3 +-- 2 files changed, 1 insertion(+), 14 deletions(-) delete mode 100644 packages/shared/src/components/icons/Bluesky/color.svg diff --git a/packages/shared/src/components/icons/Bluesky/color.svg b/packages/shared/src/components/icons/Bluesky/color.svg deleted file mode 100644 index f8f14735e4..0000000000 --- a/packages/shared/src/components/icons/Bluesky/color.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - \ No newline at end of file diff --git a/packages/shared/src/components/icons/Bluesky/index.tsx b/packages/shared/src/components/icons/Bluesky/index.tsx index 87c6815540..5e5813d01c 100644 --- a/packages/shared/src/components/icons/Bluesky/index.tsx +++ b/packages/shared/src/components/icons/Bluesky/index.tsx @@ -3,8 +3,7 @@ import React from 'react'; import type { IconProps } from '../../Icon'; import Icon from '../../Icon'; import MonoIcon from './mono.svg'; -import ColorIcon from './color.svg'; export const BlueskyIcon = (props: IconProps): ReactElement => ( - + ); From ce0d7f66efd4b0c18afca53c84d35199592995e2 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira <2750668+miukimiu@users.noreply.github.com> Date: Mon, 20 Jan 2025 13:17:46 +0000 Subject: [PATCH 8/8] Adress PR review --- packages/shared/src/components/profile/SocialChips.tsx | 2 +- .../webapp/components/layouts/AccountLayout/Profile/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/shared/src/components/profile/SocialChips.tsx b/packages/shared/src/components/profile/SocialChips.tsx index c88b470775..eb32002a04 100644 --- a/packages/shared/src/components/profile/SocialChips.tsx +++ b/packages/shared/src/components/profile/SocialChips.tsx @@ -94,7 +94,7 @@ const handlers: Record< bluesky: { icon: , href: (x) => x, - label: (x) => withoutProtocol(x), + label: (x) => `https://bsky.app/profile/${x}`, }, threads: { icon: , diff --git a/packages/webapp/components/layouts/AccountLayout/Profile/index.tsx b/packages/webapp/components/layouts/AccountLayout/Profile/index.tsx index 164148c59e..9f4d1f49dd 100644 --- a/packages/webapp/components/layouts/AccountLayout/Profile/index.tsx +++ b/packages/webapp/components/layouts/AccountLayout/Profile/index.tsx @@ -89,7 +89,7 @@ const ProfileIndex = ({ youtube: values.youtube, linkedin: values.linkedin, mastodon: values.mastodon ? withHttps(values.mastodon) : null, - bluesky: values.bluesky ? withHttps(values.bluesky) : null, + bluesky: values.bluesky, experienceLevel: values.experienceLevel, onUpdateSuccess: () => router.push(`/${values.username}`).then(() => {