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,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>
+    </>
   )
 }

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(
+          '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,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>
+    </>
   )
 }

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