Skip to content

Commit

Permalink
improve category layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@saml33
saml33 committed Dec 20, 2023
1 parent 01641b8 commit d0879df
Show file tree
Hide file tree
Showing 16 changed files with 159 additions and 113 deletions.
35 changes: 27 additions & 8 deletions app/(pages)/explore/[category]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,9 @@ import {
} from '../../../../contentful/tokenCategoryPage'
import { fetchMangoTokenData } from '../../../utils/mango'
import Category from '../../../components/explore/Category'
import { MAX_CONTENT_WIDTH } from '../../../utils/constants'
import RichTextDisplay from '../../../components/shared/RichTextDisplay'
import DataDisclaimer from '../../../components/explore/DataDisclaimer'

interface TokenCategoryPageParams {
category: string
Expand Down Expand Up @@ -48,16 +51,19 @@ export async function generateMetadata(
}

async function TokenCategoryPage({ params }: TokenCategoryPageProps) {
const tokenCategoryPageData = await fetchTokenCategoryPage({
slug: params.category,
const categoryPages = await fetchTokenCategoryPages({
preview: draftMode().isEnabled,
})

const tokenCategoryPageData = categoryPages.find(
(page) => page.slug === params.category,
)

if (!tokenCategoryPageData) {
return notFound()
}

const { category } = tokenCategoryPageData
const { category, description } = tokenCategoryPageData

// fetch token pages from contentful where the entry contains the category (tag)
const tokensForCategory = await fetchTokenPagesForCategory({
Expand All @@ -72,11 +78,24 @@ async function TokenCategoryPage({ params }: TokenCategoryPageProps) {
const mangoTokensData = await Promise.all(promises)

return (
<Category
categoryPageData={tokenCategoryPageData}
tokensForCategory={tokensForCategory}
mangoTokensData={mangoTokensData}
/>
<>
<Category
categoryPages={categoryPages}
categoryPageData={tokenCategoryPageData}
tokensForCategory={tokensForCategory}
mangoTokensData={mangoTokensData}
/>
{description ? (
<div className="bg-th-bkg-2 py-10 md:py-16">
<div className={`px-6 lg:px-20 ${MAX_CONTENT_WIDTH} mx-auto`}>
<RichTextDisplay content={description} />
</div>
</div>
) : null}
<div className={`px-6 lg:px-20 ${MAX_CONTENT_WIDTH} mx-auto pb-10`}>
<DataDisclaimer />
</div>
</>
)
}

Expand Down
11 changes: 0 additions & 11 deletions app/(pages)/explore/layout.tsx
View file

This file was deleted.

39 changes: 26 additions & 13 deletions app/(pages)/explore/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@ import { draftMode } from 'next/headers'
import { fetchMangoTokensData } from '../../utils/mango'
import { Metadata } from 'next'
import { Suspense } from 'react'
import { MAX_CONTENT_WIDTH } from '../../utils/constants'
import { fetchTokenCategoryPages } from '../../../contentful/tokenCategoryPage'
import DataDisclaimer from '../../components/explore/DataDisclaimer'

export const metadata: Metadata = {
title: 'Explore Listed Tokens on Mango Markets',
Expand All @@ -20,19 +23,29 @@ async function ExplorePage() {
preview: draftMode().isEnabled,
})
const mangoTokensData = await fetchMangoTokensData()
return (
<div className="h-full">
{tokens && tokens?.length ? (
<Suspense fallback={<ExploreFallback />}>
<Explore tokens={tokens} mangoTokensData={mangoTokensData} />
</Suspense>
) : (
<div className="p-6 rounded-xl border border-th-bkg-3">
<p className="text-center">
Something went wrong. Try refreshing the page.
</p>
</div>
)}
const categoryPages = await fetchTokenCategoryPages({
preview: draftMode().isEnabled,
})
return tokens && tokens?.length ? (
<Suspense fallback={<ExploreFallback />}>
<Explore
categoryPages={categoryPages}
tokens={tokens}
mangoTokensData={mangoTokensData}
/>
<div className={`px-6 lg:px-20 ${MAX_CONTENT_WIDTH} mx-auto pb-10`}>
<DataDisclaimer />
</div>
</Suspense>
) : (
<div
className={`px-6 lg:px-20 py-10 md:py-16 ${MAX_CONTENT_WIDTH} mx-auto min-h-screen`}
>
<div className="p-6 rounded-xl border border-th-bkg-3">
<p className="text-center">
Something went wrong. Try refreshing the page.
</p>
</div>
</div>
)
}
Expand Down
67 changes: 37 additions & 30 deletions app/components/explore/Category.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,59 +7,66 @@ import CategorySwitcher from './CategorySwitcher'
import TableViewToggle from './TableViewToggle'
import TokenTable from './TokenTable'
import { TokenCategoryPage } from '../../../contentful/tokenCategoryPage'
import RichTextDisplay from '../shared/RichTextDisplay'
import DataDisclaimer from './DataDisclaimer'
import { sortTokens } from './Explore'
import { MAX_CONTENT_WIDTH } from '../../utils/constants'

const Category = ({
categoryPages,
categoryPageData,
tokensForCategory,
mangoTokensData,
}: {
categoryPages: TokenCategoryPage[]
categoryPageData: TokenCategoryPage
tokensForCategory: TokenPageWithData[]
mangoTokensData: MangoTokenData[]
}) => {
const [showTableView, setShowTableView] = useState(true)
const { category, description, heroImage } = categoryPageData
const { category, description, slug } = categoryPageData

const sortedTokens = useMemo(() => {
return sortTokens(tokensForCategory)
}, [tokensForCategory])

const backgroundImageUrl = description
? `/images/categories/${slug}.png`
: '/images/new/cube-bg.png'

return (
<>
<div className="mb-10 flex flex-col lg:flex-row lg:items-center lg:justify-between">
<h1 className="text-4xl mb-4 lg:mb-0">{`Explore ${category}`}</h1>
<div className="flex space-x-2">
<CategorySwitcher tokens={tokensForCategory} />
<TableViewToggle
showTableView={showTableView}
setShowTableView={setShowTableView}
/>
<div
className={`flex flex-col items-start justify-end h-[264px] ${
description ? 'bg-cover bg-center' : 'bg-repeat'
}`}
style={{ backgroundImage: `url('${backgroundImageUrl}')` }}
>
<div className={`${MAX_CONTENT_WIDTH} mx-auto`}>
<div className="bg-[rgba(0,0,0,0.8)] px-3 py-1 mb-6">
<h1 className="text-4xl">{`Explore ${category}`}</h1>
</div>
</div>
</div>
<TokenTable
tokens={sortedTokens}
mangoTokensData={mangoTokensData}
showTableView={showTableView}
/>
{description ? (
<div className="my-20">
{heroImage ? (
<img
className="w-full h-auto mb-10"
src={heroImage.src}
// Use the Contentful Images API to render
// responsive images. No next/image required:
srcSet={`${heroImage.src}?w=300 1x, ${heroImage.src} 2x`}
alt={heroImage.alt}
<div
className={`px-6 lg:px-20 ${MAX_CONTENT_WIDTH} mx-auto py-10 md:py-16`}
>
<div className="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between">
<p className="mb-3 sm:mb-0">{`${sortedTokens?.length} ${category} ${
sortedTokens?.length === 1 ? 'token' : 'tokens'
} listed on Mango`}</p>
<div className="flex space-x-2">
<CategorySwitcher categories={categoryPages} />
<TableViewToggle
showTableView={showTableView}
setShowTableView={setShowTableView}
/>
) : null}
<RichTextDisplay content={description} />
</div>
</div>
) : null}
<DataDisclaimer />
<TokenTable
tokens={sortedTokens}
mangoTokensData={mangoTokensData}
showTableView={showTableView}
/>
</div>
</>
)
}
Expand Down
49 changes: 23 additions & 26 deletions app/components/explore/CategorySwitcher.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,38 @@
import { useEffect, useMemo, useState } from 'react'
import Select from '../forms/Select'
import { TokenPageWithData } from '../../../contentful/tokenPage'
import { AppRouterInstance } from 'next/dist/shared/lib/app-router-context.shared-runtime'
import { useParams, useRouter } from 'next/navigation'
import { tagToSlug } from '../../utils'
import { TokenCategoryPage } from '../../../contentful/tokenCategoryPage'

const goToCategoryPage = (categorySlug: string, router: AppRouterInstance) => {
router.push(`/explore/${categorySlug}`)
}

const CategorySwitcher = ({ tokens }: { tokens: TokenPageWithData[] }) => {
const CategorySwitcher = ({
categories,
}: {
categories: TokenCategoryPage[]
}) => {
const router = useRouter()
const params = useParams()
const { category } = params
const [selectedCategory, setSelectedCategory] = useState('All')

const categories = useMemo(() => {
if (!tokens?.length) return []
const categories: string[] = []
for (const token of tokens) {
for (const tag of token.tags) {
if (!categories.includes(tag)) {
categories.push(tag)
}
}
const categoryNames = useMemo(() => {
if (!categories?.length) return []
const categoryNames: string[] = []
for (const category of categories) {
categoryNames.push(category.category)
}
return categories.sort((a, b) => a.localeCompare(b))
}, [tokens])
return categoryNames.sort((a, b) => a.localeCompare(b))
}, [categories])

useEffect(() => {
if (category && categories.length) {
const categoryParts = category.toString().toLowerCase().split('-')

const matchedCategory = categories.find((cat) => {
const catLower = cat.toLowerCase()
return categoryParts.every((part) => catLower.includes(part))
})
if (category && categories?.length) {
const matchedCategory = categories.find((cat) => cat.slug === category)

if (matchedCategory) {
setSelectedCategory(matchedCategory)
setSelectedCategory(matchedCategory.category)
}
}
}, [categories, category])
Expand All @@ -48,20 +42,23 @@ const CategorySwitcher = ({ tokens }: { tokens: TokenPageWithData[] }) => {
if (cat === 'All') {
router.push('/explore', { shallow: true })
} else {
const slug = tagToSlug(cat)
goToCategoryPage(slug, router)
const slug = categories.find((category) => category.category === cat)
?.slug
if (slug) {
goToCategoryPage(slug, router)
}
}
}

return (
<Select
value={selectedCategory}
onChange={(cat) => handleSetCategory(cat)}
className="w-1/2 lg:w-44 h-10 text-left whitespace-nowrap"
className="w-full sm:w-44 h-10 text-left whitespace-nowrap"
>
<>
<Select.Option value="All">All</Select.Option>
{categories.map((cat) => (
{categoryNames.map((cat) => (
<Select.Option key={cat} value={cat}>
{cat}
</Select.Option>
Expand Down
Loading

1 comment on commit d0879df

@vercel
Copy link

@vercel vercel bot commented on d0879df Dec 20, 2023

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

mango-web – ./

mango-web-git-main-blockworks-foundation.vercel.app
mango-web.vercel.app
www.mango.markets
mango.markets
mango-web-blockworks-foundation.vercel.app

Please sign in to comment.