Skip to content

Collections Navigation Bug Fix #692

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nguyen-katie wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Collections Navigation Bug Fix #692

Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d6181dd
added updateMenu mutation to edited collections creation
nguyen-katie Mar 21, 2026
efb1894
Merge remote-tracking branch 'origin' into fix-collections-nav
nguyen-katie Mar 25, 2026
c94e4d4
fixed navigation slug to new collection page
nguyen-katie Mar 31, 2026
cfaa9fc
Merge branch 'main' into fix-collections-nav
nguyen-katie Apr 9, 2026
3816a17
return collection slug instead of id
nguyen-katie Apr 17, 2026
413ef98
remove console log
nguyen-katie Apr 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 55 additions & 1 deletion website/src/pages/edited-collections/new.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,23 @@ interface NewEditedCollectionForm {
thumbnail: File | null
Comment thread
nguyen-katie marked this conversation as resolved.
}

interface MenuItemLike {
label: string
path: string
items?: ReadonlyArray<MenuItemLike> | null
}

const toMenuItemInput = (
nodes: ReadonlyArray<MenuItemLike> | null | undefined
): ReadonlyArray<Dailp.MenuItemInput> | null => {
if (!nodes?.length) return null
return nodes.map((n) => ({
label: n.label,
path: n.path,
items: toMenuItemInput(n.items),
}))
}

const NewEditedCollectionPage = () => {
const { user } = useUser()
const [formData, setFormData] = useState<NewEditedCollectionForm>({
Expand All @@ -23,6 +40,10 @@ const NewEditedCollectionPage = () => {
const [isSubmitting, setIsSubmitting] = useState(false)
const [error, setError] = useState<string | null>(null)
const [, addEditedCollection] = Dailp.useAddEditedCollectionMutation()
const [, updateMenu] = Dailp.useUpdateMenuMutation()
const [{ data: menuData }] = Dailp.useMenuBySlugQuery({
variables: { slug: "default-nav" },
})

const handleEditedCollectionSubmit = async (
e: React.FormEvent<HTMLFormElement>
Expand Down Expand Up @@ -60,8 +81,41 @@ const NewEditedCollectionPage = () => {
"Successfully created collection with ID:",
result.data.createEditedCollection
)

const newSlug = result.data.createEditedCollection
const menu = menuData?.menuBySlug
if (menu) {
const updatedItems: MenuItemLike[] = (menu.items ?? []).map(
(item) => {
if (item.label.toLowerCase() === "collections") {
return {
label: item.label,
path: item.path,
items: [
...(item.items ?? []),
{
label: formData.title,
path: `/collections/${newSlug}`,
items: [],
},
],
}
}
return item
}
)

updateMenu({
menu: {
id: menu.id,
name: menu.name,
items: toMenuItemInput(updatedItems),
},
})
}

// Navigate to the new collection or show success message
navigate(`/collections/${result.data.createEditedCollection}`)
navigate(`/collections/${newSlug}`)
} else {
Copy link
Copy Markdown
Collaborator

@alisony755 alisony755 Mar 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After I create a new collection, I get taken to a blank page

Copy link
Copy Markdown
Collaborator

@alisony755 alisony755 Mar 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Based on the logs, it seems like creating the edited collection works, but it breaks when attempting to navigate to the new page (networkError: "TypeError: fetch failed")

Copy link
Copy Markdown
Collaborator

@alisony755 alisony755 Mar 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems like the collections here use the id for the collection page slugs (ex. new collection page slug is .../collections/dc0a8ad1-4901-4c19-88f9-6bd5e3cdd254) whereas use the collections usually use the name (/collections/cwkw).

Copy link
Copy Markdown
Collaborator

@alisony755 alisony755 Mar 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You might want to add a query to return the slug instead of the id or add a new query to fetch the slug

Copy link
Copy Markdown
Collaborator Author

@nguyen-katie nguyen-katie Mar 31, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The slug returning the id and navigating to what seems to be .../collections/dc0a8ad1-4901-4c19-88f9-6bd5e3cdd254 was there originally & was working perfectly fine before I made any changes. I reverted it back to the original--with the slug still returning the id--but I am happy to take a look at making the query return the slug instead of the ID if required @GracefulLemming

Copy link
Copy Markdown
Collaborator

@alisony755 alisony755 Mar 31, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That sounds good! I was just wondering if that was causing the issue

console.log("No data returned from mutation")
setError("No data returned from mutation")
Expand Down
Loading