dice/impress
1
0
Fork 0
forked from OpenNeo/impress
Code Pull requests Activity

Replace next/link with physical links

Browse source 
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:
Emi Matchu 2023-08-10 16:31:39 -07:00
parent 8765d6c3b0
commit 6a59fa9f02
8 changed files with 111 additions and 114 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
app/javascript/wardrobe-2020/ItemPage.js
View file

@ -33,7 +33,6 @@ import {
import { MdPause, MdPlayArrow } from "react-icons/md"; import { MdPause, MdPlayArrow } from "react-icons/md";
import gql from "graphql-tag"; import gql from "graphql-tag";
import { useQuery, useMutation } from "@apollo/client"; import { useQuery, useMutation } from "@apollo/client";
import Link from "next/link";
import ItemPageLayout, { SubtleSkeleton } from "./ItemPageLayout"; import ItemPageLayout, { SubtleSkeleton } from "./ItemPageLayout";
import { import {
@ -712,31 +711,30 @@ function ItemPageTradeLinks({ itemId, isEmbedded }) {
function ItemPageTradeLink({ href, count, label, colorScheme, isEmbedded }) { function ItemPageTradeLink({ href, count, label, colorScheme, isEmbedded }) {
return ( return (
<Link href={href} passHref> <Button
<Button as="a"
as="a" href={href}
target={isEmbedded ? "_blank" : undefined} target={isEmbedded ? "_blank" : undefined}
size="xs" size="xs"
variant="outline" variant="outline"
colorScheme={colorScheme} colorScheme={colorScheme}
borderRadius="full" borderRadius="full"
paddingRight="1" paddingRight="1"
> >
<Box display="grid" gridTemplateAreas="single-area"> <Box display="grid" gridTemplateAreas="single-area">
<Box gridArea="single-area" display="flex" justifyContent="center"> <Box gridArea="single-area" display="flex" justifyContent="center">
{count} {label} <ChevronRightIcon minHeight="1.2em" /> {count} {label} <ChevronRightIcon minHeight="1.2em" />
</Box>
<Box
gridArea="single-area"
display="flex"
justifyContent="center"
visibility="hidden"
>
888 offering <ChevronRightIcon minHeight="1.2em" />
</Box>
</Box> </Box>
</Button> <Box
</Link> 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 }) { function LinkOrButton({ href, ...props }) {
if (href != null) { if (href != null) {
return ( return <Button as="a" href={href} {...props} />;
<Link href={href} passHref>
<Button as="a" {...props} />
</Link>
);
} else { } else {
return <Button {...props} />; return <Button {...props} />;
} }

7
app/javascript/wardrobe-2020/WardrobePage/Item.js
View file

@ -10,7 +10,6 @@ import {
useTheme, useTheme,
} from "@chakra-ui/react"; } from "@chakra-ui/react";
import { EditIcon, DeleteIcon, InfoIcon } from "@chakra-ui/icons"; import { EditIcon, DeleteIcon, InfoIcon } from "@chakra-ui/icons";
import Link from "next/link";
import { loadable } from "../util"; import { loadable } from "../util";
import { import {
@ -289,11 +288,7 @@ function ItemActionButton({ icon, label, to, onClick }) {
function LinkOrButton({ href, component = Button, ...props }) { function LinkOrButton({ href, component = Button, ...props }) {
const ButtonComponent = component; const ButtonComponent = component;
if (href != null) { if (href != null) {
return ( return <ButtonComponent as="a" href={href} {...props} />;
<Link href={href} passHref>
<ButtonComponent as="a" {...props} />
</Link>
);
} else { } else {
return <ButtonComponent {...props} />; return <ButtonComponent {...props} />;
} }

18
app/javascript/wardrobe-2020/WardrobePage/OutfitControls.js
View file

@ -33,7 +33,6 @@ import {
SettingsIcon, SettingsIcon,
} from "@chakra-ui/icons"; } from "@chakra-ui/icons";
import { MdPause, MdPlayArrow } from "react-icons/md"; import { MdPause, MdPlayArrow } from "react-icons/md";
import Link from "next/link";
import { getBestImageUrlForLayer } from "../components/OutfitPreview"; import { getBestImageUrlForLayer } from "../components/OutfitPreview";
import HTML5Badge, { layerUsesHTML5 } from "../components/HTML5Badge"; import HTML5Badge, { layerUsesHTML5 } from "../components/HTML5Badge";
@ -320,15 +319,14 @@ function BackButton({ outfitState }) {
outfitState.creator && outfitState.creator.id === currentUser.id; outfitState.creator && outfitState.creator.id === currentUser.id;
return ( return (
<Link href={outfitBelongsToCurrentUser ? "/your-outfits" : "/"} passHref> <ControlButton
<ControlButton as="a"
as="a" href={outfitBelongsToCurrentUser ? "/your-outfits" : "/"}
icon={<ArrowBackIcon />} icon={<ArrowBackIcon />}
aria-label="Leave this outfit" aria-label="Leave this outfit"
d="inline-flex" // Not sure why <a> requires this to style right! ^^` d="inline-flex" // Not sure why <a> requires this to style right! ^^`
data-test-id="wardrobe-nav-back-button" data-test-id="wardrobe-nav-back-button"
/> />
</Link>
); );
} }

42
app/javascript/wardrobe-2020/components/ItemCard.js
View file

@ -17,7 +17,6 @@ import {
StarIcon, StarIcon,
} from "@chakra-ui/icons"; } from "@chakra-ui/icons";
import { HiSparkles } from "react-icons/hi"; import { HiSparkles } from "react-icons/hi";
import Link from "next/link";
import SquareItemCard from "./SquareItemCard"; import SquareItemCard from "./SquareItemCard";
import { safeImageUrl, useCommonStyles } from "../util"; import { safeImageUrl, useCommonStyles } from "../util";
@ -31,27 +30,26 @@ function ItemCard({ item, badges, variant = "list", ...props }) {
return <SquareItemCard item={item} {...props} />; return <SquareItemCard item={item} {...props} />;
case "list": case "list":
return ( return (
<Link href={`/items/${item.id}`} passHref> <Box
<Box as="a"
as="a" href={`/items/${item.id}`}
display="block" display="block"
p="2" p="2"
boxShadow="lg" boxShadow="lg"
borderRadius="lg" borderRadius="lg"
background={brightBackground} background={brightBackground}
transition="all 0.2s" transition="all 0.2s"
className="item-card" className="item-card"
width="100%" width="100%"
minWidth="0" minWidth="0"
{...props} {...props}
> >
<ItemCardContent <ItemCardContent
item={item} item={item}
badges={badges} badges={badges}
focusSelector=".item-card:hover &, .item-card:focus &" focusSelector=".item-card:hover &, .item-card:focus &"
/> />
</Box> </Box>
</Link>
); );
default: default:
throw new Error(`Unexpected ItemCard variant: ${variant}`); throw new Error(`Unexpected ItemCard variant: ${variant}`);

7
app/javascript/wardrobe-2020/components/PaginationToolbar.js
View file

@ -1,6 +1,5 @@
import React from "react"; import React from "react";
import { Box, Button, Flex, Select } from "@chakra-ui/react"; import { Box, Button, Flex, Select } from "@chakra-ui/react";
import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
function PaginationToolbar({ function PaginationToolbar({
@ -109,11 +108,7 @@ export function useRouterPagination(totalCount, numPerPage) {
function LinkOrButton({ href, ...props }) { function LinkOrButton({ href, ...props }) {
if (href != null) { if (href != null) {
return ( return <Button as="a" href={href} {...props} />;
<Link href={href} passHref>
<Button as="a" {...props} />
</Link>
);
} else { } else {
return <Button {...props} />; return <Button {...props} />;
} }

76
app/javascript/wardrobe-2020/components/SquareItemCard.js
View file

@ -8,7 +8,6 @@ import {
useToken, useToken,
} from "@chakra-ui/react"; } from "@chakra-ui/react";
import { ClassNames } from "@emotion/react"; import { ClassNames } from "@emotion/react";
import Link from "next/link";
import { safeImageUrl, useCommonStyles } from "../util"; import { safeImageUrl, useCommonStyles } from "../util";
import { CheckIcon, CloseIcon, StarIcon } from "@chakra-ui/icons"; import { CheckIcon, CloseIcon, StarIcon } from "@chakra-ui/icons";
@ -27,10 +26,8 @@ function SquareItemCard({
const tradeMatchOwnShadowColor = useColorModeValue("green.500", "green.200"); const tradeMatchOwnShadowColor = useColorModeValue("green.500", "green.200");
const tradeMatchWantShadowColor = useColorModeValue("blue.400", "blue.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 // 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 // it stands out! (They'll generally be sorted to the front anyway, but this
@ -58,41 +55,40 @@ function SquareItemCard({
`} `}
role="group" role="group"
> >
<Link href={`/items/${item.id}`} passHref> <Box
<Box as="a"
as="a" href={`/items/${item.id}`}
className={css` className={css`
border-radius: ${mdRadiusValue}; border-radius: ${mdRadiusValue};
transition: all 0.2s; transition: all 0.2s;
&:hover, &:hover,
&:focus { &:focus {
transform: scale(1.05); transform: scale(1.05);
} }
&:focus { &:focus {
box-shadow: ${outlineShadowValue}; box-shadow: ${outlineShadowValue};
outline: none; outline: none;
} }
`} `}
{...props} {...props}
> >
<SquareItemCardLayout <SquareItemCardLayout
name={item.name} name={item.name}
thumbnailImage={ thumbnailImage={
<ItemThumbnail <ItemThumbnail
item={item} item={item}
tradeMatchingMode={tradeMatchingMode} tradeMatchingMode={tradeMatchingMode}
/> />
} }
removeButton={ removeButton={
showRemoveButton ? ( showRemoveButton ? (
<SquareItemCardRemoveButton onClick={onRemove} /> <SquareItemCardRemoveButton onClick={onRemove} />
) : null ) : null
} }
boxShadow={tradeMatchShadow} boxShadow={tradeMatchShadow}
footer={footer} footer={footer}
/> />
</Box> </Box>
</Link>
{showRemoveButton && ( {showRemoveButton && (
<div <div
className={css` className={css`

1
package.json
View file

@ -20,6 +20,7 @@
"react-autosuggest": "^10.0.2", "react-autosuggest": "^10.0.2",
"react-dom": "^17.0.1", "react-dom": "^17.0.1",
"react-icons": "^4.2.0", "react-icons": "^4.2.0",
"react-router-dom": "^6.15.0",
"react-transition-group": "^4.3.0", "react-transition-group": "^4.3.0",
"tweenjs": "^1.0.2" "tweenjs": "^1.0.2"
}, },

20
yarn.lock
View file

@ -929,6 +929,11 @@
prop-types "^15.7.2" prop-types "^15.7.2"
tslib "^2.1.0" 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": "@sentry/browser@5.30.0":
version "5.30.0" version "5.30.0"
resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-5.30.0.tgz#c28f49d551db3172080caef9f18791a7fd39e3b3" 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-callback-ref "^1.2.3"
use-sidecar "^1.0.1" 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: react-style-singleton@^2.1.0, react-style-singleton@^2.2.1:
version "2.2.1" version "2.2.1"
resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4" resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4"