import Image from 'next/image' import useTranslation from 'next-translate/useTranslation' import { useState } from 'react' import { Form } from 'react-component-form' import { PhotographIcon } from '@heroicons/react/solid' import { Type } from '@sinclair/typebox' import axios from 'axios' import { API_URL } from '../../../tools/api' import { Input } from '../../design/Input' import { Checkbox } from '../../design/Checkbox' import { Textarea } from '../../design/Textarea' import { SocialMediaButton } from '../../design/SocialMediaButton' import { SwitchTheme } from '../../Header/SwitchTheme' import { Language } from '../../Header/Language' import { useAuthentication } from '../../../tools/authentication' import { Button } from '../../design/Button' import { FormState } from '../../design/FormState' import { useForm, HandleSubmitCallback } from '../../../hooks/useForm' import { userCurrentSchema, userSchema } from '../../../models/User' import { userSettingsSchema } from '../../../models/UserSettings' export const UserSettings: React.FC = () => { const { user, setUser, authentication } = useAuthentication() const { t } = useTranslation() const [inputValues, setInputValues] = useState({ name: user.name, status: user.status, email: user.email, website: user.website, biography: user.biography, isPublicGuilds: user.settings.isPublicGuilds, isPublicEmail: user.settings.isPublicEmail }) const { fetchState, setFetchState, message, setMessageTranslationKey, errors, getErrorTranslation, handleSubmit } = useForm({ validateSchema: { name: userSchema.name, status: Type.Optional(userSchema.status), email: Type.Optional(userCurrentSchema.email), website: Type.Optional(userSchema.website), biography: Type.Optional(userSchema.biography), isPublicGuilds: userSettingsSchema.isPublicGuilds, isPublicEmail: userSettingsSchema.isPublicEmail }, replaceEmptyStringToNull: true, resetOnSuccess: false }) const onSubmit: HandleSubmitCallback = async (formData) => { try { const { isPublicGuilds, isPublicEmail, ...userData } = formData const userSettings = { isPublicEmail, isPublicGuilds } const { data: userCurrentData } = await authentication.api.put( `/users/current?redirectURI=${window.location.origin}/authentication/signin`, userData ) const { data: userCurrentSettings } = await authentication.api.put( '/users/current/settings', userSettings ) setUser((oldUser) => { return { ...oldUser, ...userCurrentData, settings: userCurrentSettings.settings } }) setInputValues(formData as any) return { type: 'success', value: 'common:name' } } catch (error) { if (axios.isAxiosError(error) && error.response?.status === 400) { const message = error.response.data.message as string if (message.endsWith('already taken.')) { return { type: 'error', value: 'authentication:already-used' } } else if (message.endsWith('email to sign in.')) { return { type: 'error', value: 'authentication:email-required-to-sign-in' } } return { type: 'error', value: 'errors:server-error' } } return { type: 'error', value: 'errors:server-error' } } } const onChange: React.ChangeEventHandler< HTMLInputElement | HTMLTextAreaElement > = (event) => { setInputValues((oldInputValues) => { return { ...oldInputValues, [event.target.name]: event.target.value } }) } const onChangeCheckbox: React.ChangeEventHandler = ( event ) => { setInputValues((oldInputValues) => { return { ...oldInputValues, [event.target.name]: event.target.checked } }) } const handleFileChange: React.ChangeEventHandler = async ( event ) => { setFetchState('loading') const files = event?.target?.files if (files != null && files.length === 1) { const file = files[0] const formData = new FormData() formData.append('logo', file) try { const { data } = await authentication.api.put( `/users/current/logo`, formData ) setUser((oldUser) => { return { ...oldUser, logo: data.user.logo } }) setFetchState('idle') } catch (error) { setFetchState('error') setMessageTranslationKey('errors:server-error') } } } const handleSignout = async (): Promise => { try { setFetchState('loading') await authentication.signoutServerSide() } catch (error) { setFetchState('error') setMessageTranslationKey('errors:server-error') } } return (
Profil Picture