HW35_React_ADD

HW35_React_ADD

App.js

@@ -1,69 +1,66 @@
 import React from 'react';
 import logo from './logo.svg';
 import './App.css';
+import {Router, Route, Link, Switch} from 'react-router-dom';
+import createHistory from "history/createBrowserHistory";
 
-let CitySelect =cities=>{
-	
-	return <select>
-	{cities.cities}
-</select>
-}
-
+let Page404 = () => <h1> 404 </h1>
+let PageNaN = () => <h2> Result is not a number </h2>
 
-class CountrySelect extends React.Component{
+let Header = p =>
+<header>
+    Some Header
+</header>
 
-	constructor(props){
-		super(props)
-		this.state = {countries:{}, cities:[]};
+let Footer = p =>
+<footer>
+    Some Footer
+</footer>
 
-	}
+let Content = p =>
+    <Router history = {createHistory()}>
+        <Switch>
+            <Route path="/" component = { Main } exact />
+            <Route path="/add/:a/:b" component = { AddPage } exact/>
+            <Route  component = { Page404 } exact />
+        </Switch>
+    </Router>
 	
-	viewCities(country){
-		let cityList =[];
-		
-		for (let cityName of this.state.countries[country]){
-		cityList.push(<option value={cityName} key={cityList.length -1}>{cityName}</option>)
-		}
-		
-		return	this.setState({cities:cityList })
-	}
-	
-render(){
+let Main = p =>
+<content>
+   If you want to add some numbers, you need to go to addPage ( <Link to={`/add/1/2`}>For example </Link>)
+</content>	
 
-	let list =[];
-	for (let countryName in this.state.countries){
-		
-	list.push(<option value={countryName} key={list.length -1}>{countryName}</option>)	
-	}
-	
-	return (
-	<div>
-	<select onChange = {evt=>{this.viewCities(evt.target.value)}}>
-	{list}
-	</select>
-	
-	<CitySelect cities={this.state.cities} />
-	</div>
-	)
-	
+let AddPage = p =>{
+const paramA = +p.match.params.a
+const paramB = +p.match.params.b
+console.log(paramA,paramB)
+console.log((typeof(paramA) ))
+if (!isNaN(paramA) && !isNaN(paramB)){
+return <Add a = {paramA}  b = {paramB}/>}
+else {return (
+<div>
+        <Page404 />
+		<PageNaN/>
+		</div>
+    )}
 }
 
-componentDidMount(){
-		fetch("https://raw.githubusercontent.com/David-Haim/CountriesToCitiesJSON/master/countriesToCities.json")
+let Add = p =>
+<div>
+<h2>
+	Result = <i>{p.a + p.b}</i>
+</h2>
+</div>
 
-	.then(res => res.json())
 
-	.then(data => {this.setState({countries:data });
-	
-	})
-	}
-	
-}
 
 function App() {
   return (
     <div className="App">
-     <CountrySelect />
+      <Header />
+      <Content />
+      <Footer />
     </div>
   );
 }