From ec1894a6cb2846583b038e5160c158ba1926d820 Mon Sep 17 00:00:00 2001 From: Yusmardianto Date: Thu, 18 Feb 2021 16:58:51 +0700 Subject: [PATCH] add product api --- api/product/product.js | 49 ++- components/PageChange/PageChange.js | 6 +- pages-sections/SectionProduct.js | 493 ------------------------------ pages-sections/SectionProductDetail.js | 192 ------------ pages-sections/home/business_partner.js | 21 +- pages-sections/home/service.js | 26 +- pages-sections/latest_news/news.js | 61 ++-- pages-sections/product/product.js | 115 +++++++ pages-sections/product/product_details.js | 152 +++++++++ pages-sections/snackbar.js | 2 +- pages/_error.js | 2 +- pages/api/product/get.js | 33 ++ pages/components.js | 107 ------- pages/home.js | 105 +++++++ pages/index.js | 2 +- pages/product.js | 11 +- pages/product_detail.js | 25 +- 17 files changed, 519 insertions(+), 883 deletions(-) delete mode 100644 pages-sections/SectionProduct.js delete mode 100644 pages-sections/SectionProductDetail.js create mode 100644 pages-sections/product/product.js create mode 100644 pages-sections/product/product_details.js create mode 100644 pages/api/product/get.js delete mode 100644 pages/components.js create mode 100644 pages/home.js diff --git a/api/product/product.js b/api/product/product.js index bd5e2e2..610b358 100644 --- a/api/product/product.js +++ b/api/product/product.js @@ -3,16 +3,44 @@ import apollo from "../../lib/apollo.js"; async function GetProduct(token="") { var res = await apollo.query( ` - query{ - products - { - name - description - img{ - id - } - } - } `, + query{ + products{ + id + name + price + description + img{ + url + } + business_partner + { + name + } + } + } `, + token + ); + return res; +} + +async function GetDetailProduct(token="") { + var res = await apollo.query( + ` + query{ + products + { + name + price + description + img{ + url + } + business_partner + { + name + } + } + } `, token ); return res; @@ -20,4 +48,5 @@ async function GetProduct(token="") { module.exports = { GetProduct: GetProduct, + GetDetailProduct:GetDetailProduct, }; \ No newline at end of file diff --git a/components/PageChange/PageChange.js b/components/PageChange/PageChange.js index c8b0d93..b393c5b 100644 --- a/components/PageChange/PageChange.js +++ b/components/PageChange/PageChange.js @@ -39,10 +39,10 @@ export default function PageChange(props) {
-

- Thamrin Group -

+
+
+ ); } diff --git a/pages-sections/SectionProduct.js b/pages-sections/SectionProduct.js deleted file mode 100644 index 5aeaf62..0000000 --- a/pages-sections/SectionProduct.js +++ /dev/null @@ -1,493 +0,0 @@ -import React from "react"; - -// nodejs library that concatenates classes -import classNames from "classnames"; - -// @material-ui/core components -import { makeStyles } from "@material-ui/core/styles"; - -// @material-ui/icons -import Dashboard from "@material-ui/icons/Dashboard"; -import LocalGroceryStoreIcon from "@material-ui/icons/LocalGroceryStore"; - -// Component -import GridContainer from "components/Grid/GridContainer.js"; -import GridItem from "components/Grid/GridItem.js"; -import NavPills from "components/NavPills/NavPills.js"; -import Card from "components/Card/Card.js"; -import CardBody from "components/Card/CardBody.js"; -import CardHeader from "components/Card/CardHeader.js"; -import CardFooter from "components/Card/CardFooter.js"; -import Button from "components/CustomButtons/Button.js"; -import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js"; - -const useStyles = makeStyles(styles); - -const Product = function ({ product, ...props }) { - const classes = useStyles(); - const { ...rest } = props; - const imageClasses = classNames( - classes.imgRaised, - classes.imgRoundedCircle, - classes.imgFluid - ); - const navImageClasses = classNames(classes.imgRounded, classes.imgGallery); - return ( - -
- Product -
- -
-

Product & Facilities

-
- - - - - ... -
-

ALL NEW NMAX STANDART VERSION

-

Rp.30.000.000,00 – Rp.37.692.000,00

- -
- - - ... -
-

AEROX 155 VVA

-

Rp.25.927.000,00

- -
- - - ... -
-

AEROX 155 VVA R – VERSION

-

Rp.27.110.000,00

- -
- - - ... -
-

AEROX 155 VVA S – VERSION

-

Rp.29.744.000,00

- -
- - - ... -
-

NMAX ABS / NON ABS 155

-

Rp.29.571.000,00 – Rp.33.267.000,00

- -
- - - ... -
-

FINO 125 SPORTY / PREMIUM

-

Rp.19.335.000,00

- -
- - - ... -
-

FINO GRANDE 125

-

Rp.20.155.000,00

- -
- - - ... -
-

MIO S

-

Rp.18.472.000,00

- -
- - - ... -
-

NEW MIO M3 125 CW

-

Rp.17.903.000,00

- -
- - - ... -
-

NEW MIO M3 AKS SSS

-

Rp. 18.000.000,00

- -
- - - ... -
-

ALL NEW X-RIDE 125

-

Rp. 19.250.000,00

- -
- - - ... -
-

MIO Z

-

Rp. 17.570.000,00

- -
- - - ... -
-

MX KING 150

-

Rp. 23.425.000,00

- -
- - - ... -
-

NEW JUPITER MX 150

-

Rp. 20.825.000,00

- -
- - - ... -
-

JUPITER Z1

-

Rp. 18.600.000,00

- -
- - - ... -
-

VEGA FORCE CW

-

Rp. 16.825.000,00

- -
- - - ... - - - ... - - - ... - - - ... - - - ... - - - ... - - - ... - - - ... - - - ... - - - ), - }, - { - tabButton: "Suzuki", - tabIcon: Dashboard, - tabContent: ( - - - - ), - }, - { - tabButton: "Honda", - tabIcon: Dashboard, - tabContent: ( - - - - ), - }, - { - tabButton: "Mercedes Benz", - tabIcon: Dashboard, - tabContent: ( - - - - ), - }, - ]} - /> - - - - - © 2020 , All Right Reserved by @Thamrin Brother Company - - - ); -} - -export default Product; \ No newline at end of file diff --git a/pages-sections/SectionProductDetail.js b/pages-sections/SectionProductDetail.js deleted file mode 100644 index ef8ebf5..0000000 --- a/pages-sections/SectionProductDetail.js +++ /dev/null @@ -1,192 +0,0 @@ -import React from "react"; - -// nodejs library that concatenates classes -import classNames from "classnames"; - -// @material-ui/core components -import { makeStyles } from "@material-ui/core/styles"; - -// @material-ui/icons -import Dashboard from "@material-ui/icons/Dashboard"; -import LocalGroceryStoreIcon from "@material-ui/icons/LocalGroceryStore"; - -// Component -import GridContainer from "components/Grid/GridContainer.js"; -import Grid from '@material-ui/core/Grid'; -import GridItem from "components/Grid/GridItem.js"; -import NavPills from "components/NavPills/NavPills.js"; -import Card from "components/Card/Card.js"; -import CardBody from "components/Card/CardBody.js"; -import CardHeader from "components/Card/CardHeader.js"; -import CardFooter from "components/Card/CardFooter.js"; -import Button from "components/CustomButtons/Button.js"; -import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js"; -import Carousel from "react-slick"; -import Paper from '@material-ui/core/Paper'; - - -import image1 from "assets/img/bg.jpg"; -import image2 from "assets/img/bg2.png"; -import image3 from "assets/img/bg3.jpg"; - -const useStyles = makeStyles(styles); - -export default function ProfilePage(props) { - const classes = useStyles(); - const settings = { - dots: true, - infinite: true, - speed: 500, - slidesToShow: 1, - slidesToScroll: 1, - autoplay: false - }; - const navImageClasses = classNames(classes.imgRounded, classes.imgGallery); - return ( - -
- Product Detail -
- - - -
-
- - -
- First slide -
-
- Second slide -
-
- Third slide -
- - -
-
- - -

ALL NEW NMAX STANDART VERSION

-

Rp.37.692.000,00

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ), - }, - { - tabButton: "Specification", - tabIcon: Dashboard, - tabContent: ( - - - - - ), - }, - { - tabButton: "Accessories", - tabIcon: Dashboard, - tabContent: ( - - - - - ), - }, - { - tabButton: "Film", - tabIcon: Dashboard, - tabContent: ( - - - - - ), - }, - { - tabButton: "Credit Simulation", - tabIcon: Dashboard, - tabContent: ( - - - - - ), - }, - { - tabButton: "Test Drive", - tabIcon: Dashboard, - tabContent: ( - - - - - ), - }, - ]} - /> - - - - - © 2020 , All Right Reserved by @Thamrin Brother Company - - - ); -} diff --git a/pages-sections/home/business_partner.js b/pages-sections/home/business_partner.js index 79a7b7b..a91ef0c 100644 --- a/pages-sections/home/business_partner.js +++ b/pages-sections/home/business_partner.js @@ -14,13 +14,14 @@ const DataBusinessPartner = function ({ backend, businessPartners, ...props }) const classes = useStyles(); const BusinessPartners = businessPartners.map((data) => { return ( +
- {/* src={`${variablebackenduri}/${data.img[0]["url"]}`} */} - + + ); }) return ( @@ -30,21 +31,7 @@ const DataBusinessPartner = function ({ backend, businessPartners, ...props })
- - {BusinessPartners[0]} - {BusinessPartners[3]} - {BusinessPartners[6]} - - - {BusinessPartners[1]} - {BusinessPartners[4]} - {BusinessPartners[7]} - - - {BusinessPartners[2]} - {BusinessPartners[5]} - {BusinessPartners[8]} - + {BusinessPartners}
diff --git a/pages-sections/home/service.js b/pages-sections/home/service.js index 804314f..5011df9 100644 --- a/pages-sections/home/service.js +++ b/pages-sections/home/service.js @@ -13,12 +13,14 @@ const useStyles = makeStyles(styles); const DataService = function ({ backend, service, ...props }) { const classes = useStyles(); const services = service.map((data, index) => ( - -
- -
- + + +
+ +
+ + )); return (
@@ -26,16 +28,8 @@ const DataService = function ({ backend, service, ...props }) {

Our Service

- - - {services[0]} - - - {services[1]} - - - {services[2]} - + + {services}
diff --git a/pages-sections/latest_news/news.js b/pages-sections/latest_news/news.js index b2b9ffc..77c19d4 100644 --- a/pages-sections/latest_news/news.js +++ b/pages-sections/latest_news/news.js @@ -19,6 +19,7 @@ const DataLatestNews = function ({ backend, news, ...props }) { const classes = useStyles(); const latnews = news.map((data) => { return ( + Read More + ); }) return (
-
-

Latest News

-
-
- - - {latnews[0]} - {latnews[1]} - - - {latnews[2]} - {latnews[3]} - - - {latnews[4]} - {latnews[5]} - - -
-
- -
+
+

Latest News

+
+
+ + {latnews} + +
+
+ +
); } diff --git a/pages-sections/product/product.js b/pages-sections/product/product.js new file mode 100644 index 0000000..c383420 --- /dev/null +++ b/pages-sections/product/product.js @@ -0,0 +1,115 @@ +import React from "react"; + +// nodejs library that concatenates classes +import classNames from "classnames"; + +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; + +// @material-ui/icons +import Dashboard from "@material-ui/icons/Dashboard"; +import LocalGroceryStoreIcon from "@material-ui/icons/LocalGroceryStore"; + +// Component +import GridContainer from "components/Grid/GridContainer.js"; +import GridItem from "components/Grid/GridItem.js"; +import NavPills from "components/NavPills/NavPills.js"; +import Card from "components/Card/Card.js"; +import CardBody from "components/Card/CardBody.js"; +import CardHeader from "components/Card/CardHeader.js"; +import CardFooter from "components/Card/CardFooter.js"; +import Button from "components/CustomButtons/Button.js"; +import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js"; + +const useStyles = makeStyles(styles); +const DataProduct = function ({ backend, product, ...props }) { + const classes = useStyles(); + const { ...rest } = props; + const imageClasses = classNames( + classes.imgRaised, + classes.imgRoundedCircle, + classes.imgFluid + ); + const navImageClasses = classNames(classes.imgRounded, classes.imgGallery); + const Product = product.map((data) => { + console.log(data); + return ( +
+ ... +
+

{data.name}

+

Rp.{data.price}

+ +
+
+ ); + }) + return ( + +
+ Product +
+ +
+

Product & Facilities

+
+ + + + {Product} + + ), + }, + { + tabButton: "Suzuki", + tabIcon: Dashboard, + tabContent: ( + + {Product} + + ), + }, + { + tabButton: "Honda", + tabIcon: Dashboard, + tabContent: ( + + + + ), + }, + { + tabButton: "Mercedes Benz", + tabIcon: Dashboard, + tabContent: ( + + + + ), + }, + ]} + /> + + + + + ); +} + +export default DataProduct; \ No newline at end of file diff --git a/pages-sections/product/product_details.js b/pages-sections/product/product_details.js new file mode 100644 index 0000000..3479b3c --- /dev/null +++ b/pages-sections/product/product_details.js @@ -0,0 +1,152 @@ +import React from "react"; + +// nodejs library that concatenates classes +import classNames from "classnames"; + +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; + +// @material-ui/icons +import Dashboard from "@material-ui/icons/Dashboard"; +import LocalGroceryStoreIcon from "@material-ui/icons/LocalGroceryStore"; + +// Component +import GridContainer from "components/Grid/GridContainer.js"; +import Grid from '@material-ui/core/Grid'; +import GridItem from "components/Grid/GridItem.js"; +import NavPills from "components/NavPills/NavPills.js"; +import Card from "components/Card/Card.js"; +import CardBody from "components/Card/CardBody.js"; +import CardHeader from "components/Card/CardHeader.js"; +import CardFooter from "components/Card/CardFooter.js"; +import Button from "components/CustomButtons/Button.js"; +import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js"; +import Carousel from "react-slick"; +import Paper from '@material-ui/core/Paper'; + + +import image1 from "assets/img/bg.jpg"; +import image2 from "assets/img/bg2.png"; +import image3 from "assets/img/bg3.jpg"; + +const useStyles = makeStyles(styles); + +const DataProduct = function ({ backend, detailproduct, ...props }) { + const classes = useStyles(); + const { ...rest } = props; + const imageClasses = classNames( + classes.imgRaised, + classes.imgRoundedCircle, + classes.imgFluid + ); + const navImageClasses = classNames(classes.imgRounded, classes.imgGallery); + const Productdetails = detailproduct.map((data) => { + console.log(data); + return ( + + +
+
+ +
+ First slide +
+ +
+
+ + +

{data.name}

+

Rp.{data.price}

+
+ + + ); + }) + return ( + +
+ Product Detail +
+ +
+ {Productdetails[0]} +
+ + + + + + + ), + }, + { + tabButton: "Specification", + tabIcon: Dashboard, + tabContent: ( + + + + + ), + }, + { + tabButton: "Accessories", + tabIcon: Dashboard, + tabContent: ( + + + + + ), + }, + { + tabButton: "Film", + tabIcon: Dashboard, + tabContent: ( + + + + + ), + }, + { + tabButton: "Credit Simulation", + tabIcon: Dashboard, + tabContent: ( + + + + + ), + }, + { + tabButton: "Test Drive", + tabIcon: Dashboard, + tabContent: ( + + + + + ), + }, + ]} + /> + + + + + © 2020 , All Right Reserved by @Thamrin Brother Company + + + ); +} + +export default DataProduct; \ No newline at end of file diff --git a/pages-sections/snackbar.js b/pages-sections/snackbar.js index e2621b4..b5a1e79 100644 --- a/pages-sections/snackbar.js +++ b/pages-sections/snackbar.js @@ -17,7 +17,7 @@ const DataSnackbarContent = function() { - Thamrin Group bersama Anda melawan COVID-19. Untuk informasi silakan klik di sini. + Thamrin Group bersama Anda melawan COVID-19. Untuk informasi silakan klik di sini. } align="center" diff --git a/pages/_error.js b/pages/_error.js index 7e3a014..47269ba 100644 --- a/pages/_error.js +++ b/pages/_error.js @@ -3,7 +3,7 @@ import Router from "next/router"; export default class _error extends Component { componentDidMount = () => { - Router.push("/components"); + Router.push("/home"); }; render() { diff --git a/pages/api/product/get.js b/pages/api/product/get.js new file mode 100644 index 0000000..fa64bfb --- /dev/null +++ b/pages/api/product/get.js @@ -0,0 +1,33 @@ +import DetailProduct from "../../../api/product/product"; + +export default async function handler(req, res) { + if (req.method == "POST") { + var filterKey = req.body.filterKey; + if (filterKey == "name") { + var id = req.body.id; + var name = req.body.name; + var description = req.body.description; + var price = req.body.price; + var detailproduct = await DetailProduct.GetDetailProduct(id, name, description, price); + if (detailproduct["STATUS"] == 0) { + res.status(200).json(detailproduct); + } else if (detailproduct["DATA"]["products"] == null) { + res + .status(200) + .json({ + STATUS: 0, + DATA: "Product Tidak Ditemukan" + }); + } else { + res.status(200).json({ + STATUS: 1, + DATA: detailproduct["DATA"]["products"], + }); + } + } else { + res.status(200).send("NOT FOUND"); + } + } else { + res.status(200).send("NOT FOUND"); + } +} \ No newline at end of file diff --git a/pages/components.js b/pages/components.js deleted file mode 100644 index ffbe07a..0000000 --- a/pages/components.js +++ /dev/null @@ -1,107 +0,0 @@ -import React from "react"; -// nodejs library that concatenates classes -import classNames from "classnames"; -// react components for routing our app without refresh -import Link from "next/link"; -// @material-ui/core components -import { makeStyles } from "@material-ui/core/styles"; -// @material-ui/icons -// core components -import Header from "components/Header/Header.js"; -import HeaderLinks from "components/Header/HeaderLinks.js"; -import Footer from "components/Footer/Footer.js"; -import GridContainer from "components/Grid/GridContainer.js"; -import GridItem from "components/Grid/GridItem.js"; -import Parallax from "components/Parallax/Parallax.js"; -import styles from "assets/jss/nextjs-material-kit/pages/components.js"; -import Button from "components/CustomButtons/Button.js"; - -import GetbusinessPartners from "../api/home/businessPartner.js" -import Getservices from "../api/home/service.js" -import Getcarousels from "../api/home/carousel.js" - -import DataSnackbarContent from "../pages-sections/snackbar.js"; -import DataCarousel from "../pages-sections/home/carousel.js"; -import DataService from "../pages-sections/home/service.js"; -import DataBusinessPartner from "../pages-sections/home/business_partner.js"; - -const useStyles = makeStyles(styles); -const Home = function ({ backend, businessPartners, service, carousel, ...props }) { - const classes = useStyles(); - const { ...rest } = props; - - - return ( -
-
} - fixed - color="info" - changeColorOnScroll={{ - height: 400, - color: "white" - }} - {...rest} - /> - -
- - {/* -
-

Thamrin Group

-

- A Badass Material Kit based on Material-UI and NextJS. -

-
- - */} - -
- -
- - - - -
-
-
- ); -} - -export async function getServerSideProps(context) { - var businessPartners = []; - var service = []; - var carousel = []; - const backend = process.env.BACKEND_SERVER_URI; - - var res = await GetbusinessPartners.GetbusinessPartners(); - if (res["STATUS"] === 1) { - businessPartners = res["DATA"]["businessPartners"]; - } - - var res = await Getservices.Getservices(); - if (res["STATUS"] === 1) { - service = res["DATA"]["services"]; - } - - var res = await Getcarousels.GetCarousels(); - if (res["STATUS"] === 1) { - carousel = res["DATA"]["carousels"]; - } - - console.log(carousel); - - return { - props: { businessPartners, service, carousel, backend }, // will be passed to the page component as props - }; -} - -export default Home; \ No newline at end of file diff --git a/pages/home.js b/pages/home.js new file mode 100644 index 0000000..9712b1d --- /dev/null +++ b/pages/home.js @@ -0,0 +1,105 @@ +import React from "react"; +// nodejs library that concatenates classes +import classNames from "classnames"; +// react components for routing our app without refresh +import Link from "next/link"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +// @material-ui/icons +// core components +import Header from "components/Header/Header.js"; +import HeaderLinks from "components/Header/HeaderLinks.js"; +import Footer from "components/Footer/Footer.js"; +import GridContainer from "components/Grid/GridContainer.js"; +import GridItem from "components/Grid/GridItem.js"; +import Parallax from "components/Parallax/Parallax.js"; +import styles from "assets/jss/nextjs-material-kit/pages/components.js"; +import Button from "components/CustomButtons/Button.js"; + +import GetbusinessPartners from "../api/home/businessPartner.js" +import Getservices from "../api/home/service.js" +import Getcarousels from "../api/home/carousel.js" + +import DataSnackbarContent from "../pages-sections/snackbar.js"; +import DataCarousel from "../pages-sections/home/carousel.js"; +import DataService from "../pages-sections/home/service.js"; +import DataBusinessPartner from "../pages-sections/home/business_partner.js"; + +const useStyles = makeStyles(styles); +const Home = function ({ backend, businessPartners, service, carousel, ...props }) { + const classes = useStyles(); + const { ...rest } = props; + + + return ( +
+
} + fixed + color="info" + changeColorOnScroll={{ + height: 400, + color: "white" + }} + {...rest} + /> + +
+ + {/* +
+

Thamrin Group

+

+ A Badass Material Kit based on Material-UI and NextJS. +

+
+ + */} + +
+ +
+ + + + +
+
+
+ ); +} + +export async function getServerSideProps(context) { + var businessPartners = []; + var service = []; + var carousel = []; + const backend = process.env.BACKEND_SERVER_URI; + + var res = await GetbusinessPartners.GetbusinessPartners(); + if (res["STATUS"] === 1) { + businessPartners = res["DATA"]["businessPartners"]; + } + + var res = await Getservices.Getservices(); + if (res["STATUS"] === 1) { + service = res["DATA"]["services"]; + } + + var res = await Getcarousels.GetCarousels(); + if (res["STATUS"] === 1) { + carousel = res["DATA"]["carousels"]; + } + + return { + props: { businessPartners, service, carousel, backend }, // will be passed to the page component as props + }; +} + +export default Home; \ No newline at end of file diff --git a/pages/index.js b/pages/index.js index 0a113a0..0e48cc9 100644 --- a/pages/index.js +++ b/pages/index.js @@ -3,7 +3,7 @@ import Router from "next/router"; export default class Index extends Component { componentDidMount = () => { - Router.push("/components"); + Router.push("/home"); }; render() { diff --git a/pages/product.js b/pages/product.js index 8de635d..d9216e4 100644 --- a/pages/product.js +++ b/pages/product.js @@ -12,7 +12,7 @@ import HeaderLinks from "components/Header/HeaderLinks.js"; import Footer from "components/Footer/Footer.js"; import GridContainer from "components/Grid/GridContainer.js"; import GridItem from "components/Grid/GridItem.js"; -import SectionProduct from "pages-sections/SectionProduct.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"; @@ -20,7 +20,7 @@ import Getproduct from "../api/product/product.js" const useStyles = makeStyles(styles); -export default function Components(props) { +const Product = function ({ backend, product, ...props }) { const classes = useStyles(); const { ...rest } = props; return ( @@ -50,15 +50,18 @@ export default function Components(props) {
- +