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

components/Application/Application.tsx

@@ -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)

components/Application/ChannelSettings/ChannelSettings.tsx

@@ -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)}
+      <Form
-      className='my-auto flex flex-col items-center justify-center py-12'
+        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='flex w-full flex-col items-center justify-center sm:w-fit lg:flex-row'>
-          <div className='mx-12 flex flex-col'>
+          <div className=' flex w-full flex-wrap items-center justify-center px-6 sm:w-max'>
-            <Input
+            <div className='mx-12 flex flex-col'>
-              name='name'
+              <Input
-              label={t('common:name')}
+                name='name'
-              placeholder={t('common:name')}
+                label={t('common:name')}
-              className='!mt-0'
+                placeholder={t('common:name')}
-              onChange={onChange}
+                className='!mt-0'
-              value={inputValues.name}
+                onChange={onChange}
-              error={getErrorTranslation(errors.name)}
+                value={inputValues.name}
-              data-cy='channel-name-input'
+                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='mt-12 flex flex-col items-center justify-center sm:w-fit'>
-        <div className='space-x-6'>
+          <div className='space-x-6'>
-          <Button type='submit' data-cy='button-save-channel-settings'>
+            <Button type='submit' data-cy='button-save-channel-settings'>
-            {t('application:save')}
+              {t('application:save')}
-          </Button>
+            </Button>
-          <Button
+            <Button
-            type='button'
+              type='button'
-            color='red'
+              color='red'
-            onClick={handleDelete}
+              onClick={handleConfirmation}
-            data-cy='button-delete-channel-settings'
+              data-cy='button-delete-channel-settings'
-          >
+            >
-            {t('application:delete')}
+              {t('application:delete')}
-          </Button>
+            </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>
+    </>
   )
 }

components/Application/ConfirmGuildJoin/index.ts

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

components/Application/ConfirmPopup/ConfirmPopup.tsx

