Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
167 changes: 167 additions & 0 deletions src/Components/ThankYouNote.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,167 @@
import { Box, Stack, useTheme } from '@mui/material';
import React, { useEffect, useState } from 'react';
import useMediaQuery from '@mui/material/useMediaQuery';
import axios from 'axios';
import Papa from 'papaparse';
import dayjs from 'dayjs';

const ThankYouNote = ({ darkmode }) => {
const theme = useTheme();
const isDesktop = useMediaQuery(theme.breakpoints.up('lg'));
const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
const [thankYou, setThankYou] = useState([]);

useEffect(() => {
axios
.get(
'https://raw.githubusercontent.com/jenkins-infra/jenkins-contribution-stats/main/data/honored_contributor.csv',
{ responseType: 'text' }
)
.then((response) => {
setThankYou(Papa.parse(response.data)?.data[1]);
});

const interval = setInterval(() => {
axios
.get(
'https://raw.githubusercontent.com/jenkins-infra/jenkins-contribution-stats/main/data/honored_contributor.csv',
{ responseType: 'text' }
)
.then((response) => {
setThankYou(Papa.parse(response.data)?.data[1]);
});
}, 3600000);

return () => clearInterval(interval);
}, []);

if (!thankYou || thankYou.length === 0) return null;

return (
<Box
sx={{
padding: theme.spacing(5, 0),
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: darkmode ? '#333333' : '#ffffff',
color: darkmode ? 'white' : 'black',
}}
>
<Box
sx={{
padding: isMobile ? theme.spacing(2) : theme.spacing(3),
borderRadius: 5,
maxWidth: 'fit-content',
height: 'fit-content',
backgroundColor: 'rgb(218, 209, 198, 0.3)',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
border: darkmode ? '1px solid white' : '1px solid black',
}}
>
<Stack
direction='row'
gap={isMobile ? 1 : 3}
justifyItems='center'
alignItems='center'
>
<Box
sx={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
<img
src={thankYou[6]?.replace(/['"]+/g, '')}
alt='Random contributor'
width={isDesktop ? 100 : isMobile ? 36 : 90}
height={isDesktop ? 100 : isMobile ? '100%' : 90}
style={{
marginTop: 'auto',
marginBottom: 'auto',
}}
/>
</Box>
<Box
sx={{
fontSize: isMobile ? 'small' : 'medium',
}}
>
Thank you{' '}
{thankYou?.filter((item) => item?.trim() === '')
.length === 0 && (
<a
target='_blank'
rel='noreferrer'
href={thankYou[5]?.replace(/['"]+/g, '')}
>
{thankYou[3]?.replace(/['"]+/g, '').trim()
? thankYou[3]?.replace(/['"]+/g, '')
: thankYou[2]?.replace(/['"]+/g, '')}
</a>
)}
<br />
for making {thankYou[7]?.replace(
/['"]+/g,
''
)} pull{' '}
{parseInt(thankYou[7]?.replace(/['"]+/g, '')) >= 2
? 'requests'
: 'request'}
<br />
to{' '}
{thankYou[8]?.split(' ')?.length >= 4
? parseInt(thankYou[8]?.split(' ')?.length) +
' Jenkins '
: 'the '}
{thankYou[8]?.split(' ').length < 4 &&
thankYou[8]
?.replace(/['"]+/g, '')
.split(/\s+/)
.filter(Boolean)
.map((repo, idx) => (
<>
{thankYou[8]?.split(' ').length > 2 &&
idx ===
thankYou[8]?.split(' ').length -
2 &&
'and '}
<a
target='_blank'
rel='noreferrer'
href={`https://github.com/${repo}`}
>
{repo?.split('/')[1]}
</a>
{thankYou[8]?.split(' ').length >= 2 &&
idx <
thankYou[8]?.split(' ').length -
2 ? (
<>
,
<br />
</>
) : (
' '
)}
</>
))}{' '}
{thankYou[8]?.split(' ').length > 2
? 'repos'
: 'repo'}{' '}
in{' '}
{dayjs(
thankYou[1]?.replace(/['"]+/g, '').trim()
).format('MMMM YYYY')}
!
</Box>
</Stack>
</Box>
</Box>
);
};

export default ThankYouNote;
163 changes: 4 additions & 159 deletions src/pages/index.js
Original file line number Diff line number Diff line change
@@ -1,22 +1,20 @@
import React, { useEffect, useState } from 'react';
import '../../styles/index.css';
import { Box, Stack, Typography, useTheme } from '@mui/material';
import { Box, Typography, useTheme } from '@mui/material';
import { graphql } from 'gatsby';
import useMediaQuery from '@mui/material/useMediaQuery';
import { Helmet } from 'react-helmet';
import dayjs from 'dayjs';
import axios from 'axios';
import Papa from 'papaparse';
import ThankYouNote from '../Components/ThankYouNote.jsx';
import ContributorsList from '../Components/Contributor/ContributorsList.jsx';
import FeaturedContributor from '../Components/Featured-contributor/FeaturedContributor.jsx';
import Search from '../Components/Search/Search.jsx';

const IndexPage = (props) => {
const theme = useTheme();
const isDesktop = useMediaQuery(theme.breakpoints.up('lg'));
const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
const { data } = props;
const contributors = data.allAsciidoc.edges;
const [thankYou, setThankYou] = React.useState([]);
const [darkmode, setDarkmode] = React.useState(null);

useEffect(() => {
Expand All @@ -35,30 +33,6 @@ const IndexPage = (props) => {
}
}, []);

useEffect(() => {
axios
.get(
'https://raw.githubusercontent.com/jenkins-infra/jenkins-contribution-stats/main/data/honored_contributor.csv',
{ responseType: 'text' }
)
.then((response) => {
setThankYou(Papa.parse(response.data)?.data[1]);
});

const interval = setInterval(() => {
axios
.get(
'https://raw.githubusercontent.com/jenkins-infra/jenkins-contribution-stats/main/data/honored_contributor.csv',
{ responseType: 'text' }
)
.then((response) => {
setThankYou(Papa.parse(response.data)?.data[1]);
});
}, 3600000);

return () => clearInterval(interval);
}, []);

const [mounted, setMounted] = useState(false);

useEffect(() => {
Expand Down Expand Up @@ -145,136 +119,7 @@ const IndexPage = (props) => {
darkmode={darkmode}
/>
<ContributorsList contributors={contributors} darkmode={darkmode} />
<Box
sx={{
padding: theme.spacing(5, 0),
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: darkmode ? '#333333' : '#ffffff',
color: darkmode ? 'white' : 'black',
}}
>
<Box
sx={{
padding: isMobile ? theme.spacing(2) : theme.spacing(3),
borderRadius: 5,
maxWidth: 'fit-content',
height: 'fit-content',
backgroundColor: 'rgb(218, 209, 198, 0.3)',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
border: darkmode
? '1px solid white'
: '1px solid black',
}}
>
<Stack
direction='row'
gap={isMobile ? 1 : 3}
justifyItems='center'
alignItems='center'
>
<Box
sx={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
<img
src={thankYou[6]?.replace(/['"]+/g, '')}
alt='Random contributor'
width={isDesktop ? 100 : isMobile ? 36 : 90}
height={
isDesktop ? 100 : isMobile ? '100%' : 90
}
style={{
marginTop: 'auto',
marginBottom: 'auto',
}}
/>
</Box>
<Box
sx={{
fontSize: isMobile ? 'small' : 'medium',
}}
>
Thank you{' '}
{thankYou?.filter((item) => item?.trim() === '')
.length === 0 && (
<a
target='_blank'
rel='noreferrer'
href={thankYou[5]?.replace(/['"]+/g, '')}
>
{thankYou[3]?.replace(/['"]+/g, '').trim()
? thankYou[3]?.replace(/['"]+/g, '')
: thankYou[2]?.replace(/['"]+/g, '')}
</a>
)}
<br />
for making {thankYou[7]?.replace(
/['"]+/g,
''
)} pull{' '}
{parseInt(thankYou[7]?.replace(/['"]+/g, '')) >= 2
? 'requests'
: 'request'}
<br />
to{' '}
{thankYou[8]?.split(' ')?.length >= 4
? parseInt(thankYou[8]?.split(' ')?.length) +
' Jenkins '
: 'the '}
{thankYou[8]?.split(' ').length < 4 &&
thankYou[8]
?.replace(/['"]+/g, '')
.split(/\s+/)
.filter(Boolean)
.map((repo, idx) => (
<>
{thankYou[8]?.split(' ').length >
2 &&
idx ===
thankYou[8]?.split(' ')
.length -
2 &&
'and '}
<a
target='_blank'
rel='noreferrer'
href={`https://github.com/${repo}`}
>
{repo?.split('/')[1]}
</a>
{thankYou[8]?.split(' ').length >=
2 &&
idx <
thankYou[8]?.split(' ').length -
2 ? (
<>
,
<br />
</>
) : (
' '
)}
</>
))}{' '}
{thankYou[8]?.split(' ').length > 2
? 'repos'
: 'repo'}{' '}
in{' '}
{dayjs(
thankYou[1]?.replace(/['"]+/g, '').trim()
).format('MMMM YYYY')}
!
</Box>
</Stack>
</Box>
</Box>
<ThankYouNote darkmode={darkmode} />
</>
);
};
Expand Down