moved hooks to separate directories, added stories fallback

front/src/pages/HomePage.jsx

@@ -1,18 +1,15 @@
-import Stories from 'react-insta-stories'
 import { useEffect, useState } from 'react'
+import Stories from 'react-insta-stories'
 
 import BottomNavBar from '../components/BottomNavBar'
-import useStoryDimensions from '../utils/useStoryDimensions'
-
-import { API_URL } from '../config'
-
-import "./leafletStyles.css"
-import 'leaflet/dist/leaflet.css'
-
+import useStoryDimensions from '../hooks/useStoryDimensions'
 import AnnouncementDetails from '../components/AnnouncementDetails'
-import { categoryGraphics } from '../assets/category'
 import Filters from '../components/Filters'
-import { removeNull } from '../utils'
+
+import { useHomeAnnouncementList } from '../hooks/api'
+
+import puffSpinner from '../assets/puff.svg'
+import { categoryGraphics } from '../assets/category'
 
 function generateStories(announcements) {
     return announcements.map(announcement => {
@@ -25,76 +22,68 @@ function generateStories(announcements) {
     })
 }
 
-const mock = [
-    {
-        id: 5,
-        name: "Огурец",
-        category: "fruits_vegatables",
-        src: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/Marketvegetables.jpg/800px-Marketvegetables.jpg",
-        bestBy: 10000,
-        description: "Очень вкусный огурец, прям, закачаешься",
-        lat: 59.9724,
-        lng: 30.3227,
-        address: "ул. Профессора Попова, дом 5 литера Ф",
-        metro: "Петроградская"
+function fallbackGenerateStories(announcementsFetch) {
+    const stories = generateStories(announcementsFetch.data)
+
+    if (announcementsFetch.loading)
+        return fallbackStory()
+
+    if (announcementsFetch.error)
+        return fallbackStory(announcementsFetch.error)
+
+    if (stories.length == 0)
+        return fallbackStory("Здесь пока пусто")
+
+    return stories
+}
+
+const fallbackStory = (text) => [{
+    content: ({ action }) => {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useEffect(() => { action('pause') }, [action])
+
+        return (
+            <div style={{ margin: 'auto' }}>
+                {text || <img src={puffSpinner} />}
+            </div>
+        )
     },
-    {
-        id: 9,
-        name: "Арбуз",
-        category: "soup",
-        src: "/static/watermelon.mp4",
-        bestBy: 20000,
-        description: "Очень вкусный арбуз, прям, закачаешься",
-        lat: 60.9724,
-        lng: 30.3227,
-        address: "ул. Профессора Попова, дом 50 литера Ф",
-        metro: "Горьковская"
-    }
-]
+    header: { heading: text }
+}]
 
 const defaultFilters = { userId: null, category: null, metro: null, bookedBy: null }
 
-const PROD = true
-
 function HomePage() {
     const { height, width } = useStoryDimensions(16 / 10)
 
-    const [announcements, setAnnouncements] = useState([])
-
     const [filterShown, setFilterShown] = useState(false)
-
     const [filter, setFilter] = useState(defaultFilters)
 
-    useEffect(() => {
-        (async () => {
-            try {
-                const res = PROD ? await fetch(API_URL + "/announcements?" + new URLSearchParams(removeNull(filter))) : null
+    const announcementsFetch = useHomeAnnouncementList(filter)
 
-                const json = PROD ? (await res.json()).list_of_announcements : mock
-
-                setAnnouncements(json)
-            }
-            catch (err) {
-                console.error(err)
-            }
-        })()
-    }, [filter])
-
-    const toggleFilters = (toggle) => setFilterShown(toggle)
+    const stories = fallbackGenerateStories(announcementsFetch)
 
     return (<>
         <Filters filter={filter} setFilter={setFilter} filterShown={filterShown} setFilterShown={setFilterShown} />
         <div style={{ display: "flex", justifyContent: "center", backgroundColor: "rgb(17, 17, 17)" }}>
-            {announcements.length && <Stories
-                stories={generateStories(announcements)}
-                defaultInterval={11000}
-                height={height}
-                width={width}
-                loop={true}
-                keyboardNavigation={true}
-            />}
+            {announcementsFetch.error ?
+                (
+                    <div style={{ width, height, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                        <p className='text-danger'>{announcementsFetch.error}</p>
+                    </div>
+                ) : (
+                    <Stories
+                        stories={stories}
+                        defaultInterval={11000}
+                        height={height}
+                        width={width}
+                        loop={true}
+                        keyboardNavigation={true}
+                    />
+                )
+            }
         </div>
-        <BottomNavBar toggleFilters={toggleFilters} width={width} />
+        <BottomNavBar toggleFilters={setFilterShown} width={width} />
     </>)
 }