Skip to content

Commit

Permalink
refactor: getting data method for contacts & privacy-policy fragments
Browse files Browse the repository at this point in the history
  • Loading branch information
oxiqod committed May 7, 2024
1 parent b37b286 commit f74c0c9
Show file tree
Hide file tree
Showing 6 changed files with 126 additions and 122 deletions.
4 changes: 2 additions & 2 deletions globals/data/src/hooks/general-fragments/use-contacts.hook.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,6 @@ export const useContacts = () => {
variables: { id: GeneralFragmentID.CONTACTS },
fetchPolicy: 'cache-only',
})
const contacts = data?.generalFragment?.contacts
return { contacts }
const contactsData = data?.generalFragment?.contacts
return { contactsData }
}
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,6 @@ export const usePrivacyPolicy = () => {
variables: { id: GeneralFragmentID.PRIVACY_POLICY },
fetchPolicy: 'cache-only',
})
const privacyPolicy = data?.generalFragment?.privacyPolicy
return { privacyPolicy }
const privacyPolicyData = data?.generalFragment?.privacyPolicy
return { privacyPolicyData }
}
103 changes: 53 additions & 50 deletions landing/fragments/landing-contact/src/contact.component.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React from 'react'
import uniqid from 'uniqid'
import { FC } from 'react'

import { ArrowLeftBottomIcon } from '@ui/icons'
import { ArrowTopRightIcon } from '@ui/icons'
Expand All @@ -9,59 +8,63 @@ import { Column } from '@ui/layout'
import { Layout } from '@ui/layout'
import { Row } from '@ui/layout'
import { Text } from '@ui/text'
import { useContacts } from '@globals/data/src'

import { Card } from './card'
import { ContactBlockProps } from './contact.interfaces'

const ContactBlock: FC<ContactBlockProps> = ({ contactsData }) => (
<Row justifyContent='center'>
<Box width={['100%', '100%', 1920]}>
<Layout flexBasis={[20, 30, 40]} />
<Column width='100%'>
<Layout flexBasis={[124, 140, 240]} />
<Box>
<Text
textTransform='uppercase'
fontFamily='secondary'
fontWeight='bold'
fontSize={{ _: 'moderate', tablet: 'huge', laptop: 'gigantic', wide: 'biggest' }}
lineHeight='default'
color='text.smokyWhite'
>
{contactsData?.title}
</Text>
</Box>
<Layout display={['none', 'none', 'flex']} flexBasis={104} />
<Box
width='100%'
flexDirection={['column', 'column', 'row']}
height={['auto', 'auto', 370]}
>
<Layout display={['none', 'none', 'flex']} flexGrow={2} />
<Box display={{ _: 'none', tablet: 'none', laptop: 'none', wide: 'flex' }}>
<ArrowTopRightIcon width={150} height={143} />
const ContactBlock = () => {
const { contactsData } = useContacts()

return (
<Row justifyContent='center'>
<Box width={['100%', '100%', 1920]}>
<Layout flexBasis={[20, 30, 40]} />
<Column width='100%'>
<Layout flexBasis={[124, 140, 240]} />
<Box>
<Text
textTransform='uppercase'
fontFamily='secondary'
fontWeight='bold'
fontSize={{ _: 'moderate', tablet: 'huge', laptop: 'gigantic', wide: 'biggest' }}
lineHeight='default'
color='text.smokyWhite'
>
{contactsData?.title}
</Text>
</Box>
<Layout display={['none', 'none', 'flex']} flexGrow={2} />
<Box display={['flex', 'none', 'none']} alignSelf='end'>
<ArrowLeftBottomIcon width={70} height={50} />
<Layout display={['none', 'none', 'flex']} flexBasis={104} />
<Box
width='100%'
flexDirection={['column', 'column', 'row']}
height={['auto', 'auto', 370]}
>
<Layout display={['none', 'none', 'flex']} flexGrow={2} />
<Box display={{ _: 'none', tablet: 'none', laptop: 'none', wide: 'flex' }}>
<ArrowTopRightIcon width={150} height={143} />
</Box>
<Layout display={['none', 'none', 'flex']} flexGrow={2} />
<Box display={['flex', 'none', 'none']} alignSelf='end'>
<ArrowLeftBottomIcon width={70} height={50} />
</Box>
<Layout display={['flex', 'flex', 'none']} flexBasis={[25, 40, 0]} />
{contactsData?.socials?.map((item) => (
<React.Fragment key={uniqid()}>
<Card
title={item?.title || ''}
link={item?.link || ''}
content={item?.content || ''}
/>
<Layout flexBasis={[12, 24, 40, 118]} />
</React.Fragment>
))}
</Box>
<Layout display={['flex', 'flex', 'none']} flexBasis={[25, 40, 0]} />
{contactsData?.socials?.map((item) => (
<React.Fragment key={uniqid()}>
<Card
title={item?.title || ''}
link={item?.link || ''}
content={item?.content || ''}
/>
<Layout flexBasis={[12, 24, 40, 118]} />
</React.Fragment>
))}
</Box>
<Layout flexBasis={[24, 56, 89]} />
</Column>
<Layout flexBasis={[20, 30, 40]} flexShrink={0} />
</Box>
</Row>
)
<Layout flexBasis={[24, 56, 89]} />
</Column>
<Layout flexBasis={[20, 30, 40]} flexShrink={0} />
</Box>
</Row>
)
}

