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

@@ -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,9 +711,9 @@ function ItemPageTradeLinks({ itemId, isEmbedded }) {
 
 function ItemPageTradeLink({ href, count, label, colorScheme, isEmbedded }) {
   return (
-    <Link href={href} passHref>
     <Button
       as="a"
+      href={href}
       target={isEmbedded ? "_blank" : undefined}
       size="xs"
       variant="outline"
@@ -736,7 +735,6 @@ function ItemPageTradeLink({ href, count, label, colorScheme, isEmbedded }) {
         </Box>
       </Box>
     </Button>
-    </Link>
   );
 }
 
@@ -1181,11 +1179,7 @@ function CustomizeMoreButton({ speciesId, colorId, pose, itemId, isDisabled }) {
 
 function LinkOrButton({ href, ...props }) {
   if (href != null) {
-    return (
+    return <Button as="a" href={href} {...props} />;
-      <Link href={href} passHref>
-        <Button as="a" {...props} />
-      </Link>
-    );
   } else {
     return <Button {...props} />;
   }

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 (
+    return <ButtonComponent as="a" href={href} {...props} />;
-      <Link href={href} passHref>
-        <ButtonComponent as="a" {...props} />
-      </Link>
-    );
   } else {
     return <ButtonComponent {...props} />;
   }

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"
+      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"
     />
-    </Link>
   );
 }
 

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,9 +30,9 @@ function ItemCard({ item, badges, variant = "list", ...props }) {
       return <SquareItemCard item={item} {...props} />;
     case "list":
       return (
-        <Link href={`/items/${item.id}`} passHref>
         <Box
           as="a"
+          href={`/items/${item.id}`}
           display="block"
           p="2"
           boxShadow="lg"
@@ -51,7 +50,6 @@ function ItemCard({ item, badges, variant = "list", ...props }) {
             focusSelector=".item-card:hover &, .item-card:focus &"
           />
         </Box>
-        </Link>
       );
     default:
       throw new Error(`Unexpected ItemCard variant: ${variant}`);

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 (
+    return <Button as="a" href={href} {...props} />;
-      <Link href={href} passHref>
-        <Button as="a" {...props} />
-      </Link>
-    );
   } else {
     return <Button {...props} />;
   }

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 [
+  const [tradeMatchOwnShadowColorValue, tradeMatchWantShadowColorValue] =
-    tradeMatchOwnShadowColorValue,
+    useToken("colors", [tradeMatchOwnShadowColor, tradeMatchWantShadowColor]);
-    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,9 +55,9 @@ function SquareItemCard({
           `}
           role="group"
         >
-          <Link href={`/items/${item.id}`} passHref>
           <Box
             as="a"
+            href={`/items/${item.id}`}
             className={css`
               border-radius: ${mdRadiusValue};
               transition: all 0.2s;
@@ -92,7 +89,6 @@ function SquareItemCard({
               footer={footer}
             />
           </Box>
-          </Link>
           {showRemoveButton && (
             <div
               className={css`

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"
   },

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"