🌐 Implementing i18n in events-page

EthereumBogota · Sep 24, 2023 · f10b946 · f10b946
1 parent 5965cb9
commit f10b946
Show file tree

Hide file tree

Showing 11 changed files with 328 additions and 2,164 deletions.
diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
 		"react-i18next": "^13.2.2",
+		"react-loader-spinner": "^5.4.5",
 		"swiper": "^10.2.0",
 		"tailwindcss": "3.3.3",
 		"viem": "^1.12.1",
@@ -54,4 +55,4 @@
 		"url": "^0.11.0",
 		"webpack-bundle-analyzer": "^4.9.0"
 	}
-}
+}
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
@@ -107,5 +107,15 @@
     "not-found": "This page was not found",
     "error-code": "Error code",
     "home": "Go back home"
+  },
+  "toasts": {
+    "ticket-bought": {
+      "title": "Ticket was bought!",
+      "description": "The ticket was successfully bought."
+    },
+    "failed": {
+      "title": "Transaction failed.",
+      "description": "The transaction failed. Try again."
+    }
   }
 }
diff --git a/src/assets/i18n/es.json b/src/assets/i18n/es.json
@@ -107,5 +107,15 @@
     "not-found": "Esta página no fue encontrada",
     "error-code": "Código de error",
     "home": "Volver al inicio"
+  },
+  "toasts": {
+    "ticket-bought": {
+      "title": "Tiquete comprado!",
+      "description": "El tiquete fue comprado exitosamente."
+    },
+    "failed": {
+      "title": "Transaction failed.",
+      "description": "La transacción falló. Intenta de nuevo"
+    }
   }
 }
