add detail product & latestnews

api/latest_news/news.js

@@ -23,6 +23,30 @@ async function GetNews(token="", start = 0) {
 	return res;
 }
 
+async function GetDetailNews(id, token="") {
+	var res = await apollo.query(
+      `
+        query($input: ID!) {
+          latestNews(where:{id:$input})
+          {
+            id
+            title
+            description
+            img{
+              url
+            }
+          }
+        }
+      `,
+      token, 
+      {	
+        "input": id
+      }
+	);
+	return res;
+}
+
 module.exports = {
 	GetNews: GetNews,
+  GetDetailNews: GetDetailNews,
 };

api/product/product.js

@@ -27,11 +27,11 @@ import apollo from "../../lib/apollo.js";
 // 	return res;
 // }
 
-async function GetDetailProduct(token="") {
+async function GetDetailProduct(id, token="") {
 	var res = await apollo.query(
 		`
-    query{
-      products
+    query($input: ID!){
+      products(where:{id:$input})
       {
         name
         price
@@ -49,9 +49,13 @@ async function GetDetailProduct(token="") {
         film{
           url
         }
+        stock
       }
     }	`,
-		token
+		token, 
+    {	
+      "input": id
+    }
 	);
 	return res;
 }
@@ -79,6 +83,7 @@ async function GetProductYamaha(token="") {
         film{
           url
         }
+        stock
       }
     }`,
 		token
@@ -109,6 +114,7 @@ async function GetProductSuzuki(token="") {
         film{
           url
         }
+        stock
       }
     }`,
 		token
@@ -139,6 +145,7 @@ async function GetProductHonda(token="") {
         film{
           url
         }
+        stock
       }
     }`,
 		token
@@ -169,6 +176,7 @@ async function GetProductHino(token="") {
         film{
           url
         }
+        stock
       }
     }`,
 		token
@@ -199,6 +207,7 @@ async function GetProductMercedes(token="") {
         film{
           url
         }
+        stock
       }
     }`,
 		token
@@ -229,6 +238,7 @@ async function GetProductBPR(token="") {
         film{
           url
         }
+        stock
       }
     }`,
 		token
@@ -259,6 +269,7 @@ async function GetProductEmilia(token="") {
         film{
           url
         }
+        stock
       }
     }`,
 		token
@@ -289,6 +300,7 @@ async function GetProductHomes(token="") {
         film{
           url
         }
+        stock
       }
     }`,
 		token

pages-sections/latest_news/news.js

@@ -14,6 +14,7 @@ import Card from "components/Card/Card.js";
 import CardBody from "components/Card/CardBody.js";
 import Button from "components/CustomButtons/Button.js";
 import Paginations from "components/Pagination/Pagination.js";
+import Icon from "@material-ui/core/Icon";
 
 const useStyles = makeStyles(styles);
 
@@ -54,7 +55,9 @@ const DataLatestNews = function ({ backend, news, ...props }) {
         <CardBody>
           {/* <h4 className={classes.cardTitle}>{data.title}</h4> */}
           <p>{data.title}</p>
-          <Button color="info" onclick="myFunction()" id="myBtn">Read More</Button>
+          <Button color="info" round href={"/latestnews_details?s="+data.id}>
+            <Icon className={classes.icons}>open_in_new</Icon>Read More
+          </Button>
         </CardBody>
       </Card>
     </Grid>
@@ -68,7 +71,6 @@ const DataLatestNews = function ({ backend, news, ...props }) {
       <div>
         <GridContainer justify="center">
           {latnews}
-          {latnews}
         </GridContainer>
       </div>
       <div align="center">

pages-sections/latest_news/news_details.js

@@ -0,0 +1,61 @@
+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";
+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 (
+        <div className={classes.section} style={{padding:"40px"}}>
+            <div align="center" style={{marginTop:"-40px"}}>
+                <h2>{data.title}</h2>
+            </div><br></br><br></br>
+            <div align="center">
+                <img src={`${backend}${data.img[0]["url"]}`} alt="First slide" className="slick-image" />
+            </div><br></br><br></br>
+            <h5 align="justify">
+                {data.description}
+            </h5>
+        </div>
+        );
+    })
+    return (
+        <div>
+            {latnews}
+        </div>
+    );
+}
+
+export default DataLatestNews;

