Hackathon finished

front/src/pages/AddPage.jsx

@@ -0,0 +1,8 @@
+function AddPage() {
+
+    // TODO
+
+    return <></>
+}
+
+export default AddPage

front/src/pages/HomePage.jsx

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

front/src/pages/LoginPage.jsx

@@ -0,0 +1,5 @@
+function LoginPage() {
+    return <></>
+}
+
+export default LoginPage

front/src/pages/UserPage.jsx

@@ -0,0 +1,7 @@
+function UserPage() {
+    /* TODO */
+    
+    return <></>
+}
+
+export default UserPage

front/src/pages/index.js

@@ -0,0 +1,4 @@
+export { default as HomePage } from './HomePage'
+export { default as AddPage } from './AddPage'
+export { default as LoginPage } from './LoginPage'
+export { default as UserPage } from './UserPage'

front/src/pages/leafletStyles.css

@@ -0,0 +1,5 @@
+/* В связи со сложившейся политической обстановкой */
+.leaflet-attribution-flag {
+    position: absolute;
+    right: -100px;
+}