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, useForm } from 'react-component-form' import useTranslation from 'next-translate/useTranslation' import classNames from 'clsx' import type { HandleUseFormCallback } from 'react-component-form' 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' import { useFormTranslation } from '../../../hooks/useFormTranslation' const schema = { name: guildSchema.name, description: Type.Optional(guildSchema.description) } 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 { handleUseForm, fetchState, message, errors, setFetchState, setMessage } = useForm(schema) const { getFirstErrorTranslation } = useFormTranslation() const onSubmit: HandleUseFormCallback = async (formData) => { try { await authentication.api.put(`/guilds/${guild.id}`, formData) setInputValues(formData as unknown as any) return { type: 'success', message: 'application:saved-information' } } catch (error) { return { type: 'error', message: '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 && files[0] != null) { const file = files[0] const formData = new FormData() formData.append('icon', file) try { await authentication.api.put(`/guilds/${guild.id}/icon`, formData, { headers: { 'Content-Type': 'multipart/form-data' } }) setFetchState('idle') } catch (error) { setFetchState('error') setMessage('errors:server-error') } } } const handleDelete = async (): Promise => { try { await authentication.api.delete(`/guilds/${guild.id}`) } catch (error) { setFetchState('error') setMessage('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') setMessage('errors:server-error') } } return ( <>
{member.isOwner && (
Profil Picture