From 6ba06e09d27b3442218a475211bd4214f7ecb510 Mon Sep 17 00:00:00 2001
From: Walidoux <ma.walidkorchi@icloud.com>
Date: Fri, 28 Apr 2023 14:42:51 +0100
Subject: [PATCH] feat(components|public): Add Design Loader and change
 Downloaders popup style

This commit adds a Design Loader to Downloaders component and modifies the popup  style with new classes. The loader is shown when the user clicks the Download GameData button. The popup is now centered and uses flex to position its content. Additionally, it now displays a message that depends on the state of the download process, and the close button's style is also modified.
---
 public/icons/cross.png                        | Bin 0 -> 373 bytes
 src/components/design/index.ts                |   1 +
 .../layout/Downloaders/Downloaders.tsx        |  46 ++++++++++++++++--
 src/components/system/Popup/Popup.tsx         |   2 +-
 4 files changed, 43 insertions(+), 6 deletions(-)
 create mode 100755 public/icons/cross.png
 create mode 100644 src/components/design/index.ts

diff --git a/public/icons/cross.png b/public/icons/cross.png
new file mode 100755
index 0000000000000000000000000000000000000000..6a5c0571fee2c4a602d5c8758fc482d5f88e394a
GIT binary patch
literal 373
zcmV-*0gC>KP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00004b3#c}2nYxW
zd<bNS0001AdQ@0+Qek%>aB^>EX>4U6ba`-PAVE-2F#rGvnd3@N%}XuHOjal;%1_J8
zN##-i17i~|6H60IqeKG(0}BHPFf=eQHUyGJK(;wlDA51~n3$WT0in5BvY9D}&jkQa
zx)o>}E!d0z006;BL_t(Ijg^zJ3BxcDMZYwJLEs?*u3csV^~nTTzyo-JOyKmIAf;+U
zh6o5UM4Tc>Sf@ML{@s1<zmvpCfoN*=LcOT#`>Uvz8B?p5b90jNcz#|5Bo$j>38JL1
z83w@GREMr(A*wdn%yU+A5M4|a0vr$kG61ZtPUWOI^9Y0mh!E%MfUP@+apVD}?_~&i
zSlX}R>R#*(!TX|_3qRZ)z<;&VBJF|DFhEv0La;hwlJ`Y81FRu6iJxf?g!|4vQhj2V
TPA~^R00000NkvXXu0mjfrTmLT

literal 0
HcmV?d00001

diff --git a/src/components/design/index.ts b/src/components/design/index.ts
new file mode 100644
index 0000000..4e20d2b
--- /dev/null
+++ b/src/components/design/index.ts
@@ -0,0 +1 @@
+export * from './Loader'
diff --git a/src/components/layout/Downloaders/Downloaders.tsx b/src/components/layout/Downloaders/Downloaders.tsx
index c665a6c..4d0fccb 100644
--- a/src/components/layout/Downloaders/Downloaders.tsx
+++ b/src/components/layout/Downloaders/Downloaders.tsx
@@ -1,4 +1,5 @@
 import { Fragment, useState } from 'react'
+import classNames from 'classnames'
 
 import { Image, Popup } from '../../system'
 import { Button } from '../Button'
@@ -6,10 +7,13 @@ import { GameAssetsDownloader, GameDataDownloader } from '../../../config/GameDo
 import { handleConvertion } from '../../../tools/handleConvertion'
 import { Downloader } from './Downloader'
 import type { ConvertionHandler } from '../../../types/global'
+import { Loader } from '../../design'
 
 export const Downloaders: React.FC = () => {
   const [message, setMessage] = useState('')
-  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState(false)
+  const [popup, setPopup] = useState(false)
+  const [loading, setLoading] = useState(true)
 
   const callback: ConvertionHandler = (message, state = 'idle') => {
     switch (state) {
@@ -21,13 +25,47 @@ export const Downloaders: React.FC = () => {
         return setLoading(false)
       case 'error':
         setMessage(message)
+        setError(true)
         return setLoading(false)
     }
   }
 
+  const downloadGameData = async (): Promise<void> => {
+    setPopup(true)
+    setLoading(true)
+
+    const startTime = new Date()
+    await handleConvertion('com', callback)
+
+    const endTime = new Date()
+    const seconds = ((endTime.getTime() - startTime.getTime()) / 1000).toFixed(2)
+
+    return callback(`Completed in: ${seconds} seconds`, 'success')
+  }
+
   return (
     <Fragment>
-      <Popup condition={false}>xd</Popup>
+      <Popup condition={popup}>
+        <span
+          className={classNames('', {
+            'text-red-600': error
+          })}>
+          {message}
+        </span>
+
+        <Loader active={loading} className='mt-10' />
+
+        <Button
+          value='Close'
+          icon={<Image src='/icons/cross.png' />}
+          className={classNames('bg-red-600 mt-6 opacity-0 p-2 px-4 active:opacity-40 invisible text-white', {
+            '!opacity-100 !visible': !loading
+          })}
+          handler={() => {
+            return setPopup(!popup)
+          }}
+        />
+      </Popup>
 
       <ul className='flex gap-x-8'>
         <Downloader content={GameDataDownloader}>
@@ -37,9 +75,7 @@ export const Downloaders: React.FC = () => {
             value='Download Gamedata'
             icon={<Image src='/icons/game.png' size={22} />}
             className='download-button border-gamedata-secondary bg-gamedata-primary shadow-gamedata-primary/20'
-            handler={async () => {
-              return await handleConvertion('com', callback)
-            }}
+            handler={downloadGameData}
           />
         </Downloader>
 
diff --git a/src/components/system/Popup/Popup.tsx b/src/components/system/Popup/Popup.tsx
index 67ca7a6..1c3f4c3 100644
--- a/src/components/system/Popup/Popup.tsx
+++ b/src/components/system/Popup/Popup.tsx
@@ -8,7 +8,7 @@ interface PopupProps {
 export const Popup: React.FC<PopupProps> = ({ condition, children }) => {
   return (
     <AnimateView
-      className='absolute z-20 top-0 left-0 w-screen h-screen bg-black/50 backdrop-blur-xl'
+      className='absolute flex text-white items-center flex-col transition-all justify-center z-20 top-0 left-0 w-screen h-screen bg-black/40 backdrop-blur-xl'
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       exit={{ opacity: 0 }}