|
|
@@ -1,215 +1,101 @@
|
|
|
import {useState} from 'react';
|
|
|
import logo from './logo.svg';
|
|
|
import './App.scss';
|
|
|
+import {BrowserRouter as Router, Route, Link} from 'react-router-dom';
|
|
|
+import createHistory from "history/createBrowserHistory";
|
|
|
|
|
|
-const addresses = [
|
|
|
- {
|
|
|
- "Warehouses": 100500,
|
|
|
- "MainDescription": "СУПЕРКиїв",
|
|
|
- "Area": "",
|
|
|
- "Region": "Київська",
|
|
|
- "SettlementTypeCode": "м.",
|
|
|
- "Ref": "e718a680-4b33-11e4-ab6d-005056801329",
|
|
|
- "DeliveryCity": "8d5a980d-391c-11dd-90d9-001a92567626"
|
|
|
- },
|
|
|
- {
|
|
|
- "Warehouses": 568,
|
|
|
- "MainDescription": "Київ",
|
|
|
- "Area": "",
|
|
|
- "Region": "Київська",
|
|
|
- "SettlementTypeCode": "м.",
|
|
|
- "Ref": "e718a680-4b33-11e4-ab6d-005056801329",
|
|
|
- "DeliveryCity": "8d5a980d-391c-11dd-90d9-001a92567626"
|
|
|
- },
|
|
|
- {
|
|
|
- "Warehouses": 0,
|
|
|
- "MainDescription": "Київ",
|
|
|
- "Area": "Миколаївська",
|
|
|
- "Region": "Доманівський",
|
|
|
- "SettlementTypeCode": "с.",
|
|
|
- "Ref": "0db2df4b-4b3a-11e4-ab6d-005056801329",
|
|
|
- "DeliveryCity": "06f8795a-4079-11de-b509-001d92f78698"
|
|
|
- },
|
|
|
- {
|
|
|
- "Warehouses": 0,
|
|
|
- "MainDescription": "Київець",
|
|
|
- "Area": "Львівська",
|
|
|
- "Region": "Миколаївський",
|
|
|
- "SettlementTypeCode": "с.",
|
|
|
- "Ref": "0df25497-4b3a-11e4-ab6d-005056801329",
|
|
|
- "DeliveryCity": "acecfca8-1488-11df-8caf-000c2965ae0e"
|
|
|
- },
|
|
|
- {
|
|
|
- "Warehouses": 0,
|
|
|
- "MainDescription": "Київка",
|
|
|
- "Area": "Херсонська",
|
|
|
- "Region": "Голопристанський",
|
|
|
- "SettlementTypeCode": "с.",
|
|
|
- "Ref": "0dd153b3-4b3a-11e4-ab6d-005056801329",
|
|
|
- "DeliveryCity": "db5c88e7-391c-11dd-90d9-001a92567626"
|
|
|
- },
|
|
|
- {
|
|
|
- "Warehouses": 0,
|
|
|
- "MainDescription": "Київське",
|
|
|
- "Area": "Запорізька",
|
|
|
- "Region": "Новомиколаївський",
|
|
|
- "SettlementTypeCode": "с.",
|
|
|
- "Ref": "0e40bf5a-4b3a-11e4-ab6d-005056801329",
|
|
|
- "DeliveryCity": "cfbeaca4-4063-11de-b509-001d92f78698"
|
|
|
- },
|
|
|
- {
|
|
|
- "Warehouses": 0,
|
|
|
- "MainDescription": "Київське",
|
|
|
- "Area": "Миколаївська",
|
|
|
- "Region": "Баштанський",
|
|
|
- "SettlementTypeCode": "с.",
|
|
|
- "Ref": "0d94f546-4b3a-11e4-ab6d-005056801329",
|
|
|
- "DeliveryCity": "000655dc-4079-11de-b509-001d92f78698"
|
|
|
- }
|
|
|
- ]
|
|
|
+const Logo = () =>
|
|
|
+<img src={logo} className="Logo"/>
|
|
|
|
|
|
-const Address = ({Warehouses=0, MainDescription, Area, Region}) =>
|
|
|
-<div>
|
|
|
- <span className='MainDescription'>{MainDescription}</span>
|
|
|
- <span className='Area'>{Area}</span>
|
|
|
- <span className='Region'>{Region}</span>
|
|
|
- {!!Warehouses && <span className='Warehouses'>{Warehouses}</span>}
|
|
|
-</div>
|
|
|
-
|
|
|
-const tags = [
|
|
|
- <Address Warehouses="1" Area="Харковская" Region="Мерефянский" MainDescription="Test"/>,
|
|
|
- <div>
|
|
|
- МОЙ ДИВ
|
|
|
- </div>,
|
|
|
- <input />
|
|
|
+const defaultMenuItems = [
|
|
|
+ {title: 'Home', to: '/'},
|
|
|
+ {title: 'About', to: '/about'},
|
|
|
+ {title: 'Login', to: '/login'},
|
|
|
+ {title: 'Logout', to: '/logout'},
|
|
|
+ {title: '2 + 2', to: '/add/2/2'},
|
|
|
+ {title: '20 + 200', to: '/add/20/200'},
|
|
|
]
|
|
|
|
|
|
-const episodes =[
|
|
|
- {
|
|
|
- "name": "Pilot",
|
|
|
- "air_date": "December 2, 2013",
|
|
|
- "created": "2017-11-10T12:56:33.798Z"
|
|
|
- },
|
|
|
- {
|
|
|
- "name": "Lawnmower Dog",
|
|
|
- "air_date": "December 9, 2013",
|
|
|
- "created": "2017-11-10T12:56:33.916Z"
|
|
|
- },
|
|
|
- {
|
|
|
- "name": "Anatomy Park",
|
|
|
- "air_date": "December 16, 2013",
|
|
|
- "created": "2017-11-10T12:56:34.022Z"
|
|
|
- },
|
|
|
- {
|
|
|
- "name": "M. Night Shaym-Aliens!",
|
|
|
- "air_date": "January 13, 2014",
|
|
|
- "created": "2017-11-10T12:56:34.129Z"
|
|
|
- },
|
|
|
- {
|
|
|
- "name": "Meeseeks and Destroy",
|
|
|
- "air_date": "January 20, 2014",
|
|
|
- "created": "2017-11-10T12:56:34.236Z"
|
|
|
- },
|
|
|
- {
|
|
|
- "name": "Rick Potion #9",
|
|
|
- "air_date": "January 27, 2014",
|
|
|
- "created": "2017-11-10T12:56:34.339Z"
|
|
|
- },
|
|
|
- {
|
|
|
- "name": "Raising Gazorpazorp",
|
|
|
- "air_date": "March 10, 2014",
|
|
|
- "created": "2017-11-10T12:56:34.441Z"
|
|
|
- },
|
|
|
- {
|
|
|
- "name": "Rixty Minutes",
|
|
|
- "air_date": "March 17, 2014",
|
|
|
- "created": "2017-11-10T12:56:34.543Z"
|
|
|
- },
|
|
|
- {
|
|
|
- "name": "Something Ricked This Way Comes",
|
|
|
- "air_date": "March 24, 2014",
|
|
|
- "created": "2017-11-10T12:56:34.645Z"
|
|
|
- },
|
|
|
- {
|
|
|
- "name": "Close Rick-counters of the Rick Kind",
|
|
|
- "air_date": "April 7, 2014",
|
|
|
- "created": "2017-11-10T12:56:34.747Z"
|
|
|
- },
|
|
|
- {
|
|
|
- "name": "Ricksy Business",
|
|
|
- "air_date": "April 14, 2014",
|
|
|
- "created": "2017-11-10T12:56:34.850Z"
|
|
|
- },
|
|
|
- {
|
|
|
- "name": "A Rickle in Time",
|
|
|
- "air_date": "July 26, 2015",
|
|
|
- "created": "2017-11-10T12:56:34.953Z"
|
|
|
- },
|
|
|
- {
|
|
|
- "name": "Mortynight Run",
|
|
|
- "air_date": "August 2, 2015",
|
|
|
- "created": "2017-11-10T12:56:35.055Z"
|
|
|
- },
|
|
|
- {
|
|
|
- "name": "Auto Erotic Assimilation",
|
|
|
- "air_date": "August 9, 2015",
|
|
|
- "created": "2017-11-10T12:56:35.158Z"
|
|
|
- },
|
|
|
- {
|
|
|
- "name": "Total Rickall",
|
|
|
- "air_date": "August 16, 2015",
|
|
|
- "created": "2017-11-10T12:56:35.261Z"
|
|
|
- },
|
|
|
- {
|
|
|
- "name": "Get Schwifty",
|
|
|
- "air_date": "August 23, 2015",
|
|
|
- "created": "2017-11-10T12:56:35.364Z"
|
|
|
- },
|
|
|
- {
|
|
|
- "name": "The Ricks Must Be Crazy",
|
|
|
- "air_date": "August 30, 2015",
|
|
|
- "created": "2017-11-10T12:56:35.467Z"
|
|
|
- },
|
|
|
- {
|
|
|
- "name": "Big Trouble in Little Sanchez",
|
|
|
- "air_date": "September 13, 2015",
|
|
|
- "created": "2017-11-10T12:56:35.569Z"
|
|
|
- },
|
|
|
- {
|
|
|
- "name": "Interdimensional Cable 2: Tempting Fate",
|
|
|
- "air_date": "September 20, 2015",
|
|
|
- "created": "2017-11-10T12:56:35.669Z"
|
|
|
- },
|
|
|
- {
|
|
|
- "name": "Look Who's Purging Now",
|
|
|
- "air_date": "September 27, 2015",
|
|
|
- "created": "2017-11-10T12:56:35.772Z"
|
|
|
- }
|
|
|
- ]
|
|
|
+const MenuItem = ({title, to}) =>
|
|
|
+<li>
|
|
|
+ <Link to={to}>{title}</Link>
|
|
|
+</li>
|
|
|
+
|
|
|
+const Menu = ({menuItems=defaultMenuItems}) =>
|
|
|
+<nav>
|
|
|
+ <ul>
|
|
|
+ {menuItems.map(item => <MenuItem {...item} />)}
|
|
|
+ </ul>
|
|
|
+</nav>
|
|
|
+
|
|
|
+const Header = () =>
|
|
|
+<header>
|
|
|
+ <Logo />
|
|
|
+ <Menu />
|
|
|
+</header>
|
|
|
+
|
|
|
+const Footer = () =>
|
|
|
+<footer>
|
|
|
+ <Logo />
|
|
|
+ <Route path='/' exact>
|
|
|
+ вариация футера на главной
|
|
|
+ </Route>
|
|
|
+</footer>
|
|
|
|
|
|
-const Episode = ({name, air_date, created}) =>
|
|
|
-<div>
|
|
|
- <h3>{name}</h3>
|
|
|
- <span className='air_date'>{air_date}</span>
|
|
|
- <span className='created'>{created}</span>
|
|
|
+const Login = () => {
|
|
|
+ const [login, setLogin] = useState('')
|
|
|
+ const [password, setPassword] = useState('')
|
|
|
+ return (
|
|
|
+ <div className="Login">
|
|
|
+ <input type='text'
|
|
|
+ onChange={e => setLogin(e.target.value)}
|
|
|
+ value={login} />
|
|
|
+ <input type='password'
|
|
|
+ onChange={e => setPassword(e.target.value)}
|
|
|
+ value={password} />
|
|
|
+ <button disabled={!login || !password}>Login...</button>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+}
|
|
|
+
|
|
|
+const Home = () =>
|
|
|
+<div className="Home">
|
|
|
+ <h1>
|
|
|
+ Главная нашего супер-пупер сайта
|
|
|
+ </h1>
|
|
|
+</div>
|
|
|
+
|
|
|
+const About = () =>
|
|
|
+<div className="About">
|
|
|
+ <h1>
|
|
|
+ О нас
|
|
|
+ </h1>
|
|
|
+ <p>
|
|
|
+ тили тили трали вали
|
|
|
+ <img src={logo}/>
|
|
|
+ </p>
|
|
|
</div>
|
|
|
|
|
|
-const KyivAddress = addresses[0]
|
|
|
|
|
|
-console.log(KyivAddress,addresses.length)
|
|
|
+const Add = ({match:{params: {a,b}}}) =>
|
|
|
+<pre>
|
|
|
+ {a} + {b} = {+a + +b}
|
|
|
+</pre>
|
|
|
+
|
|
|
+const Main = () =>
|
|
|
+<main>
|
|
|
+ <Route path='/' component={Home} exact/>
|
|
|
+ <Route path='/about' component={About} exact/>
|
|
|
+ <Route path='/login' component={Login} exact/>
|
|
|
+ <Route path='/add/:a/:b' component={Add} exact/>
|
|
|
+</main>
|
|
|
|
|
|
|
|
|
const App = () =>
|
|
|
-<>
|
|
|
- {/* {tags}
|
|
|
- <Address Warehouses="1" Area="Харковская" Region="Мерефянский" MainDescription="Test"/>
|
|
|
- <Address Warehouses={KyivAddress.Warehouses}
|
|
|
- Area={KyivAddress.Area}
|
|
|
- Region={KyivAddress.Region}
|
|
|
- MainDescription={KyivAddress.MainDescription}/>
|
|
|
- <Address {...KyivAddress}/> */ }
|
|
|
-{/* {addresses.map(address => <Address {...address} />)} */ }
|
|
|
- {episodes.map(episode => <Episode {...episode} />)}
|
|
|
-</>
|
|
|
+<Router history={createHistory()}>
|
|
|
+ <Header />
|
|
|
+ <Main />
|
|
|
+ <Footer />
|
|
|
+</Router>
|
|
|
|
|
|
export default App;
|
