125 lines
5.0 KiB
JavaScript
125 lines
5.0 KiB
JavaScript
import React, { useState } from 'react';
|
|
import TinderCard from 'react-tinder-card';
|
|
import './Tinder.css';
|
|
|
|
const Tinder = (props) => {
|
|
|
|
const route = props.getValue;
|
|
const cardInfo = props.cardInfo;
|
|
|
|
const [lastDirection, setLastDirection] = useState();
|
|
const [cardId, setCardId] = useState([]);
|
|
const [allIds, setAllIds] = useState([]);
|
|
|
|
const swiped = (direction, id) => {
|
|
setLastDirection(direction);
|
|
allIds.push(id);
|
|
console.log(allIds.length);
|
|
if (direction === 'right' || direction === 'up') {
|
|
cardId.push(id);
|
|
};
|
|
};
|
|
|
|
const handleDislike = (id) => {
|
|
console.log('left');
|
|
swiped('left', id);
|
|
};
|
|
|
|
const handleLike = (id) => {
|
|
console.log('right');
|
|
swiped('right', id);
|
|
};
|
|
|
|
return (
|
|
<div className='tinder-container'>
|
|
<div className='card-container'>
|
|
{cardInfo.map((card) => (
|
|
<TinderCard
|
|
className='swipe'
|
|
key={card.id}
|
|
onSwipe={(dir) => {
|
|
swiped(dir, card.id);
|
|
var unique = [...new Set(cardId)]
|
|
var uniqueIds = [...new Set(allIds)];
|
|
if(uniqueIds.length === cardInfo.length) {
|
|
route('/main');
|
|
console.log(unique);
|
|
}
|
|
}}
|
|
>
|
|
<div className='card'>
|
|
<div
|
|
className='card-content'
|
|
style={{
|
|
width: '300px',
|
|
height: '500px',
|
|
borderRadius: '10px',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
paddingTop: '10px',
|
|
}}
|
|
>
|
|
<div style={{
|
|
height: '188px',
|
|
width: '245px',
|
|
borderRadius: '10px',
|
|
backgroundImage: `url(${card.imageURL})`,
|
|
backgroundRepeat: 'no-repeat',
|
|
backgroundPosition: 'center',
|
|
}}/>
|
|
<div style={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'space-between',
|
|
height: '150px',
|
|
width: '100%',
|
|
}}>
|
|
<h3>{card.question}</h3>
|
|
<div style={{
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
marginLeft: '3px',
|
|
marginRight: '3px',
|
|
}}>
|
|
<button
|
|
style={{
|
|
height: '69px',
|
|
width: '69px',
|
|
backgroundColor: 'rgb(0,0,0,0)',
|
|
border: 'none',
|
|
}}
|
|
onClick={() => handleDislike(card.id)}
|
|
>
|
|
<img src="./Dis.png" alt='#' style={{
|
|
height: '100%',
|
|
width: '100%',
|
|
}} onClick={() => handleDislike(card.id)}/>
|
|
</button>
|
|
<button
|
|
style={{
|
|
height: '69px',
|
|
width: '69px',
|
|
backgroundColor: 'rgb(0,0,0,0)',
|
|
border: 'none',
|
|
}}
|
|
onClick={() => handleLike(card.id)}
|
|
>
|
|
<img src="./Like.png" alt='#' style={{
|
|
height: '100%',
|
|
width: '100%',
|
|
}} onClick={() => handleLike(card.id)}/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</TinderCard>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Tinder;
|