From d7fe05c42c82baf5b925ac4e14f2b906f1504180 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Sat, 13 Mar 2021 01:15:29 -0800
Subject: [PATCH] Refactor: Extract OutfitHTML5Badge

I'm gonna add glitch stuff too, and I want all this better encapsulated!
---
 src/app/WardrobePage/OutfitControls.js | 105 +++++++++++++------------
 1 file changed, 56 insertions(+), 49 deletions(-)

diff --git a/src/app/WardrobePage/OutfitControls.js b/src/app/WardrobePage/OutfitControls.js
index 7d8e0e9..7da6534 100644
--- a/src/app/WardrobePage/OutfitControls.js
+++ b/src/app/WardrobePage/OutfitControls.js
@@ -88,17 +88,6 @@ function OutfitControls({
     }
   };
 
-  const petIsUsingHTML5 = appearance.petAppearance?.layers.every(
-    layerUsesHTML5
-  );
-
-  const itemsNotUsingHTML5 = appearance.items.filter((item) =>
-    item.appearance.layers.some((l) => !layerUsesHTML5(l))
-  );
-  itemsNotUsingHTML5.sort((a, b) => a.name.localeCompare(b.name));
-
-  const usesHTML5 = petIsUsingHTML5 && itemsNotUsingHTML5.length === 0;
-
   return (
     <ClassNames>
       {({ css, cx }) => (
@@ -194,44 +183,7 @@ function OutfitControls({
                 align="center"
                 justify="center"
               >
-                <HTML5Badge
-                  usesHTML5={usesHTML5}
-                  isLoading={appearance.loading}
-                  tooltipLabel={
-                    usesHTML5 ? (
-                      <>
-                        This outfit is converted to HTML5, and ready to use on
-                        Neopets.com!
-                      </>
-                    ) : (
-                      <Box>
-                        <Box as="p">
-                          This outfit isn't converted to HTML5 yet, so it might
-                          not appear in Neopets.com customization yet. Once it's
-                          ready, it could look a bit different than our
-                          temporary preview here. It might even be animated!
-                        </Box>
-                        {!petIsUsingHTML5 && (
-                          <Box as="p" marginTop="1em" fontWeight="bold">
-                            This pet is not yet converted.
-                          </Box>
-                        )}
-                        {itemsNotUsingHTML5.length > 0 && (
-                          <>
-                            <Box as="header" marginTop="1em" fontWeight="bold">
-                              The following items aren't yet converted:
-                            </Box>
-                            <UnorderedList>
-                              {itemsNotUsingHTML5.map((item) => (
-                                <ListItem key={item.id}>{item.name}</ListItem>
-                              ))}
-                            </UnorderedList>
-                          </>
-                        )}
-                      </Box>
-                    )
-                  }
-                />
+                <OutfitHTML5Badge appearance={appearance} />
               </Flex>
               <Box flex="0 0 auto">
                 <DarkMode>
@@ -265,6 +217,61 @@ function OutfitControls({
   );
 }
 
+function OutfitHTML5Badge({ appearance }) {
+  const petIsUsingHTML5 = appearance.petAppearance?.layers.every(
+    layerUsesHTML5
+  );
+
+  const itemsNotUsingHTML5 = appearance.items.filter((item) =>
+    item.appearance.layers.some((l) => !layerUsesHTML5(l))
+  );
+  itemsNotUsingHTML5.sort((a, b) => a.name.localeCompare(b.name));
+
+  const usesHTML5 = petIsUsingHTML5 && itemsNotUsingHTML5.length === 0;
+
+  let tooltipLabel;
+  if (usesHTML5) {
+    tooltipLabel = (
+      <>This outfit is converted to HTML5, and ready to use on Neopets.com!</>
+    );
+  } else {
+    tooltipLabel = (
+      <Box>
+        <Box as="p">
+          This outfit isn't converted to HTML5 yet, so it might not appear in
+          Neopets.com customization yet. Once it's ready, it could look a bit
+          different than our temporary preview here. It might even be animated!
+        </Box>
+        {!petIsUsingHTML5 && (
+          <Box as="p" marginTop="1em" fontWeight="bold">
+            This pet is not yet converted.
+          </Box>
+        )}
+        {itemsNotUsingHTML5.length > 0 && (
+          <>
+            <Box as="header" marginTop="1em" fontWeight="bold">
+              The following items aren't yet converted:
+            </Box>
+            <UnorderedList>
+              {itemsNotUsingHTML5.map((item) => (
+                <ListItem key={item.id}>{item.name}</ListItem>
+              ))}
+            </UnorderedList>
+          </>
+        )}
+      </Box>
+    );
+  }
+
+  return (
+    <HTML5Badge
+      usesHTML5={usesHTML5}
+      isLoading={appearance.loading}
+      tooltipLabel={tooltipLabel}
+    />
+  );
+}
+
 /**
  * BackButton takes you back home, or to Your Outfits if this outfit is yours.
  */