Commit 8650b548 authored by Duvara Nishaharan's avatar Duvara Nishaharan
Browse files

#8 fikset redux i searchbaren

parent 8e104dba
import React from 'react';
import './App.css';
import { Searchbar } from './components/searchbar';
import { CardContainer } from './components/display/CardContainer';
import Layout from './components/Layout';
......
import React from 'react';
import { Header } from './header/Header';
import "./Layout.css"
import { Searchbar } from './searchbar/searchbar';
interface IProps {
title: string
......@@ -13,9 +14,8 @@ const Layout: React.FC<IProps> = ({
<div className="Layout">
<React.Fragment >
<Header>
<input/>
<h1>Tekst</h1>
<button>Hallo</button>
<Searchbar/>
</Header>
<div className="Layout__Content">
<main>{children}</main>
......
import React, { FunctionComponent } from 'react';
import React, { FunctionComponent, useState } from 'react';
import { Col, Container, Row } from 'react-bootstrap';
import { Provider } from 'react-redux';
import { Country } from '../../interfaces/Country';
import { searchbarStore } from '../searchbar/SearchbarStore';
import './CardContainer.css';
import { CountryCard } from './CountryCard';
import { store } from './Store';
type IProps = {}
export const CardContainer: FunctionComponent<IProps> = () => {
const initCardData: Country[] = []
const [cardData, setCardData] = useState(initCardData);
searchbarStore.subscribe(() => setCardData(searchbarStore.getState().value))
return (
<Container>
<Row xs={1} md={2} className="justify-content-md-center">
<Provider store={store}>
{dummyData.map((country_data, index) =>
{cardData.map((country_data, index) =>
<Col md="auto" key={index}>
<CountryCard country={country_data} id={index}/>
</Col>)}
</Col>)}
</Provider>
</Row>
</Container>
)
}
function getDataFromBackEnd(){
return dummyData;
}
const dummyData: Country[] = [
{name: "Norway", population: 20, area: 10},
{name: "Sweden", population: 25, area: 11},
{name: "Iceland", population: 5, area: 3},
{name: "England", population: 60, area: 14},
{name: "Sri Lanka", population: 55, area: 8},
{name: "USA", population: 120, area: 60},
{name: "Poland", population: 35, area: 14},
{name: "Japan", population: 110, area: 40},
{name: "Denmark", population: 26, area: 9},
{name: "Finland", population: 22, area: 12},
]
......@@ -16,7 +16,7 @@ export const CountryCard: FunctionComponent<IProps> = ({
id
}) => {
const [active, setActive] = useState(store.getState().value===id);
store.subscribe(()=> setActive(store.getState().value===id))
store.subscribe(() => setActive(store.getState().value===id))
return <Card className={"CountryCard__card__"+active}
onClick={() => {store.getState().value!==id ? store.dispatch({ type: 'setState', newValue: id }) : store.dispatch({ type: 'setState', newValue: -1 });}}
......
import { createStore } from 'redux'
import { Country } from '../../interfaces/Country'
const initialState: Country[] = []
function counterReducer(state = { value: initialState }, action: { type: any, NewCountry: Country[] }) {
switch (action.type) {
case "setState":
return { value: action.NewCountry }
default:
return state
}
}
export let searchbarStore = createStore(counterReducer)
import './searchbar.css'
import Button from 'react-bootstrap/Button';
import React from 'react';
import { Country } from '../../interfaces/Country';
import './SearchbarStore.tsx'
import { searchbarStore } from './SearchbarStore';
interface IProps {
items?: string[]
interface IProps {
items?: string[]
}
interface IState {
interface IState {
active: boolean,
items: string[]
items: string[]
}
export class Searchbar extends React.Component<IProps, IState> {
......@@ -17,23 +20,36 @@ export class Searchbar extends React.Component<IProps, IState> {
active: false,
items: []
};
}
onSearch(){
this.setState({active: true})
onSearch() {
searchbarStore.dispatch({ type: 'setState', NewCountry: dummyData });
}
render(){
render() {
return (
<div className="searchbar">
<input type="text" className="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2"/>
<input type="text" className="form-control" placeholder="Enter Country" aria-label="Recipient's username" aria-describedby="basic-addon2" />
<div className="input-group-append">
<button
onClick={() => this.onSearch()}
className="btn btn-outline-secondary" type="button">Button</button>
<button onClick={() => this.onSearch()}
className="btn btn-outline-secondary" type="button">Button</button>
</div>
{ this.state.active && <div>Jeg er active</div>}
{this.state.active && <div>Jeg er active</div>}
</div>)
}
}
\ No newline at end of file
}
function getDataFromBackEnd() {
return dummyData;
}
const dummyData: Country[] = [
{ name: "Norway", population: 20, area: 10 },
{ name: "Sweden", population: 25, area: 11 },
{ name: "Iceland", population: 5, area: 3 },
{ name: "England", population: 60, area: 14 },
{ name: "Sri Lanka", population: 55, area: 8 },
{ name: "USA", population: 120, area: 60 },
{ name: "Poland", population: 35, area: 14 },
{ name: "Japan", population: 110, area: 40 },
{ name: "Denmark", population: 26, area: 9 },
{ name: "Finland", population: 22, area: 12 },
]
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment