-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
6 changed files
with
369 additions
and
53 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "namesake": minor | ||
| --- | ||
|
|
||
| Add quest detail routes, add the ability to mark quests complete/incomplete, and support adding new quests from the global quest list |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,56 +1,9 @@ | ||
| import { RiSignpostLine } from "@remixicon/react"; | ||
| import { createFileRoute } from "@tanstack/react-router"; | ||
| import { Authenticated, Unauthenticated, useQuery } from "convex/react"; | ||
| import { api } from "../../convex/_generated/api"; | ||
| import { | ||
| Badge, | ||
| Container, | ||
| Empty, | ||
| GridList, | ||
| GridListItem, | ||
| PageHeader, | ||
| } from "../components"; | ||
| import { createFileRoute, redirect } from "@tanstack/react-router"; | ||
|
|
||
| export const Route = createFileRoute("/")({ | ||
| component: IndexRoute, | ||
| beforeLoad: () => { | ||
| throw redirect({ | ||
| to: "/quests", | ||
| }); | ||
| }, | ||
| }); | ||
|
|
||
| function IndexRoute() { | ||
| const MyQuests = () => { | ||
| const myQuests = useQuery(api.usersQuests.getQuestsForCurrentUser); | ||
|
|
||
| if (myQuests === undefined) return; | ||
|
|
||
| if (myQuests === null || myQuests.length === 0) | ||
| return <Empty title="No quests" icon={RiSignpostLine} />; | ||
|
|
||
| return ( | ||
| <GridList aria-label="My quests"> | ||
| {myQuests.map((quest) => { | ||
| if (quest === null) return null; | ||
|
|
||
| return ( | ||
| <GridListItem textValue={quest.title} key={quest._id}> | ||
| <div className="flex items-baseline gap-2"> | ||
| <p className="font-bold text-lg">{quest.title}</p> | ||
| {quest.jurisdiction && <Badge>{quest.jurisdiction}</Badge>} | ||
| </div> | ||
| </GridListItem> | ||
| ); | ||
| })} | ||
| </GridList> | ||
| ); | ||
| }; | ||
|
|
||
| return ( | ||
| <Container> | ||
| <Authenticated> | ||
| <PageHeader title="My Quests" /> | ||
| <MyQuests /> | ||
| </Authenticated> | ||
| <Unauthenticated> | ||
| <h1>Please log in</h1> | ||
| </Unauthenticated> | ||
| </Container> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| import { RiMoreLine } from "@remixicon/react"; | ||
| import { createFileRoute } from "@tanstack/react-router"; | ||
| import { useMutation, useQuery } from "convex/react"; | ||
| import Markdown from "react-markdown"; | ||
| import { api } from "../../../convex/_generated/api"; | ||
| import type { Id } from "../../../convex/_generated/dataModel"; | ||
| import { | ||
| Badge, | ||
| Button, | ||
| Menu, | ||
| MenuItem, | ||
| MenuTrigger, | ||
| PageHeader, | ||
| } from "../../components"; | ||
|
|
||
| export const Route = createFileRoute("/quests/$questId")({ | ||
| component: QuestDetailRoute, | ||
| }); | ||
|
|
||
| function QuestDetailRoute() { | ||
| const { questId } = Route.useParams(); | ||
| // TODO: Opportunity to combine the `quest` and `userQuest` queries | ||
| const quest = useQuery(api.quests.getQuest, { | ||
| questId: questId as Id<"quests">, | ||
| }); | ||
| const userQuest = useQuery(api.usersQuests.getUserQuestByQuestId, { | ||
| questId: questId as Id<"quests">, | ||
| }); | ||
| const markComplete = useMutation(api.usersQuests.markComplete); | ||
| const markIncomplete = useMutation(api.usersQuests.markIncomplete); | ||
|
|
||
| const handleMarkComplete = (questId: Id<"quests">) => | ||
| markComplete({ questId }); | ||
| const handleMarkIncomplete = (questId: Id<"quests">) => | ||
| markIncomplete({ questId }); | ||
|
|
||
| if (quest === undefined || userQuest === undefined) return; | ||
| if (quest === null || userQuest === null) return "Quest not found"; | ||
|
|
||
| return ( | ||
| <main> | ||
| <PageHeader | ||
| title={quest.title} | ||
| badge={ | ||
| <div className="flex gap-1"> | ||
| <Badge>{quest.jurisdiction}</Badge> | ||
| {userQuest?.completionTime ? ( | ||
| <Badge variant="success">Complete</Badge> | ||
| ) : ( | ||
| <Badge variant="info">In progress</Badge> | ||
| )} | ||
| </div> | ||
| } | ||
| > | ||
| <MenuTrigger> | ||
| <Button aria-label="Quest settings" variant="icon"> | ||
| <RiMoreLine /> | ||
| </Button> | ||
| <Menu> | ||
| {!userQuest.completionTime && ( | ||
| <MenuItem onAction={() => handleMarkComplete(quest._id)}> | ||
| Mark complete | ||
| </MenuItem> | ||
| )} | ||
| {userQuest.completionTime && ( | ||
| <MenuItem onAction={() => handleMarkIncomplete(quest._id)}> | ||
| Mark as in progress | ||
| </MenuItem> | ||
| )} | ||
| </Menu> | ||
| </MenuTrigger> | ||
| </PageHeader> | ||
| {quest.steps ? ( | ||
| <ol className="flex flex-col gap-4"> | ||
| {quest.steps.map((step, i) => ( | ||
| <li key={`${quest.title}-step-${i}`}> | ||
| <h2>{step.title}</h2> | ||
| <Markdown>{step.body}</Markdown> | ||
| </li> | ||
| ))} | ||
| </ol> | ||
| ) : ( | ||
| <p>This quest has no steps yet.</p> | ||
| )} | ||
| </main> | ||
| ); | ||
| } |
Oops, something went wrong.