forked from polka_billy/porridger
102 lines
3.2 KiB
JavaScript
102 lines
3.2 KiB
JavaScript
import Stories from 'react-insta-stories'
|
|
import { useEffect, useState } from 'react'
|
|
|
|
import BottomNavBar from '../components/BottomNavBar'
|
|
import useStoryDimensions from '../utils/useStoryDimensions'
|
|
|
|
import { API_URL } from '../config'
|
|
|
|
import "./leafletStyles.css"
|
|
import 'leaflet/dist/leaflet.css'
|
|
|
|
import AnnouncementDetails from '../components/AnnouncementDetails'
|
|
import { categoryGraphics } from '../assets/category'
|
|
import Filters from '../components/Filters'
|
|
import { removeNull } from '../utils'
|
|
|
|
function generateStories(announcements) {
|
|
return announcements.map(announcement => {
|
|
return ({
|
|
id: announcement.id,
|
|
url: announcement.src || categoryGraphics.get(announcement.category),
|
|
type: announcement.src?.endsWith("mp4") ? "video" : undefined,
|
|
seeMore: ({ close }) => <AnnouncementDetails close={close} announcement={announcement} />
|
|
})
|
|
})
|
|
}
|
|
|
|
const mock = [
|
|
{
|
|
id: 5,
|
|
name: "Огурец",
|
|
category: "fruits_vegatables",
|
|
src: null,
|
|
bestBy: 10000,
|
|
description: "Очень вкусный огурец, прям, закачаешься",
|
|
lat: 59.9724,
|
|
lng: 30.3227,
|
|
address: "ул. Профессора Попова, дом 5 литера Ф",
|
|
metro: "Петроградская"
|
|
},
|
|
{
|
|
id: 9,
|
|
name: "Арбуз",
|
|
category: "soup",
|
|
src: "https://samplelib.com/lib/preview/mp4/sample-5s.mp4",
|
|
bestBy: 20000,
|
|
description: "Очень вкусный арбуз, прям, закачаешься",
|
|
lat: 60.9724,
|
|
lng: 30.3227,
|
|
address: "ул. Профессора Попова, дом 50 литера Ф",
|
|
metro: "Горьковская"
|
|
}
|
|
]
|
|
|
|
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 json = PROD ? (await res.json()).list_of_announcements : mock
|
|
|
|
setAnnouncements(json)
|
|
}
|
|
catch (err) {
|
|
console.error(err)
|
|
}
|
|
})()
|
|
}, [filter])
|
|
|
|
const toggleFilters = (toggle) => setFilterShown(toggle)
|
|
|
|
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}
|
|
/>}
|
|
</div>
|
|
<BottomNavBar toggleFilters={toggleFilters} width={width} />
|
|
</>)
|
|
}
|
|
|
|
export default HomePage
|