forked from OpenNeo/impress
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.
This commit is contained in:
parent
8765d6c3b0
commit
6a59fa9f02
8 changed files with 111 additions and 114 deletions
|
|
@ -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 (
|
||||
<Link href={href} passHref>
|
||||
<Button as="a" {...props} />
|
||||
</Link>
|
||||
);
|
||||
return <Button as="a" href={href} {...props} />;
|
||||
} else {
|
||||
return <Button {...props} />;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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} />;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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}`);
|
||||
|
|
|
|||
|
|
@ -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} />;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,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`
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
},
|
||||
|
|
|
|||
20
yarn.lock
20
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"
|
||||
|
|
|
|||
Loading…
Reference in a new issue