api /product

api/latest_news/news.js

@@ -1,20 +1,24 @@
 import apollo from "../../lib/apollo.js";
 
-async function GetNews(token="") {
+async function GetNews(token="", start = 0) {
 	var res = await apollo.query(
-		`
-        query{
-            latestNews
-            {
-              title
-              description
-              img{
-                url
-              }
+      `
+        query($start: Int!) {
+          latestNews(limit:6,start:$start)
+          {
+            id
+            title
+            description
+            img{
+              url
             }
           }
-				`,
-		token
+        }
+      `,
+		token,
+    {
+      start: start,
+    }
 	);
 	return res;
 }

api/product/product.js

@@ -1,11 +1,38 @@
 import apollo from "../../lib/apollo.js";
 
-async function GetProduct(token="") {
+// async function GetProduct(token="", start = 0) {
+// 	var res = await apollo.query(
+// 		`
+//     query($start: Int!) {
+//       products(limit:1,start:$start)
+//       {
+//         id
+//         name
+//         price
+//         description
+//         img{
+//           url
+//         }
+//         business_partner
+//         {
+//           name
+//         }
+//       }
+//     }`,
+// 		token,
+//     {
+//       start: start,
+//     }
+// 	);
+// 	return res;
+// }
+
+async function GetDetailProduct(token="") {
 	var res = await apollo.query(
 		`
     query{
-      products{
-        id
+      products
+      {
         name
         price
         description
@@ -23,15 +50,40 @@ async function GetProduct(token="") {
 	return res;
 }
 
-async function GetDetailProduct(token="") {
+async function GetProductYamaha(token="") {
 	var res = await apollo.query(
 		`
-    query{
-      products
+    query {
+      products(where: {business_partner: "1"})
       {
+        id
         name
+        description
         price
+        img{
+          url
+        }
+        business_partner
+        {
+          name
+        }
+      }
+    }`,
+		token
+	);
+	return res;
+}
+
+async function GetProductSuzuki(token="") {
+	var res = await apollo.query(
+		`
+    query {
+      products(where: {business_partner: "2"})
+      {
+        id
+        name
         description
+        price
         img{
           url
         }
@@ -40,13 +92,165 @@ async function GetDetailProduct(token="") {
           name
         }
       }
-    }	`,
+    }`,
+		token
+	);
+	return res;
+}
+
+async function GetProductHonda(token="") {
+	var res = await apollo.query(
+		`
+    query {
+      products(where: {business_partner: "3"})
+      {
+        id
+        name
+        description
+        price
+        img{
+          url
+        }
+        business_partner
+        {
+          name
+        }
+      }
+    }`,
+		token
+	);
+	return res;
+}
+
+async function GetProductHino(token="") {
+	var res = await apollo.query(
+		`
+    query {
+      products(where: {business_partner: "4"})
+      {
+        id
+        name
+        description
+        price
+        img{
+          url
+        }
+        business_partner
+        {
+          name
+        }
+      }
+    }`,
+		token
+	);
+	return res;
+}
+
+async function GetProductMercedes(token="") {
+	var res = await apollo.query(
+		`
+    query {
+      products(where: {business_partner: "5"})
+      {
+        id
+        name
+        description
+        price
+        img{
+          url
+        }
+        business_partner
+        {
+          name
+        }
+      }
+    }`,
+		token
+	);
+	return res;
+}
+
+async function GetProductBPR(token="") {
+	var res = await apollo.query(
+		`
+    query {
+      products(where: {business_partner: "6"})
+      {
+        id
+        name
+        description
+        price
+        img{
+          url
+        }
+        business_partner
+        {
+          name
+        }
+      }
+    }`,
+		token
+	);
+	return res;
+}
+
+async function GetProductEmilia(token="") {
+	var res = await apollo.query(
+		`
+    query {
+      products(where: {business_partner: "8"})
+      {
+        id
+        name
+        description
+        price
+        img{
+          url
+        }
+        business_partner
+        {
+          name
+        }
+      }
+    }`,
+		token
+	);
+	return res;
+}
+
+async function GetProductHomes(token="") {
+	var res = await apollo.query(
+		`
+    query {
+      products(where: {business_partner: "9"})
+      {
+        id
+        name
+        description
+        price
+        img{
+          url
+        }
+        business_partner
+        {
+          name
+        }
+      }
+    }`,
 		token
 	);
 	return res;
 }
 
 module.exports = {
-	GetProduct: GetProduct,
+	// GetProduct: GetProduct,
   GetDetailProduct:GetDetailProduct,
+  GetProductYamaha:GetProductYamaha,
+  GetProductSuzuki:GetProductSuzuki,
+  GetProductHonda:GetProductHonda,
+  GetProductHino:GetProductHino,
+  GetProductMercedes:GetProductMercedes,
+  GetProductBPR:GetProductBPR,
+  GetProductEmilia:GetProductEmilia,
+  GetProductHomes:GetProductHomes,
 };

components/Header/HeaderLinks.js

@@ -40,7 +40,7 @@ export default function HeaderLinks(props) {
         <CustomDropdown
           noLiPadding
           navDropdown
-          buttonText="Facilities"
+          buttonText="Product"
           buttonProps={{
             className: classes.navLink,
             color: "transparent",

package.json

@@ -55,6 +55,7 @@
     "react": "16.13.1",
     "react-datetime": "2.16.3",
     "react-dom": "16.13.1",
+    "react-paginate": "^7.1.0",
     "react-slick": "0.25.2",
     "react-swipeable-views": "0.13.9",
     "rsuite": "^4.8.6",

pages-sections/latest_news/news.js

@@ -1,7 +1,9 @@
-import React from "react";
+import React, { useState, useEffect } from 'react';
+import Router, { withRouter } from 'next/router'
 
 // @material-ui/core components
 import { makeStyles } from "@material-ui/core/styles";
+import ReactPaginate from 'react-paginate';
 
 // component
 import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";
@@ -16,6 +18,29 @@ import Paginations from "components/Pagination/Pagination.js";
 const useStyles = makeStyles(styles);
 
 const DataLatestNews = function ({ backend, news, ...props }) {
+  const [isLoading, setLoading] = useState(false); //State for the loading indicator
+  const startLoading = () => setLoading(true);
+  const stopLoading = () => setLoading(false);
+  useEffect(() => { //After the component is mounted set router event handlers
+    Router.events.on('routeChangeStart', startLoading); 
+    Router.events.on('routeChangeComplete', stopLoading);
+
+    return () => {
+        Router.events.off('routeChangeStart', startLoading);
+        Router.events.off('routeChangeComplete', stopLoading);
+    }
+  }, [])
+  const pagginationHandler = (page) => {
+    const currentPath = props.router.pathname;
+    const currentQuery = props.router.query;
+    currentQuery.page = page.selected + 1;
+
+    props.router.push({
+        pathname: currentPath,
+        query: currentQuery,
+    });
+  };
+
   const classes = useStyles();
   const latnews = news.map((data) => {
     return (
@@ -43,6 +68,7 @@ const DataLatestNews = function ({ backend, news, ...props }) {
       <div>
         <GridContainer justify="center">
           {latnews}
+          {latnews}
         </GridContainer>
       </div>
       <div align="center">
@@ -61,7 +87,7 @@ const DataLatestNews = function ({ backend, news, ...props }) {
           ]}
         />
       </div>
-  </div>
+    </div>
   );
 }
 

pages-sections/product/product.js

@@ -8,7 +8,6 @@ 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";
@@ -20,9 +19,10 @@ 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 Icon from "@material-ui/core/Icon";
 
 const useStyles = makeStyles(styles);
-const DataProduct = function ({ backend, product, ...props })  {
+const DataProduct = function ({ backend, yamaha, suzuki, honda, hino, mercedes, bpr, emilia, homes, ...props })  {
     const classes = useStyles();
     const { ...rest } = props;
     const imageClasses = classNames(
@@ -31,8 +31,7 @@ const DataProduct = function ({ backend, product, ...props })  {
       classes.imgFluid
     );
     const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
-    const Product = product.map((data) => {
-      console.log(data);
+    const Productyamaha = yamaha.map((data) => {
       return (
         <div>
           <img
@@ -42,11 +41,167 @@ const DataProduct = function ({ backend, product, ...props })  {
             className={navImageClasses}
           />
           <div align="center">
-            <h3><a href={"/product_detail?a="+data.id}>{data.name}</a></h3>
+            <h3>{data.name}</h3>
             <h4>Rp.{data.price}</h4>
-            <Button color="info" round>
-              <LocalGroceryStoreIcon className={classes.icons} />{" "}
-              Buy
+            <Button 
+              color="info" round
+              href={"/product_detail?a="+data.id}
+            >
+              <Icon className={classes.icons}>open_in_new</Icon>Detail Product
+            </Button>
+          </div>
+        </div>
+      );
+    })
+    const Productsuzuki = suzuki.map((data) => {
+      return (
+        <div>
+          <img
+            alt="..."
+            style={{ height: "350px", display: "block" }}
+            src={`${backend}${data.img[0]["url"]}`}
+            className={navImageClasses}
+          />
+          <div align="center">
+            <h3>{data.name}</h3>
+            <h4>Rp.{data.price}</h4>
+            <Button 
+              color="info" round
+              href={"/product_detail?a="+data.id}
+            >
+              <Icon className={classes.icons}>open_in_new</Icon>Detail Product
+            </Button>
+          </div>
+        </div>
+      );
+    })
+    const Producthonda = honda.map((data) => {
+      return (
+        <div>
+          <img
+            alt="..."
+            style={{ height: "350px", display: "block" }}
+            src={`${backend}${data.img[0]["url"]}`}
+            className={navImageClasses}
+          />
+          <div align="center">
+            <h3>{data.name}</h3>
+            <h4>Rp.{data.price}</h4>
+            <Button 
+              color="info" round
+              href={"/product_detail?a="+data.id}
+            >
+              <Icon className={classes.icons}>open_in_new</Icon>Detail Product
+            </Button>
+          </div>
+        </div>
+      );
+    })
+    const Producthino = hino.map((data) => {
+      return (
+        <div>
+          <img
+            alt="..."
+            style={{ height: "350px", display: "block" }}
+            src={`${backend}${data.img[0]["url"]}`}
+            className={navImageClasses}
+          />
+          <div align="center">
+            <h3>{data.name}</h3>
+            <h4>Rp.{data.price}</h4>
+            <Button 
+              color="info" round
+              href={"/product_detail?a="+data.id}
+            >
+              <Icon className={classes.icons}>open_in_new</Icon>Detail Product
+            </Button>
+          </div>
+        </div>
+      );
+    })
+    const Productmercedes = mercedes.map((data) => {
+      return (
+        <div>
+          <img
+            alt="..."
+            style={{ height: "350px", display: "block" }}
+            src={`${backend}${data.img[0]["url"]}`}
+            className={navImageClasses}
+          />
+          <div align="center">
+            <h3>{data.name}</h3>
+            <h4>Rp.{data.price}</h4>
+            <Button 
+              color="info" round
+              href={"/product_detail?a="+data.id}
+            >
+              <Icon className={classes.icons}>open_in_new</Icon>Detail Product
+            </Button>
+          </div>
+        </div>
+      );
+    })
+    const Productbpr = bpr.map((data) => {
+      return (
+        <div>
+          <img
+            alt="..."
+            style={{ height: "350px", display: "block" }}
+            src={`${backend}${data.img[0]["url"]}`}
+            className={navImageClasses}
+          />
+          <div align="center">
+            <h3>{data.name}</h3>
+            <h4>Rp.{data.price}</h4>
+            <Button 
+              color="info" round
+              href={"/product_detail?a="+data.id}
+            >
+              <Icon className={classes.icons}>open_in_new</Icon>Detail Product
+            </Button>
+          </div>
+        </div>
+      );
+    })
+    const Productemilia = emilia.map((data) => {
+      return (
+        <div>
+          <img
+            alt="..."
+            style={{ height: "350px", display: "block" }}
+            src={`${backend}${data.img[0]["url"]}`}
+            className={navImageClasses}
+          />
+          <div align="center">
+            <h3>{data.name}</h3>
+            <h4>Rp.{data.price}</h4>
+            <Button 
+              color="info" round
+              href={"/product_detail?a="+data.id}
+            >
+              <Icon className={classes.icons}>open_in_new</Icon>Detail Product
+            </Button>
+          </div>
+        </div>
+      );
+    })
+    const Producthomes = homes.map((data) => {
+      return (
+        <div>
+          <img
+            alt="..."
+            style={{ height: "350px", display: "block" }}
+            src={`${backend}${data.img[0]["url"]}`}
+            className={navImageClasses}
+          />
+          <div align="center">
+            <h3>{data.name}</h3>
+            <h4>Rp.{data.price}</h4>
+            <Button 
+              color="info" round
+              href={"/product_detail?a="+data.id}
+            >
+              <Icon className={classes.icons}>open_in_new</Icon>Detail Product
             </Button>
           </div>
         </div>
@@ -72,7 +227,7 @@ const DataProduct = function ({ backend, product, ...props })  {
                     tabIcon: Dashboard,
                     tabContent: (
                       <GridContainer justify="center">
-                        {Product}
+                        {Productyamaha}
                       </GridContainer>
                     ),
                   },
@@ -81,7 +236,7 @@ const DataProduct = function ({ backend, product, ...props })  {
                     tabIcon: Dashboard,
                     tabContent: (
                       <GridContainer justify="center">
-                        {Product}
+                        {Productsuzuki}
                       </GridContainer>
                     ),
                   },
@@ -90,7 +245,16 @@ const DataProduct = function ({ backend, product, ...props })  {
                     tabIcon: Dashboard,
                     tabContent: (
                       <GridContainer justify="center">
-
+                        {Producthonda}
+                      </GridContainer>
+                    ),
+                  },
+                  {
+                    tabButton: "Hino",
+                    tabIcon: Dashboard,
+                    tabContent: (
+                      <GridContainer justify="center">
+                        {Producthino}
                       </GridContainer>
                     ),
                   },
@@ -99,7 +263,34 @@ const DataProduct = function ({ backend, product, ...props })  {
                     tabIcon: Dashboard,
                     tabContent: (
                       <GridContainer justify="center">
-                        
+                        {Productmercedes}
+                      </GridContainer>
+                    ),
+                  },
+                  {
+                    tabButton: "BPR Berkat Sejati",
+                    tabIcon: Dashboard,
+                    tabContent: (
+                      <GridContainer justify="center">
+                        {Productmercedes}
+                      </GridContainer>
+                    ),
+                  },
+                  {
+                    tabButton: "Emilia Hotel",
+                    tabIcon: Dashboard,
+                    tabContent: (
+                      <GridContainer justify="center">
+                        {Productemilia}
+                      </GridContainer>
+                    ),
+                  },
+                  {
+                    tabButton: "Thamrin Homes",
+                    tabIcon: Dashboard,
+                    tabContent: (
+                      <GridContainer justify="center">
+                        {Producthomes}
                       </GridContainer>
                     ),
                   },

pages-sections/product/product_details.js

@@ -22,12 +22,6 @@ 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);
 
@@ -59,6 +53,7 @@ const DataProduct = function ({ backend, detailproduct, ...props })  {
             <h3>{data.name}</h3>
             <h3>Rp.{data.price}</h3>
             <hr></hr>
+            <p>{data.description}</p>
           </Grid>
         </GridContainer>   
       );
@@ -127,16 +122,6 @@ const DataProduct = function ({ backend, detailproduct, ...props })  {
                     </GridContainer>
                   ),
                 },
-                {
-                  tabButton: "Test Drive",
-                  tabIcon: Dashboard,
-                  tabContent: (
-                    <GridContainer justify="center">
-                      <GridItem>
-                      </GridItem>
-                    </GridContainer>
-                  ),
-                },
               ]}
             />
           </GridItem>

pages/product.js

@@ -20,7 +20,7 @@ import Getproduct from "../api/product/product.js"
 
 const useStyles = makeStyles(styles);
 
-const Product = function ({ backend, product, ...props }) {
+const Product = function ({ backend, yamaha, suzuki, honda, hino, mercedes, bpr, emilia, homes, ...props }) {
   const classes = useStyles();
   const { ...rest } = props;
   return (
@@ -50,7 +50,7 @@ const Product = function ({ backend, product, ...props }) {
         </div>
       </Parallax>
       <div className={classNames(classes.main, classes.mainRaised)}>
-        <DataProduct product={product} backend={backend}/>  
+        <DataProduct yamaha={yamaha} suzuki={suzuki} honda={honda} hino={hino} mercedes={mercedes} bpr={bpr} emilia={emilia} homes={homes} backend={backend}/>  
       </div>
       <Footer />
     </div>
@@ -60,15 +60,57 @@ const Product = function ({ backend, product, ...props }) {
 export default Product;
 
 export async function getServerSideProps(context) {
-	var product = [];
+  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.GetProduct();
+	var res = await Getproduct.GetProductYamaha();
 	if (res["STATUS"] === 1) {
-		product = res["DATA"]["products"];
+		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: { product, backend }, // will be passed to the page component as props
+		props: { yamaha, suzuki, honda, hino, mercedes, bpr, emilia, homes, backend }, // will be passed to the page component as props
 	};
 }

yarn.lock

@@ -7644,6 +7644,13 @@ react-onclickoutside@^6.5.0:
   resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.9.0.tgz#a54bc317ae8cf6131a5d78acea55a11067f37a1f"
   integrity sha512-8ltIY3bC7oGhj2nPAvWOGi+xGFybPNhJM0V1H8hY/whNcXgmDeaeoCMPPd8VatrpTsUWjb/vGzrmu6SrXVty3A==
 
+react-paginate@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/react-paginate/-/react-paginate-7.1.0.tgz#7dc244ad7ca2db59b6eb83472655de3c126be1bc"
+  integrity sha512-OZm87+Qsixw3UlpR57Va6I32wC3SJ9eRsMDi2PjWSdoMVszi3B35A6AcuXB0If/AwxJeEqspYVBJLNf8UScB7g==
+  dependencies:
+    prop-types "^15.6.1"
+
 react-popper@^1.3.7:
   version "1.3.7"
   resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.7.tgz#f6a3471362ef1f0d10a4963673789de1baca2324"