feat: add discord link to user profile (#1370)

open-sauced · Jul 19, 2023 · f94bc3b · f94bc3b
1 parent 298718f
commit f94bc3b
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -144,6 +144,7 @@ web_modules/
 
 # dotenv environment variables file
 .env
+.env.local
 .env.test
 
 # parcel-bundler cache (https://parceljs.org/)

diff --git a/components/molecules/ContributorProfileInfo/contributor-profile-info.tsx b/components/molecules/ContributorProfileInfo/contributor-profile-info.tsx
@@ -2,6 +2,7 @@
 import Link from "next/link";
 
 import { AiOutlineGift } from "react-icons/ai";
+import { BsDiscord } from "react-icons/bs";
 import { FiClock, FiGithub, FiLinkedin, FiTwitter } from "react-icons/fi";
 
 import clsx from "clsx";
@@ -23,6 +24,7 @@ interface ContributorProfileInfoProps {
   displayLocalTime?: boolean;
   githubSponsorsUrl?: string;
   linkedInUrl?: string;
+  discordUrl?: string;
   prFirstOpenedDate?: string;
 }
 
@@ -36,9 +38,11 @@ const ContributorProfileInfo = ({
   displayLocalTime,
   githubSponsorsUrl,
   linkedInUrl,
+  discordUrl,
   prFirstOpenedDate,
 }: ContributorProfileInfoProps) => {
   const interestArray = interests?.split(",");
+  const discordUserId = discordUrl?.match(/\d{4}$/)?.[0];
 
   return (
     <div className="flex flex-col gap-6">
@@ -112,6 +116,15 @@ const ContributorProfileInfo = ({
                 </span>
               )}
 
+              {discordUrl && (
+                <span className="flex gap-2 items-center">
+                  <BsDiscord className="text-light-slate-9" />
+                  <Link href={discordUrl} target="_blank" rel="noreferrer" className="w-max hover:text-orange-500">
+                    {`discord/#${discordUserId}`}
+                  </Link>
+                </span>
+              )}
+
               {githubSponsorsUrl && (
                 <span className="flex gap-2 items-center">
                   <FiGithub className="text-light-slate-9" />

diff --git a/components/organisms/ContributorProfilePage/contributor-profile-page.tsx b/components/organisms/ContributorProfilePage/contributor-profile-page.tsx
@@ -88,6 +88,7 @@ const ContributorProfilePage = ({
     timezone,
     github_sponsors_url: githubSponsorsUrl,
     linkedin_url: linkedInUrl,
+    discord_url: discordUrl,
     display_local_time: displayLocalTime,
   } = user || {};
 
@@ -129,6 +130,7 @@ const ContributorProfilePage = ({
                 displayLocalTime={displayLocalTime}
                 githubSponsorsUrl={githubSponsorsUrl}
                 linkedInUrl={linkedInUrl}
+                discordUrl={discordUrl}
                 prFirstOpenedDate={prFirstOpenedDate}
               />
 

diff --git a/components/organisms/UserSettingsPage/user-settings-page.tsx b/components/organisms/UserSettingsPage/user-settings-page.tsx
@@ -71,6 +71,7 @@ const UserSettingsPage = ({ user }: userSettingsPageProps) => {
         formRef.current!.location.value = response.location;
         formRef.current!.github_sponsors_url.value = response.github_sponsors_url;
         formRef.current!.linkedin_url.value = response.linkedin_url;
+        formRef.current!.discord_url.value = response.discord_url;
       }
     }
     fetchAuthSession();
@@ -105,6 +106,13 @@ const UserSettingsPage = ({ user }: userSettingsPageProps) => {
     event.target.reportValidity();
   };
 
+  const handleValidateDiscordUrl = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const regex = new RegExp(/^https:\/\/discord(app)?\.com\/users\/\d{17,}$/);
+    event.target.setCustomValidity(regex.test(event.target.value) ? "" : "Invalid Discord URL");
+    event.target.reportValidity();
+  };
+
+
   const handleSelectInterest = (interest: string) => {
     if (selectedInterest.length > 0 && selectedInterest.includes(interest)) {
       setSelectedInterest((prev) => prev.filter((item) => item !== interest));
@@ -163,6 +171,7 @@ const UserSettingsPage = ({ user }: userSettingsPageProps) => {
         formRef.current!.github_sponsors_url.value !== "" ? formRef.current!.github_sponsors_url.value : undefined,
       // eslint-disable-next-line camelcase
       linkedin_url: formRef.current!.linkedin_url.value !== "" ? formRef.current!.linkedin_url.value : undefined,
+      discord_url: formRef.current!.discord_url.value !== "" ? formRef.current!.discord_url.value : undefined,
     };
     if (formRef.current?.url.value) {
       payload.url = formRef.current!.url.value;
@@ -237,6 +246,13 @@ const UserSettingsPage = ({ user }: userSettingsPageProps) => {
               pattern="http[s]?://.*\..{2,}"
               name="linkedin_url"
             />
+            <TextInput
+              classNames="bg-light-slate-4 text-light-slate-11 font-medium"
+              placeholder="https://discordapp.com/users/832877193112762362"
+              label="Discord URL"
+              onChange={handleValidateDiscordUrl}
+              name="discord_url"
+            />
             <TextInput
               classNames="bg-light-slate-4 text-light-slate-11"
               placeholder="saucedopen"

diff --git a/lib/hooks/update-user.ts b/lib/hooks/update-user.ts
@@ -13,6 +13,7 @@ export interface UpdateUserPayload {
   timezone?: string;
   github_sponsors_url?: string;
   linkedin_url?: string;
+  discord_url?: string;
 }
 
 interface useUpdateUserProps {

diff --git a/next-types.d.ts b/next-types.d.ts
@@ -166,6 +166,7 @@ interface DbUser {
   readonly timezone: string;
   readonly github_sponsors_url: string;
   readonly linkedin_url: string;
+  readonly discord_url: string;
   readonly notification_count: number;
   readonly languages: { [lang]: number };
   readonly first_opened_pr_at: string;