|
|
|
|
@ -1,35 +1,86 @@
|
|
|
|
|
import { Grid, Skeleton, Box, Flex, ScrollArea, Autocomplete, Container } from '@mantine/core';
|
|
|
|
|
import { Paper, Flex, ScrollArea, Autocomplete } from '@mantine/core';
|
|
|
|
|
import { ArticleCardVertical } from './ArticleCard';
|
|
|
|
|
import articleCard from './assets/card.json';
|
|
|
|
|
import Map from 'react-map-gl/maplibre';
|
|
|
|
|
import mapstyle from './assets/basemap.json'
|
|
|
|
|
import mapstyle from './assets/basemap.json';
|
|
|
|
|
import { useState, useEffect } from 'react';
|
|
|
|
|
import Fuse from 'fuse.js'
|
|
|
|
|
|
|
|
|
|
export function KartaPage() {
|
|
|
|
|
const [initial, setInitial] = useState(null);
|
|
|
|
|
const [articles, setArticles] = useState(null);
|
|
|
|
|
const [search, setSearch] = useState('');
|
|
|
|
|
const [res, setRes] = useState();
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
// let initialArticles
|
|
|
|
|
fetch("http://strapi.wg.gateway.ts/api/articles?populate=*")
|
|
|
|
|
.then(r => r.json())
|
|
|
|
|
.then(d => {
|
|
|
|
|
setInitial(d.data)
|
|
|
|
|
setArticles(d.data)
|
|
|
|
|
})
|
|
|
|
|
}, [])
|
|
|
|
|
|
|
|
|
|
const fuseOptions = {
|
|
|
|
|
// isCaseSensitive: false,
|
|
|
|
|
// includeScore: false,
|
|
|
|
|
// shouldSort: true,
|
|
|
|
|
// includeMatches: false,
|
|
|
|
|
// findAllMatches: false,
|
|
|
|
|
// minMatchCharLength: 1,
|
|
|
|
|
// location: 0,
|
|
|
|
|
// threshold: 0.6,
|
|
|
|
|
// distance: 100,
|
|
|
|
|
// useExtendedSearch: false,
|
|
|
|
|
// ignoreLocation: false,
|
|
|
|
|
// ignoreFieldNorm: false,
|
|
|
|
|
// fieldNormWeight: 1,
|
|
|
|
|
keys: [
|
|
|
|
|
"attributes.title"
|
|
|
|
|
]
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const fuse = initial !== null && new Fuse(initial, fuseOptions);
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
const foundArticles = fuse && fuse.search(search).map(e => e.item)
|
|
|
|
|
const updatedArticles = search.length > 0 ? foundArticles : initial
|
|
|
|
|
setArticles(updatedArticles)
|
|
|
|
|
}, [search])
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div style={{position: 'relative'}}>
|
|
|
|
|
<div style={{ position: 'relative' }}>
|
|
|
|
|
<Map
|
|
|
|
|
initialViewState={{
|
|
|
|
|
longitude: 55,
|
|
|
|
|
longitude: 60,
|
|
|
|
|
latitude: 60,
|
|
|
|
|
zoom: 3
|
|
|
|
|
zoom: 4
|
|
|
|
|
}}
|
|
|
|
|
style={{
|
|
|
|
|
height: '90vh'
|
|
|
|
|
}}
|
|
|
|
|
mapStyle={mapstyle}
|
|
|
|
|
/>
|
|
|
|
|
<Box style={{
|
|
|
|
|
<Paper shadow={'md'} withBorder style={{
|
|
|
|
|
position: 'absolute',
|
|
|
|
|
top: '1rem',
|
|
|
|
|
right: '1rem',
|
|
|
|
|
width: '40rem',
|
|
|
|
|
height: '80vh',
|
|
|
|
|
backgroundColor: 'white',
|
|
|
|
|
borderRadius: '5px',
|
|
|
|
|
opacity: '80%',
|
|
|
|
|
width: '36rem',
|
|
|
|
|
height: '83vh',
|
|
|
|
|
opacity: '90%',
|
|
|
|
|
padding: '1rem 0 1rem 1rem'
|
|
|
|
|
}}>
|
|
|
|
|
<ScrollArea h={'80vh'} type="auto">
|
|
|
|
|
<Autocomplete
|
|
|
|
|
mr={20}
|
|
|
|
|
mb={30}
|
|
|
|
|
placeholder="Поиск"
|
|
|
|
|
limit={2}
|
|
|
|
|
value={search}
|
|
|
|
|
onChange={setSearch}
|
|
|
|
|
data={[]}
|
|
|
|
|
/>
|
|
|
|
|
<ScrollArea h={'73vh'} type="auto">
|
|
|
|
|
<Flex
|
|
|
|
|
mih={50}
|
|
|
|
|
gap="md"
|
|
|
|
|
@ -39,23 +90,34 @@ export function KartaPage() {
|
|
|
|
|
wrap="wrap"
|
|
|
|
|
mr={20}
|
|
|
|
|
>
|
|
|
|
|
<Autocomplete
|
|
|
|
|
w={'100%'}
|
|
|
|
|
placeholder="Поиск"
|
|
|
|
|
limit={2}
|
|
|
|
|
data={['Паустовский', 'Бианки', 'Пришвин', 'Брюсов', 'Островский']}
|
|
|
|
|
/>
|
|
|
|
|
{articles !== null && articles.length > 0 && articles.map(article => {
|
|
|
|
|
const articleInfo = {
|
|
|
|
|
"image": article.attributes.cover.data !== null ? "http://strapi.wg.gateway.ts" + article.attributes.cover.data.attributes.url : "https://images.unsplash.com/photo-1628890923662-2cb23c2e0cfe?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=200&q=80",
|
|
|
|
|
"category": "technology",
|
|
|
|
|
"title": article.attributes.title,
|
|
|
|
|
"date": new Date(article.attributes.publishedAt).toLocaleDateString("ru-RU"),
|
|
|
|
|
"author": {
|
|
|
|
|
"name": "Elsa Brown",
|
|
|
|
|
"avatar": "https://images.unsplash.com/photo-1628890923662-2cb23c2e0cfe?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=200&q=80"
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return <ArticleCardVertical key={article.id} {...articleInfo} />
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
)}
|
|
|
|
|
{/* <ArticleCardVertical {...articleCard} />
|
|
|
|
|
<ArticleCardVertical {...articleCard} />
|
|
|
|
|
<ArticleCardVertical {...articleCard} />
|
|
|
|
|
<ArticleCardVertical {...articleCard} />
|
|
|
|
|
<ArticleCardVertical {...articleCard} />
|
|
|
|
|
<Skeleton mb={10} animate={false} height={100} />
|
|
|
|
|
<Skeleton mb={10} animate={false} height={100} />
|
|
|
|
|
<Skeleton mb={10} animate={false} height={100} />
|
|
|
|
|
<ArticleCardVertical {...articleCard} />
|
|
|
|
|
<Skeleton mb={10} animate={false} height={100} />
|
|
|
|
|
<Skeleton mb={10} animate={false} height={100} />
|
|
|
|
|
<Skeleton mb={10} animate={false} height={100} />
|
|
|
|
|
<ArticleCardVertical {...articleCard} /> */}
|
|
|
|
|
</Flex>
|
|
|
|
|
</ScrollArea>
|
|
|
|
|
</Box>
|
|
|
|
|
</Paper>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
gtitov
3 years ago