add api & pages yamaha geniue part

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,
+};

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
         }

components/Header/HeaderLinks.js

@@ -48,10 +48,10 @@ export default function HeaderLinks(props) {
           }}
           buttonIcon={Apps}
           dropdownList={[
-            <Link href="/product">
+            <Link href="/product/product">
               <a className={classes.dropdownLink}>Motor</a>
             </Link>,
-            <Link href="/product">
+            <Link href="/product/ygp">
               <a className={classes.dropdownLink}>YGP</a>
             </Link>,
             <Link href="/product">

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"
   }

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 })  {
                     <Card carousel>
                       <Carousel {...settings}>
                         <img className={navImageClasses} width="300px" alt="First slide" src={`${backend}${data.img[0]["url"]}`} />
-                        <img className={navImageClasses} width="300px" alt="First slide" src={`${backend}${data.img[1]["url"]}`} />
                       </Carousel>
                     </Card>
+                    {/* <Button color="info" round href={"/product_detail?s="+data.id}>
+                      <Icon className={classes.icons}>shopping_cart</Icon>Add To Cart
+                    </Button> */}
                     </GridItem>
                   </GridContainer>
                 </div>
@@ -66,9 +68,18 @@ const DataProduct = function ({ backend, detailproduct, ...props })  {
               <div align="justify">
                 <p>{ReactHtmlParser(data.description)}</p>
               </div>
-              <Button color="info" round href={"/product_detail?s="+data.id} >
-                <Icon className={classes.icons}>shopping_cart</Icon>Add To Cart
-              </Button>
+              <GridContainer>
+                <Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-30px"}}>
+                  <Card className={classes.marginAuto} style={{height: "165px", width: "165px"}}>
+                    <img src="https://www.yamaha-motor.co.id/uploads/products/2021022311424212835Z1732.png"/>
+                  </Card>
+                </Grid>
+                <Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-30px"}}>
+                  <Card className={classes.marginAuto} style={{height: "165px", width: "165px"}}>
+                    <img src="https://www.yamaha-motor.co.id/uploads/products/2021022311424235104F62455.png"/>
+                  </Card>
+                </Grid>
+              </GridContainer>
             </Grid>
         </GridContainer>
         <GridContainer justify="center">
@@ -85,7 +96,7 @@ const DataProduct = function ({ backend, detailproduct, ...props })  {
                     <div>
                     <GridContainer justify="center" style={{padding:"40px", marginTop:"-30px"}}>
                       <GridItem className={classes.marginAuto}>
-                      <div align="justify">
+                        <div align="justify">
                           {ReactHtmlParser(data.overview)}
                         </div>
                       </GridItem>
@@ -107,29 +118,18 @@ const DataProduct = function ({ backend, detailproduct, ...props })  {
                   ),
                 },
                 {
-                  tabButton: "Accessories",
+                  tabButton: "Film",
                   tabIcon: Dashboard,
                   tabContent: (
                     <GridContainer justify="center" style={{padding:"40px", marginTop:"-30px"}}>
                       <GridItem className={classes.marginAuto}>
                         <div align="justify">
-                          {ReactHtmlParser(data.accessories)}
+                          {ReactHtmlParser(data.film)}
                         </div>
                       </GridItem>
                     </GridContainer>
                   ),
                 },
-                {
-                  tabButton: "Film",
-                  tabIcon: Dashboard,
-                  tabContent: (
-                    <GridContainer justify="center" style={{padding:"40px", marginTop:"-30px"}}>
-                      <GridItem className={classes.marginAuto}>
-                        <img className={navImageClasses} width="300px" height="400px" alt="First slide" src={`${backend}${data.img[0]["url"]}`} />
-                      </GridItem>
-                    </GridContainer>
-                  ),
-                },
               ]}
             />
           </GridItem>

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 (
+        <div>
+        <Card className={classes.textCenter} align="center" style={{padding:"5px"}}>
+            <div align="center">
+            <CardHeader justify="center" color="info" style={{padding:"10px"}}> 
+                <h2>Yamaha Geniue Part</h2>
+            </CardHeader>
+            </div>
+            <CardBody>
+                <h2>Yamaha Geniue Part</h2>
+            </CardBody>
+        </Card>
+        </div>
+    );
+}
+
+export default DataYGP;

pages/chart.js → pages/cart.js

@@ -5,7 +5,7 @@ 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 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";
 

pages/product.js → pages/product/product.js

@@ -9,7 +9,7 @@ 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";
+import Getproduct from "../../api/product/product.js";
 
 const useStyles = makeStyles(styles);
 

pages/product_detail.js → pages/product/product_detail.js

@@ -8,7 +8,7 @@ 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"
+import GetDetailproduct from "../../api/product/product.js"
 
 const useStyles = makeStyles(styles);
 
@@ -48,8 +48,6 @@ export async function getServerSideProps(context) {
 		detailproduct = res["DATA"]["products"];
 	}
 
-  console.log(res);
-
 	return {
 		props: { detailproduct, backend }, // will be passed to the page component as props
 	};

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 (
+        <div>
+        <Header
+            rightLinks={<HeaderLinks />}
+            fixed
+            color="info"
+            changeColorOnScroll={{
+            height: 400,
+            color: "white",
+            }}
+            {...rest}
+        />
+        <Parallax image={require("assets/img/Promotion_2-1.jpg")} width="200px"/>
+        <div className={classNames(classes.main, classes.mainRaised)}>
+            <DataYGP backend={backend} />
+        </div>
+        <Footer />
+        </div>
+    );
+};
+
+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
+    };
+}

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"