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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 185 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/Application/Application.tsx
View File

@ -215,7 +215,7 @@ export const Application: React.FC<ApplicationProps> = (props) => {
id='application-page-content'
onClick={handleCloseSidebars}
className={classNames(
'h-full-without-header top-0 z-0 flex w-full flex-1 flex-col overflow-y-auto transition',
'h-full-without-header relative top-0 z-0 flex w-full flex-1 flex-col overflow-y-auto transition',
{
'absolute opacity-20':
isMobile && (visibleSidebars.left || visibleSidebars.right)

27
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,6 +99,7 @@ export const ChannelSettings: React.FC<ChannelSettingsProps> = (props) => {
}
return (
<>
<Form
onSubmit={handleSubmit(onSubmit)}
className='my-auto flex flex-col items-center justify-center py-12'
@ -120,7 +129,7 @@ export const ChannelSettings: React.FC<ChannelSettingsProps> = (props) => {
<Button
type='button'
color='red'
onClick={handleDelete}
onClick={handleConfirmation}
data-cy='button-delete-channel-settings'
>
{t('application:delete')}
@ -129,5 +138,21 @@ export const ChannelSettings: React.FC<ChannelSettingsProps> = (props) => {
<FormState state={fetchState} message={message} />
</div>
</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>
</>
)
}

1
components/Application/ConfirmGuildJoin/index.ts
View File

@ -1 +0,0 @@
export * from './ConfirmGuildJoin'

22
components/Application/ConfirmGuildJoin/ConfirmGuildJoin.tsx → components/Application/ConfirmPopup/ConfirmPopup.tsx
View File

@ -5,15 +5,14 @@ import classNames from 'classnames'
import { Loader } from '../../design/Loader'
export interface ConfirmGuildJoinProps {
export interface ConfirmPopupProps {
className?: string
title: string
handleYes: () => void | Promise<void>
handleNo: () => void | Promise<void>
}
export const ConfirmGuildJoin: React.FC<ConfirmGuildJoinProps> = ({
...props
}) => {
export const ConfirmPopup: React.FC<ConfirmPopupProps> = ({ ...props }) => {
const { t } = useTranslation()
const [isLoading, setIsLoading] = useState(false)
@ -25,9 +24,12 @@ export const ConfirmGuildJoin: React.FC<ConfirmGuildJoinProps> = ({
return (
<div className={props.className}>
<Loader
className={classNames('absolute scale-0 transition', {
className={classNames(
'absolute top-1/2 left-1/2 scale-0 transition-all',
{
'scale-100': isLoading
})}
}
)}
/>
<div
className={classNames(
@ -40,24 +42,24 @@ export const ConfirmGuildJoin: React.FC<ConfirmGuildJoinProps> = ({
<Image
quality={100}
src='/images/svg/design/join-guild.svg'
alt='Join Guild Illustration'
alt='Illustration'
height={150}
width={150}
/>
<div className='mt-8 flex flex-col'>
<h1 className='mb-6 text-center text-xl'>
{t('application:join-the-guild')} ?
</h1>
<h1 className='mb-6 text-center text-xl'>{props.title}</h1>
<div className='flex gap-7'>
<button
className='rounded-3xl bg-success px-8 py-2 text-white transition hover:brightness-125 dark:text-black hover:dark:brightness-75'
onClick={handleYesLoading}
data-cy='confirm-popup-yes-button'
>
{t('common:yes')}
</button>
<button
className='rounded-3xl bg-error px-8 py-2 text-white transition hover:brightness-125 dark:text-black hover:dark:brightness-75'
onClick={props.handleNo}
data-cy='confirm-popup-no-button'
>
{t('common:no')}
</button>

1
components/Application/ConfirmPopup/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './ConfirmPopup'

27
components/Application/GuildSettings/GuildSettings.tsx
View File

@ -5,6 +5,7 @@ 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'
@ -14,6 +15,7 @@ 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()
@ -26,6 +28,12 @@ export const GuildSettings: React.FC = () => {
description: guild.description
})
const [confirmation, setConfirmation] = useState(false)
const handleConfirmation = (): void => {
return setConfirmation(!confirmation)
}
const {
fetchState,
message,
@ -109,6 +117,7 @@ export const GuildSettings: React.FC = () => {
}
return (
<>
<Form
onSubmit={handleSubmit(onSubmit)}
className='my-auto flex flex-col items-center justify-center py-12'
@ -177,7 +186,7 @@ export const GuildSettings: React.FC = () => {
<Button
type='button'
color='red'
onClick={handleDelete}
onClick={handleConfirmation}
data-cy='button-delete-guild-settings'
>
{t('application:delete')}
@ -199,5 +208,21 @@ export const GuildSettings: React.FC = () => {
/>
</div>
</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-guild')} ?`}
/>
</div>
</>
)
}

5
components/Application/JoinGuildsPublic/GuildPublic/GuildPublic.tsx
View File

@ -6,7 +6,7 @@ import classNames from 'classnames'
import axios from 'axios'
import { Emoji } from '../../../Emoji'
import { ConfirmGuildJoin } from '../../ConfirmGuildJoin'
import { ConfirmPopup } from '../../ConfirmPopup'
import {
GuildPublic as GuildPublicType,
GuildWithDefaultChannelId
@ -91,7 +91,8 @@ export const GuildPublic: React.FC<GuildPublicProps> = (props) => {
{guild.membersCount} {t('application:members')}
</p>
</div>
<ConfirmGuildJoin
<ConfirmPopup
title={`${t('application:join-the-guild')} ?`}
className={classNames(
'w-ful h-ful translate-x- absolute top-1/2 left-full flex h-full w-full -translate-y-1/2 flex-col items-center justify-center rounded-2xl transition-all',
{

1
cypress/integration/pages/application/[guildId]/[channelId]/settings.spec.ts
View File

@ -57,6 +57,7 @@ describe('Pages > /application/[guildId]/[channelId]/settings', () => {
)
cy.visit(`/application/${guildExample.id}/${channelExample.id}/settings`)
cy.get('[data-cy=button-delete-channel-settings]').click()
cy.get('[data-cy=confirm-popup-yes-button]').click()
cy.wait('@deleteChannelWithChannelIdHandler').then(() => {
cy.location('pathname').should(
'eq',

1
cypress/integration/pages/application/[guildId]/settings.spec.ts
View File

@ -69,6 +69,7 @@ describe('Pages > /application/[guildId]/settings', () => {
)
cy.visit(`/application/${guildExample.id}/settings`)
cy.get('[data-cy=button-delete-guild-settings]').click()
cy.get('[data-cy=confirm-popup-yes-button]').click()
cy.wait('@deleteGuildWithGuildIdHandler').then((interception) => {
expect(interception.response).to.not.be.eql(undefined)
if (interception.response !== undefined) {

2
locales/en/application.json
View File

@ -10,6 +10,8 @@
"guild-settings": "Guild settings",
"join-a-guild": "Join a Guild",
"join-the-guild": "Join the guild",
"delete-the-guild": "Delete the guild",
"delete-the-channel": "Delete the channel",
"join-a-guild-description": "Talk, collaborate, share and have fun with your friends by joining an already existing guild!",
"members": "member(s)",
"search": "Search",

2
locales/fr/application.json
View File

@ -10,6 +10,8 @@
"guild-settings": "Paramètres de la guilde",
"join-a-guild": "Rejoindre une Guilde",
"join-the-guild": "Rejoindre la guilde",
"delete-the-guild": "Supprimer la guilde",
"delete-the-channel": "Supprimer le channel",
"join-a-guild-description": "Discutez, collaborez, partagez et amusez-vous avec vos amis en rejoignant une guilde déjà existante!",
"members": "membre(s)",
"search": "Rechercher",

2
locales/fr/common.json
View File

@ -4,6 +4,6 @@
"all-rights-reserved": "Tous droits réservés",
"description": "Restez proche de vos amis et de vos communautés, parlez, collaborez, partagez et amusez-vous.",
"name": "Nom",
"yes": "Yes",
"yes": "Oui",
"no": "Non"
}