CountryCard.tsx 1.24 KB
Newer Older
1
import React, { FunctionComponent, useState } from 'react';
2
import { Country } from '../../interfaces/Country';
3
4
5
import './CountryCard.css';
import Card from 'react-bootstrap/Card'
import { store } from './Store';
6
7
8
9

type IProps = {
  onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void,
  country: Country,
10
  id: number
11
12
13
14
}

export const CountryCard: FunctionComponent<IProps> = ({ 
  onClick = () => null, 
15
16
  country,
  id
17
}) => {  
18
  const [active, setActive] = useState(store.getState().value===id);
19
  store.subscribe(() => setActive(store.getState().value===id))
20

Duvara Nishaharan's avatar
Duvara Nishaharan committed
21
  return <Card id= "card" className={"CountryCard__card__"+active}
22
23
24
    onClick={() => {store.getState().value!==id ? store.dispatch({ type: 'setState', newValue: id }) : store.dispatch({ type: 'setState', newValue: -1 });}}
    bg="dark">
    <Card.Body>
DESKTOP-J7QTMBR\mikke's avatar
DESKTOP-J7QTMBR\mikke committed
25
      <Card.Title>{country.name}</Card.Title>
26
      <Card.Text>
Mikkel Marstein's avatar
Mikkel Marstein committed
27
        {country.continent}
28
29
        </Card.Text>
        {active && <>
Mikkel Marstein's avatar
Mikkel Marstein committed
30
31
32
33
34
35
        <Card.Text>Capital: {country.capital}</Card.Text>
        <Card.Text>Currecy: {country.currency}</Card.Text>
        <Card.Text>Languages: 
        {country.languages.map((language => " " + language))}
        </Card.Text>
        
36
37
38
39
40
        </>
        }
      
    </Card.Body>
  </Card>
41
}