✨ (phone) handle different phone number format according to current lang

Author: Taelar

README.md

@@ -7,7 +7,9 @@ Bienvenue sur mon CV qui sert vaguement de portfolio. Je mets un peu tout et n'i
 Code
 
 - Double check l'accessibilité
-- Watermark "Générée via ..." à l'impression
+- Tester les utils et regex
+- Test de composants ?
+- Watermark "Générée via ..." à l'impression ?
 
 ## Installation et utilisation
 

app/components/ContactSection/ContactSection.component.tsx

@@ -1,9 +1,11 @@
-import { useEffect, useMemo, useState, type FC } from 'react'
+import { useContext, useEffect, useMemo, useState, type FC } from 'react'
 import classNames from 'classnames/bind'
 import styles from './ContactSection.module.scss'
 import { Section } from '../Section'
 import { SocialLink } from '../SocialLink'
 import { LocalStorageKeys } from '~/model/localStorage'
+import { formatPhoneNumber } from '~/utils/phone.utils'
+import { LangContext } from '~/context/Lang.context'
 
 const cx = classNames.bind(styles)
 
@@ -19,6 +21,8 @@ const cx = classNames.bind(styles)
 */
 export const ContactSection: FC = () => {
 	const [isClientSide, setisClientSide] = useState(false)
+	const { langKey } = useContext(LangContext)
+
 	useEffect(() => {
 		setisClientSide(true)
 	}, [])
@@ -35,14 +39,8 @@ export const ContactSection: FC = () => {
 		const storedPhone = window.localStorage.getItem(LocalStorageKeys.phone)
 		if (!storedPhone) return null
 
-		const display = [...storedPhone]
-			.map((c, i) => (i > 0 && i % 2 === 0 ? ` ${c}` : c))
-			.join('')
-
-		const withIndicator = storedPhone.replace(/^0/g, '+33')
-
-		return { display, withIndicator }
-	}, [isClientSide])
+		return formatPhoneNumber(storedPhone, langKey === 'fr' ? 'fr' : 'intl')
+	}, [isClientSide, langKey])
 
 	return (
 		<Section title="Contact">
@@ -57,8 +55,8 @@ export const ContactSection: FC = () => {
 				{phone && (
 					<SocialLink
 						icon="phone"
-						label={phone.display}
-						link={`tel:${phone.withIndicator}`}
+						label={phone.formated}
+						link={`tel:${phone.normalized}`}
 					/>
 				)}
 				<SocialLink

app/utils/phone.utils.ts

@@ -0,0 +1,41 @@
+const phoneRegex = /^((?:\+\d{2})|(?:0))(\d{9})$/
+const phoneIndicatorFrance = '+33'
+
+/* Todo : Commentaire étoffé, mentionner que le retour est sans indicateur */
+export const getIntlPhoneNumber = (input: string) => {
+	const match = input.replaceAll(' ', '').match(phoneRegex)
+
+	console.log(match)
+
+	if (!match) {
+		return null
+	}
+
+	const phoneCore = match.at(2)
+
+	return phoneCore
+}
+
+export const formatPhoneNumber = (input: string, format: 'fr' | 'intl') => {
+	const coreNumber = getIntlPhoneNumber(input)
+	if (!coreNumber) {
+		return null
+	}
+	const normalized = `${phoneIndicatorFrance}${coreNumber}`
+	const splitedNumber = coreNumber?.split('')
+	const formatedIntlNumber = splitedNumber
+		.map((digit, index) => (index % 2 === 0 ? digit : ` ${digit}`))
+		.join('')
+
+	switch (format) {
+		case 'fr': {
+			return { normalized, formated: `0${formatedIntlNumber}` }
+		}
+		default: {
+			return {
+				normalized,
+				formated: `${phoneIndicatorFrance} ${formatedIntlNumber}`,
+			}
+		}
+	}
+}