Add link to Item Getting Guide from outfit editor (behind secret link)
You can now go to `/outfits/new?features=get-these-items` to start seeing the "Get These Items!" button in the outfit editor! I haven't tested it a ton yet, but yeah here it is!
This commit is contained in:
parent
671e0becb6
commit
f84e340899
1 changed files with 51 additions and 1 deletions
|
@ -31,12 +31,20 @@ import {
|
||||||
CheckIcon,
|
CheckIcon,
|
||||||
DeleteIcon,
|
DeleteIcon,
|
||||||
EditIcon,
|
EditIcon,
|
||||||
|
ExternalLinkIcon,
|
||||||
QuestionIcon,
|
QuestionIcon,
|
||||||
WarningTwoIcon,
|
WarningTwoIcon,
|
||||||
} from "@chakra-ui/icons";
|
} from "@chakra-ui/icons";
|
||||||
import { CSSTransition, TransitionGroup } from "react-transition-group";
|
import { CSSTransition, TransitionGroup } from "react-transition-group";
|
||||||
|
import { useSearchParams } from "react-router-dom";
|
||||||
|
|
||||||
import { Delay, ErrorMessage, Heading1, Heading2 } from "../util";
|
import {
|
||||||
|
Delay,
|
||||||
|
ErrorMessage,
|
||||||
|
Heading1,
|
||||||
|
Heading2,
|
||||||
|
useLocalStorage,
|
||||||
|
} from "../util";
|
||||||
import Item, { ItemListContainer, ItemListSkeleton } from "./Item";
|
import Item, { ItemListContainer, ItemListSkeleton } from "./Item";
|
||||||
import { BiRename } from "react-icons/bi";
|
import { BiRename } from "react-icons/bi";
|
||||||
import { IoCloudUploadOutline } from "react-icons/io5";
|
import { IoCloudUploadOutline } from "react-icons/io5";
|
||||||
|
@ -270,6 +278,45 @@ function ItemZoneGroupSkeleton({ itemCount }) {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* GetTheseItemsButton shows the "Get these items!" button, to link to the
|
||||||
|
* Item Getting Guide page for the items in this outfit. If there are no items
|
||||||
|
* being worn, this is disabled.
|
||||||
|
*/
|
||||||
|
function GetTheseItemsButton({ outfitState }) {
|
||||||
|
const [searchParams] = useSearchParams();
|
||||||
|
const [isVisible, setIsVisible] = useLocalStorage("DTIShowGetTheseItems");
|
||||||
|
|
||||||
|
// Enable this feature by visiting `/outfits/new?features=get-these-items`.
|
||||||
|
React.useEffect(() => {
|
||||||
|
const features = searchParams.get("features") ?? "";
|
||||||
|
if (features.split(",").includes("get-these-items")) {
|
||||||
|
setIsVisible(true);
|
||||||
|
}
|
||||||
|
}, [searchParams, setIsVisible]);
|
||||||
|
|
||||||
|
const itemIds = [...outfitState.wornItemIds].sort();
|
||||||
|
const targetUrl = `/items/sources/${itemIds.join(",")}`;
|
||||||
|
const isDisabled = itemIds.length === 0;
|
||||||
|
|
||||||
|
if (!isVisible) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
as={isDisabled ? "button" : "a"}
|
||||||
|
href={isDisabled ? undefined : targetUrl}
|
||||||
|
target={isDisabled ? undefined : "_blank"}
|
||||||
|
colorScheme="purple"
|
||||||
|
rightIcon={<ExternalLinkIcon />}
|
||||||
|
isDisabled={isDisabled}
|
||||||
|
>
|
||||||
|
Get these items!
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* OutfitSavingIndicator shows a Save button, or the "Saved" or "Saving" state,
|
* OutfitSavingIndicator shows a Save button, or the "Saved" or "Saving" state,
|
||||||
* if the user can save this outfit. If not, this is empty!
|
* if the user can save this outfit. If not, this is empty!
|
||||||
|
@ -403,6 +450,9 @@ function OutfitHeading({ outfitState, outfitSaving, dispatchToOutfit }) {
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
<Box width="4" flex="1 0 auto" />
|
<Box width="4" flex="1 0 auto" />
|
||||||
|
<Box flex="0 0 auto">
|
||||||
|
<GetTheseItemsButton outfitState={outfitState} />
|
||||||
|
</Box>
|
||||||
<Box flex="0 0 auto">
|
<Box flex="0 0 auto">
|
||||||
<OutfitSavingIndicator outfitSaving={outfitSaving} />
|
<OutfitSavingIndicator outfitSaving={outfitSaving} />
|
||||||
</Box>
|
</Box>
|
||||||
|
|
Loading…
Reference in a new issue