From 5a0185c574a05db98f78e5ed9776053236204297 Mon Sep 17 00:00:00 2001
From: alexsparkes <turbomarshmello@gmail.com>
Date: Mon, 19 Feb 2024 18:49:20 +0000
Subject: [PATCH] refactor(welcome): Move image to component

---
 src/features/modals/welcome/Welcome.jsx       | 19 ++----------
 .../Elements/AsideImage/AsideImage.jsx        | 31 +++++++++++++++++++
 .../components/Elements/AsideImage/index.jsx  |  1 +
 .../welcome/components/Elements/index.jsx     |  3 +-
 4 files changed, 36 insertions(+), 18 deletions(-)
 create mode 100644 src/features/modals/welcome/components/Elements/AsideImage/AsideImage.jsx
 create mode 100644 src/features/modals/welcome/components/Elements/AsideImage/index.jsx

diff --git a/src/features/modals/welcome/Welcome.jsx b/src/features/modals/welcome/Welcome.jsx
index 457bd90b..0ba3a1e4 100644
--- a/src/features/modals/welcome/Welcome.jsx
+++ b/src/features/modals/welcome/Welcome.jsx
@@ -4,7 +4,7 @@ import { MdArrowBackIosNew, MdArrowForwardIos, MdOutlinePreview } from 'react-ic
 
 import EventBus from 'utils/eventbus';
 
-import { ProgressBar } from './components/Elements';
+import { ProgressBar, AsideImage } from './components/Elements';
 import { Button } from 'components/Elements';
 import { Wrapper, Panel } from './components/Layout';
 
@@ -24,20 +24,10 @@ class WelcomeModal extends PureComponent {
   constructor() {
     super();
     this.state = {
-      image: '/src/assets/icons/undraw_celebration.svg',
       currentTab: 0,
       finalTab: 5,
       buttonText: variables.getMessage('modals.welcome.buttons.next'),
     };
-    this.images = [
-      '/src/assets/icons/undraw_celebration.svg',
-      '/src/assets/icons/undraw_around_the_world_modified.svg',
-      '/src/assets/icons/undraw_add_files_modified.svg',
-      '/src/assets/icons/undraw_dark_mode.svg',
-      '/src/assets/icons/undraw_making_art.svg',
-      '/src/assets/icons/undraw_private_data_modified.svg',
-      '/src/assets/icons/undraw_upgrade_modified.svg',
-    ];
   }
 
   changeTab(minus) {
@@ -122,12 +112,7 @@ class WelcomeModal extends PureComponent {
     return (
       <Wrapper>
         <Panel type="aside">
-          <img
-            className="showcaseimg"
-            alt="sidebar icon"
-            draggable={false}
-            src={this.state.image}
-          />
+          <AsideImage currentTab={this.state.currentTab} />
           <ProgressBar
             count={this.images}
             currentTab={this.state.currentTab}
diff --git a/src/features/modals/welcome/components/Elements/AsideImage/AsideImage.jsx b/src/features/modals/welcome/components/Elements/AsideImage/AsideImage.jsx
new file mode 100644
index 00000000..5a064574
--- /dev/null
+++ b/src/features/modals/welcome/components/Elements/AsideImage/AsideImage.jsx
@@ -0,0 +1,31 @@
+const images = [
+  '/src/assets/icons/undraw_celebration.svg',
+  '/src/assets/icons/undraw_around_the_world_modified.svg',
+  '/src/assets/icons/undraw_add_files_modified.svg',
+  '/src/assets/icons/undraw_dark_mode.svg',
+  '/src/assets/icons/undraw_making_art.svg',
+  '/src/assets/icons/undraw_private_data_modified.svg',
+  '/src/assets/icons/undraw_upgrade_modified.svg',
+];
+
+function AsideImage({ currentTab }) {
+  const altTexts = [
+    'Celebration icon',
+    'Around the world icon',
+    'Add files icon',
+    'Dark mode icon',
+    'Making art icon',
+    'Private data icon',
+    'Upgrade icon',
+  ];
+  return (
+    <img
+      className="showcaseimg"
+      alt={altTexts[currentTab]}
+      draggable={false}
+      src={images[currentTab]}
+    />
+  );
+}
+
+export { AsideImage as default, AsideImage };
diff --git a/src/features/modals/welcome/components/Elements/AsideImage/index.jsx b/src/features/modals/welcome/components/Elements/AsideImage/index.jsx
new file mode 100644
index 00000000..4cdfd83c
--- /dev/null
+++ b/src/features/modals/welcome/components/Elements/AsideImage/index.jsx
@@ -0,0 +1 @@
+export * from './AsideImage';
diff --git a/src/features/modals/welcome/components/Elements/index.jsx b/src/features/modals/welcome/components/Elements/index.jsx
index 979a48fd..5acfbfe6 100644
--- a/src/features/modals/welcome/components/Elements/index.jsx
+++ b/src/features/modals/welcome/components/Elements/index.jsx
@@ -1 +1,2 @@
-export * from './ProgressBar';
\ No newline at end of file
+export * from './ProgressBar';
+export * from './AsideImage';