import Image from 'next/image' import { useRouter } from 'next/router' import { useState } from 'react' import { Type } from '@sinclair/typebox' import { PhotographIcon } from '@heroicons/react/solid' import { Form } from 'react-component-form' import useTranslation from 'next-translate/useTranslation' import classNames from 'classnames' import { HandleSubmitCallback, useForm } from '../../../hooks/useForm' import { guildSchema } from '../../../models/Guild' import { FormState } from '../../design/FormState' import { useGuildMember } from '../../../contexts/GuildMember' import { Textarea } from '../../design/Textarea' import { Input } from '../../design/Input' import { Button } from '../../design/Button' import { useAuthentication } from '../../../tools/authentication' import { ConfirmPopup } from '../ConfirmPopup' export const GuildSettings: React.FC = () => { const { t } = useTranslation() const router = useRouter() const { authentication } = useAuthentication() const { guild, member } = useGuildMember() const [inputValues, setInputValues] = useState({ name: guild.name, description: guild.description }) const [confirmation, setConfirmation] = useState(false) const handleConfirmation = (): void => { return setConfirmation(!confirmation) } const { fetchState, message, errors, getErrorTranslation, handleSubmit, setFetchState, setMessageTranslationKey } = useForm({ validateSchema: { name: guildSchema.name, description: Type.Optional(guildSchema.description) }, replaceEmptyStringToNull: true, resetOnSuccess: false }) const onSubmit: HandleSubmitCallback = async (formData) => { try { await authentication.api.put(`/guilds/${guild.id}`, formData) setInputValues(formData as any) return { type: 'success', value: 'application:saved-information' } } catch (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 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('icon', file) try { await authentication.api.put(`/guilds/${guild.id}/icon`, formData) setFetchState('idle') } catch (error) { setFetchState('error') setMessageTranslationKey('errors:server-error') } } } const handleDelete = async (): Promise => { try { await authentication.api.delete(`/guilds/${guild.id}`) } catch (error) { setFetchState('error') setMessageTranslationKey('errors:server-error') } } const handleLeave = async (): Promise => { try { await authentication.api.delete(`/guilds/${guild.id}/members/leave`) await router.push('/application') } catch (error) { setFetchState('error') setMessageTranslationKey('errors:server-error') } } return ( <>
{member.isOwner && (
Profil Picture