export { ContactBlock }
Original file line number Diff line number Diff line change
@@ -1,69 +1,70 @@
import React from 'react'
import uniqid from 'uniqid'
import { FC } from 'react'
import React from 'react'
import uniqid from 'uniqid'

import { Box } from '@ui/layout'
import { Column } from '@ui/layout'
import { Layout } from '@ui/layout'
import { Row } from '@ui/layout'
import { Text } from '@ui/text'
import { Box } from '@ui/layout'
import { Column } from '@ui/layout'
import { Layout } from '@ui/layout'
import { Row } from '@ui/layout'
import { Text } from '@ui/text'
import { usePrivacyPolicy } from '@globals/data/src'

import { PrivacyPolicyProps } from './privacy-policy.interfaces'

const PrivacyPolicyBlock: FC<PrivacyPolicyProps> = ({ privacyPolicy }) => (
<Row justifyContent='center'>
<Box width={['100%', '100%', 1920]}>
<Layout flexBasis={[20, 30, 40]} flexShrink={0} />
<Column width='100%'>
<Layout flexBasis={[80, 100, 142]} flexShrink={0} />
<Box width={['100%', '100%', 1050]}>
<Text
textTransform='uppercase'
fontFamily='secondary'
fontWeight='bold'
fontSize={['medium', 'semiRegular', 'mild', 'big']}
lineHeight='default'
color='text.smokyWhite'
>
{privacyPolicy?.title}
</Text>
</Box>
<Layout flexBasis={[20, 30, 50]} flexShrink={0} />
<Column>
{privacyPolicy?.content?.map((item) => (
<React.Fragment key={uniqid()}>
<Row>
<Text
fontWeight='medium'
fontSize={['semiMedium', 'regular', 'large']}
lineHeight='primary'
color='text.smokyWhite'
>
{item?.title}
</Text>
</Row>
<Layout flexBasis={[4, 6, 8]} flexShrink={0} />
<Row>
<Text
opacity='50%'
fontWeight='medium'
fontSize={['micro', 'middling', 'medium']}
lineHeight='primary'
color='text.smokyWhite'
>
{item?.description}
</Text>
<Layout width={[16, 100, 200]} flexShrink={0} />
</Row>
<Layout flexBasis={[16, 24, 40]} />
</React.Fragment>
))}
const PrivacyPolicyBlock = () => {
const { privacyPolicyData } = usePrivacyPolicy()
return (
<Row justifyContent='center'>
<Box width={['100%', '100%', 1920]}>
<Layout flexBasis={[20, 30, 40]} flexShrink={0} />
<Column width='100%'>
<Layout flexBasis={[80, 100, 142]} flexShrink={0} />
<Box width={['100%', '100%', 1050]}>
<Text
textTransform='uppercase'
fontFamily='secondary'
fontWeight='bold'
fontSize={['medium', 'semiRegular', 'mild', 'big']}
lineHeight='default'
color='text.smokyWhite'
>
{privacyPolicyData?.title}
</Text>
</Box>
<Layout flexBasis={[20, 30, 50]} flexShrink={0} />
<Column>
{privacyPolicyData?.content?.map((item) => (
<React.Fragment key={uniqid()}>
<Row>
<Text
fontWeight='medium'
fontSize={['semiMedium', 'regular', 'large']}
lineHeight='primary'
color='text.smokyWhite'
>
{item?.title}
</Text>
</Row>
<Layout flexBasis={[4, 6, 8]} flexShrink={0} />
<Row>
<Text
opacity='50%'
fontWeight='medium'
fontSize={['micro', 'middling', 'medium']}
lineHeight='primary'
color='text.smokyWhite'
>
{item?.description}
</Text>
<Layout width={[16, 100, 200]} flexShrink={0} />
</Row>
<Layout flexBasis={[16, 24, 40]} />
</React.Fragment>
))}
</Column>
<Layout flexBasis={[32, 40, 150]} flexShrink={0} />
</Column>
<Layout flexBasis={[32, 40, 150]} flexShrink={0} />
</Column>
<Layout flexBasis={[20, 30, 40]} flexShrink={0} />
</Box>
</Row>
)
<Layout flexBasis={[20, 30, 40]} flexShrink={0} />
</Box>
</Row>
)
}

