From f1bc3a63774d8ac66f9a53f140d26f2d42f8705b Mon Sep 17 00:00:00 2001 From: George Tsendra Date: Mon, 3 Sep 2018 12:38:48 +0300 Subject: [PATCH] homework2 --- App.js | 77 ++++++++++++++++++++++++++ pages/admin-page.js | 74 +++++++++++++++++++++++++ pages/main-page.js | 29 ++++++++++ pages/shoping-card.js | 53 ++++++++++++++++++ pages/user-page.js | 74 +++++++++++++++++++++++++ shoping-goods-who-has-added-to-chop.js | 1 + shoping-goods.js | 14 +++++ 7 files changed, 322 insertions(+) create mode 100644 App.js create mode 100644 pages/admin-page.js create mode 100644 pages/main-page.js create mode 100644 pages/shoping-card.js create mode 100644 pages/user-page.js create mode 100644 shoping-goods-who-has-added-to-chop.js create mode 100644 shoping-goods.js diff --git a/App.js b/App.js new file mode 100644 index 0000000..ad88738 --- /dev/null +++ b/App.js @@ -0,0 +1,77 @@ +import React, {Component} from 'react'; +import MainPage from "./pages/main-page.js" +import AdminPage from "./pages/admin-page.js" +import UserPage from "./pages/user-page.js" +import ShopingCard from "./pages/shoping-card.js" + +import './App.css'; + +class App extends Component { + constructor(){ + super(); + this.state = { + activePage: "mainPage" + } +} + +changeActivePageToAdminPage = () => { + this.setState({ + activePage: "adminPage" + }) +} + +changeActivePageToUserPage = () => { + this.setState({ + activePage: "userPage" + }) +} + +changeActivePageToShopCardPage = () => { + this.setState({ + activePage: "shopingCard" + }) +} + +changeActivePageToMainPage = () => { + this.setState({ + activePage: "mainPage" + }) +} + + + + render() { + const {activePage} = this.state; + + if (activePage == "mainPage") { + return ( + ) + } + if (activePage == "adminPage") { + return ( + ) + } + if (activePage == "userPage") { + return ( + ) + } + if (activePage == "shopingCard") { + return ( + ) + } + + } +} + +export default App; diff --git a/pages/admin-page.js b/pages/admin-page.js new file mode 100644 index 0000000..8082a80 --- /dev/null +++ b/pages/admin-page.js @@ -0,0 +1,74 @@ +import React, {Component} from 'react'; +import staff from "../shoping-goods"; +import "bootstrap/dist/css/bootstrap.css" + +class AdminPage extends Component { + render() { + + + let ShopsGoods = staff.map((value, index, arr)=>{ + return ( +
  • + + + {value.text} + +

    ✎

    +
    • + ) + }) + + let addStaffToShopingGoods = ()=>{ + let text = document.getElementById("enterNewName").value + let id = Math.random()*100000000000000000 + let newOnj = { + id: id, + text: text, + } + staff.push(newOnj) + + } + + const { + changeActivePageToMainPage, + changeActivePageToShopCardPage, + } = this.props + + return ( +
    +
    +
    +
    +

    ADMIN PAGE

    + + {ShopsGoods} +
    +
    +
    + @ +
    + + +
    +
    +
    +
    +
    + Admin +
    + + +
    +
    +
    + + ) + } +} + + +export default AdminPage; diff --git a/pages/main-page.js b/pages/main-page.js new file mode 100644 index 0000000..8db3ed5 --- /dev/null +++ b/pages/main-page.js @@ -0,0 +1,29 @@ +import React, {Component} from 'react'; + + class MainPage extends Component { + + + render() { + const { + changeActivePageToAdminPage, + changeActivePageToUserPage, + } = this.props + + return ( +
    +

    Main Page

    +
    + + +
    +
    + ) + } +} +export default MainPage; diff --git a/pages/shoping-card.js b/pages/shoping-card.js new file mode 100644 index 0000000..550bf3c --- /dev/null +++ b/pages/shoping-card.js @@ -0,0 +1,53 @@ +import React, {Component} from 'react'; +import staffInShoppingCart from "../shoping-goods-who-has-added-to-chop"; + + +class ShopingCard extends Component { + render() { + const { + changeActivePageToMainPage, + + } = this.props + + + let staffFromStaffInShoppingCart = staffInShoppingCart.map((value)=>{ + return ( +
  • + + + {value.text} + +

    ✓

    +
    • + ) + }) + return ( +
    +
    +
    +

    Shopping Cart

    +
      + + {staffFromStaffInShoppingCart} +
    +
    +
    +
    + User +
    + +
    +
    +
    + 
    price:
    +
    +
    + +
    +
    + ) + } +} + + +export default ShopingCard; diff --git a/pages/user-page.js b/pages/user-page.js new file mode 100644 index 0000000..f1bf65b --- /dev/null +++ b/pages/user-page.js @@ -0,0 +1,74 @@ +import React, {Component} from 'react'; +import staff from "../shoping-goods"; +import "bootstrap/dist/css/bootstrap.css"; +import staffInShoppingCart from "../shoping-goods-who-has-added-to-chop"; + +class UserPage extends Component { + render() { + + const { + changeActivePageToMainPage, + changeActivePageToShopCardPage + } = this.props + +// let addStaffToShoppingCart = (id)=> { +// let text = ""; +// let newObj = { +// +// } + // console.log(this); +// } + + let ShopsGoods = staff.map((value, index, arr)=>{ + let text = value.text + let id = value.id + return ( +
    +
    +
    {value.text}
    +

    {value.text}

    + +

    ✓✓✓✓✓

    +
    +
    + ) + }) + + return ( +
    +

    USER PAGE

    +
    +
    +
    + {ShopsGoods} + +
    +
    +
    +
    + User +
    + + +
    +
    +
    + ) + } +} + + + +export default UserPage; diff --git a/shoping-goods-who-has-added-to-chop.js b/shoping-goods-who-has-added-to-chop.js new file mode 100644 index 0000000..9859f07 --- /dev/null +++ b/shoping-goods-who-has-added-to-chop.js @@ -0,0 +1 @@ +export default [] diff --git a/shoping-goods.js b/shoping-goods.js new file mode 100644 index 0000000..36dd18d --- /dev/null +++ b/shoping-goods.js @@ -0,0 +1,14 @@ +export default [ + { + "id": "4567876543456", + "text": "MacBook pro 2018" + }, + { + "id": "4567876545676", + "text": "Dell xs" + }, + { + "id": "2345654567878", + "text": "Microsoft Surface" + } +]