61 lines
2.0 KiB
TypeScript
61 lines
2.0 KiB
TypeScript
import { FormattedMessage } from "react-intl";
|
|
import StepHeader from "./step-header";
|
|
import { DefaultButton } from "@/element/buttons";
|
|
import { DefaultProvider } from "@/providers";
|
|
import { useEffect, useState } from "react";
|
|
import { useLocation, useNavigate } from "react-router-dom";
|
|
import CategoryInput from "@/element/stream-editor/category-input";
|
|
import { GameInfo } from "@/service/game-database";
|
|
import { extractGameTag, sortStreamTags } from "@/utils";
|
|
import { appendDedupe } from "@snort/shared";
|
|
|
|
export default function DashboardIntroStep2() {
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
const [game, setGame] = useState<GameInfo>();
|
|
const [gameId, setGameId] = useState<string>();
|
|
const [tags, setTags] = useState<Array<string>>([]);
|
|
|
|
useEffect(() => {
|
|
DefaultProvider.info().then(i => {
|
|
const { regularTags, prefixedTags } = sortStreamTags(i.streamInfo?.tags ?? []);
|
|
const { gameInfo, gameId } = extractGameTag(prefixedTags);
|
|
setGame(gameInfo);
|
|
setGameId(gameId);
|
|
setTags(regularTags);
|
|
});
|
|
}, []);
|
|
|
|
return (
|
|
<div className="mx-auto flex flex-col items-center ">
|
|
<StepHeader />
|
|
<div className="flex flex-col gap-4 w-[30rem]">
|
|
<h2 className="text-center">
|
|
<FormattedMessage defaultMessage="Choose a category" />
|
|
</h2>
|
|
<CategoryInput
|
|
tags={tags}
|
|
game={game}
|
|
gameId={gameId}
|
|
setTags={setTags}
|
|
setGame={setGame}
|
|
setGameId={setGameId}
|
|
/>
|
|
<DefaultButton
|
|
onClick={async () => {
|
|
const newState = {
|
|
...location.state,
|
|
tags: appendDedupe(tags, gameId ? [gameId] : undefined),
|
|
};
|
|
await DefaultProvider.updateStream(newState);
|
|
navigate("/dashboard/step-3", {
|
|
state: newState,
|
|
});
|
|
}}>
|
|
<FormattedMessage defaultMessage="Continue" />
|
|
</DefaultButton>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|