@@ -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> = ({
+export const ConfirmPopup: React.FC<ConfirmPopupProps> = ({ ...props }) => {
-  ...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(
-          'scale-100': isLoading
+          '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'>
+          <h1 className='mb-6 text-center text-xl'>{props.title}</h1>
-            {t('application:join-the-guild')} ?
-          </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>

components/Application/ConfirmPopup/index.ts

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

components/Application/GuildSettings/GuildSettings.tsx

@@ -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,95 +117,112 @@ export const GuildSettings: React.FC = () => {
   }
 
   return (
-    <Form
+    <>
-      onSubmit={handleSubmit(onSubmit)}
+      <Form
-      className='my-auto flex flex-col items-center justify-center py-12'
+        onSubmit={handleSubmit(onSubmit)}
-    >
+        className='my-auto flex flex-col items-center justify-center py-12'
-      {member.isOwner && (
+      >
-        <div className='flex w-full flex-col items-center justify-center sm:w-fit lg:flex-row'>
+        {member.isOwner && (
-          <div className=' flex w-full flex-wrap items-center justify-center px-6 sm:w-max'>
+          <div className='flex w-full flex-col items-center justify-center sm:w-fit lg:flex-row'>
-            <div className='relative'>
+            <div className=' flex w-full flex-wrap items-center justify-center px-6 sm:w-max'>
-              <div className='absolute z-50 h-full w-full'>
+              <div className='relative'>
-                <button className='relative flex h-full w-full items-center justify-center transition hover:scale-110'>
+                <div className='absolute z-50 h-full w-full'>
-                  <input
+                  <button className='relative flex h-full w-full items-center justify-center transition hover:scale-110'>
-                    type='file'
+                    <input
-                    className='absolute h-full w-full cursor-pointer opacity-0'
+                      type='file'
-                    onChange={handleFileChange}
+                      className='absolute h-full w-full cursor-pointer opacity-0'
+                      onChange={handleFileChange}
+                    />
+                    <PhotographIcon color='white' className='h-8 w-8' />
+                  </button>
+                </div>
+                <div className='flex items-center justify-center rounded-full bg-black shadow-xl'>
+                  <Image
+                    quality={100}
+                    className='rounded-full opacity-50'
+                    src={
+                      guild.icon == null
+                        ? '/images/data/guild-default.png'
+                        : guild.icon
+                    }
+                    alt='Profil Picture'
+                    draggable='false'
+                    height={125}
+                    width={125}
                   />
-                  <PhotographIcon color='white' className='h-8 w-8' />
+                </div>
-                </button>
               </div>
-              <div className='flex items-center justify-center rounded-full bg-black shadow-xl'>
+              <div className='mx-12 flex flex-col'>
-                <Image
+                <Input
-                  quality={100}
+                  name='name'
-                  className='rounded-full opacity-50'
+                  label={t('common:name')}
-                  src={
+                  placeholder={t('common:name')}
-                    guild.icon == null
+                  className='!mt-0'
-                      ? '/images/data/guild-default.png'
+                  onChange={onChange}
-                      : guild.icon
+                  value={inputValues.name}
-                  }
+                  error={getErrorTranslation(errors.name)}
-                  alt='Profil Picture'
+                  data-cy='guild-name-input'
-                  draggable='false'
+                />
-                  height={125}
+                <Textarea
-                  width={125}
+                  name='description'
+                  label={'Description'}
+                  placeholder={'Description'}
+                  id='textarea-description'
+                  onChange={onChange}
+                  value={inputValues.description ?? ''}
+                  data-cy='guild-description-input'
                 />
               </div>
             </div>
-            <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='guild-name-input'
-              />
-              <Textarea
-                name='description'
-                label={'Description'}
-                placeholder={'Description'}
-                id='textarea-description'
-                onChange={onChange}
-                value={inputValues.description ?? ''}
-                data-cy='guild-description-input'
-              />
-            </div>
           </div>
-        </div>
+        )}
-      )}
+        <div className='mt-12 flex flex-col items-center justify-center sm:w-fit'>
-      <div className='mt-12 flex flex-col items-center justify-center sm:w-fit'>
+          <div className='space-x-6'>
-        <div className='space-x-6'>
+            {member.isOwner ? (
-          {member.isOwner ? (
+              <>
-            <>
+                <Button type='submit' data-cy='button-save-guild-settings'>
-              <Button type='submit' data-cy='button-save-guild-settings'>
+                  {t('application:save')}
-                {t('application:save')}
+                </Button>
-              </Button>
+                <Button
+                  type='button'
+                  color='red'
+                  onClick={handleConfirmation}
+                  data-cy='button-delete-guild-settings'
+                >
+                  {t('application:delete')}
+                </Button>
+              </>
+            ) : (
               <Button
-                type='button'
                 color='red'
-                onClick={handleDelete}
+                onClick={handleLeave}
-                data-cy='button-delete-guild-settings'
+                data-cy='button-leave-guild-settings'
               >
-                {t('application:delete')}
+                {t('application:leave')} {guild.name}
               </Button>
-            </>
+            )}
-          ) : (
+          </div>
-            <Button
+          <FormState
-              color='red'
+            state={fetchState}
-              onClick={handleLeave}
+            message={getErrorTranslation(errors.description) ?? message}
-              data-cy='button-leave-guild-settings'
+          />
-            >
-              {t('application:leave')} {guild.name}
-            </Button>
-          )}
         </div>
-        <FormState
+      </Form>
-          state={fetchState}
+      <div
-          message={getErrorTranslation(errors.description) ?? message}
+        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>
-    </Form>
+    </>
   )
 }

components/Application/JoinGuildsPublic/GuildPublic/GuildPublic.tsx

@@ -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',
           {

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

@@ -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',

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

@@ -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) {

locales/en/application.json

@@ -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",

locales/fr/application.json

@@ -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",

locales/fr/common.json

@@ -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"
 }