[bc20307] | 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;
|
---|