Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dynamic API-Driven Footer Component #236

Merged
merged 3 commits into from
Sep 13, 2024
+115 −260
Merged

Dynamic API-Driven Footer Component #236

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5788a44
Refactor social media links and icons in footer
Ysrbolles Sep 12, 2024
b555faf
Refactor social media links and icons in footer
Ysrbolles Sep 12, 2024
80f0969
Refactor API call in Footer component
Ysrbolles Sep 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
138 changes: 63 additions & 75 deletions src/components/Footer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { mdiInformationOutline } from '@mdi/js'
import Icon from '@mdi/react'
import {
Box,
Container,
Expand All @@ -10,25 +12,49 @@ import {
Typography,
useTheme,
} from '@mui/material'
import { FooterButtons, FooterLinks, SocialMediaLinks } from '../../constants/footer-consts'

import { mdiInformationOutline } from '@mdi/js'
import Icon from '@mdi/react'
import React from 'react'
import React, { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'
import {
footerButtonBoxStyles,
socialMediaIconBoxStyles,
socialMediaIcons,
socialMediaLinks,
} from '../../constants/footer-consts'
import { SUITE_RELEASES } from '../../constants/route-paths'
import Version from './Version'

export default function Footer() {
const API_URL = 'https://storage.googleapis.com/camino-suite-static/footer-consts.json'

const Footer: React.FC = () => {
const theme = useTheme()
const year = new Date().getFullYear()

const [footerData, setFooterData] = useState<any>(null)
const [error, setError] = useState<any>(null)

useEffect(() => {
async function fetchData() {
try {
const response = await fetch(API_URL)
const data = await response.json()
setFooterData(data)
} catch (error) {
setError(error)
}
}
fetchData()
}, [])

if (error) return <div>Error loading footer data</div>
if (!footerData) return <div>Loading...</div>

return (
<footer style={{ position: 'relative', marginTop: 'auto' }}>
{theme.palette.mode !== 'light' && <Divider variant="fullWidth" />}
<Paper
sx={{
marginTop: '0px',
marginBottom: '0px',
marginTop: 0,
marginBottom: 0,
border: 'none',
borderRadius: 0,
boxShadow: 0,
Expand All @@ -39,28 +65,24 @@ export default function Footer() {
maxWidth="xxl"
sx={{
marginTop: '15px',
paddingLeft: '0px !important',
paddingRight: '0px !important',
my: '0px !important',
paddingLeft: 0,
paddingRight: 0,
my: 0,
}}
>
<Grid container spacing={4} justifyContent="space-between" sx={{ p: '24px' }}>
<Grid container item xs={12} lg={6} spacing={4} justifyContent="left">
<Grid container spacing={4} justifyContent="space-between" sx={{ p: 3 }}>
<Grid container item xs={12} lg={6} spacing={4} justifyContent="flex-start">
<Grid item>
<Box sx={{ height: { xs: '32px', md: '44px' }, width: 'auto' }}>
{theme.palette.mode === 'light' ? (
<img
src="/assets/LightModeLogo.svg"
style={{ height: '100%', width: '100%' }}
alt="camino logo"
/>
) : (
<img
src="/assets/DarkModeLogo.svg"
style={{ height: '100%', width: '100%' }}
alt="camino logo"
/>
)}
<img
src={
theme.palette.mode === 'light'
? '/assets/LightModeLogo.svg'
: '/assets/DarkModeLogo.svg'
}
style={{ height: '100%', width: '100%' }}
alt="camino logo"
/>
</Box>
</Grid>
<Grid item>
Expand All @@ -75,38 +97,23 @@ export default function Footer() {
travelers and business partners.
</Typography>
</Grid>
<Grid xs={12} item>
<Grid item xs={12}>
<Box sx={{ display: 'flex' }}>
{SocialMediaLinks.map((link, index) => (
{footerData.SocialMediaLinks.map((link: any, index: number) => (
<Link
to={link.url}
to={socialMediaLinks[link.url]}
key={index}
target="_blank"
rel="noopener noreferrer"
>
<Box
sx={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: '.75rem',
color: theme => theme.palette.text.primary,
padding: '.5rem',
'&:hover': {
backgroundColor: theme =>
theme.palette.mode === 'dark'
? theme.palette.grey[700]
: theme.palette.grey[200],
},
}}
>
{link.icon}
<Box sx={socialMediaIconBoxStyles(theme)}>
{socialMediaIcons[link.icon]}
</Box>
</Link>
))}
</Box>
</Grid>
<Grid xs={12} item>
<Grid item xs={12}>
<Box
sx={{
display: 'flex',
Expand All @@ -115,34 +122,15 @@ export default function Footer() {
gap: 3,
}}
>
{FooterButtons.map((button, index) => (
{footerData.FooterButtons.map((button: any, index: number) => (
<Link
to={button.url}
target="_blank"
rel="noopener noreferrer"
key={index}
style={{ textDecoration: 'none' }}
>
<Box
sx={{
p: '.5rem 1rem',
border: `1px solid ${theme.palette.divider}`,
color: theme => theme.palette.text.primary,
backgroundColor: theme =>
theme.palette.mode === 'dark'
? theme.palette.grey[900]
: theme.palette.grey[100],
borderRadius: '.75rem',
'&:hover': {
borderWidth: '1px',
color: theme => theme.palette.grey[950],
backgroundColor: theme =>
theme.palette.mode === 'dark'
? '#FFF'
: theme.palette.grey[300],
},
}}
>
<Box sx={footerButtonBoxStyles(theme)}>
<Typography variant="body2" component="span">
{button.name}
</Typography>
Expand All @@ -152,8 +140,8 @@ export default function Footer() {
</Box>
</Grid>
</Grid>
<Grid container item xs={12} lg={6} spacing={2} justifyContent="left">
{FooterLinks.map((link, index) => (
<Grid container item xs={12} lg={6} spacing={2} justifyContent="flex-start">
{footerData.FooterLinks.map((link: any, index: number) => (
<Grid item md key={index}>
<Typography
variant="body2"
Expand All @@ -164,7 +152,7 @@ export default function Footer() {
{link.name}
</Typography>
<ul style={{ display: 'grid', gap: '5px', marginTop: '.5rem' }}>
{link.links.map((l, i) => (
{link.links.map((l: any, i: number) => (
<MenuItem
sx={{
textDecoration: 'none',
Expand Down Expand Up @@ -200,9 +188,8 @@ export default function Footer() {
</Container>
<Box
sx={{
backgroundColor: theme =>
theme.palette.mode === 'dark' ? '#0F182A' : '#F1F5F9',
color: theme => (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.700'),
backgroundColor: theme.palette.mode === 'dark' ? '#0F182A' : '#F1F5F9',
color: theme.palette.mode === 'dark' ? 'grey.300' : 'grey.700',
}}
>
<Container maxWidth="xl">
Expand Down Expand Up @@ -244,7 +231,6 @@ export default function Footer() {
>
<Icon path={mdiInformationOutline} size={0.65} />
</Tooltip>

<Link
rel="noopener noreferrer"
target="_blank"
Expand All @@ -263,3 +249,5 @@ export default function Footer() {
</footer>
)
}

export default Footer
Loading
Loading