From 91982c60d9aa0e24a1648b54b88a1f24e694607b Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Fri, 25 Dec 2020 09:17:24 -0800
Subject: [PATCH] update to new Chakra <Wrap> API

---
 src/app/UserItemsPage.js       | 111 +++++++++++++++++++--------------
 src/app/components/ItemCard.js |   6 +-
 2 files changed, 68 insertions(+), 49 deletions(-)

diff --git a/src/app/UserItemsPage.js b/src/app/UserItemsPage.js
index 768fc67..21ad4a3 100644
--- a/src/app/UserItemsPage.js
+++ b/src/app/UserItemsPage.js
@@ -16,6 +16,7 @@ import {
   MenuList,
   Portal,
   Wrap,
+  WrapItem,
   VStack,
   useBreakpointValue,
   useToast,
@@ -156,34 +157,44 @@ function UserItemsPage() {
           </Heading1>
           <Wrap spacing="2" opacity="0.7">
             {data.user.contactNeopetsUsername && (
-              <Badge
-                as="a"
-                href={`http://www.neopets.com/userlookup.phtml?user=${data.user.contactNeopetsUsername}`}
-                display="flex"
-                alignItems="center"
-              >
-                <NeopetsStarIcon marginRight="1" />
-                {data.user.contactNeopetsUsername}
-              </Badge>
+              <WrapItem>
+                <Badge
+                  as="a"
+                  href={`http://www.neopets.com/userlookup.phtml?user=${data.user.contactNeopetsUsername}`}
+                  display="flex"
+                  alignItems="center"
+                >
+                  <NeopetsStarIcon marginRight="1" />
+                  {data.user.contactNeopetsUsername}
+                </Badge>
+              </WrapItem>
             )}
             {data.user.contactNeopetsUsername && (
-              <Badge
-                as="a"
-                href={`http://www.neopets.com/neomessages.phtml?type=send&recipient=${data.user.contactNeopetsUsername}`}
-                display="flex"
-                alignItems="center"
-              >
-                <EmailIcon marginRight="1" />
-                Neomail
-              </Badge>
+              <WrapItem>
+                <Badge
+                  as="a"
+                  href={`http://www.neopets.com/neomessages.phtml?type=send&recipient=${data.user.contactNeopetsUsername}`}
+                  display="flex"
+                  alignItems="center"
+                >
+                  <EmailIcon marginRight="1" />
+                  Neomail
+                </Badge>
+              </WrapItem>
             )}
             <SupportOnly>
-              <UserSupportMenu user={data.user}>
-                <MenuButton as={BadgeButton} display="flex" alignItems="center">
-                  <EditIcon marginRight="1" />
-                  Support
-                </MenuButton>
-              </UserSupportMenu>
+              <WrapItem>
+                <UserSupportMenu user={data.user}>
+                  <MenuButton
+                    as={BadgeButton}
+                    display="flex"
+                    alignItems="center"
+                  >
+                    <EditIcon marginRight="1" />
+                    Support
+                  </MenuButton>
+                </UserSupportMenu>
+              </WrapItem>
             </SupportOnly>
             {/* Usually I put "Own" before "Want", but this matches the natural
              * order on the page: the _matches_ for things you want are things
@@ -191,32 +202,36 @@ function UserItemsPage() {
              * more natural train of thought: you come to someone's list _wanting_
              * something, and _then_ thinking about what you can offer. */}
             {!isCurrentUser && numItemsTheyOwnThatYouWant > 0 && (
-              <Badge
-                as="a"
-                href="#owned-items"
-                colorScheme="blue"
-                display="flex"
-                alignItems="center"
-              >
-                <StarIcon marginRight="1" />
-                {numItemsTheyOwnThatYouWant > 1
-                  ? `${numItemsTheyOwnThatYouWant} items you want`
-                  : "1 item you want"}
-              </Badge>
+              <WrapItem>
+                <Badge
+                  as="a"
+                  href="#owned-items"
+                  colorScheme="blue"
+                  display="flex"
+                  alignItems="center"
+                >
+                  <StarIcon marginRight="1" />
+                  {numItemsTheyOwnThatYouWant > 1
+                    ? `${numItemsTheyOwnThatYouWant} items you want`
+                    : "1 item you want"}
+                </Badge>
+              </WrapItem>
             )}
             {!isCurrentUser && numItemsTheyWantThatYouOwn > 0 && (
-              <Badge
-                as="a"
-                href="#wanted-items"
-                colorScheme="green"
-                display="flex"
-                alignItems="center"
-              >
-                <CheckIcon marginRight="1" />
-                {numItemsTheyWantThatYouOwn > 1
-                  ? `${numItemsTheyWantThatYouOwn} items you own`
-                  : "1 item you own"}
-              </Badge>
+              <WrapItem>
+                <Badge
+                  as="a"
+                  href="#wanted-items"
+                  colorScheme="green"
+                  display="flex"
+                  alignItems="center"
+                >
+                  <CheckIcon marginRight="1" />
+                  {numItemsTheyWantThatYouOwn > 1
+                    ? `${numItemsTheyWantThatYouOwn} items you own`
+                    : "1 item you own"}
+                </Badge>
+              </WrapItem>
             )}
           </Wrap>
         </Box>
diff --git a/src/app/components/ItemCard.js b/src/app/components/ItemCard.js
index 478dd2c..6279733 100644
--- a/src/app/components/ItemCard.js
+++ b/src/app/components/ItemCard.js
@@ -6,6 +6,7 @@ import {
   SimpleGrid,
   Tooltip,
   Wrap,
+  WrapItem,
   useColorModeValue,
   useTheme,
 } from "@chakra-ui/react";
@@ -203,7 +204,10 @@ export function ItemCardList({ children }) {
 export function ItemBadgeList({ children, ...props }) {
   return (
     <Wrap spacing="2" opacity="0.7" {...props}>
-      {children}
+      {React.Children.map(
+        children,
+        (badge) => badge && <WrapItem>{badge}</WrapItem>
+      )}
     </Wrap>
   );
 }