From 248293ed97b7036dc78c2264296aaa6584ffcb8e Mon Sep 17 00:00:00 2001
From: alexsparkes <turbomarshmello@gmail.com>
Date: Sun, 9 Jun 2024 09:05:12 +0100
Subject: [PATCH] fix(welcome): Preview feature

---
 src/App.jsx                              | 12 ++++++------
 src/features/helpers/preview/Preview.jsx |  8 +++++++-
 src/features/misc/modals/Modals.jsx      |  4 ++--
 src/features/welcome/Welcome.jsx         | 12 ++++++++++--
 4 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index c7d0edad..f45cd39f 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -6,6 +6,7 @@ import Modals from 'features/misc/modals/Modals';
 import { loadSettings, moveSettings } from 'utils/settings';
 import EventBus from 'utils/eventbus';
 import variables from 'config/variables';
+import Preview from 'features/helpers/preview/Preview';
 
 import Welcome from 'features/welcome/Welcome';
 
@@ -56,12 +57,8 @@ const App = () => {
 
   useAppSetup();
 
-  if (localStorage.getItem('showWelcome')) {
-    return (
-      <>
-        <Welcome />
-      </>
-    );
+  if (localStorage.getItem('showWelcome') === 'true') {
+    return <Welcome />;
   }
 
   return (
@@ -78,6 +75,9 @@ const App = () => {
         <Widgets />
         <Modals />
       </div>
+      {localStorage.getItem('welcomePreview') === 'true' && (
+        <Preview setup={() => window.location.reload()} />
+      )}
     </>
   );
 };
diff --git a/src/features/helpers/preview/Preview.jsx b/src/features/helpers/preview/Preview.jsx
index 75672751..b73826ab 100644
--- a/src/features/helpers/preview/Preview.jsx
+++ b/src/features/helpers/preview/Preview.jsx
@@ -3,11 +3,17 @@ import variables from 'config/variables';
 import './preview.scss';
 
 function Preview(props) {
+  const setup = () => {
+    localStorage.setItem('showWelcome', true);
+    localStorage.setItem('welcomePreview', false);
+    window.location.reload();
+  };
+
   return (
     <div className="preview-mode">
       <span className="title">{variables.getMessage('modals.main.settings.reminder.title')}</span>
       <span className="subtitle">{variables.getMessage('modals.welcome.preview.description')}</span>
-      <button onClick={() => props.setup()}>
+      <button onClick={() => setup()}>
         {variables.getMessage('modals.welcome.preview.continue')}
       </button>
     </div>
diff --git a/src/features/misc/modals/Modals.jsx b/src/features/misc/modals/Modals.jsx
index 0a0283a6..91036b46 100644
--- a/src/features/misc/modals/Modals.jsx
+++ b/src/features/misc/modals/Modals.jsx
@@ -102,8 +102,8 @@ export default class Modals extends PureComponent {
           ariaHideApp={false}
         >
           <Welcome modalClose={() => this.closeWelcome()} modalSkip={() => this.previewWelcome()} />
-        </Modal>*/}
-        {this.state.preview && <Preview setup={() => window.location.reload()} />}
+        </Modal>
+        {this.state.preview && <Preview setup={() => window.location.reload()} />}*/}
       </>
     );
   }
diff --git a/src/features/welcome/Welcome.jsx b/src/features/welcome/Welcome.jsx
index b9ce50a0..b5219644 100644
--- a/src/features/welcome/Welcome.jsx
+++ b/src/features/welcome/Welcome.jsx
@@ -102,6 +102,14 @@ function WelcomeModal() {
     updateTabAndButtonText(tab);
   };
 
+  const modalSkip = () => {
+    localStorage.setItem('showWelcome', false);
+    localStorage.setItem('welcomePreview', true);
+    window.location.reload();
+  };
+
+  console.log(localStorage.getItem('showWelcome'));
+
   const Navigation = () => {
     return (
       <div className="welcomeButtons">
@@ -115,7 +123,7 @@ function WelcomeModal() {
         ) : (
           <Button
             type="settings"
-            //onClick={() => modalSkip()}
+            onClick={() => modalSkip()}
             icon={<MdOutlinePreview />}
             label={variables.getMessage('modals.welcome.buttons.preview')}
           />
@@ -216,7 +224,7 @@ function WelcomeModal() {
             initial="enter"
             animate="center"
             exit="exit"
-            transition={{ type: 'tween', duration: 1 }}
+            transition={{ type: 'tween', duration: 0.8 }}
             style={{ position: 'absolute', height: '100%' }}
           >
             <div style={{ height: '100%', overflow: 'auto' }}>{tabs[currentTab]}</div>