From 6a59fa9f025e0b91b6eb7d39ef9d9a3db83e1582 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Thu, 10 Aug 2023 16:31:39 -0700
Subject: [PATCH] Replace next/link with physical links

All of these are links out of wardrobe-2020 now! We'll replace the router with react-router, but just for outfit state stuff.
---
 app/javascript/wardrobe-2020/ItemPage.js      | 54 ++++++-------
 .../wardrobe-2020/WardrobePage/Item.js        |  7 +-
 .../WardrobePage/OutfitControls.js            | 18 ++---
 .../wardrobe-2020/components/ItemCard.js      | 42 +++++-----
 .../components/PaginationToolbar.js           |  7 +-
 .../components/SquareItemCard.js              | 76 +++++++++----------
 package.json                                  |  1 +
 yarn.lock                                     | 20 +++++
 8 files changed, 111 insertions(+), 114 deletions(-)

diff --git a/app/javascript/wardrobe-2020/ItemPage.js b/app/javascript/wardrobe-2020/ItemPage.js
index 3a7bfc45..dd80b2e6 100644
--- a/app/javascript/wardrobe-2020/ItemPage.js
+++ b/app/javascript/wardrobe-2020/ItemPage.js
@@ -33,7 +33,6 @@ import {
 import { MdPause, MdPlayArrow } from "react-icons/md";
 import gql from "graphql-tag";
 import { useQuery, useMutation } from "@apollo/client";
-import Link from "next/link";
 
 import ItemPageLayout, { SubtleSkeleton } from "./ItemPageLayout";
 import {
@@ -712,31 +711,30 @@ function ItemPageTradeLinks({ itemId, isEmbedded }) {
 
 function ItemPageTradeLink({ href, count, label, colorScheme, isEmbedded }) {
   return (
-    <Link href={href} passHref>
-      <Button
-        as="a"
-        target={isEmbedded ? "_blank" : undefined}
-        size="xs"
-        variant="outline"
-        colorScheme={colorScheme}
-        borderRadius="full"
-        paddingRight="1"
-      >
-        <Box display="grid" gridTemplateAreas="single-area">
-          <Box gridArea="single-area" display="flex" justifyContent="center">
-            {count} {label} <ChevronRightIcon minHeight="1.2em" />
-          </Box>
-          <Box
-            gridArea="single-area"
-            display="flex"
-            justifyContent="center"
-            visibility="hidden"
-          >
-            888 offering <ChevronRightIcon minHeight="1.2em" />
-          </Box>
+    <Button
+      as="a"
+      href={href}
+      target={isEmbedded ? "_blank" : undefined}
+      size="xs"
+      variant="outline"
+      colorScheme={colorScheme}
+      borderRadius="full"
+      paddingRight="1"
+    >
+      <Box display="grid" gridTemplateAreas="single-area">
+        <Box gridArea="single-area" display="flex" justifyContent="center">
+          {count} {label} <ChevronRightIcon minHeight="1.2em" />
         </Box>
-      </Button>
-    </Link>
+        <Box
+          gridArea="single-area"
+          display="flex"
+          justifyContent="center"
+          visibility="hidden"
+        >
+          888 offering <ChevronRightIcon minHeight="1.2em" />
+        </Box>
+      </Box>
+    </Button>
   );
 }
 
@@ -1181,11 +1179,7 @@ function CustomizeMoreButton({ speciesId, colorId, pose, itemId, isDisabled }) {
 
 function LinkOrButton({ href, ...props }) {
   if (href != null) {
-    return (
-      <Link href={href} passHref>
-        <Button as="a" {...props} />
-      </Link>
-    );
+    return <Button as="a" href={href} {...props} />;
   } else {
     return <Button {...props} />;
   }
diff --git a/app/javascript/wardrobe-2020/WardrobePage/Item.js b/app/javascript/wardrobe-2020/WardrobePage/Item.js
index a2dc7e55..fd5caa2c 100644
--- a/app/javascript/wardrobe-2020/WardrobePage/Item.js
+++ b/app/javascript/wardrobe-2020/WardrobePage/Item.js
@@ -10,7 +10,6 @@ import {
   useTheme,
 } from "@chakra-ui/react";
 import { EditIcon, DeleteIcon, InfoIcon } from "@chakra-ui/icons";
-import Link from "next/link";
 import { loadable } from "../util";
 
 import {
@@ -289,11 +288,7 @@ function ItemActionButton({ icon, label, to, onClick }) {
 function LinkOrButton({ href, component = Button, ...props }) {
   const ButtonComponent = component;
   if (href != null) {
-    return (
-      <Link href={href} passHref>
-        <ButtonComponent as="a" {...props} />
-      </Link>
-    );
+    return <ButtonComponent as="a" href={href} {...props} />;
   } else {
     return <ButtonComponent {...props} />;
   }
diff --git a/app/javascript/wardrobe-2020/WardrobePage/OutfitControls.js b/app/javascript/wardrobe-2020/WardrobePage/OutfitControls.js
index a9c69697..b931c400 100644
--- a/app/javascript/wardrobe-2020/WardrobePage/OutfitControls.js
+++ b/app/javascript/wardrobe-2020/WardrobePage/OutfitControls.js
@@ -33,7 +33,6 @@ import {
   SettingsIcon,
 } from "@chakra-ui/icons";
 import { MdPause, MdPlayArrow } from "react-icons/md";
-import Link from "next/link";
 
 import { getBestImageUrlForLayer } from "../components/OutfitPreview";
 import HTML5Badge, { layerUsesHTML5 } from "../components/HTML5Badge";
@@ -320,15 +319,14 @@ function BackButton({ outfitState }) {
     outfitState.creator && outfitState.creator.id === currentUser.id;
 
   return (
-    <Link href={outfitBelongsToCurrentUser ? "/your-outfits" : "/"} passHref>
-      <ControlButton
-        as="a"
-        icon={<ArrowBackIcon />}
-        aria-label="Leave this outfit"
-        d="inline-flex" // Not sure why <a> requires this to style right! ^^`
-        data-test-id="wardrobe-nav-back-button"
-      />
-    </Link>
+    <ControlButton
+      as="a"
+      href={outfitBelongsToCurrentUser ? "/your-outfits" : "/"}
+      icon={<ArrowBackIcon />}
+      aria-label="Leave this outfit"
+      d="inline-flex" // Not sure why <a> requires this to style right! ^^`
+      data-test-id="wardrobe-nav-back-button"
+    />
   );
 }
 
diff --git a/app/javascript/wardrobe-2020/components/ItemCard.js b/app/javascript/wardrobe-2020/components/ItemCard.js
index b87237ec..583168e2 100644
--- a/app/javascript/wardrobe-2020/components/ItemCard.js
+++ b/app/javascript/wardrobe-2020/components/ItemCard.js
@@ -17,7 +17,6 @@ import {
   StarIcon,
 } from "@chakra-ui/icons";
 import { HiSparkles } from "react-icons/hi";
-import Link from "next/link";
 
 import SquareItemCard from "./SquareItemCard";
 import { safeImageUrl, useCommonStyles } from "../util";
@@ -31,27 +30,26 @@ function ItemCard({ item, badges, variant = "list", ...props }) {
       return <SquareItemCard item={item} {...props} />;
     case "list":
       return (
-        <Link href={`/items/${item.id}`} passHref>
-          <Box
-            as="a"
-            display="block"
-            p="2"
-            boxShadow="lg"
-            borderRadius="lg"
-            background={brightBackground}
-            transition="all 0.2s"
-            className="item-card"
-            width="100%"
-            minWidth="0"
-            {...props}
-          >
-            <ItemCardContent
-              item={item}
-              badges={badges}
-              focusSelector=".item-card:hover &, .item-card:focus &"
-            />
-          </Box>
-        </Link>
+        <Box
+          as="a"
+          href={`/items/${item.id}`}
+          display="block"
+          p="2"
+          boxShadow="lg"
+          borderRadius="lg"
+          background={brightBackground}
+          transition="all 0.2s"
+          className="item-card"
+          width="100%"
+          minWidth="0"
+          {...props}
+        >
+          <ItemCardContent
+            item={item}
+            badges={badges}
+            focusSelector=".item-card:hover &, .item-card:focus &"
+          />
+        </Box>
       );
     default:
       throw new Error(`Unexpected ItemCard variant: ${variant}`);
diff --git a/app/javascript/wardrobe-2020/components/PaginationToolbar.js b/app/javascript/wardrobe-2020/components/PaginationToolbar.js
index 2ba0b47a..bf600b45 100644
--- a/app/javascript/wardrobe-2020/components/PaginationToolbar.js
+++ b/app/javascript/wardrobe-2020/components/PaginationToolbar.js
@@ -1,6 +1,5 @@
 import React from "react";
 import { Box, Button, Flex, Select } from "@chakra-ui/react";
-import Link from "next/link";
 import { useRouter } from "next/router";
 
 function PaginationToolbar({
@@ -109,11 +108,7 @@ export function useRouterPagination(totalCount, numPerPage) {
 
 function LinkOrButton({ href, ...props }) {
   if (href != null) {
-    return (
-      <Link href={href} passHref>
-        <Button as="a" {...props} />
-      </Link>
-    );
+    return <Button as="a" href={href} {...props} />;
   } else {
     return <Button {...props} />;
   }
diff --git a/app/javascript/wardrobe-2020/components/SquareItemCard.js b/app/javascript/wardrobe-2020/components/SquareItemCard.js
index 1ed643a9..f4caf56b 100644
--- a/app/javascript/wardrobe-2020/components/SquareItemCard.js
+++ b/app/javascript/wardrobe-2020/components/SquareItemCard.js
@@ -8,7 +8,6 @@ import {
   useToken,
 } from "@chakra-ui/react";
 import { ClassNames } from "@emotion/react";
-import Link from "next/link";
 
 import { safeImageUrl, useCommonStyles } from "../util";
 import { CheckIcon, CloseIcon, StarIcon } from "@chakra-ui/icons";
@@ -27,10 +26,8 @@ function SquareItemCard({
 
   const tradeMatchOwnShadowColor = useColorModeValue("green.500", "green.200");
   const tradeMatchWantShadowColor = useColorModeValue("blue.400", "blue.200");
-  const [
-    tradeMatchOwnShadowColorValue,
-    tradeMatchWantShadowColorValue,
-  ] = useToken("colors", [tradeMatchOwnShadowColor, tradeMatchWantShadowColor]);
+  const [tradeMatchOwnShadowColorValue, tradeMatchWantShadowColorValue] =
+    useToken("colors", [tradeMatchOwnShadowColor, tradeMatchWantShadowColor]);
 
   // When this is a trade match, give it an extra colorful shadow highlight so
   // it stands out! (They'll generally be sorted to the front anyway, but this
@@ -58,41 +55,40 @@ function SquareItemCard({
           `}
           role="group"
         >
-          <Link href={`/items/${item.id}`} passHref>
-            <Box
-              as="a"
-              className={css`
-                border-radius: ${mdRadiusValue};
-                transition: all 0.2s;
-                &:hover,
-                &:focus {
-                  transform: scale(1.05);
-                }
-                &:focus {
-                  box-shadow: ${outlineShadowValue};
-                  outline: none;
-                }
-              `}
-              {...props}
-            >
-              <SquareItemCardLayout
-                name={item.name}
-                thumbnailImage={
-                  <ItemThumbnail
-                    item={item}
-                    tradeMatchingMode={tradeMatchingMode}
-                  />
-                }
-                removeButton={
-                  showRemoveButton ? (
-                    <SquareItemCardRemoveButton onClick={onRemove} />
-                  ) : null
-                }
-                boxShadow={tradeMatchShadow}
-                footer={footer}
-              />
-            </Box>
-          </Link>
+          <Box
+            as="a"
+            href={`/items/${item.id}`}
+            className={css`
+              border-radius: ${mdRadiusValue};
+              transition: all 0.2s;
+              &:hover,
+              &:focus {
+                transform: scale(1.05);
+              }
+              &:focus {
+                box-shadow: ${outlineShadowValue};
+                outline: none;
+              }
+            `}
+            {...props}
+          >
+            <SquareItemCardLayout
+              name={item.name}
+              thumbnailImage={
+                <ItemThumbnail
+                  item={item}
+                  tradeMatchingMode={tradeMatchingMode}
+                />
+              }
+              removeButton={
+                showRemoveButton ? (
+                  <SquareItemCardRemoveButton onClick={onRemove} />
+                ) : null
+              }
+              boxShadow={tradeMatchShadow}
+              footer={footer}
+            />
+          </Box>
           {showRemoveButton && (
             <div
               className={css`
diff --git a/package.json b/package.json
index 5b2b8124..13a758e2 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "react-autosuggest": "^10.0.2",
     "react-dom": "^17.0.1",
     "react-icons": "^4.2.0",
+    "react-router-dom": "^6.15.0",
     "react-transition-group": "^4.3.0",
     "tweenjs": "^1.0.2"
   },
diff --git a/yarn.lock b/yarn.lock
index d17fb4ba..52c93b31 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -929,6 +929,11 @@
     prop-types "^15.7.2"
     tslib "^2.1.0"
 
+"@remix-run/router@1.8.0":
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.8.0.tgz#e848d2f669f601544df15ce2a313955e4bf0bafc"
+  integrity sha512-mrfKqIHnSZRyIzBcanNJmVQELTnX+qagEDlcKO90RgRBVOZGSGvZKeDihTRfWcqoDn5N/NkUcwWTccnpN18Tfg==
+
 "@sentry/browser@5.30.0":
   version "5.30.0"
   resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-5.30.0.tgz#c28f49d551db3172080caef9f18791a7fd39e3b3"
@@ -1536,6 +1541,21 @@ react-remove-scroll@2.4.1:
     use-callback-ref "^1.2.3"
     use-sidecar "^1.0.1"
 
+react-router-dom@^6.15.0:
+  version "6.15.0"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.15.0.tgz#6da7db61e56797266fbbef0d5e324d6ac443ee40"
+  integrity sha512-aR42t0fs7brintwBGAv2+mGlCtgtFQeOzK0BM1/OiqEzRejOZtpMZepvgkscpMUnKb8YO84G7s3LsHnnDNonbQ==
+  dependencies:
+    "@remix-run/router" "1.8.0"
+    react-router "6.15.0"
+
+react-router@6.15.0:
+  version "6.15.0"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.15.0.tgz#bf2cb5a4a7ed57f074d4ea88db0d95033f39cac8"
+  integrity sha512-NIytlzvzLwJkCQj2HLefmeakxxWHWAP+02EGqWEZy+DgfHHKQMUoBBjUQLOtFInBMhWtb3hiUy6MfFgwLjXhqg==
+  dependencies:
+    "@remix-run/router" "1.8.0"
+
 react-style-singleton@^2.1.0, react-style-singleton@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4"