vova/porridger
1
0
Fork 0
forked from polka_billy/porridger
Code Pull Requests Activity

Added story index management via query on homepage

Browse Source 
Related to #27
This commit is contained in:
Dmitriy Shishkov
2023-07-20 13:12:48 +03:00
parent bc154f8b6b
commit 58d1996ce3
3 changed files with 66 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
front/src/pages/HomePage.tsx
View File

@ -1,4 +1,4 @@
import { CSSProperties, useEffect, useState } from 'react'
import { CSSProperties, useEffect, useMemo, useState } from 'react'
import Stories from 'react-insta-stories'
import { Story } from 'react-insta-stories/dist/interfaces'
@ -10,7 +10,8 @@ import { Announcement } from '../api/announcement/types'
import { categoryGraphics } from '../assets/category'
import puffSpinner from '../assets/puff.svg'
import { gotError } from '../hooks/useFetch'
import { UseFetchReturn, gotError } from '../hooks/useFetch'
import useStoryIndex from '../hooks/useStoryIndex'
function generateStories(announcements: Announcement[]): Story[] {
return announcements.map(announcement => {
@ -23,14 +24,14 @@ function generateStories(announcements: Announcement[]): Story[] {
})
}
function fallbackGenerateStories(announcementsFetch: ReturnType<typeof useAnnouncements>) {
if (announcementsFetch.loading)
function fallbackGenerateStories(announcements: UseFetchReturn<Announcement[]>) {
if (announcements.loading)
return fallbackStory()
if (gotError(announcementsFetch))
return fallbackStory(announcementsFetch.error, true)
if (gotError(announcements))
return fallbackStory(announcements.error, true)
const stories = generateStories(announcementsFetch.data)
const stories = generateStories(announcements.data)
if (stories.length === 0)
return fallbackStory('Здесь пока пусто')
@ -68,14 +69,21 @@ function HomePage() {
const [filterShown, setFilterShown] = useState(false)
const [filter, setFilter] = useState(defaultFilters)
const announcementsFetch = useAnnouncements(filter)
const stories = fallbackGenerateStories(announcementsFetch)
const announcements = useAnnouncements(filter)
const stories = useMemo(() => fallbackGenerateStories(announcements), [announcements])
const index = useStoryIndex(announcements.data?.length)
return (<>
<Filters filter={filter} setFilter={setFilter} filterShown={filterShown} setFilterShown={setFilterShown} />
<Filters filter={filter} setFilter={index.withReset(setFilter)} filterShown={filterShown} setFilterShown={setFilterShown} />
<div style={styles.container}>
<Stories
currentIndex={index.n}
onStoryEnd={index.increment}
onNext={index.increment}
onPrevious={index.decrement}
stories={stories}
defaultInterval={11000}
height={height}