Added story index management via query on homepage

Related to #27

front/src/hooks/useStoryIndex.ts

@@ -0,0 +1,47 @@
+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