diff --git a/src/Components/ThankYouNote.jsx b/src/Components/ThankYouNote.jsx
new file mode 100644
index 00000000..f1117e0b
--- /dev/null
+++ b/src/Components/ThankYouNote.jsx
@@ -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 (
+
+
+
+
+ ![Random contributor]({thankYou[6]?.replace(/['"]+/g,)
+
+
+ Thank you{' '}
+ {thankYou?.filter((item) => item?.trim() === '')
+ .length === 0 && (
+
+ {thankYou[3]?.replace(/['"]+/g, '').trim()
+ ? thankYou[3]?.replace(/['"]+/g, '')
+ : thankYou[2]?.replace(/['"]+/g, '')}
+
+ )}
+
+ for making {thankYou[7]?.replace(
+ /['"]+/g,
+ ''
+ )} pull{' '}
+ {parseInt(thankYou[7]?.replace(/['"]+/g, '')) >= 2
+ ? 'requests'
+ : 'request'}
+
+ 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 '}
+
+ {repo?.split('/')[1]}
+
+ {thankYou[8]?.split(' ').length >= 2 &&
+ idx <
+ thankYou[8]?.split(' ').length -
+ 2 ? (
+ <>
+ ,
+
+
+ ) : (
+ ' '
+ )}
+
+ ))}{' '}
+ {thankYou[8]?.split(' ').length > 2
+ ? 'repos'
+ : 'repo'}{' '}
+ in{' '}
+ {dayjs(
+ thankYou[1]?.replace(/['"]+/g, '').trim()
+ ).format('MMMM YYYY')}
+ !
+
+
+
+
+ );
+};
+
+export default ThankYouNote;
diff --git a/src/pages/index.js b/src/pages/index.js
index f70aeb77..dc563f90 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -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(() => {
@@ -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(() => {
@@ -145,136 +119,7 @@ const IndexPage = (props) => {
darkmode={darkmode}
/>
-
-
-
-
-
-
-
- Thank you{' '}
- {thankYou?.filter((item) => item?.trim() === '')
- .length === 0 && (
-
- {thankYou[3]?.replace(/['"]+/g, '').trim()
- ? thankYou[3]?.replace(/['"]+/g, '')
- : thankYou[2]?.replace(/['"]+/g, '')}
-
- )}
-
- for making {thankYou[7]?.replace(
- /['"]+/g,
- ''
- )} pull{' '}
- {parseInt(thankYou[7]?.replace(/['"]+/g, '')) >= 2
- ? 'requests'
- : 'request'}
-
- 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 '}
-
- {repo?.split('/')[1]}
-
- {thankYou[8]?.split(' ').length >=
- 2 &&
- idx <
- thankYou[8]?.split(' ').length -
- 2 ? (
- <>
- ,
-
-
- ) : (
- ' '
- )}
-
- ))}{' '}
- {thankYou[8]?.split(' ').length > 2
- ? 'repos'
- : 'repo'}{' '}
- in{' '}
- {dayjs(
- thankYou[1]?.replace(/['"]+/g, '').trim()
- ).format('MMMM YYYY')}
- !
-
-
-
-
+
);
};