feat(supported countries): now get fetched from API

himan7991 · Jan 12, 2024 · bd0e4f5 · bd0e4f5
1 parent 70b049c
commit bd0e4f5
Show file tree

Hide file tree

Showing 9 changed files with 110 additions and 539 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -4,10 +4,12 @@ import Content from './components/Content'
 import { useEffect, useState } from 'react'
 import AppContext from './context/AppContext'
 import { getDaysInYear, getPublicHolidays, getWeekends } from './functions/functions'
+import { Country } from './types/SupportedCountries'
 
 export default function App() {
 	// context
 	const [year, setYear] = useState<number>(new Date().getFullYear())
+	const [supportedCountries, setSupportedCountries] = useState<Country[]>([{ countryCode: 'US', name: 'United States' }])
 	const [countryCode, setCountryCode] = useState<string>('US')
 	const [daysInYear, setDaysInYear] = useState<number>(365)
 	const [weekends, setWeekends] = useState<number[]>([])
@@ -23,13 +25,20 @@ export default function App() {
 		setDaysInYear,
 		weekends,
 		setWeekends,
+		supportedCountries,
+		setSupportedCountries,
 		publicHolidays,
 		setPublicHolidays
 	}
 
 	useEffect(() => {
 		let countryCode = localStorage.getItem('countryCode')
 
+		fetch('https://date.nager.at/api/v3/AvailableCountries')
+			.then((res) => res.json())
+			.then((data) => setSupportedCountries(data))
+			.catch((error) => console.error(error))
+
 		if (countryCode) {
 			setCountryCode(countryCode)
 			fetch(`https://date.nager.at/api/v3/PublicHolidays/${year}/${countryCode}`)

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -57,7 +57,7 @@ export default function Header() {
 	return (
 		<>
 			<header className="grid grid-cols-2 py-4">
-				<h2 className="ml-[10%] text-2xl font-bold text-copy">HS.</h2>
+				<h2 className="ml-[10%] select-none text-2xl font-bold text-copy">HS.</h2>
 				{isMobileNavOpen ? (
 					<IoClose
 						className="mr-[10%] block cursor-pointer place-self-end text-copy md:hidden"

diff --git a/src/components/modals/ModalCountry.tsx b/src/components/modals/ModalCountry.tsx
@@ -1,12 +1,10 @@
 import { AnimatePresence, motion } from 'framer-motion'
 import { FaGlobeEurope } from 'react-icons/fa'
-import { supportedCountries } from '../../constants/SupportedCountries'
 import { useContext } from 'react'
 import AppContext from '../../context/AppContext'
-import { GITHUB } from '../../constants/links'
 
 export default function CountryModal({ isOpen, setIsOpen }: { isOpen: boolean; setIsOpen: (arg: boolean) => void }) {
-	const { countryCode, setCountryCode } = useContext(AppContext)
+	const { supportedCountries, countryCode, setCountryCode } = useContext(AppContext)
 
 	return (
 		<AnimatePresence>
@@ -16,7 +14,7 @@ export default function CountryModal({ isOpen, setIsOpen }: { isOpen: boolean; s
 					animate={{ opacity: 1 }}
 					exit={{ opacity: 0 }}
 					onClick={() => setIsOpen(false)}
-					className="fixed inset-0 z-50 grid cursor-pointer overflow-y-scroll bg-background/30 p-8 backdrop-blur lg:place-items-center"
+					className="fixed inset-0 z-50 grid cursor-pointer overflow-y-scroll bg-background/30 backdrop-blur lg:place-items-center"
 				>
 					<motion.div
 						// initial={{ scale: 0 }}
@@ -34,7 +32,7 @@ export default function CountryModal({ isOpen, setIsOpen }: { isOpen: boolean; s
 							<p className="text-center font-semibold">
 								Vacation Time Optimizer supports over 100 countries! Choose yours below. <br />
 							</p>
-							<div className="mb-4 grid grid-cols-1 place-items-center items-center gap-2 md:grid-cols-3 lg:grid-cols-10">
+							<div className="mb-4 grid grid-cols-1 place-items-center items-center gap-2 md:grid-cols-3 lg:grid-cols-6">
 								{supportedCountries
 									.sort((a, b) => a.name.localeCompare(b.name))
 									.map((c, i) => (
@@ -62,11 +60,11 @@ export default function CountryModal({ isOpen, setIsOpen }: { isOpen: boolean; s
 								</button>
 							</div>
 							<p className="text-center text-xs md:text-sm">
-								We're sorry if you don't see yours 😔 Feel free to submit a ticket on{' '}
-								<a href={GITHUB} className="text-white underline hover:text-primary-light">
-									GitHub
+								We're sorry if you don't see your country on the list 😔 Vacation Time Optimizer is powered by{' '}
+								<a href="https://date.nager.at/Country/Coverage" className="text-white underline hover:text-primary-light">
+									date.nager
 								</a>{' '}
-								and we'll get right on it
+								and their API
 							</p>
 						</div>
 					</motion.div>