export { PrivacyPolicyBlock }
4 changes: 2 additions & 2 deletions landing/pages/contact-page/src/contact.page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export const ContactPage: FC<ContactPageProps> = ({ SEO, contactsData }) => {
backgroundImage={`url(${contactsData?.background?.noise?.node.sourceUrl})`}
backgroundSize='contain'
>
<ContactBlock contactsData={contactsData} />
<ContactBlock />
<FooterBlock buttonUp={false} />
</Box>
</Box>
Expand All @@ -60,7 +60,7 @@ export const ContactPage: FC<ContactPageProps> = ({ SEO, contactsData }) => {
backgroundImage={`url(${contactsData?.background?.noise?.node.sourceUrl})`}
backgroundSize='contain'
>
<ContactBlock contactsData={contactsData} />
<ContactBlock />
<FooterBlock buttonUp={false} />
</Box>
</Box>
Expand Down
4 changes: 2 additions & 2 deletions landing/pages/privacy-policy-page/src/privacy-policy.page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { PrivacyPolicyPageProps } from './privacy-policy-page.interfaces'
import { LOCOMOTIVE_SCROLL_WATCH } from './privacy-policy.constants'
import { LOCOMOTIVE_SCROLL_OPTIONS } from './privacy-policy.constants'

export const PrivacyPolicyPage: FC<PrivacyPolicyPageProps> = ({ SEO, privacyPolicyData }) => {
export const PrivacyPolicyPage: FC<PrivacyPolicyPageProps> = ({ SEO }) => {
const containerRef = useRef(null)

return (
Expand All @@ -27,7 +27,7 @@ export const PrivacyPolicyPage: FC<PrivacyPolicyPageProps> = ({ SEO, privacyPoli
<HeaderBlock />
<Seo seo={SEO} />
<MainScrollContainer containerRef={containerRef}>
<PrivacyPolicyBlock privacyPolicy={privacyPolicyData} />
<PrivacyPolicyBlock />
<Box
display={['none', 'none', 'flex']}
width='100%'
Expand Down

0 comments on commit f74c0c9

Please sign in to comment.