91 lines
2.3 KiB
JavaScript
91 lines
2.3 KiB
JavaScript
import React, {useState} from 'react';
|
|
import TinderCard from 'react-tinder-card';
|
|
import './Tinder.css'
|
|
|
|
const db = [
|
|
{
|
|
id: 1,
|
|
name: 'Richard Hendricks',
|
|
url: './img/richard.jpg'
|
|
},
|
|
{
|
|
id: 2,
|
|
name: 'Erlich Bachman',
|
|
url: './img/erlich.jpg'
|
|
},
|
|
{
|
|
id: 3,
|
|
name: 'Monica Hall',
|
|
url: './img/monica.jpg'
|
|
},
|
|
{
|
|
id: 4,
|
|
name: 'Jared Dunn',
|
|
url: './img/jared.jpg'
|
|
},
|
|
{
|
|
id: 5,
|
|
name: 'Dinesh Chugtai',
|
|
url: './img/dinesh.jpg'
|
|
}
|
|
]
|
|
|
|
const Tinder = () => {
|
|
const characters = db;
|
|
const [lastDirection, setLastDirection] = useState();
|
|
const [cardId, setCardId] = useState([]);
|
|
|
|
const swiped = (direction, nameToDelete, id) => {
|
|
console.log('removing: ' + nameToDelete);
|
|
setLastDirection(direction);
|
|
if (direction === 'right') {
|
|
cardId.push(id);
|
|
};
|
|
console.log(cardId);
|
|
};
|
|
|
|
const outOfFrame = (name) => {
|
|
console.log(name + ' left the screen!');
|
|
};
|
|
|
|
let uniqueTags = [];
|
|
const getId = () => {
|
|
uniqueTags = cardId.filter(function(elem, pos) {
|
|
return cardId.indexOf(elem) === pos;
|
|
})
|
|
console.log(uniqueTags)
|
|
}
|
|
|
|
return (
|
|
<div className='tinder-container'>
|
|
<h1>Card</h1>
|
|
<div className='card-container'>
|
|
{characters.map((character) => (
|
|
<TinderCard
|
|
className='swipe'
|
|
key={character.id}
|
|
onSwipe={(dir) => swiped(dir, character.name, character.id)}
|
|
onCardLeftScreen={() => outOfFrame(character.name)}
|
|
>
|
|
<div className='card'>
|
|
<div
|
|
className='card-content'
|
|
style={{ backgroundImage: `url(${character.url})` }}
|
|
>
|
|
<h3>{character.name}</h3>
|
|
</div>
|
|
</div>
|
|
</TinderCard>
|
|
))}
|
|
</div>
|
|
{lastDirection ? (
|
|
<h2 className='infoText'>You swiped {lastDirection}</h2>
|
|
) : (
|
|
null
|
|
)}
|
|
<button onClick={() => getId()}>Вывести массив</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Tinder; |