front/src/hooks/api/useUser.ts

@@ -1,8 +1,8 @@
 import { initialUser } from '../../api/user'
 import { User } from '../../api/user/types'
-import { UseFetchReturn } from '../useFetch'
+import { UseFetchErrored, UseFetchSucced } from '../useFetch'
 
-const useUser = (): UseFetchReturn<User> => (
+const useUser = (): UseFetchSucced<User> | UseFetchErrored => (
     // useFetch(
     //     composeUserUrl(getToken()),
     //     'GET',
@@ -16,7 +16,6 @@ const useUser = (): UseFetchReturn<User> => (
         data: initialUser,
         loading: false,
         error: null,
-        setData: () => {0}
     }
 )
 

front/src/hooks/index.ts

@@ -1,4 +1,3 @@
 export { default as useStoryDimensions } from './useStoryDimensions'
 export { default as useSend } from './useSend'
 export { default as useFetch } from './useFetch'
-export { default as UseStoryIndex } from './useStoryIndex'

front/src/hooks/useFetch.ts

@@ -3,31 +3,40 @@ import { useEffect, useState } from 'react'
 import { SetState } from '../utils/types'
 import useSend from './useSend'
 
-type UseFetchShared<T> = {
+type UseFetchShared = {
     loading: boolean,
     abort?: () => void,
-    setData: SetState<T | undefined>
 }
 
 type UseFetchSucced<T> = {
     error: null,
     data: T,
-} & UseFetchShared<T>
+} & UseFetchShared
 
-type UseFetchErrored<T> = {
+type UseFetchErrored = {
     error: string,
     data: undefined
-} & UseFetchShared<T>
+} & UseFetchShared
 
-const gotError = <T>(res: UseFetchErrored<T> | UseFetchSucced<T>): res is UseFetchErrored<T> => (
+const gotError = <T>(res: UseFetchErrored | UseFetchSucced<T>): res is UseFetchErrored => (
     typeof res.error === 'string'
 )
 
-const fallbackError = <T>(res: UseFetchSucced<T> | UseFetchErrored<T>) => (
+const fallbackError = <T>(res: UseFetchSucced<T> | UseFetchErrored) => (
     gotError(res) ? res.error : res.data
 )
 
-type UseFetchReturn<T> = UseFetchSucced<T> | UseFetchErrored<T>
+type UseFetchReturn<T> = ({
+    error: null,
+    data: T
+} | {
+    error: string,
+    data: undefined
+}) & {
+    loading: boolean,
+    setData: SetState<T | undefined>
+    abort?: (() => void)
+}
 
 function useFetch<R, T>(
     url: string,
@@ -61,7 +70,7 @@ function useFetch<R, T>(
     }
 }
 
-export type { UseFetchReturn }
+export type { UseFetchErrored, UseFetchSucced }
 
 export default useFetch
 

front/src/hooks/useStoryDimensions.ts

@@ -14,14 +14,12 @@ function useStoryDimensions(maxRatio = 16 / 9) {
         function handleResize() {
             setWindowDimensions(getWindowDimensions());
         }
-
+    
         window.addEventListener('resize', handleResize);
         return () => window.removeEventListener('resize', handleResize);
     }, []);
 
-    const bottomBarHeight = 56
-
-    const height = windowDimensions.height - bottomBarHeight
+    const height = windowDimensions.height - 56
 
     const ratio = Math.max(maxRatio, height / windowDimensions.width)
 

front/src/hooks/useStoryIndex.ts

@@ -1,47 +0,0 @@
-import { useEffect, useState } from 'react'
-import { useSearchParams } from 'react-router-dom'
-import { SetState } from '../utils/types'
-
-function useStoryIndex(annLength: number | undefined) {
-    const [index, setIndex] = useState(0)
-
-    const [searchParams, setSearchParams] = useSearchParams()
-
-    const withReset = <T>(f: SetState<T>) => (...args: Parameters<SetState<T>>) => {
-        console.log('resetting index')
-        setIndex(0)
-        setSearchParams(prev => ({ ...prev, storyIndex: '0' }), { replace: true })
-        f(...args)
-    }
-
-    useEffect(() => {
-        setIndex(annLength ?
-            Number.parseInt(searchParams.get('storyIndex') || '0') :
-            0)
-        // searchParams have actual query string at first render
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [annLength])
-
-    const increment = () => setIndex(prev => {
-        const newIndex = (prev + 1) % (annLength || 1)
-        setSearchParams(prev => ({ ...prev, storyIndex: newIndex.toString() }), { replace: true })
-
-        return newIndex
-    })
-
-    const decrement = () => setIndex(prev => {
-        const newIndex = prev > 0 ? (prev - 1) : 0
-        setSearchParams(prev => ({ ...prev, storyIndex: newIndex.toString() }), { replace: true })
-
-        return newIndex
-    })
-
-    return {
-        n: index,
-        withReset,
-        increment,
-        decrement
-    }
-}
-
-export default useStoryIndex

front/src/pages/HomePage.tsx

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