From e335043591e5edff257c332944c46053e72a76df Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Mon, 12 Sep 2022 12:33:20 +0300
Subject: [PATCH] update: show discord link in "ConnectToMakerModal", fix
 overflow text bug

---
 .../pages/NotFoundPage/NotFoundPage.tsx       | 24 ++++----
 .../ConnectToMakerModal.tsx                   | 58 ++++++++++++++-----
 .../pages/MakersPage/tournamentMakers.graphql |  1 +
 src/graphql/index.tsx                         |  3 +-
 4 files changed, 59 insertions(+), 27 deletions(-)

diff --git a/src/features/Shared/pages/NotFoundPage/NotFoundPage.tsx b/src/features/Shared/pages/NotFoundPage/NotFoundPage.tsx
index b135482..caa986b 100644
--- a/src/features/Shared/pages/NotFoundPage/NotFoundPage.tsx
+++ b/src/features/Shared/pages/NotFoundPage/NotFoundPage.tsx
@@ -8,17 +8,19 @@ export default function NotFoundPage() {
     const goBack = () => navigate(-1);
 
     return (
-        <div className='page-container min-h-screen flex flex-col gap-36 justify-center items-center relative'>
-            <p className='text-gray-100 absolute top-1/3 left-1/2 -translate-x-1/2 -translate-y-1/2 text-[50vmin] z-[-1]'>404</p>
-            <h1 className="text-h1 font-bold">
-                Not Found...
-            </h1>
-            <p className="text-body4 text-gray-500 font-medium text-center">
-                The resource you are looking for isn't here anymore, it may have been removed or the url may be invalid.
-            </p>
-            <Button color='primary' onClick={goBack}>
-                Go back
-            </Button>
+        <div className="page-container">
+            <div className='min-h-screen flex flex-col gap-36 justify-center items-center relative'>
+                <p className='text-gray-100 absolute top-1/3 left-1/2 -translate-x-1/2 -translate-y-1/2 text-[50vmin] z-[-1]'>404</p>
+                <h1 className="text-h1 font-bold">
+                    Not Found...
+                </h1>
+                <p className="text-body4 text-gray-500 font-medium text-center">
+                    The resource you are looking for isn't here anymore, it may have been removed or the url may be invalid.
+                </p>
+                <Button color='primary' onClick={goBack}>
+                    Go back
+                </Button>
+            </div>
         </div>
     )
 }
diff --git a/src/features/Tournaments/pages/MakersPage/ConnectToMakerModal/ConnectToMakerModal.tsx b/src/features/Tournaments/pages/MakersPage/ConnectToMakerModal/ConnectToMakerModal.tsx
index bf8307c..bec2a07 100644
--- a/src/features/Tournaments/pages/MakersPage/ConnectToMakerModal/ConnectToMakerModal.tsx
+++ b/src/features/Tournaments/pages/MakersPage/ConnectToMakerModal/ConnectToMakerModal.tsx
@@ -1,10 +1,13 @@
 import { motion } from 'framer-motion'
 import { ModalCard, modalCardVariants } from 'src/Components/Modals/ModalsContainer/ModalsContainer'
