ahmed/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases 6 Activity

Combine GraphQL queries for contact card (2 -> 1)

Browse Source
This commit is contained in:
Ahmed Al-Taiar
2024-10-15 14:30:05 -04:00
parent 03f606bbde
commit 684d6f88c2
4 changed files with 31 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
web/src/components/ContactCard/ContactCard/ContactCard.tsx
View File

@ -1,12 +1,15 @@
import { useState, useRef, useLayoutEffect } from 'react' 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 { interface ContactCardProps {
portraitUrl: string portraitUrl: string
socials: ContactCardPortrait['socials']
} }
const ContactCard = ({ portraitUrl }: ContactCardProps) => { const ContactCard = ({ portraitUrl, socials }: ContactCardProps) => {
const [width, setWidth] = useState() const [width, setWidth] = useState()
const [height, setHeight] = useState() const [height, setHeight] = useState()
@ -68,7 +71,7 @@ const ContactCard = ({ portraitUrl }: ContactCardProps) => {
</h2> </h2>
<p className="p-2"></p> <p className="p-2"></p>
<div className="card-actions"> <div className="card-actions">
<SocialLinksCell /> <SocialLinks socials={socials} />
</div> </div>
</div> </div>
</div> </div>

34
web/src/components/ContactCard/ContactCardCell/ContactCardCell.tsx
View File

@ -1,4 +1,7 @@
import type { FindPortrait, FindPortraitVariables } from 'types/graphql' import type {
ContactCardPortrait,
ContactCardPortraitVariables,
} from 'types/graphql'
import type { import type {
TypedDocumentNode, TypedDocumentNode,
@ -11,25 +14,34 @@ import CellFailure from 'src/components/Cell/CellFailure/CellFailure'
import CellLoading from 'src/components/Cell/CellLoading/CellLoading' import CellLoading from 'src/components/Cell/CellLoading/CellLoading'
import ContactCard from 'src/components/ContactCard/ContactCard/ContactCard' import ContactCard from 'src/components/ContactCard/ContactCard/ContactCard'
export const QUERY: TypedDocumentNode<FindPortrait, FindPortraitVariables> = export const QUERY: TypedDocumentNode<
gql` ContactCardPortrait,
query ContactCardPortrait { ContactCardPortraitVariables
portrait: portrait { > = gql`
fileId query ContactCardPortrait {
} portrait {
fileId
} }
` socials {
id
name
type
username
}
}
`
export const Loading = () => <CellLoading /> export const Loading = () => <CellLoading />
export const Empty = () => <CellEmpty /> export const Empty = () => <CellEmpty />
export const Failure = ({ error }: CellFailureProps<FindPortrait>) => ( export const Failure = ({ error }: CellFailureProps<ContactCardPortrait>) => (
<CellFailure error={error} /> <CellFailure error={error} />
) )
export const Success = ({ export const Success = ({
portrait, portrait,
}: CellSuccessProps<FindPortrait, FindPortraitVariables>) => ( socials,
<ContactCard portraitUrl={portrait.fileId} /> }: CellSuccessProps<ContactCardPortrait, ContactCardPortraitVariables>) => (
<ContactCard portraitUrl={portrait.fileId} socials={socials} />
) )

4
web/src/components/Social/SocialLinks/SocialLinks.tsx
View File

@ -1,8 +1,8 @@
import { FindSocials } from 'types/graphql' import { ContactCardPortrait } from 'types/graphql'
import { baseUrls, getLogoComponent, sortOrder } from 'src/lib/handle' 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`}> <div className={`grid max-w-68 grid-cols-[repeat(auto-fit,3rem)] gap-2`}>
{[...socials] {[...socials]
.sort((a, b) => sortOrder.indexOf(a.type) - sortOrder.indexOf(b.type)) .sort((a, b) => sortOrder.indexOf(a.type) - sortOrder.indexOf(b.type))

35
web/src/components/Social/SocialLinksCell/SocialLinksCell.tsx
View File

@ -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} />
)