pages-sections/product/product.js

@@ -45,7 +45,7 @@ const DataProduct = function ({ backend, yamaha, suzuki, honda, hino, mercedes,
             <h4>Rp.{data.price}</h4>
             <Button 
               color="info" round
-              href={"/product_detail?a="+data.id}
+              href={"/product_detail?s="+data.id}
             >
               <Icon className={classes.icons}>open_in_new</Icon>Detail Product
             </Button>
@@ -67,7 +67,7 @@ const DataProduct = function ({ backend, yamaha, suzuki, honda, hino, mercedes,
             <h4>Rp.{data.price}</h4>
             <Button 
               color="info" round
-              href={"/product_detail?a="+data.id}
+              href={"/product_detail?s="+data.id}
             >
               <Icon className={classes.icons}>open_in_new</Icon>Detail Product
             </Button>
@@ -89,7 +89,7 @@ const DataProduct = function ({ backend, yamaha, suzuki, honda, hino, mercedes,
             <h4>Rp.{data.price}</h4>
             <Button 
               color="info" round
-              href={"/product_detail?a="+data.id}
+              href={"/product_detail?s="+data.id}
             >
               <Icon className={classes.icons}>open_in_new</Icon>Detail Product
             </Button>
@@ -111,7 +111,7 @@ const DataProduct = function ({ backend, yamaha, suzuki, honda, hino, mercedes,
             <h4>Rp.{data.price}</h4>
             <Button 
               color="info" round
-              href={"/product_detail?a="+data.id}
+              href={"/product_detail?s="+data.id}
             >
               <Icon className={classes.icons}>open_in_new</Icon>Detail Product
             </Button>
@@ -133,7 +133,7 @@ const DataProduct = function ({ backend, yamaha, suzuki, honda, hino, mercedes,
             <h4>Rp.{data.price}</h4>
             <Button 
               color="info" round
-              href={"/product_detail?a="+data.id}
+              href={"/product_detail?s="+data.id}
             >
               <Icon className={classes.icons}>open_in_new</Icon>Detail Product
             </Button>
@@ -155,7 +155,7 @@ const DataProduct = function ({ backend, yamaha, suzuki, honda, hino, mercedes,
             <h4>Rp.{data.price}</h4>
             <Button 
               color="info" round
-              href={"/product_detail?a="+data.id}
+              href={"/product_detail?s="+data.id}
             >
               <Icon className={classes.icons}>open_in_new</Icon>Detail Product
             </Button>
@@ -177,7 +177,7 @@ const DataProduct = function ({ backend, yamaha, suzuki, honda, hino, mercedes,
             <h4>Rp.{data.price}</h4>
             <Button 
               color="info" round
-              href={"/product_detail?a="+data.id}
+              href={"/product_detail?s="+data.id}
             >
               <Icon className={classes.icons}>open_in_new</Icon>Detail Product
             </Button>
@@ -199,7 +199,7 @@ const DataProduct = function ({ backend, yamaha, suzuki, honda, hino, mercedes,
             <h4>Rp.{data.price}</h4>
             <Button 
               color="info" round
-              href={"/product_detail?a="+data.id}
+              href={"/product_detail?s="+data.id}
             >
               <Icon className={classes.icons}>open_in_new</Icon>Detail Product
             </Button>

pages-sections/product/product_details.js

@@ -35,7 +35,6 @@ const DataProduct = function ({ backend, detailproduct, ...props })  {
     );
     const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
     const Productdetails = detailproduct.map((data) => {
-      console.log(data);
       return (
         <div>
         <GridContainer>
@@ -54,7 +53,7 @@ const DataProduct = function ({ backend, detailproduct, ...props })  {
             <h3>{data.name}</h3>
             <h3>Rp.{data.price}</h3>
             <hr></hr>
-            <p>{data.description}</p>
+            <p>{data.description} ---- Stock Unit : {data.stock}</p>
           </Grid>
         </GridContainer>
         <GridContainer justify="center">
@@ -121,7 +120,7 @@ const DataProduct = function ({ backend, detailproduct, ...props })  {
       </div>
       <CardBody>
           <div> 
-            {Productdetails[0]}
+            {Productdetails}
           </div>
       </CardBody>
       <CardFooter className={classes.textMuted} textAlign="center">

pages/_document.js

@@ -13,7 +13,7 @@ class MyDocument extends Document {
             content="width=device-width, initial-scale=1, shrink-to-fit=no"
           />
           <meta name="theme-color" content="#000000" />
-          <link rel="shortcut icon" href={require("assets/img/favicon.png")} />
+          <link rel="shortcut icon" href={require("assets/img/favicons.png")} />
           <link
             rel="apple-touch-icon"
             sizes="76x76"

pages/api/product/get.js

@@ -1,14 +1,10 @@
 import DetailProduct from "../../../api/product/product";
 
 export default async function handler(req, res) {
+    console.log("masuk");
     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);
+        var id = req.body.id;
+            var detailproduct = await DetailProduct.GetDetailProduct(id);
             if (detailproduct["STATUS"] == 0) {
                 res.status(200).json(detailproduct);
             } else if (detailproduct["DATA"]["products"] == null) {
@@ -24,10 +20,8 @@ export default async function handler(req, res) {
                     DATA: detailproduct["DATA"]["products"],
                 });
             }
-        } else {
-            res.status(200).send("NOT FOUND");
-        }
     } else {
+        console.log("masukas");
         res.status(200).send("NOT FOUND");
     }
 }

pages/latestnews_details.js

@@ -0,0 +1,76 @@
+import React from "react";
+
+// nodejs library that concatenates classes
+import classNames from "classnames";
+
+// @material-ui/core components
+import { makeStyles } from "@material-ui/core/styles";
+
+// 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 GetLatestNews from "../api/latest_news/news.js"
+import DataSnackbarContent from "../pages-sections/snackbar.js";
+import DetailLatestNews from "../pages-sections/latest_news/news_details.js";
+
+const useStyles = makeStyles(styles);
+
+const detailLatestNews = function ({ backend, news, ...props }) {
+    const classes = useStyles();
+    const { ...rest } = props;
+    <DetailLatestNews news={props.news}/>
+    return (
+        <div>
+        <Header
+            rightLinks={<HeaderLinks />}
+            fixed
+            color="info"
+            changeColorOnScroll={{
+            height: 400,
+            color: "white"
+            }}
+            {...rest}
+        />
+        <Parallax image={require("assets/img/simulasicicilan.jpg")} width="200px">
+            <div className={classes.container}>
+            <GridContainer>
+                <GridItem>
+                {/* <div className={classes.brand}>
+                    <h1 className={classes.title}>NextJS Material Kit.</h1>
+                    <h3 className={classes.subtitle}>
+                    A Badass Material Kit based on Material-UI and NextJS.
+                    </h3>
+                </div> */}
+                </GridItem>
+            </GridContainer>
+            </div>
+        </Parallax>
+        <div className={classNames(classes.main, classes.mainRaised)}>
+            <DataSnackbarContent/>
+            <DetailLatestNews news={news} backend={backend}/> 
+        </div>
+        <Footer />
+        </div>
+    );
+}
+
+export default detailLatestNews;
+
+export async function getServerSideProps(context) {
+    var {query} = context;
+	var news = [];
+    const backend = process.env.BACKEND_SERVER_URI;
+	var res = await GetLatestNews.GetDetailNews(query.s||0);
+	if (res["STATUS"] === 1) {
+		news = res["DATA"]["latestNews"];
+	}
+	return {
+		props: { news, backend }, // will be passed to the page component as props
+	};
+}

pages/product_detail.js

@@ -59,10 +59,11 @@ const ProductDetails = function ({ backend, detailproduct, ...props })  {
 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();
+	var res = await GetDetailproduct.GetDetailProduct(query.s||0);
 	if (res["STATUS"] === 1) {
 		detailproduct = res["DATA"]["products"];
 	}