-import { FiGithub, FiLinkedin, FiMail, FiTwitter } from "react-icons/fi";
+import { FiGithub, FiLinkedin, FiTwitter } from "react-icons/fi";
+import { FaDiscord } from 'react-icons/fa'
 import { IoClose } from 'react-icons/io5';
 import { GetMakersInTournamentQuery } from 'src/graphql';
 import Avatar from 'src/features/Profiles/Components/Avatar/Avatar';
 import { withHttp } from 'src/utils/helperFunctions';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { NotificationsService } from 'src/services';
 
 
 interface Props extends ModalCard {
@@ -16,26 +19,36 @@ export default function LinkingAccountModal({ onClose, direction, maker, ...prop
 
     const links = [
         {
-            hasValue: maker.user.twitter,
+            value: maker.user.discord,
+            text: maker.user.discord,
+            icon: FaDiscord,
+            colors: "bg-violet-100 text-violet-900",
+        },
+        {
+            value: maker.user.twitter,
             text: maker.user.twitter,
             icon: FiTwitter,
+            colors: "bg-blue-100 text-blue-500",
             url: `https://twitter.com/${maker.user.twitter}`
         },
         {
-            hasValue: maker.user.github,
+            value: maker.user.github,
             text: maker.user.github,
             icon: FiGithub,
+            colors: "bg-pink-100 text-pink-600",
             url: `https://github.com/${maker.user.github}`
         },
         {
-            hasValue: maker.user.linkedin,
+            value: maker.user.linkedin,
             text: "LinkedIn",
             icon: FiLinkedin,
+            colors: "bg-sky-100 text-cyan-600",
             url: maker.user.linkedin && withHttp(maker.user.linkedin),
         }
     ];
 
 
+
     return (
         <motion.div
             custom={direction}
@@ -52,22 +65,37 @@ export default function LinkingAccountModal({ onClose, direction, maker, ...prop
             <hr className="bg-gray-200" />
             <div className='flex flex-col justify-center gap-24 items-center text-center p-24'>
                 <Avatar src={maker.user.avatar} width={80} />
-                <div className="flex flex-col gap-4">
-                    <p className="text-body3 text-gray-900">{maker.user.name}</p>
+                <div className="flex flex-col gap-4 overflow-hidden max-w-full">
+                    <p className="text-body3 text-gray-900 text-ellipsis overflow-hidden">{maker.user.name}</p>
                     <p className="text-body4 text-gray-600">{maker.user.jobTitle}</p>
                 </div>
 
                 <p className="text-gray-600">Team up with this maker by sending them a message on one of the following platforms.</p>
                 <div className="flex gap-24 justify-center">
-                    {links.filter(link => link.hasValue).map((link, idx) =>
-                        <a
-                            key={idx}
-                            href={link.url!}
-                            className={`w-40 aspect-square rounded-full flex justify-center items-center bg-primary-100 text-primary-900`}
-                            target='_blank'
-                            rel="noreferrer">
-                            <link.icon className="scale-125" />
-                        </a>)}
+                    {links.filter(link => !!link.value).map((link, idx) =>
+                        link.url ?
+                            <a
+                                key={idx}
+                                href={link.url!}
+                                className={`w-40 aspect-square rounded-full flex justify-center items-center bg-primary-100 text-primary-900`}
+                                target='_blank'
+                                rel="noreferrer">
+                                <link.icon className="scale-125" />
+                            </a>
+                            :
+                            <CopyToClipboard
+                                text={link.value!}
+                                onCopy={() => NotificationsService.info(" Copied to clipboard", { icon: "📋" })}
+                            >
+                                <button
+                                    key={idx}
+                                    onClick={() => { }}
+                                    className={`w-40 aspect-square rounded-full flex justify-center items-center ${link.colors}`}
+                                >
+                                    <link.icon className="scale-125" />
+                                </button>
+                            </CopyToClipboard>
+                    )}
                 </div>
             </div>
         </motion.div>
diff --git a/src/features/Tournaments/pages/MakersPage/tournamentMakers.graphql b/src/features/Tournaments/pages/MakersPage/tournamentMakers.graphql
index bb38302..17924e4 100644
--- a/src/features/Tournaments/pages/MakersPage/tournamentMakers.graphql
+++ b/src/features/Tournaments/pages/MakersPage/tournamentMakers.graphql
@@ -31,6 +31,7 @@ query GetMakersInTournament(
         name
         avatar
         jobTitle
+        discord
         twitter
         linkedin
         github
diff --git a/src/graphql/index.tsx b/src/graphql/index.tsx
index e9b4d61..e5155bf 100644
--- a/src/graphql/index.tsx
+++ b/src/graphql/index.tsx
@@ -912,7 +912,7 @@ export type GetMakersInTournamentQueryVariables = Exact<{
 }>;
 
 
-export type GetMakersInTournamentQuery = { __typename?: 'Query', getMakersInTournament: { __typename?: 'TournamentMakersResponse', hasNext: boolean | null, hasPrev: boolean | null, makers: Array<{ __typename?: 'TournamentParticipant', hacking_status: TournamentMakerHackingStatusEnum, user: { __typename?: 'User', id: number, name: string, avatar: string, jobTitle: string | null, twitter: string | null, linkedin: string | null, github: string | null, roles: Array<{ __typename?: 'MakerRole', id: number, icon: string, title: string }>, skills: Array<{ __typename?: 'MakerSkill', id: number, title: string }> } }> } };
+export type GetMakersInTournamentQuery = { __typename?: 'Query', getMakersInTournament: { __typename?: 'TournamentMakersResponse', hasNext: boolean | null, hasPrev: boolean | null, makers: Array<{ __typename?: 'TournamentParticipant', hacking_status: TournamentMakerHackingStatusEnum, user: { __typename?: 'User', id: number, name: string, avatar: string, jobTitle: string | null, discord: string | null, twitter: string | null, linkedin: string | null, github: string | null, roles: Array<{ __typename?: 'MakerRole', id: number, icon: string, title: string }>, skills: Array<{ __typename?: 'MakerSkill', id: number, title: string }> } }> } };
 
 export type GetProjectsInTournamentQueryVariables = Exact<{
   tournamentId: Scalars['Int'];
@@ -2335,6 +2335,7 @@ export const GetMakersInTournamentDocument = gql`
         name
         avatar
         jobTitle
+        discord
         twitter
         linkedin
         github