103 lines
2.8 KiB
JavaScript
103 lines
2.8 KiB
JavaScript
import {
|
|
IonCard,
|
|
IonCardHeader,
|
|
IonCardTitle,
|
|
IonNote,
|
|
useIonToast,
|
|
CreateAnimation,
|
|
IonIcon,
|
|
} from '@ionic/react';
|
|
import { useState } from 'react';
|
|
import { useRef } from 'react';
|
|
import { Iconly } from 'react-iconly';
|
|
import { heart, trashBin } from 'ionicons/icons';
|
|
import { addFavourite } from '../store/PlacesStore';
|
|
|
|
import styles from '../styles/Home.module.scss';
|
|
|
|
const PlaceCard = ({ place = false, fromFavourites = false }) => {
|
|
const animationRef = useRef(null);
|
|
const cardRef = useRef(null);
|
|
const [presentToast] = useIonToast();
|
|
const [hideAnimatedIcon, setHideAnimatedIcon] = useState(true);
|
|
|
|
const floatStyle = {
|
|
display: hideAnimatedIcon ? 'none' : '',
|
|
position: 'absolute',
|
|
zIndex: '10',
|
|
};
|
|
|
|
const floatGrowAnimation = {
|
|
property: 'transform',
|
|
fromValue: 'translateY(0) scale(1)',
|
|
toValue: 'translateY(-20px) scale(2)',
|
|
};
|
|
|
|
const mainAnimation = {
|
|
duration: 600,
|
|
iterations: '1',
|
|
fromTo: [floatGrowAnimation],
|
|
easing: 'cubic-bezier(0.25, 0.7, 0.25, 0.7)',
|
|
};
|
|
|
|
const handleAddFavourite = async (e, place) => {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
|
|
if (fromFavourites) {
|
|
// Add a fadeOut animation before removing
|
|
cardRef.current.classList.add('animate__fadeOut');
|
|
|
|
setTimeout(() => {
|
|
addFavourite(place, fromFavourites);
|
|
}, 500);
|
|
} else {
|
|
addFavourite(place, fromFavourites);
|
|
}
|
|
|
|
presentToast({
|
|
header: `Favourite ${fromFavourites ? 'removed' : 'added'}!`,
|
|
buttons: [
|
|
{
|
|
text: '♡',
|
|
},
|
|
],
|
|
message: `${place.name} has been ${fromFavourites ? 'removed from' : 'added to'} your favourites.`,
|
|
duration: 1500,
|
|
color: 'success',
|
|
});
|
|
|
|
setHideAnimatedIcon(false);
|
|
await animationRef.current.animation.play();
|
|
setHideAnimatedIcon(true);
|
|
};
|
|
|
|
return (
|
|
<IonCard
|
|
ref={cardRef}
|
|
className={`${styles.slide} animate__animated animate__fadeIn animate__faster`}
|
|
routerLink={`/view-place/${place.id}`}
|
|
>
|
|
<div className={styles.imageHeader}>
|
|
<img src={place ? place.image : '/assets/nonefound.png'} />
|
|
{place && (
|
|
<div className="favouriteButton" onClick={(e) => handleAddFavourite(e, place)}>
|
|
<Iconly set="bold" name={fromFavourites ? 'Delete' : 'Heart'} color="red" />
|
|
|
|
<CreateAnimation ref={animationRef} {...mainAnimation}>
|
|
<IonIcon icon={fromFavourites ? trashBin : heart} style={floatStyle} color="danger" />
|
|
</CreateAnimation>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<IonCardHeader>
|
|
<IonCardTitle>{place ? place.name : 'Sorry'}</IonCardTitle>
|
|
<IonNote>{place ? place.destination : 'No results found'}</IonNote>
|
|
</IonCardHeader>
|
|
</IonCard>
|
|
);
|
|
};
|
|
|
|
export default PlaceCard;
|