OpenNeo/impress
OpenNeo/impress
1
0
Fork 1
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 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} />;
}

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

@ -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} />;
}

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

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

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

@ -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}`);

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

@ -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} />;
}

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

@ -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`

1
package.json
View file

@ -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
View file

@ -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"