143 lines
4.8 KiB
TypeScript
143 lines
4.8 KiB
TypeScript
import { createEffect, createMemo, For, Show } from 'solid-js'
|
|
import type { Topic } from '../../graphql/types.gen'
|
|
import { Icon } from '../Nav/Icon'
|
|
import { t } from '../../utils/intl'
|
|
import { setSortAllBy as setSortAllTopicsBy, useTopicsStore } from '../../stores/zine/topics'
|
|
import { handleClientRouteLinkClick, useRouter } from '../../stores/router'
|
|
import { TopicCard } from '../Topic/Card'
|
|
import { useAuthStore } from '../../stores/auth'
|
|
import '../../styles/AllTopics.scss'
|
|
import { getLogger } from '../../utils/logger'
|
|
|
|
const log = getLogger('AllTopicsView')
|
|
|
|
type AllTopicsPageSearchParams = {
|
|
by: 'shouts' | 'authors' | 'title' | ''
|
|
}
|
|
|
|
type AllTopicsViewProps = {
|
|
topics: Topic[]
|
|
}
|
|
|
|
export const AllTopicsView = (props: AllTopicsViewProps) => {
|
|
const { getSearchParams, changeSearchParam } = useRouter<AllTopicsPageSearchParams>()
|
|
|
|
const { sortedTopics } = useTopicsStore({
|
|
topics: props.topics,
|
|
sortBy: getSearchParams().by || 'shouts'
|
|
})
|
|
|
|
const { session } = useAuthStore()
|
|
|
|
createEffect(() => {
|
|
setSortAllTopicsBy(getSearchParams().by || 'shouts')
|
|
})
|
|
|
|
const byLetter = createMemo<{ [letter: string]: Topic[] }>(() => {
|
|
return sortedTopics().reduce((acc, topic) => {
|
|
const letter = topic.title[0].toUpperCase()
|
|
if (!acc[letter]) {
|
|
acc[letter] = []
|
|
}
|
|
|
|
acc[letter].push(topic)
|
|
|
|
return acc
|
|
}, {} as { [letter: string]: Topic[] })
|
|
})
|
|
|
|
const sortedKeys = createMemo<string[]>(() => {
|
|
const keys = Object.keys(byLetter())
|
|
keys.sort()
|
|
return keys
|
|
})
|
|
|
|
const subscribed = (s) => Boolean(session()?.news?.topics && session()?.news?.topics?.includes(s || ''))
|
|
|
|
return (
|
|
<div class="all-topics-page">
|
|
<Show when={sortedTopics().length > 0}>
|
|
<div class="wide-container">
|
|
<div class="shift-content">
|
|
<div class="row">
|
|
<div class="col-md-9 page-header">
|
|
<h1>{t('Topics')}</h1>
|
|
<p>{t('Subscribe what you like to tune your personal feed')}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col">
|
|
<ul class="view-switcher">
|
|
<li classList={{ selected: getSearchParams().by === 'shouts' || !getSearchParams().by }}>
|
|
<a href="/topics?by=shouts" onClick={handleClientRouteLinkClick}>
|
|
{t('By shouts')}
|
|
</a>
|
|
</li>
|
|
<li classList={{ selected: getSearchParams().by === 'authors' }}>
|
|
<a href="/topics?by=authors" onClick={handleClientRouteLinkClick}>
|
|
{t('By authors')}
|
|
</a>
|
|
</li>
|
|
<li classList={{ selected: getSearchParams().by === 'title' }}>
|
|
<a
|
|
href="/topics?by=title"
|
|
onClick={(ev) => {
|
|
// just an example
|
|
ev.preventDefault()
|
|
changeSearchParam('by', 'title')
|
|
}}
|
|
>
|
|
{t('By alphabet')}
|
|
</a>
|
|
</li>
|
|
<li class="view-switcher__search">
|
|
<a href="/topic/search">
|
|
<Icon name="search" />
|
|
{t('Search topic')}
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<Show
|
|
when={getSearchParams().by === 'title'}
|
|
fallback={() => (
|
|
<div class="stats">
|
|
<For each={sortedTopics()}>
|
|
{(topic) => (
|
|
<TopicCard topic={topic} compact={false} subscribed={subscribed(topic.slug)} />
|
|
)}
|
|
</For>
|
|
</div>
|
|
)}
|
|
>
|
|
<For each={sortedKeys()}>
|
|
{(letter) => (
|
|
<div class="group">
|
|
<h2>{letter}</h2>
|
|
<div class="container">
|
|
<div class="row">
|
|
<For each={byLetter()[letter]}>
|
|
{(topic) => (
|
|
<div class="topic col-sm-6 col-md-3">
|
|
<div class="topic-title">
|
|
<a href={`/topic/${topic.slug}`}>{topic.title}</a>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</For>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</For>
|
|
</Show>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Show>
|
|
</div>
|
|
)
|
|
}
|