I'm using nextjs for my frontend, and sanity for my backend. I have a page that shows a list of categories (e.g., sketches, paintings, exhibitions) and each have their own subcategories (e.g., exhibitions -> place a, place b, place c; sketches -> set a, set b, set c, set d). When you select one of those subcategories (e.g., place b), it will open a page with everything in that chosen subcategory.
I want to make it so that if the user clicks a category on one webpage, it will open a new webpage with its specific subcategories (children?).
Here are my schemas for the categories ('category') and subcategories ('set'):
// category.js
export default {
name: 'category',
type: 'document',
title: 'Category',
fields: [
{
name: 'category_name',
type: 'string',
title: 'Category Name'
},
{
name: 'category_image',
type: 'image',
title: 'Category Image'
},
{
name: 'categoryImage_alt',
title: 'Alt',
type: 'string'
},
{
name: 'contained_sets',
type: 'array',
title: 'Contained Sets',
of: [{
type: 'reference',
to: [{type: 'set'}]
}]
}
]
}
// setsSchema.js
export default {
name: 'set',
type: 'document',
title: 'Set',
fields: [
{
name: 'set_name',
type: 'string',
title: 'Set Name',
},
{
name: 'set_images',
type: 'array',
title: 'Set Images',
of: [
{
name: 'image',
type: 'image',
title: 'Image',
options: {
hotspot: true,
},
fields: [
{
name: 'alt',
type: 'string',
title: 'Alternative Text',
options: {
isHighlighted: true
}
},
{
name: 'name',
type: 'string',
title: 'Name',
options: {
isHighlighted: true
}
},
{
name: 'date',
type: 'string',
title: 'Date',
options: {
isHighlighted: true
}
},
{
name: 'size',
type: 'string',
title: 'Size',
options: {
isHighlighted: true
}
},
{
name: 'materials',
type: 'string',
title: 'Materials',
options: {
isHighlighted: true
}
},
]
},
]
},
{
name: 'slug',
title: 'Slug',
type: 'slug',
options: {
source: 'set_name'
}
}
]
}
This is my webpage with the categories:
import React, { useState, useEffect } from 'react';
import { client, urlFor } from '../lib/client';
import { Header, Footer } from '../components';
import Link from 'next/link';
const gallery = () => {
// fetches sanity data
const [categoryData, setCategories] = useState(null);
useEffect(() => {
client.fetch(
`*[_type=="category"]{
categoryImage_alt,
category_image{
asset->{
_id,
url
}
},
category_name,
contained_sets
}`)
.then((data) => setCategories(data))
.catch(err => console.error(err));
}, [] );
return (
<div>
<Header />
<main className="main-gallery">
<div className="title">
<div className="title-line-left"></div>
<h2>categories</h2>
<div className="title-line-right"></div>
</div>
<div className="categories">
<ul className="categories-container">
{categoryData && categoryData.map((category, index) => (
<li>
<Link href="/sets"><img src={urlFor(category.category_image).auto('format').url()} alt={category.categoryImage_alt}/></Link>
</li>
))}
</ul>
</div>
</main>
<Footer />
</div>
)
}
export default gallery
This page is for sets, which currently shows all of the sets/subcategories, and not just the selected categories subcategories. I've tried a couple things but nothing has worked.
import React, { useState, useEffect } from 'react';
import { client, urlFor } from '../lib/client';
import { Header, Footer } from '../components';
const sets = () => {
// fetches sanity data
const [galleryData, setGalleryData] = useState(null);
useEffect(() => {
client.fetch(
`*[_type=="set"]{
set_name,
slug,
set_images,
image{
asset->{
_id,
url
}
},
}`)
.then((data) => setGalleryData(data))
.catch(err => console.error(err));
}, [] );
return (
<div>
<Header />
<main className="main-gallery">
<div className="title">
<div className="title-line-left"></div>
<h2></h2>
<div className="title-line-right"></div>
</div>
<div className="categories">
<ul className="categories-container">
{galleryData && galleryData.map((set, index) => (
<li>
<img src={urlFor(set.set_images[0]).auto('format').url()} alt={set.set_name}/>
</li>
))}
</ul>
</div>
</main>
<Footer />
</div>
)
}
export default sets