From 09c2b89aed3063719749a1c16c10e9aa1e637bdc Mon Sep 17 00:00:00 2001
From: Joost De Cock <joost@joost.at>
Date: Fri, 31 Dec 2021 06:46:13 +0100
Subject: [PATCH] fix(fs.dev): Force data-theme update with key prop

This is a replacement for the hack I implemented in
bb901c4d8a3b4b5e4f7569e574cb1c46c47a59a1

It accomplishes the same effect, but with just setting the key prop.
Sadly, it does not work with just setting the key prop to the theme
but forcing the key prop to be re-set by including the date does the
trick.

To be clear: This is still a hack and I'd love to avoid it (or just
understand the right way to handle this) but for now it will do.
---
 .../components/wrappers/page.js                | 18 ++++++------------
 1 file changed, 6 insertions(+), 12 deletions(-)

diff --git a/packages/freesewing.shared/components/wrappers/page.js b/packages/freesewing.shared/components/wrappers/page.js
index fd6403c57f6..ed5fc12f751 100644
--- a/packages/freesewing.shared/components/wrappers/page.js
+++ b/packages/freesewing.shared/components/wrappers/page.js
@@ -53,24 +53,18 @@ const AppWrapper= props => {
   //  locale, languages: config.languages,
   //}
 
-  // Cannot understand why, but a re-render does update the content
-  // but not the attributes. So this is a hackish workaround
-  const themeWrappers = {
-    light: props => <div {...props} data-theme="light" />,
-    dark: props => <div {...props} data-theme="dark" />,
-    hax0r: props => <div {...props} data-theme="hax0r" />,
-    lgbtq: props => <div {...props} data-theme="lgbtq" />,
-    trans: props => <div {...props} data-theme="trans" />,
-  }
-  const Wrapper = themeWrappers[props.app.theme]
 
   return (
-    <Wrapper>
+    <div
+      {...swipeHandlers}
+      data-theme={props.app.theme}
+      key={props.app.theme+Date.now()} // Thiis forces the data-theme update
+    >
       {props.noLayout
         ? props.children
         : <Layout {...childProps}>{props.children}</Layout>
       }
-    </Wrapper>
+    </div>
   )
 }