Thream/website
Archived
2
2
Fork 0
Code Issues Pull Requests Releases Activity

feat: confirm popup for guild/channel deletion (#27)

Browse Source
This commit is contained in:
Walid
2022-04-09 11:48:48 +00:00
committed by GitHub
parent 25261b54ef
commit cb2ddbf661
12 changed files with 185 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
components/Application/ChannelSettings/ChannelSettings.tsx
View File

@ -2,6 +2,7 @@ import { useRouter } from 'next/router'
import { useState } from 'react'
import { Form } from 'react-component-form'
import useTranslation from 'next-translate/useTranslation'
import classNames from 'classnames'
import axios from 'axios'
import { HandleSubmitCallback, useForm } from '../../../hooks/useForm'
@ -15,6 +16,7 @@ import {
channelSchema,
ChannelWithDefaultChannelId
} from '../../../models/Channel'
import { ConfirmPopup } from '../ConfirmPopup'
export interface ChannelSettingsProps {
channel: Channel
@ -32,6 +34,12 @@ export const ChannelSettings: React.FC<ChannelSettingsProps> = (props) => {
name: channel.name
})
const [confirmation, setConfirmation] = useState(false)
const handleConfirmation = (): void => {
return setConfirmation(!confirmation)
}
const {
fetchState,
message,
@ -91,43 +99,60 @@ export const ChannelSettings: React.FC<ChannelSettingsProps> = (props) => {
}
return (
<Form
onSubmit={handleSubmit(onSubmit)}
className='my-auto flex flex-col items-center justify-center py-12'
>
<div className='flex w-full flex-col items-center justify-center sm:w-fit lg:flex-row'>
<div className=' flex w-full flex-wrap items-center justify-center px-6 sm:w-max'>
<div className='mx-12 flex flex-col'>
<Input
name='name'
label={t('common:name')}
placeholder={t('common:name')}
className='!mt-0'
onChange={onChange}
value={inputValues.name}
error={getErrorTranslation(errors.name)}
data-cy='channel-name-input'
/>
<>
<Form
onSubmit={handleSubmit(onSubmit)}
className='my-auto flex flex-col items-center justify-center py-12'
>
<div className='flex w-full flex-col items-center justify-center sm:w-fit lg:flex-row'>
<div className=' flex w-full flex-wrap items-center justify-center px-6 sm:w-max'>
<div className='mx-12 flex flex-col'>
<Input
name='name'
label={t('common:name')}
placeholder={t('common:name')}
className='!mt-0'
onChange={onChange}
value={inputValues.name}
error={getErrorTranslation(errors.name)}
data-cy='channel-name-input'
/>
</div>
</div>
</div>
</div>
<div className='mt-12 flex flex-col items-center justify-center sm:w-fit'>
<div className='space-x-6'>
<Button type='submit' data-cy='button-save-channel-settings'>
{t('application:save')}
</Button>
<Button
type='button'
color='red'
onClick={handleDelete}
data-cy='button-delete-channel-settings'
>
{t('application:delete')}
</Button>
<div className='mt-12 flex flex-col items-center justify-center sm:w-fit'>
<div className='space-x-6'>
<Button type='submit' data-cy='button-save-channel-settings'>
{t('application:save')}
</Button>
<Button
type='button'
color='red'
onClick={handleConfirmation}
data-cy='button-delete-channel-settings'
>
{t('application:delete')}
</Button>
</div>
<FormState state={fetchState} message={message} />
</div>
<FormState state={fetchState} message={message} />
</Form>
<div
className={classNames(
'pointer-events-none invisible absolute z-50 flex h-full w-full items-center justify-center bg-black bg-opacity-90 opacity-0 backdrop-blur-md transition-all',
{ 'pointer-events-auto !visible !opacity-100': confirmation }
)}
>
<ConfirmPopup
className={classNames('relative top-8 transition-all', {
'!top-0': confirmation
})}
handleYes={handleDelete}
handleNo={handleConfirmation}
title={`${t('application:delete-the-channel')} ?`}
/>
</div>
</Form>
</>
)
}