1 | import { useContext, useMemo } from 'react';
|
---|
2 | import { useHistory } from 'react-router-dom';
|
---|
3 | import useGetData from '../../../hooks/useGetData';
|
---|
4 | import {
|
---|
5 | Wrapper,
|
---|
6 | ParkingSpace,
|
---|
7 | ParkingSpaceHelper,
|
---|
8 | ParkingIcon,
|
---|
9 | ArrowsWrapper,
|
---|
10 | CarWrapper,
|
---|
11 | Car,
|
---|
12 | PreviewCar,
|
---|
13 | YouAreParkedButton,
|
---|
14 | } from './styles';
|
---|
15 |
|
---|
16 | import car from '../../../resources/car_1.png';
|
---|
17 | import Arrows from '../../Arrows';
|
---|
18 |
|
---|
19 | import { usePreview } from 'react-dnd-preview';
|
---|
20 | import { useDrag, useDrop } from 'react-dnd';
|
---|
21 |
|
---|
22 | const Landing = () => {
|
---|
23 | const { data: sessionStatus, isLoading: isSessionStatusLoading } = useGetData(
|
---|
24 | { url: `/registriranParkirac/session` }
|
---|
25 | );
|
---|
26 |
|
---|
27 | const history = useHistory();
|
---|
28 | const { display, itemType, item, style } = usePreview();
|
---|
29 | const [{ isDragging }, drag] = useDrag(() => ({
|
---|
30 | type: 'img',
|
---|
31 | item: 'Car',
|
---|
32 | end: (item, monitor) => {
|
---|
33 | if (monitor.didDrop()) {
|
---|
34 | history.push('/session');
|
---|
35 | }
|
---|
36 | },
|
---|
37 | collect: (monitor) => ({
|
---|
38 | isDragging: monitor.isDragging(),
|
---|
39 | handlerId: monitor.getHandlerId(),
|
---|
40 | }),
|
---|
41 | }));
|
---|
42 | const [{ canDrop, isOver }, drop] = useDrop(() => ({
|
---|
43 | accept: 'img',
|
---|
44 | collect: (monitor) => ({
|
---|
45 | isOver: monitor.isOver(),
|
---|
46 | canDrop: monitor.canDrop(),
|
---|
47 | }),
|
---|
48 | }));
|
---|
49 |
|
---|
50 | const CarPreview =() => {
|
---|
51 | if (!display) {
|
---|
52 | return null;
|
---|
53 | }
|
---|
54 | return <Car className='car-preview' src={car} style={style} />;
|
---|
55 | };
|
---|
56 | return (
|
---|
57 | <Wrapper>
|
---|
58 | <ParkingSpace
|
---|
59 | ref={drop}
|
---|
60 | style={{ backgroundColor: canDrop ? 'rgba(0,255,0,0.3)' : '' }}
|
---|
61 | >
|
---|
62 | <ParkingSpaceHelper style={{ bottom: 0, left: '-12.5%' }} />
|
---|
63 | <ParkingSpaceHelper style={{ bottom: 0, right: '-12.5%' }} />
|
---|
64 | {sessionStatus ? (
|
---|
65 | <Car
|
---|
66 | src={car}
|
---|
67 | style={{
|
---|
68 | transform: 'translateX(-50%)',
|
---|
69 | width: '70.5%',
|
---|
70 | left: '50%',
|
---|
71 | }}
|
---|
72 | />
|
---|
73 | ) : (
|
---|
74 | <ParkingIcon />
|
---|
75 | )}
|
---|
76 | </ParkingSpace>
|
---|
77 | {sessionStatus ? null : (
|
---|
78 | <ArrowsWrapper>
|
---|
79 | <Arrows />
|
---|
80 | </ArrowsWrapper>
|
---|
81 | )}
|
---|
82 | {isDragging || sessionStatus ? null : <Car src={car} ref={drag} />}
|
---|
83 | {!sessionStatus ? null : (
|
---|
84 | <YouAreParkedButton onClick={() => history.push('/session')}>
|
---|
85 | Паркирани Сте
|
---|
86 | </YouAreParkedButton>
|
---|
87 | )}
|
---|
88 | <CarPreview />
|
---|
89 | </Wrapper>
|
---|
90 | );
|
---|
91 | };
|
---|
92 |
|
---|
93 | export default Landing;
|
---|