From 684d6f88c29d273af92a35c416d8b927c2f21dbc Mon Sep 17 00:00:00 2001
From: Ahmed Al-Taiar <ahmed.altaiar.06@gmail.com>
Date: Tue, 15 Oct 2024 14:30:05 -0400
Subject: [PATCH] Combine GraphQL queries for contact card (2 -> 1)

---
 .../ContactCard/ContactCard/ContactCard.tsx   |  9 +++--
 .../ContactCardCell/ContactCardCell.tsx       | 34 ++++++++++++------
 .../Social/SocialLinks/SocialLinks.tsx        |  4 +--
 .../SocialLinksCell/SocialLinksCell.tsx       | 35 -------------------
 4 files changed, 31 insertions(+), 51 deletions(-)
 delete mode 100644 web/src/components/Social/SocialLinksCell/SocialLinksCell.tsx

diff --git a/web/src/components/ContactCard/ContactCard/ContactCard.tsx b/web/src/components/ContactCard/ContactCard/ContactCard.tsx
index 7adef14..29e17fe 100644
--- a/web/src/components/ContactCard/ContactCard/ContactCard.tsx
+++ b/web/src/components/ContactCard/ContactCard/ContactCard.tsx
@@ -1,12 +1,15 @@
 import { useState, useRef, useLayoutEffect } from 'react'
 
-import SocialLinksCell from 'src/components/Social/SocialLinksCell'
+import { ContactCardPortrait } from 'types/graphql'
+
+import SocialLinks from 'src/components/Social/SocialLinks/SocialLinks'
 
 interface ContactCardProps {
   portraitUrl: string
+  socials: ContactCardPortrait['socials']
 }
 
-const ContactCard = ({ portraitUrl }: ContactCardProps) => {
+const ContactCard = ({ portraitUrl, socials }: ContactCardProps) => {
   const [width, setWidth] = useState()
   const [height, setHeight] = useState()
 
@@ -68,7 +71,7 @@ const ContactCard = ({ portraitUrl }: ContactCardProps) => {
             </h2>
             <p className="p-2"></p>
             <div className="card-actions">
-              <SocialLinksCell />
+              <SocialLinks socials={socials} />
             </div>
           </div>
         </div>
diff --git a/web/src/components/ContactCard/ContactCardCell/ContactCardCell.tsx b/web/src/components/ContactCard/ContactCardCell/ContactCardCell.tsx
index ea7c588..3aa167e 100644
--- a/web/src/components/ContactCard/ContactCardCell/ContactCardCell.tsx
+++ b/web/src/components/ContactCard/ContactCardCell/ContactCardCell.tsx
@@ -1,4 +1,7 @@
-import type { FindPortrait, FindPortraitVariables } from 'types/graphql'
+import type {
+  ContactCardPortrait,
+  ContactCardPortraitVariables,
+} from 'types/graphql'
 
 import type {
   TypedDocumentNode,
@@ -11,25 +14,34 @@ import CellFailure from 'src/components/Cell/CellFailure/CellFailure'
 import CellLoading from 'src/components/Cell/CellLoading/CellLoading'
 import ContactCard from 'src/components/ContactCard/ContactCard/ContactCard'
 
-export const QUERY: TypedDocumentNode<FindPortrait, FindPortraitVariables> =
-  gql`
-    query ContactCardPortrait {
-      portrait: portrait {
-        fileId
-      }
+export const QUERY: TypedDocumentNode<
+  ContactCardPortrait,
+  ContactCardPortraitVariables
+> = gql`
+  query ContactCardPortrait {
+    portrait {
+      fileId
     }
-  `
+    socials {
+      id
+      name
+      type
+      username
+    }
+  }
+`
 
 export const Loading = () => <CellLoading />
 
 export const Empty = () => <CellEmpty />
 
-export const Failure = ({ error }: CellFailureProps<FindPortrait>) => (
+export const Failure = ({ error }: CellFailureProps<ContactCardPortrait>) => (
   <CellFailure error={error} />
 )
 
 export const Success = ({
   portrait,
-}: CellSuccessProps<FindPortrait, FindPortraitVariables>) => (
-  <ContactCard portraitUrl={portrait.fileId} />
+  socials,
+}: CellSuccessProps<ContactCardPortrait, ContactCardPortraitVariables>) => (
+  <ContactCard portraitUrl={portrait.fileId} socials={socials} />
 )
diff --git a/web/src/components/Social/SocialLinks/SocialLinks.tsx b/web/src/components/Social/SocialLinks/SocialLinks.tsx
index 7d15734..58d9488 100644
--- a/web/src/components/Social/SocialLinks/SocialLinks.tsx
+++ b/web/src/components/Social/SocialLinks/SocialLinks.tsx
@@ -1,8 +1,8 @@
-import { FindSocials } from 'types/graphql'
+import { ContactCardPortrait } from 'types/graphql'
 
 import { baseUrls, getLogoComponent, sortOrder } from 'src/lib/handle'
 
-const SocialLinks = ({ socials }: FindSocials) => (
+const SocialLinks = ({ socials }: ContactCardPortrait) => (
   <div className={`grid max-w-68 grid-cols-[repeat(auto-fit,3rem)] gap-2`}>
     {[...socials]
       .sort((a, b) => sortOrder.indexOf(a.type) - sortOrder.indexOf(b.type))
diff --git a/web/src/components/Social/SocialLinksCell/SocialLinksCell.tsx b/web/src/components/Social/SocialLinksCell/SocialLinksCell.tsx
deleted file mode 100644
index c85259a..0000000
--- a/web/src/components/Social/SocialLinksCell/SocialLinksCell.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import type { FindSocials, FindSocialsVariables } from 'types/graphql'
-
-import type {
-  CellSuccessProps,
-  CellFailureProps,
-  TypedDocumentNode,
-} from '@redwoodjs/web'
-
-import CellEmpty from 'src/components/Cell/CellEmpty/CellEmpty'
-import CellFailure from 'src/components/Cell/CellFailure/CellFailure'
-import CellLoading from 'src/components/Cell/CellLoading/CellLoading'
-import SocialLinks from 'src/components/Social/SocialLinks/SocialLinks'
-
-export const QUERY: TypedDocumentNode<FindSocials, FindSocialsVariables> = gql`
-  query SocialsQuery {
-    socials {
-      id
-      name
-      type
-      username
-    }
-  }
-`
-
-export const Loading = () => <CellLoading />
-
-export const Empty = () => <CellEmpty />
-
-export const Failure = ({ error }: CellFailureProps<FindSocials>) => (
-  <CellFailure error={error} />
-)
-
-export const Success = ({ socials }: CellSuccessProps<FindSocials>) => (
-  <SocialLinks socials={socials} />
-)