From 19dcadd69ec129cbfb41470796082ba24a1af31c Mon Sep 17 00:00:00 2001 From: Yusmardianto Date: Thu, 4 Mar 2021 16:56:32 +0700 Subject: [PATCH] add api & pages yamaha geniue part --- api/product/accessories.js | 46 +++++++++++ api/product/product.js | 9 --- components/Header/HeaderLinks.js | 4 +- package.json | 1 + pages-sections/product/product_details.js | 38 ++++----- pages-sections/product/ygp.js | 29 +++++++ pages/cart.js | 36 +++++++++ pages/chart.js | 36 --------- pages/product.js | 127 ------------------------------ pages/product/product.js | 127 ++++++++++++++++++++++++++++++ pages/product/product_detail.js | 54 +++++++++++++ pages/product/ygp.js | 54 +++++++++++++ pages/product_detail.js | 56 ------------- yarn.lock | 12 +++ 14 files changed, 380 insertions(+), 249 deletions(-) create mode 100644 api/product/accessories.js create mode 100644 pages-sections/product/ygp.js create mode 100644 pages/cart.js delete mode 100644 pages/chart.js delete mode 100644 pages/product.js create mode 100644 pages/product/product.js create mode 100644 pages/product/product_detail.js create mode 100644 pages/product/ygp.js delete mode 100644 pages/product_detail.js diff --git a/api/product/accessories.js b/api/product/accessories.js new file mode 100644 index 0000000..3806975 --- /dev/null +++ b/api/product/accessories.js @@ -0,0 +1,46 @@ +import apollo from "../../lib/apollo.js"; + +async function GetYGP(token="") { + var res = await apollo.query( + ` + query { + accessories(where: { category: "YGP" }) { + id + name + description + price + part_code + img { + url + } + } + }`, + token + ); + return res; +} + +async function GetYamalube(token="") { + var res = await apollo.query( + ` + query { + accessories(where: { category: "Yamalube" }) { + id + name + description + price + part_code + img { + url + } + } + }`, + token + ); + return res; +} + +module.exports = { + GetYGP:GetYGP, + GetYamalube:GetYamalube, +}; \ No newline at end of file diff --git a/api/product/product.js b/api/product/product.js index c7994a3..15e446e 100644 --- a/api/product/product.js +++ b/api/product/product.js @@ -45,7 +45,6 @@ async function GetDetailProduct(id, token="") { } overview specification - accessories film{ url } @@ -79,7 +78,6 @@ async function GetProductYamaha(token="") { } overview specification - accessories film{ url } @@ -110,7 +108,6 @@ async function GetProductSuzuki(token="") { } overview specification - accessories film{ url } @@ -141,7 +138,6 @@ async function GetProductHonda(token="") { } overview specification - accessories film{ url } @@ -172,7 +168,6 @@ async function GetProductHino(token="") { } overview specification - accessories film{ url } @@ -203,7 +198,6 @@ async function GetProductMercedes(token="") { } overview specification - accessories film{ url } @@ -234,7 +228,6 @@ async function GetProductBPR(token="") { } overview specification - accessories film{ url } @@ -265,7 +258,6 @@ async function GetProductEmilia(token="") { } overview specification - accessories film{ url } @@ -296,7 +288,6 @@ async function GetProductHomes(token="") { } overview specification - accessories film{ url } diff --git a/components/Header/HeaderLinks.js b/components/Header/HeaderLinks.js index fa2b5e0..128d076 100644 --- a/components/Header/HeaderLinks.js +++ b/components/Header/HeaderLinks.js @@ -48,10 +48,10 @@ export default function HeaderLinks(props) { }} buttonIcon={Apps} dropdownList={[ - + Motor , - + YGP , diff --git a/package.json b/package.json index d402687..5671595 100644 --- a/package.json +++ b/package.json @@ -59,6 +59,7 @@ "react-slick": "0.25.2", "react-swipeable-views": "0.13.9", "rsuite": "^4.9.2", + "scss": "^0.2.4", "styled-components": "5.1.0", "webpack": "4.43.0" } diff --git a/pages-sections/product/product_details.js b/pages-sections/product/product_details.js index 6fe5c7b..18b3df8 100644 --- a/pages-sections/product/product_details.js +++ b/pages-sections/product/product_details.js @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useState, useEffect } from "react"; import classNames from "classnames"; import { makeStyles } from "@material-ui/core/styles"; import ReactHtmlParser from "react-html-parser"; @@ -50,9 +50,11 @@ const DataProduct = function ({ backend, detailproduct, ...props }) { First slide - First slide + {/* */} @@ -66,9 +68,18 @@ const DataProduct = function ({ backend, detailproduct, ...props }) {

{ReactHtmlParser(data.description)}

- + + + + + + + + + + + + @@ -85,7 +96,7 @@ const DataProduct = function ({ backend, detailproduct, ...props }) {
-
+
{ReactHtmlParser(data.overview)}
@@ -107,29 +118,18 @@ const DataProduct = function ({ backend, detailproduct, ...props }) { ), }, { - tabButton: "Accessories", + tabButton: "Film", tabIcon: Dashboard, tabContent: (
- {ReactHtmlParser(data.accessories)} + {ReactHtmlParser(data.film)}
), }, - { - tabButton: "Film", - tabIcon: Dashboard, - tabContent: ( - - - First slide - - - ), - }, ]} /> diff --git a/pages-sections/product/ygp.js b/pages-sections/product/ygp.js new file mode 100644 index 0000000..a9916fc5 --- /dev/null +++ b/pages-sections/product/ygp.js @@ -0,0 +1,29 @@ +import React from "react"; +import { makeStyles } from "@material-ui/core/styles"; + +import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; +import Card from "components/Card/Card.js"; +import CardBody from "components/Card/CardBody.js"; +import CardHeader from "components/Card/CardHeader.js"; + +const useStyles = makeStyles(styles); + +const DataYGP = function ({ backend, ygp, ...props }) { + const classes = useStyles(); + return ( +
+ +
+ +

Yamaha Geniue Part

+
+
+ +

Yamaha Geniue Part

+
+
+
+ ); +} + +export default DataYGP; \ No newline at end of file diff --git a/pages/cart.js b/pages/cart.js new file mode 100644 index 0000000..1b9514d --- /dev/null +++ b/pages/cart.js @@ -0,0 +1,36 @@ +import React from "react"; +import classNames from "classnames"; +import { makeStyles } from "@material-ui/core/styles"; + +import Header from "components/Header/Header.js"; +import HeaderLinks from "components/Header/HeaderLinks.js"; +import Footer from "components/Footer/Footer.js"; +// import SectionChart from "pages-sections/cart/SectionChart.js"; +import Parallax from "components/Parallax/Parallax.js"; +import styles from "../assets/jss/nextjs-material-kit/pages/components.js"; + +const useStyles = makeStyles(styles); + +export default function Components(props) { + const classes = useStyles(); + const { ...rest } = props; + return ( +
+
} + fixed + color="info" + changeColorOnScroll={{ + height: 400, + color: "white", + }} + {...rest} + /> + +
+ {/* */} +
+
+
+ ); +} diff --git a/pages/chart.js b/pages/chart.js deleted file mode 100644 index f4e7ebe..0000000 --- a/pages/chart.js +++ /dev/null @@ -1,36 +0,0 @@ -import React from "react"; -import classNames from "classnames"; -import { makeStyles } from "@material-ui/core/styles"; - -import Header from "components/Header/Header.js"; -import HeaderLinks from "components/Header/HeaderLinks.js"; -import Footer from "components/Footer/Footer.js"; -// import SectionChart from "pages-sections/Components-Sections/SectionChart.js"; -import Parallax from "components/Parallax/Parallax.js"; -import styles from "../assets/jss/nextjs-material-kit/pages/components.js"; - -const useStyles = makeStyles(styles); - -export default function Components(props) { - const classes = useStyles(); - const { ...rest } = props; - return ( -
-
} - fixed - color="info" - changeColorOnScroll={{ - height: 400, - color: "white", - }} - {...rest} - /> - -
- {/* */} -
-
-
- ); -} diff --git a/pages/product.js b/pages/product.js deleted file mode 100644 index c5a6c3e..0000000 --- a/pages/product.js +++ /dev/null @@ -1,127 +0,0 @@ -import React from "react"; -import classNames from "classnames"; -import { makeStyles } from "@material-ui/core/styles"; - -import Header from "components/Header/Header.js"; -import HeaderLinks from "components/Header/HeaderLinks.js"; -import Footer from "components/Footer/Footer.js"; -import DataProduct from "pages-sections/product/product.js"; -import Parallax from "components/Parallax/Parallax.js"; -import styles from "assets/jss/nextjs-material-kit/pages/components.js"; - -import Getproduct from "../api/product/product.js"; - -const useStyles = makeStyles(styles); - -const Product = function ({ - backend, - yamaha, - suzuki, - honda, - hino, - mercedes, - bpr, - emilia, - homes, - ...props -}) { - const classes = useStyles(); - const { ...rest } = props; - return ( -
-
} - fixed - color="info" - changeColorOnScroll={{ - height: 400, - color: "white", - }} - {...rest} - /> - -
- -
-
-
- ); -}; - -export default Product; - -export async function getServerSideProps(context) { - var yamaha = []; - var suzuki = []; - var honda = []; - var hino = []; - var mercedes = []; - var bpr = []; - var emilia = []; - var homes = []; - const backend = process.env.BACKEND_SERVER_URI; - - var res = await Getproduct.GetProductYamaha(); - if (res["STATUS"] === 1) { - yamaha = res["DATA"]["products"]; - } - - var res = await Getproduct.GetProductSuzuki(); - if (res["STATUS"] === 1) { - suzuki = res["DATA"]["products"]; - } - - var res = await Getproduct.GetProductHonda(); - if (res["STATUS"] === 1) { - honda = res["DATA"]["products"]; - } - - var res = await Getproduct.GetProductHino(); - if (res["STATUS"] === 1) { - hino = res["DATA"]["products"]; - } - - var res = await Getproduct.GetProductMercedes(); - if (res["STATUS"] === 1) { - mercedes = res["DATA"]["products"]; - } - - var res = await Getproduct.GetProductBPR(); - if (res["STATUS"] === 1) { - bpr = res["DATA"]["products"]; - } - - var res = await Getproduct.GetProductEmilia(); - if (res["STATUS"] === 1) { - emilia = res["DATA"]["products"]; - } - - var res = await Getproduct.GetProductHomes(); - if (res["STATUS"] === 1) { - homes = res["DATA"]["products"]; - } - - return { - props: { - yamaha, - suzuki, - honda, - hino, - mercedes, - bpr, - emilia, - homes, - backend, - }, // will be passed to the page component as props - }; -} diff --git a/pages/product/product.js b/pages/product/product.js new file mode 100644 index 0000000..ca3fbcb --- /dev/null +++ b/pages/product/product.js @@ -0,0 +1,127 @@ +import React from "react"; +import classNames from "classnames"; +import { makeStyles } from "@material-ui/core/styles"; + +import Header from "components/Header/Header.js"; +import HeaderLinks from "components/Header/HeaderLinks.js"; +import Footer from "components/Footer/Footer.js"; +import DataProduct from "pages-sections/product/product.js"; +import Parallax from "components/Parallax/Parallax.js"; +import styles from "assets/jss/nextjs-material-kit/pages/components.js"; + +import Getproduct from "../../api/product/product.js"; + +const useStyles = makeStyles(styles); + +const Product = function ({ + backend, + yamaha, + suzuki, + honda, + hino, + mercedes, + bpr, + emilia, + homes, + ...props +}) { + const classes = useStyles(); + const { ...rest } = props; + return ( +
+
} + fixed + color="info" + changeColorOnScroll={{ + height: 400, + color: "white", + }} + {...rest} + /> + +
+ +
+
+
+ ); +}; + +export default Product; + +export async function getServerSideProps(context) { + var yamaha = []; + var suzuki = []; + var honda = []; + var hino = []; + var mercedes = []; + var bpr = []; + var emilia = []; + var homes = []; + const backend = process.env.BACKEND_SERVER_URI; + + var res = await Getproduct.GetProductYamaha(); + if (res["STATUS"] === 1) { + yamaha = res["DATA"]["products"]; + } + + var res = await Getproduct.GetProductSuzuki(); + if (res["STATUS"] === 1) { + suzuki = res["DATA"]["products"]; + } + + var res = await Getproduct.GetProductHonda(); + if (res["STATUS"] === 1) { + honda = res["DATA"]["products"]; + } + + var res = await Getproduct.GetProductHino(); + if (res["STATUS"] === 1) { + hino = res["DATA"]["products"]; + } + + var res = await Getproduct.GetProductMercedes(); + if (res["STATUS"] === 1) { + mercedes = res["DATA"]["products"]; + } + + var res = await Getproduct.GetProductBPR(); + if (res["STATUS"] === 1) { + bpr = res["DATA"]["products"]; + } + + var res = await Getproduct.GetProductEmilia(); + if (res["STATUS"] === 1) { + emilia = res["DATA"]["products"]; + } + + var res = await Getproduct.GetProductHomes(); + if (res["STATUS"] === 1) { + homes = res["DATA"]["products"]; + } + + return { + props: { + yamaha, + suzuki, + honda, + hino, + mercedes, + bpr, + emilia, + homes, + backend, + }, // will be passed to the page component as props + }; +} diff --git a/pages/product/product_detail.js b/pages/product/product_detail.js new file mode 100644 index 0000000..c05dc9d --- /dev/null +++ b/pages/product/product_detail.js @@ -0,0 +1,54 @@ +import React from "react"; +import classNames from "classnames"; +import { makeStyles } from "@material-ui/core/styles"; + +import Header from "components/Header/Header.js"; +import HeaderLinks from "components/Header/HeaderLinks.js"; +import Footer from "components/Footer/Footer.js"; +import ProductDetail from "pages-sections/product/product_details.js"; +import Parallax from "components/Parallax/Parallax.js"; +import styles from "assets/jss/nextjs-material-kit/pages/components.js"; +import GetDetailproduct from "../../api/product/product.js" + +const useStyles = makeStyles(styles); + +const ProductDetails = function ({ backend, detailproduct, ...props }) { + const classes = useStyles(); + const { ...rest } = props; + return ( +
+
} + fixed + color="info" + changeColorOnScroll={{ + height: 400, + color: "white" + }} + {...rest} + /> + +
+ +
+
+
+ ); +} + +export default ProductDetails; + +export async function getServerSideProps(context) { + var {query} = context; + var detailproduct = []; + const backend = process.env.BACKEND_SERVER_URI; + + var res = await GetDetailproduct.GetDetailProduct(query.s||0); + if (res["STATUS"] === 1) { + detailproduct = res["DATA"]["products"]; + } + + return { + props: { detailproduct, backend }, // will be passed to the page component as props + }; +} \ No newline at end of file diff --git a/pages/product/ygp.js b/pages/product/ygp.js new file mode 100644 index 0000000..b624e6e --- /dev/null +++ b/pages/product/ygp.js @@ -0,0 +1,54 @@ +import React from "react"; +import classNames from "classnames"; +import { makeStyles } from "@material-ui/core/styles"; + +import Header from "components/Header/Header.js"; +import HeaderLinks from "components/Header/HeaderLinks.js"; +import Footer from "components/Footer/Footer.js"; +import DataYGP from "pages-sections/product/ygp.js"; +import Parallax from "components/Parallax/Parallax.js"; +import styles from "assets/jss/nextjs-material-kit/pages/components.js"; + +import GetAccessories from "../../api/product/accessories.js"; + +const useStyles = makeStyles(styles); + +const Product = function ({ backend, ygp, ...props }) { + const classes = useStyles(); + const { ...rest } = props; + return ( +
+
} + fixed + color="info" + changeColorOnScroll={{ + height: 400, + color: "white", + }} + {...rest} + /> + +
+ +
+
+
+ ); +}; + +export default Product; + +export async function getServerSideProps(context) { + var ygp = []; + const backend = process.env.BACKEND_SERVER_URI; + + var res = await GetAccessories.GetYGP(); + if (res["STATUS"] === 1) { + ygp = res["DATA"]["accessories"]; + } + + return { + props: { backend, ygp, }, // will be passed to the page component as props + }; +} diff --git a/pages/product_detail.js b/pages/product_detail.js deleted file mode 100644 index 33dc3e4..0000000 --- a/pages/product_detail.js +++ /dev/null @@ -1,56 +0,0 @@ -import React from "react"; -import classNames from "classnames"; -import { makeStyles } from "@material-ui/core/styles"; - -import Header from "components/Header/Header.js"; -import HeaderLinks from "components/Header/HeaderLinks.js"; -import Footer from "components/Footer/Footer.js"; -import ProductDetail from "pages-sections/product/product_details.js"; -import Parallax from "components/Parallax/Parallax.js"; -import styles from "assets/jss/nextjs-material-kit/pages/components.js"; -import GetDetailproduct from "../api/product/product.js" - -const useStyles = makeStyles(styles); - -const ProductDetails = function ({ backend, detailproduct, ...props }) { - const classes = useStyles(); - const { ...rest } = props; - return ( -
-
} - fixed - color="info" - changeColorOnScroll={{ - height: 400, - color: "white" - }} - {...rest} - /> - -
- -
-
- ); -} - -export default ProductDetails; - -export async function getServerSideProps(context) { - var {query} = context; - var detailproduct = []; - const backend = process.env.BACKEND_SERVER_URI; - - var res = await GetDetailproduct.GetDetailProduct(query.s||0); - if (res["STATUS"] === 1) { - detailproduct = res["DATA"]["products"]; - } - - console.log(res); - - return { - props: { detailproduct, backend }, // will be passed to the page component as props - }; -} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index b20c543..c646d44 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5221,6 +5221,11 @@ object.values@^1.1.0: es-abstract "^1.18.0-next.1" has "^1.0.3" +ometa@0.2.2: + version "0.2.2" + resolved "https://registry.yarnpkg.com/ometa/-/ometa-0.2.2.tgz#f53c4735ba6d56af5a46b04dfb7c4334c596d44e" + integrity sha1-9TxHNbptVq9aRrBN+3xDNMWW1E4= + once@^1.3.0, once@^1.3.1, once@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1" @@ -6779,6 +6784,13 @@ scss-tokenizer@^0.2.3: js-base64 "^2.1.8" source-map "^0.4.2" +scss@^0.2.4: + version "0.2.4" + resolved "https://registry.yarnpkg.com/scss/-/scss-0.2.4.tgz#040d903ed37c5d4fa4ad33ae1fd389ac12a4e065" + integrity sha1-BA2QPtN8XU+krTOuH9OJrBKk4GU= + dependencies: + ometa "0.2.2" + "semver@2 || 3 || 4 || 5", semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0: version "5.7.1" resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"