diff --git a/src/components/events/GetTicketCard.tsx b/src/components/events/GetTicketCard.tsx
@@ -34,13 +34,13 @@ const GetTicketCard = (props: Props) => {
 				justifyContent={'center'}
 			>
 				<Text
-					fontSize='1.563rem'
+					fontSize='lg'
 					fontFamily={'space'}
 					fontWeight='semibold'
 					color={'#00001C'}
 					textAlign={'center'}
 				>
-					¡GRATIS!
+					GRATIS • Quedan 7 cupos
 				</Text>
 				{hasTicket ? (
 					<Button

diff --git a/src/components/home/Events.tsx b/src/components/home/Events.tsx
@@ -1,9 +1,8 @@
-import { Flex, Grid, GridItem, Heading } from '@chakra-ui/react'
+import { Center, Flex, Grid, GridItem, Heading } from '@chakra-ui/react'
 import { useTranslation } from 'react-i18next'
 import EventCard from './EventCard'
 import Link from 'next/link'
-import { MeetdAppFactory } from '../../../@types/typechain-types/MeetdAppFactory'
-import { ethers } from 'ethers'
+import Loader from '../shared/Loader'
 
 const first_event = {
 	id: 0,
@@ -34,7 +33,7 @@ export default function Events(props: Props): React.ReactNode {
 					{t('landing.top-events.title')} 🔥
 				</Heading>
 				{isLoading ? (
-					<p>Loading...</p>
+					<Loader width='full' height='300px' color='#00001C' />
 				) : (
 					<Grid
 						width={'full'}

diff --git a/src/components/home/MiddleSections.tsx b/src/components/home/MiddleSections.tsx
@@ -4,8 +4,6 @@ import Section from './Section'
 import { useTranslation } from 'react-i18next'
 import Events from './Events'
 import FAQ from './FAQ'
-import { MeetdAppFactory } from '../../../@types/typechain-types/MeetdAppFactory'
-import { ethers } from 'ethers'
 
 type Props = {
 	isLoading: boolean

diff --git a/src/components/shared/Footer.tsx b/src/components/shared/Footer.tsx
@@ -22,6 +22,7 @@ export default function Footer(): React.ReactNode {
 				width={'100%'}
 				align={'center'}
 				justify={'center'}
+				fontFamily={'neue'}
 				background={'#00001C'}
 				py={{ base: '3rem', md: '6rem' }}
 			>

diff --git a/src/components/shared/Loader.tsx b/src/components/shared/Loader.tsx
@@ -0,0 +1,27 @@
+import { Center } from '@chakra-ui/react'
+import { TailSpin } from 'react-loader-spinner'
+
+interface loaderProps {
+	width: string
+	height: string
+	color: string
+}
+
+export default function Loader(props: loaderProps): JSX.Element {
+	const { width, height, color } = props
+
+	return (
+		<Center w={width} h={height}>
+			<TailSpin
+				height='60'
+				width='60'
+				color={color}
+				ariaLabel='tail-spin-loading'
+				radius='1'
+				wrapperStyle={{}}
+				wrapperClass=''
+				visible={true}
+			/>
+		</Center>
+	)
+}
diff --git a/src/pages/events/[id]/index.tsx b/src/pages/events/[id]/index.tsx
@@ -5,7 +5,7 @@ import EventLocation from '@/components/events/EventLocation'
 import GetTicketCard from '@/components/events/GetTicketCard'
 import PreviousEvents from '@/components/events/PreviousEvents'
 import TagsSection from '@/components/events/TagsSection'
-import { Box, Flex, Grid } from '@chakra-ui/react'
+import { Flex, useToast } from '@chakra-ui/react'
 import { useRouter } from 'next/router'
 import MeetdAppFactoryJson from '../../../assets/contracts/MeetdAppFactory.json'
 import MeetdAppFactoryEventJson from '../../../assets/contracts/MeetdAppEvent.json'
@@ -20,9 +20,8 @@ import Footer from '@/components/shared/Footer'
 import '../../../config/i18n'
 import { CHAINID, PROVIDER } from '@/constants/constants'
 import { useAccount, useNetwork } from 'wagmi'
-import { time } from 'console'
-import { TimeIcon } from '@chakra-ui/icons'
-import { t } from 'i18next'
+import Loader from '@/components/shared/Loader'
+import { useTranslation } from 'react-i18next'
 
 interface Event {
 	id: string
@@ -36,17 +35,17 @@ type Props = {
 
 function Event(props: Props): JSX.Element {
 	const { event } = props
-	const [isBuyTicketLoading, setIsBuyTicketLoading] = useState<boolean>(false)
 	const [hasTicket, setHasTicket] = useState<boolean>(false)
+	const [isBuyTicketLoading, setIsBuyTicketLoading] = useState<boolean>(false)
 	const [isLoading, setIsLoading] = useState<boolean>(true)
 	const [meetdAppEventContract, setMeetdAppEventContract] =
 		useState<MeetdAppEvent | null>(null)
 	const [owner, setOwner] = useState<string | undefined>(undefined)
-
 	const router = useRouter()
-
 	// TODO: generate nanoId
 	const slug: string | string[] | undefined = router.query?.id
+	const { t } = useTranslation()
+	const toast = useToast()
 
 	const { address } = useAccount()
 	const { chain } = useNetwork()
@@ -96,8 +95,14 @@ function Event(props: Props): JSX.Element {
 				setIsBuyTicketLoading(false)
 				setHasTicket(true)
 
-				// TODO: i18n
-				alert('Se ha comprado el ticket correctamente.')
+				toast({
+					title: t('toasts.ticket-bought.title'),
+					description: t('toasts.ticket-bought.description'),
+					status: 'success',
+					duration: 3000,
+					isClosable: false,
+					position: 'top-right'
+				})
 			}
 		} catch (error) {
 			setIsBuyTicketLoading(false)
@@ -106,16 +111,34 @@ function Event(props: Props): JSX.Element {
 				if (error.message.includes('user rejected transaction')) {
 					return
 				} else if (error.message.includes('transaction failed')) {
-					// TODO: i18n
-					alert('La transacción falló')
+					toast({
+						title: 'Could not create account',
+						description: '',
+						status: 'success',
+						duration: 3000,
+						isClosable: false,
+						position: 'top-right'
+					})
 				} else {
-					// TODO: i18n
 					console.error('error: ', error)
-					alert('Ocurrió un error inesperado. Por favor intenta de nuevo.')
+					toast({
+						title: 'Account created.',
+						description: "We've created your account for you.",
+						status: 'success',
+						duration: 3000,
+						isClosable: false,
+						position: 'top-right'
+					})
 				}
 			} else {
-				// TODO: i18n
-				alert('Ocurrió un error desconocido.')
+				toast({
+					title: 'Account created.',
+					description: "We've created your account for you.",
+					status: 'success',
+					duration: 3000,
+					isClosable: false,
+					position: 'top-right'
+				})
 			}
 		}
 	}
@@ -174,83 +197,85 @@ function Event(props: Props): JSX.Element {
 		<>
 			<Navbar />
 
-			{isLoading ? (
-				<p>Loading...</p>
-			) : (
-				<Flex
-					background={
-						'linear-gradient(180deg, #348793 -0.41%, #00001C -0.4%, #053763 73.8%)'
-					}
-					gap={6}
-					paddingBottom={6}
-					alignItems={'center'}
-					justifyContent={'center'}
-				>
-					<Flex
-						mt={'8em'}
-						mb={'3em'}
-						maxW={'1200px'}
-						width={'90%'}
-						display={{ base: 'none', lg: 'flex' }}
-						gap={'3em'}
-						direction={'row'}
-						justifyContent={'center'}
-					>
+			<Flex
+				background={
+					'linear-gradient(180deg, #348793 -0.41%, #00001C -0.4%, #053763 73.8%)'
+				}
+				gap={6}
+				paddingBottom={6}
+				alignItems={'center'}
+				justifyContent={'center'}
+			>
+				{isLoading ? (
+					<Loader width='full' height='100vh' color='#DDEBED' />
+				) : (
+					<>
 						<Flex
-							direction={'column'}
-							flex={7}
-							w={'full'}
+							mt={'8em'}
+							mb={'3em'}
+							maxW={'1200px'}
+							width={'90%'}
+							display={{ base: 'none', lg: 'flex' }}
 							gap={'3em'}
-							order={{ base: 1, lg: 0 }}
+							direction={'row'}
+							justifyContent={'center'}
 						>
-							<EventImage />
-							<EventDetails />
-							<PreviousEvents />
-							<Attendees />
-							<TagsSection />
+							<Flex
+								direction={'column'}
+								flex={7}
+								w={'full'}
+								gap={'3em'}
+								order={{ base: 1, lg: 0 }}
+							>
+								<EventImage />
+								<EventDetails />
+								<PreviousEvents />
+								<Attendees />
+								<TagsSection />
+							</Flex>
+
+							<Flex
+								direction={'column'}
+								flex={3}
+								w={'full'}
+								gap={'3em'}
+								order={{ base: 0, lg: 1 }}
+							>
+								<EventLocation />
+								<GetTicketCard
+									getTicket={onBuyTicket}
+									isBuyTicketLoading={isBuyTicketLoading}
+									hasTicket={hasTicket}
+								/>
+							</Flex>
 						</Flex>
 
 						<Flex
-							direction={'column'}
-							flex={3}
-							w={'full'}
+							mt={'8em'}
+							width={'90%'}
+							display={{ base: 'flex', lg: 'none' }}
 							gap={'3em'}
-							order={{ base: 0, lg: 1 }}
+							direction={'column'}
+							justifyContent={'center'}
+							mb={'3em'}
 						>
-							<EventLocation />
-							<GetTicketCard
-								getTicket={onBuyTicket}
-								isBuyTicketLoading={isBuyTicketLoading}
-								hasTicket={hasTicket}
-							/>
-						</Flex>
-					</Flex>
-
-					<Flex
-						mt={'8em'}
-						width={'90%'}
-						display={{ base: 'flex', lg: 'none' }}
-						gap={'3em'}
-						direction={'column'}
-						justifyContent={'center'}
-						mb={'3em'}
-					>
-						<Flex direction={'column'} w={'full'} gap={'3em'}>
-							<EventImage />
-							<EventLocation />
-							<EventDetails />
-							<PreviousEvents />
-							<Attendees />
-							<TagsSection />
-							<GetTicketCard
-								getTicket={onBuyTicket}
-								isBuyTicketLoading={isBuyTicketLoading}
-								hasTicket={hasTicket}
-							/>
+							<Flex direction={'column'} w={'full'} gap={'3em'}>
+								<EventImage />
+								<EventLocation />
+								<EventDetails />
+								<PreviousEvents />
+								<Attendees />
+								<TagsSection />
+								<GetTicketCard
+									getTicket={onBuyTicket}
+									isBuyTicketLoading={isBuyTicketLoading}
+									hasTicket={hasTicket}
+								/>
+							</Flex>
 						</Flex>
-					</Flex>
-				</Flex>
-			)}
+					</>
+				)}
+			</Flex>
 			<Footer />
 		</>
 	)