119 lines
3.7 KiB
JavaScript
119 lines
3.7 KiB
JavaScript
import React, { useState } from 'react'
|
|
import { Text, View } from 'react-native'
|
|
import { useGlobal } from 'reactn'
|
|
import { background } from '../assets'
|
|
import GradientButton from '../components/GradientButton'
|
|
import { Input } from '../components/Input'
|
|
import ItemContainer from '../components/ItemContainer/ItemContainer'
|
|
import firebase, { usersRef } from '../config/firebase'
|
|
import Page from '../layouts/Page'
|
|
import { isWeb } from '../hooks/useLayoutType'
|
|
import { Routes } from '../navigation'
|
|
import { navigate } from '../navigation/NavigationService'
|
|
import { Palette } from '../styles'
|
|
import { FONT_FAMILY } from '../styles/Fonts'
|
|
|
|
const CreatePseudo = () => {
|
|
const [userName, setUserName] = useState('')
|
|
const [loading, setLoading] = useState(false)
|
|
const [, setTooltip] = useGlobal('_tooltip')
|
|
|
|
const onCreate = async () => {
|
|
const raw = userName || ''
|
|
const val = raw.trim()
|
|
if (!val) return
|
|
try {
|
|
setLoading(true)
|
|
const uid = firebase.auth().currentUser?.uid
|
|
if (!uid) {
|
|
return navigate(Routes.Login)
|
|
}
|
|
// Check uniqueness (case-insensitive)
|
|
const lower = val.toLowerCase()
|
|
const snap = await usersRef.where('userNameLower', '==', lower).limit(1).get()
|
|
if (!snap.empty && snap.docs[0].id !== uid) {
|
|
setTooltip({ text: 'Ce pseudo est déjà pris', type: 'error' })
|
|
return
|
|
}
|
|
|
|
await usersRef.doc(uid).set(
|
|
{
|
|
userName: val,
|
|
userNameLower: lower,
|
|
updatedAt: firebase.firestore.FieldValue.serverTimestamp(),
|
|
createdAt: firebase.firestore.FieldValue.serverTimestamp(),
|
|
email: firebase.auth().currentUser?.email || null,
|
|
},
|
|
{ merge: true }
|
|
)
|
|
setTooltip({ text: `Bienvenue ${val}`, type: 'success' })
|
|
navigate(Routes.BottomTab)
|
|
} catch (e) {
|
|
console.log('CreatePseudo error', e?.message)
|
|
setTooltip({
|
|
text: e?.message || 'Enregistrement impossible',
|
|
type: 'error',
|
|
})
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Page
|
|
width={isWeb ? 600 : null}
|
|
backgroundImg={isWeb ? background.loginBgWeb : background.homeBG}
|
|
headerType="NAVIGATION"
|
|
title="Ton pseudo"
|
|
hideBackButton
|
|
>
|
|
<View style={{ flex: 1, paddingTop: 20 }}>
|
|
<ItemContainer height={275}>
|
|
<View style={{ gap: 32, paddingTop: 5, paddingHorizontal: 5 }}>
|
|
<View style={{ gap: 16 }}>
|
|
<View style={{ gap: 2 }}>
|
|
<Text
|
|
style={{
|
|
fontSize: 22,
|
|
color: Palette.white,
|
|
fontFamily: FONT_FAMILY.InterSemiBold,
|
|
}}
|
|
>
|
|
Choisis ton pseudo
|
|
</Text>
|
|
<Text
|
|
style={{
|
|
fontSize: 14,
|
|
color: Palette.gray,
|
|
fontFamily: FONT_FAMILY.InterRegular,
|
|
}}
|
|
>
|
|
Visible par les autres utilisateurs.
|
|
</Text>
|
|
</View>
|
|
<Input
|
|
placeholder="Pseudo"
|
|
label="Pseudo"
|
|
isBlur
|
|
value={userName}
|
|
setValue={setUserName}
|
|
/>
|
|
</View>
|
|
<GradientButton
|
|
title={loading ? 'Chargement...' : 'Valider'}
|
|
containerStyle={{
|
|
width: '80%',
|
|
alignSelf: 'center',
|
|
}}
|
|
onPress={onCreate}
|
|
disabled={loading || !userName?.trim()}
|
|
/>
|
|
</View>
|
|
</ItemContainer>
|
|
</View>
|
|
</Page>
|
|
)
|
|
}
|
|
|
|
export default CreatePseudo
|