fifth lesson: map

src/App.js

@@ -2,90 +2,214 @@ import {useState} from 'react';
 import logo from './logo.svg';
 import './App.scss';
 
-const Avatar = ({image="https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_1280.png"}) => 
-<img className='Avatar' src={image}/>
+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 PasswordInput = ({minLength=4, goodLength=10}) => {
-    const [password, setPassword] = useState('')
-
-    //wrongPassword, sosoPassword, goodPassword
-    const className = password.length < minLength ? 'wrongPassword' : 
-                      (password.length < goodLength ? 'sosoPassword' : 'goodPassword')
-
-    return (
-        <input type='password'
-               value={password}
-               onChange={e => setPassword(e.target.value)} 
-               className={className}
-               />
-    )
-}
-
-const testUser = {
-    //name: 'Vasya',
-    //fatherName: 'Ivanovich',
-    surname: 'Petrov',
-    age: 22
-}
-
-const AdultContent = () =>
+const Address = ({Warehouses=0, MainDescription, Area, Region}) =>
 <div>
-    <h1>БАННЕР С ПИВАСОМ</h1>
+    <span className='MainDescription'>{MainDescription}</span>
+    <span className='Area'>{Area}</span>
+    <span className='Region'>{Region}</span>
+    {!!Warehouses && <span className='Warehouses'>{Warehouses}</span>}
 </div>
 
-const HelloUserBanner = ({user}) =>  {
-    //const showBanner = user.age && user.age > 18
-    //let showBanner = false
-    //if (user.age && user.age > 18){
-        //showBanner = true
-    //}
-    return (
+const tags = [
+    <Address Warehouses="1" Area="Харковская" Region="Мерефянский" MainDescription="Test"/>,
     <div>
-        {user.name && <span className='UserName'>{user.name}</span>}
-        {user.fatherName && <span className='UserFathername'>{user.fatherName}</span> }
-        {user.surname && <span className='UserSurname'>{user.surname}</span>}
-        {user.age && user.age > 18 && <AdultContent />}
-    </div> )
-}
+        МОЙ ДИВ
+    </div>,
+    <input />
+]
 
+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 HelloUserBannerOr = ({user}) => 
+const Episode = ({name, air_date, created}) => 
 <div>
-    <span className='UserName'>{user.name || 'Anonymous'}</span>
-    <span className='UserFathername'>{user.fatherName || 'Anonymovich'}</span> 
-    <span className='UserSurname'>{user.surname || 'Anonimov'}</span>
+    <h3>{name}</h3>
+    <span className='air_date'>{air_date}</span>
+    <span className='created'>{created}</span>
 </div>
 
+const KyivAddress = addresses[0]
 
-const Accordion3 = ({content1, content2, content3, header1, header2, header3}) => {
-    const [opened, setOpened] = useState(false)
-    console.log(opened)
-    return (
-        <div>
-            <h2 onClick={() => setOpened(1)}>{header1}</h2>
-            {opened === 1 && content1}
-            <h2 onClick={() => setOpened(2)}>{header2}</h2>
-            {opened === 2 && content2}
-            <h2 onClick={() => setOpened(3)}>{header3}</h2>
-            {opened === 3 && content3}
-        </div>
-    )
-}
+console.log(KyivAddress,addresses.length)
 
 
 const App = () => 
 <>
-    { /*   <Avatar image="http://www.smileexpo.ru/public/upload/news/tn_10_faktov_ob_eynshteyne_kotorih_vi_ne_znali_14458667137751_image.jpg"/>
-    <Avatar />
-    <PasswordInput />
-    <HelloUserBanner user={testUser} /> */ }
-    <Accordion3 header1="первый" 
-                header2="второй"
-                header3="третий" 
-                content1={<div>ПЕРВЫЙ КОНТЕНТ</div>}
-                content2="просто строка без верстки"
-                content3={<input placeholder="ТРЕТИЙ КОНТЕНТ"/>}
-                />
+    {/* {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} />)}
 </>
 
 export default App;