Skip to content

Commit

Permalink
fix: Prevent render error when groupBy is undefined (#173)
Browse files Browse the repository at this point in the history
  • Loading branch information
@evadecker
evadecker authored Nov 10, 2024
1 parent 9a7282a commit 301c273
Show file tree
Hide file tree
Showing 3 changed files with 75 additions and 67 deletions.
5 changes: 5 additions & 0 deletions .changeset/wise-pianos-own.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"namesake": patch
---

Fix bug that would prevent the quests sidebar from rendering if the same group by method was selected and the localStorage result set to undefined
4 changes: 2 additions & 2 deletions src/components/ProgressBar/ProgressBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,12 @@ export function ProgressBar({ label, ...props }: ProgressBarProps) {
{...props}
className={composeTailwindRenderProps(
props.className,
"flex flex-col flex-1 gap-1",
"flex flex-col flex-1 gap-1.5",
)}
>
{({ percentage, valueText, isIndeterminate }) => (
<>
<div className="flex justify-between gap-2">
<div className="flex justify-between gap-2 -mt-0.5">
<Label className="text-gray-normal">{label}</Label>
<span className="text-sm text-gray-dim tabular-nums">
{valueText}
Expand Down
133 changes: 68 additions & 65 deletions src/routes/_authenticated/_home.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,11 +36,11 @@ export const Route = createFileRoute("/_authenticated/_home")({

function IndexRoute() {
const [groupBy, setGroupBy] = useState<Selection>(
new Set([localStorage.getItem("groupQuestsBy") ?? "dateAdded"]),
new Set([localStorage.getItem("groupQuestsBy") ?? "category"]),
);

useEffect(() => {
const selected = [...groupBy][0] as GroupQuestsBy;
const selected = ([...groupBy][0] as GroupQuestsBy) ?? "category";
localStorage.setItem("groupQuestsBy", selected);
}, [groupBy]);

Expand All @@ -49,7 +49,7 @@ function IndexRoute() {
const completedQuests = useQuery(api.userQuests.getCompletedQuestCount);

// Get the selected grouping method
const groupByValue = [...groupBy][0] as GroupQuestsBy;
const groupByValue = ([...groupBy][0] as GroupQuestsBy) ?? "category";

// Use the appropriate query based on grouping selection
const questsByCategory = useQuery(api.userQuests.getUserQuestsByCategory);
Expand Down Expand Up @@ -80,7 +80,7 @@ function IndexRoute() {
);

return (
<div className="flex flex-col w-80 border-r border-gray-dim overflow-y-auto">
<div className="flex flex-col w-80 border-r border-gray-dim">
<div className="flex items-center py-3 px-4 h-16 border-b border-gray-dim">
<ProgressBar
label="Quests complete"
Expand All @@ -96,10 +96,11 @@ function IndexRoute() {
selectionMode="single"
selectedKeys={groupBy}
onSelectionChange={setGroupBy}
disallowEmptySelection
>
<MenuSection title="Group by">
<MenuItem id="dateAdded">Date added</MenuItem>
<MenuItem id="category">Category</MenuItem>
<MenuItem id="dateAdded">Date added</MenuItem>
<MenuItem id="status">Status</MenuItem>
</MenuSection>
</Menu>
Expand All @@ -117,69 +118,71 @@ function IndexRoute() {
<Tooltip>Add quests</Tooltip>
</TooltipTrigger>
</div>
{Object.entries(groupedQuests)
.sort(([groupA], [groupB]) => {
const orderArray =
groupByValue === "category"
? CATEGORY_ORDER
: groupByValue === "status"
? STATUS_ORDER
: DATE_ADDED_ORDER;
<div className="flex-1 overflow-y-auto">
{Object.entries(groupedQuests)
.sort(([groupA], [groupB]) => {
const orderArray =
groupByValue === "category"
? CATEGORY_ORDER
: groupByValue === "status"
? STATUS_ORDER
: DATE_ADDED_ORDER;

return (
orderArray.indexOf(groupA as any) -
orderArray.indexOf(groupB as any)
);
})
.map(([group, quests]) => {
if (quests.length === 0) return null;
const { label, icon: Icon } =
groupByValue === "category"
? CATEGORIES[group as keyof typeof CATEGORIES]
: groupByValue === "status"
? STATUS[group as keyof typeof STATUS]
: DATE_ADDED[group as keyof typeof DATE_ADDED];
return (
orderArray.indexOf(groupA as any) -
orderArray.indexOf(groupB as any)
);
})
.map(([group, quests]) => {
if (quests.length === 0) return null;
const { label, icon: Icon } =
groupByValue === "category"
? CATEGORIES[group as keyof typeof CATEGORIES]
: groupByValue === "status"
? STATUS[group as keyof typeof STATUS]
: DATE_ADDED[group as keyof typeof DATE_ADDED];

return (
<div key={label} className="mt-2">
<div className="px-4 py-1 text-xs font-semibold text-gray-9 dark:text-graydark-9 flex gap-1.5 items-center">
{label}
</div>
<GridList
aria-label={`${group} quests`}
className="border-none"
>
{quests.map((quest) => (
<GridListItem
textValue={quest.title}
key={quest._id}
href={{
to: "/quests/$questId",
params: { questId: quest.questId },
}}
>
<div className="flex items-center justify-between gap-2 w-full">
<div
className={twMerge(
"flex items-center gap-2",
quest.completionTime && "opacity-40",
)}
>
{Icon ? (
<Icon size={20} className="text-gray-dim" />
) : null}
<p>{quest.title}</p>
{quest.jurisdiction && (
<Badge>{quest.jurisdiction}</Badge>
)}
return (
<div key={label} className="mt-2">
<div className="px-4 py-1 text-xs font-semibold text-gray-9 dark:text-graydark-9 flex gap-1.5 items-center">
{label}
</div>
<GridList
aria-label={`${group} quests`}
className="border-none"
>
{quests.map((quest) => (
<GridListItem
textValue={quest.title}
key={quest._id}
href={{
to: "/quests/$questId",
params: { questId: quest.questId },
}}
>
<div className="flex items-center justify-between gap-2 w-full">
<div
className={twMerge(
"flex items-center gap-2",
quest.completionTime && "opacity-40",
)}
>
{Icon ? (
<Icon size={20} className="text-gray-dim" />
) : null}
<p>{quest.title}</p>
{quest.jurisdiction && (
<Badge>{quest.jurisdiction}</Badge>
)}
</div>
</div>
</div>
</GridListItem>
))}
</GridList>
</div>
);
})}
</GridListItem>
))}
</GridList>
</div>
);
})}
</div>
</div>
);
};
Expand Down

0 comments on commit 301c273

Please sign in to comment.