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

2022-04-09 11:48:48 +00:00 · 2022-04-09 11:48:48 +00:00 · cb2ddbf661
commit cb2ddbf661
parent 25261b54ef
12 changed files with 185 additions and 126 deletions
--- a/components/Application/Application.tsx
+++ b/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)
--- a/components/Application/ChannelSettings/ChannelSettings.tsx
+++ b/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)}
-      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>
+    </>
  )
 }
--- a/components/Application/ConfirmGuildJoin/index.ts
+++ b/components/Application/ConfirmGuildJoin/index.ts
@ -1 +0,0 @@
-export * from './ConfirmGuildJoin'
--- a/components/Application/ConfirmGuildJoin/ConfirmGuildJoin.tsx
+++ b/components/Application/ConfirmGuildJoin/ConfirmGuildJoin.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> = ({
-  ...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', {
-          'scale-100': isLoading
-        })}
+        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>
--- a/components/Application/ConfirmPopup/index.ts
+++ b/components/Application/ConfirmPopup/index.ts
@ -0,0 +1 @@
+export * from './ConfirmPopup'
--- a/components/Application/GuildSettings/GuildSettings.tsx
+++ b/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)}
-      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'>
-          <div className=' flex w-full flex-wrap items-center justify-center px-6 sm:w-max'>
-            <div className='relative'>
-              <div className='absolute z-50 h-full w-full'>
-                <button className='relative flex h-full w-full items-center justify-center transition hover:scale-110'>
-                  <input
-                    type='file'
-                    className='absolute h-full w-full cursor-pointer opacity-0'
-                    onChange={handleFileChange}
+    <>
+      <Form
+        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'>
+            <div className=' flex w-full flex-wrap items-center justify-center px-6 sm:w-max'>
+              <div className='relative'>
+                <div className='absolute z-50 h-full w-full'>
+                  <button className='relative flex h-full w-full items-center justify-center transition hover:scale-110'>
+                    <input
+                      type='file'
+                      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' />
-                </button>
+                </div>
              </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}
+              <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 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='space-x-6'>
-          {member.isOwner ? (
-            <>
-              <Button type='submit' data-cy='button-save-guild-settings'>
-                {t('application:save')}
-              </Button>
+        )}
+        <div className='mt-12 flex flex-col items-center justify-center sm:w-fit'>
+          <div className='space-x-6'>
+            {member.isOwner ? (
+              <>
+                <Button type='submit' data-cy='button-save-guild-settings'>
+                  {t('application:save')}
+                </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}
-                data-cy='button-delete-guild-settings'
+                onClick={handleLeave}
+                data-cy='button-leave-guild-settings'
              >
-                {t('application:delete')}
+                {t('application:leave')} {guild.name}
              </Button>
-            </>
-          ) : (
-            <Button
-              color='red'
-              onClick={handleLeave}
-              data-cy='button-leave-guild-settings'
-            >
-              {t('application:leave')} {guild.name}
-            </Button>
-          )}
+            )}
+          </div>
+          <FormState
+            state={fetchState}
+            message={getErrorTranslation(errors.description) ?? message}
+          />
        </div>
-        <FormState
-          state={fetchState}
-          message={getErrorTranslation(errors.description) ?? 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-guild')} ?`}
        />
      </div>
-    </Form>
+    </>
  )
 }
--- a/components/Application/JoinGuildsPublic/GuildPublic/GuildPublic.tsx
+++ b/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',
          {
--- a/cypress/integration/pages/application/[guildId]/[channelId]/settings.spec.ts
+++ b/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',
--- a/cypress/integration/pages/application/[guildId]/settings.spec.ts
+++ b/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) {
--- a/locales/en/application.json
+++ b/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",
--- a/locales/fr/application.json
+++ b/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",
--- a/locales/fr/common.json
+++ b/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"
 }