128 lines
5.1 KiB
TypeScript
128 lines
5.1 KiB
TypeScript
import { createEffect, createSignal, For, Show } from 'solid-js'
|
|
import type { Topic } from '../../graphql/types.gen'
|
|
import { byFirstChar, sortBy } from '../../utils/sortby'
|
|
import Icon from '../Nav/Icon'
|
|
import { t } from '../../utils/intl'
|
|
import { useTopicsStore } from '../../stores/zine/topics'
|
|
import { params as paramstore, handleClientRouteLinkClick, router } from '../../stores/router'
|
|
import { TopicCard } from '../Topic/Card'
|
|
import { session } from '../../stores/auth'
|
|
import { useStore } from '@nanostores/solid'
|
|
import '../../styles/AllTopics.scss'
|
|
import { groupByTitle } from '../../utils/groupby'
|
|
|
|
export const AllTopicsPage = (props: { topics?: Topic[] }) => {
|
|
const [, setSortedTopics] = createSignal<Partial<Topic>[]>([])
|
|
const [, setSortedKeys] = createSignal<string[]>()
|
|
const [abc, setAbc] = createSignal([])
|
|
const { getSortedTopics } = useTopicsStore({ topics: props.topics || [] })
|
|
const auth = useStore(session)
|
|
|
|
const subscribed = (s) => Boolean(auth()?.info?.topics && auth()?.info?.topics?.includes(s || ''))
|
|
|
|
const params = useStore(paramstore)
|
|
|
|
createEffect(() => {
|
|
if (abc().length === 0 && (!params()['by'] || params()['by'] === 'abc')) {
|
|
console.log('[topics] default grouping by abc')
|
|
const grouped = { ...groupByTitle(getSortedTopics()) }
|
|
grouped['A-Z'] = sortBy(grouped['A-Z'], byFirstChar)
|
|
setAbc(grouped)
|
|
const keys = Object.keys(abc)
|
|
keys.sort()
|
|
setSortedKeys(keys as string[])
|
|
} else {
|
|
console.log('[topics] sorting by ' + params()['by'])
|
|
setSortedTopics(sortBy(getSortedTopics(), params()['by']))
|
|
}
|
|
}, [getSortedTopics(), params()])
|
|
|
|
return (
|
|
<div class="all-topics-page">
|
|
<Show when={getSortedTopics().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: params()['by'] === 'shouts' }}>
|
|
<a href="/topics?by=shouts" onClick={handleClientRouteLinkClick}>
|
|
{t('By shouts')}
|
|
</a>
|
|
</li>
|
|
<li classList={{ selected: params()['by'] === 'authors' }}>
|
|
<a href="/topics?by=authors" onClick={handleClientRouteLinkClick}>
|
|
{t('By authors')}
|
|
</a>
|
|
</li>
|
|
<li classList={{ selected: params()['by'] === 'abc' }}>
|
|
<a href="/topics" onClick={handleClientRouteLinkClick}>
|
|
{t('By alphabet')}
|
|
</a>
|
|
</li>
|
|
<li class="view-switcher__search">
|
|
<a href="/topic/search">
|
|
<Icon name="search" />
|
|
{t('Search topic')}
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="stats">
|
|
<For each={getSortedTopics()}>
|
|
{(topic) => (
|
|
<TopicCard topic={topic} compact={false} subscribed={subscribed(topic.slug)} />
|
|
)}
|
|
</For>
|
|
</div>
|
|
|
|
{/*FIXME*/}
|
|
{/*<Show*/}
|
|
{/* when={params()['by'] === 'abc'}*/}
|
|
{/* fallback={() => (*/}
|
|
{/* <div class="stats">*/}
|
|
{/* <For each={getSortedTopics()}>*/}
|
|
{/* {(topic: Topic) => (*/}
|
|
{/* <TopicCard topic={topic} compact={false} subscribed={subscribed(topic.slug)} />*/}
|
|
{/* )}*/}
|
|
{/* </For>*/}
|
|
{/* </div>*/}
|
|
{/* )}*/}
|
|
{/*>*/}
|
|
{/* <For each={sortedKeys() || []}>*/}
|
|
{/* {(letter: string) => (*/}
|
|
{/* <div class="group">*/}
|
|
{/* <h2>{letter}</h2>*/}
|
|
{/* <div class="container">*/}
|
|
{/* <div class="row">*/}
|
|
{/* <For each={abc()[letter]}>*/}
|
|
{/* {(topic: Partial<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>
|
|
)
|
|
}
|