lighter

components/Header/Header.js

@@ -59,7 +59,7 @@ export default function Header(props) {
     [classes.appBar]: true,
     [classes[color]]: color,
     [classes.absolute]: absolute,
-    [classes.fixed]: fixed
+    [classes.fixed]: fixed,
   });
   const brandComponent = (
     <Link href="/components" as="/components">
@@ -99,7 +99,7 @@ export default function Header(props) {
           anchor={"right"}
           open={mobileOpen}
           classes={{
-            paper: classes.drawerPaper
+            paper: classes.drawerPaper,
           }}
           onClose={handleDrawerToggle}
         >
@@ -114,7 +114,7 @@ export default function Header(props) {
 }
 
 Header.defaultProp = {
-  color: "black"
+  color: "black",
 };
 
 Header.propTypes = {
@@ -127,7 +127,7 @@ Header.propTypes = {
     "transparent",
     "white",
     "rose",
-    "dark"
+    "dark",
   ]),
   rightLinks: PropTypes.node,
   leftLinks: PropTypes.node,
@@ -151,7 +151,7 @@ Header.propTypes = {
       "transparent",
       "white",
       "rose",
-      "dark"
-    ]).isRequired
-  })
+      "dark",
+    ]).isRequired,
+  }),
 };

components/Header/HeaderLinks.js

@@ -25,16 +25,17 @@ export default function HeaderLinks(props) {
   return (
     <List className={classes.list}>
       <ListItem className={classes.listItem}>
-        <img src="https://1.bp.blogspot.com/-J9AsxdwrF-Y/Wn70KyBApaI/AAAAAAAACRo/LTy3zrALzhckryd9QPi_KuVyWvwFMZyMQCLcBGAs/s640/TG.png" width="180px"/>
+        <img
+          src="https://1.bp.blogspot.com/-J9AsxdwrF-Y/Wn70KyBApaI/AAAAAAAACRo/LTy3zrALzhckryd9QPi_KuVyWvwFMZyMQCLcBGAs/s640/TG.png"
+          width="180px"
+        />
       </ListItem>
       <ListItem className={classes.listItem}>
-        <Button
-          href="/home"
-          color="transparent"
-          className={classes.navLink}
-        >
-          <Icon className={classes.icons}>home</Icon> Home
-        </Button>
+        <Link href="/home">
+          <Button color="transparent" className={classes.navLink}>
+            <Icon className={classes.icons}>home</Icon> Home
+          </Button>
+        </Link>
       </ListItem>
       <ListItem className={classes.listItem}>
         <CustomDropdown
@@ -57,13 +58,11 @@ export default function HeaderLinks(props) {
         />
       </ListItem>
       <ListItem className={classes.listItem}>
-        <Button
-          href="/latestnews"
-          color="transparent"
-          className={classes.navLink}
-        >
-          <Icon className={classes.icons}>event</Icon> Latest News
-        </Button>
+        <Link href="/latestnews">
+          <Button color="transparent" className={classes.navLink}>
+            <Icon className={classes.icons}>event</Icon> Latest News
+          </Button>
+        </Link>
       </ListItem>
       <ListItem className={classes.listItem}>
         <Button href="/carrer" color="transparent" className={classes.navLink}>
@@ -115,7 +114,11 @@ export default function HeaderLinks(props) {
         />
       </ListItem>
       <ListItem className={classes.listItem}>
-        <Button href="abous_us/aboutus" color="transparent" className={classes.navLink}>
+        <Button
+          href="abous_us/aboutus"
+          color="transparent"
+          className={classes.navLink}
+        >
           <Icon className={classes.icons}>account_balance</Icon> About Us
         </Button>
       </ListItem>

next.config.js

@@ -5,13 +5,26 @@ const webpack = require("webpack");
 const path = require("path");
 // const withCSS = require("@zeit/next-css");
 
-// require("dotenv").config();
+require("dotenv").config();
+
+// module.exports = withPlugins([[withSass], [withImages], [withCSS]], {
+// 	// env: {
+// 	// 	API_URL: process.env.API_URL,
+// 	// },
+// 	trailingSlash: true,
+// webpack(config, { dev }) {
+// 	if (dev) {
+// 		config.devtool = "cheap-module-source-map";
+// 	}
+// 	config.resolve.modules.push(path.resolve("./"));
+// 	return config;
+// },
+// 	generateEtags: false,
+// });
 
 module.exports = withPlugins([[withSass], [withImages]], {
-	// env: {
-	// 	API_URL: process.env.API_URL,
-	// },
 	trailingSlash: true,
+	generateEtags: false,
 	webpack(config, { dev }) {
 		if (dev) {
 			config.devtool = "cheap-module-source-map";
@@ -19,5 +32,32 @@ module.exports = withPlugins([[withSass], [withImages]], {
 		config.resolve.modules.push(path.resolve("./"));
 		return config;
 	},
-	generateEtags: false,
 });
+
+// module.exports = withSass({
+// 	cssModules: true,
+
+// 	cssLoaderOptions: {
+// 		importLoaders: 1,
+// 		localIdentName: "[local]_[hash:base64:5]",
+// 		url: false,
+// 	},
+// 	trailingSlash: true,
+// 	webpack(config, { dev }) {
+// 		if (dev) {
+// 			config.devtool = "cheap-module-source-map";
+// 		}
+// 		config.resolve.modules.push(path.resolve("./"));
+// 		return config;
+// 	},
+// 	...withImages({
+// 		webpack(config, { dev }) {
+// 			if (dev) {
+// 				config.devtool = "cheap-module-source-map";
+// 			}
+// 			config.resolve.modules.push(path.resolve("./"));
+// 			return config;
+// 		},
+// 	}),
+// 	generateEtags: false,
+// });

package.json

@@ -41,6 +41,7 @@
     "apollo-upload-client": "^14.1.3",
     "classnames": "2.2.6",
     "cross-fetch": "^3.0.6",
+    "dotenv": "^8.2.0",
     "graphql": "^15.3.0",
     "mdbreact": "^5.0.1",
     "moment": "2.25.3",

pages-sections/latest_news/news_details.js

@@ -1,9 +1,9 @@
-import React, { useState, useEffect } from 'react';
-import Router, { withRouter } from 'next/router'
-
+import React, { useState, useEffect } from "react";
+import Router, { withRouter } from "next/router";
+import ReactHtmlParser from "react-html-parser";
 // @material-ui/core components
 import { makeStyles } from "@material-ui/core/styles";
-import ReactPaginate from 'react-paginate';
+import ReactPaginate from "react-paginate";
 
 // component
 import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";
@@ -15,15 +15,16 @@ 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);
+    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);
-        }
-    }, [])
+            Router.events.off("routeChangeStart", startLoading);
+            Router.events.off("routeChangeComplete", stopLoading);
+        };
+    }, []);
     const pagginationHandler = (page) => {
         const currentPath = props.router.pathname;
         const currentQuery = props.router.query;
@@ -38,27 +39,29 @@ const DataLatestNews = function ({ backend, news, ...props }) {
     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>
-                {data.published_at}
+            <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>
+                        {data.published_at}
+                    </div>
                 </div>
-            </div><br></br>
-            <h5 align="justify">
-                {data.description}
-            </h5>
-        </div>
+                <br></br>
+                <h5 align="justify">{ReactHtmlParser(data.description)}</h5>
+            </div>
         );
-    })
-    return (
-        <div>
-            {latnews}
-        </div>
-    );
-}
+    });
+    return <div>{latnews}</div>;
+};
 
 export default DataLatestNews;

pages/_app.js

@@ -20,7 +20,6 @@ import ReactDOM from "react-dom";
 import App from "next/app";
 import Head from "next/head";
 import Router from "next/router";
-
 import PageChange from "components/PageChange/PageChange.js";
 
 import "assets/scss/nextjs-material-kit.scss?v=1.1.0";
@@ -54,7 +53,6 @@ export default class MyApp extends App {
   }
   render() {
     const { Component, pageProps } = this.props;
-
     return (
       <React.Fragment>
         <Head>

pages/_document.js

@@ -1,7 +1,8 @@
 import React from "react";
 import Document, { Head, Main, NextScript } from "next/document";
-import { ServerStyleSheets } from "@material-ui/styles";
-
+import { ServerStyleSheets } from "@material-ui/core/styles";
+import "assets/scss/nextjs-material-kit.scss?v=1.1.0";
+import theme from "../theme";
 class MyDocument extends Document {
   render() {
     return (
@@ -12,7 +13,7 @@ class MyDocument extends Document {
             name="viewport"
             content="width=device-width, initial-scale=1, shrink-to-fit=no"
           />
-          <meta name="theme-color" content="#000000" />
+          <meta name="theme-color" content={theme.palette.primary.main} />
           <link rel="shortcut icon" href={require("assets/img/favicons.png")} />
           <link
             rel="apple-touch-icon"
@@ -40,49 +41,23 @@ class MyDocument extends Document {
   }
 }
 
-MyDocument.getInitialProps = async ctx => {
-  // Resolution order
-  //
-  // On the server:
-  // 1. app.getInitialProps
-  // 2. page.getInitialProps
-  // 3. document.getInitialProps
-  // 4. app.render
-  // 5. page.render
-  // 6. document.render
-  //
-  // On the server with error:
-  // 1. document.getInitialProps
-  // 2. app.render
-  // 3. page.render
-  // 4. document.render
-  //
-  // On the client
-  // 1. app.getInitialProps
-  // 2. page.getInitialProps
-  // 3. app.render
-  // 4. page.render
-
-  // Render app and page and get the context of the page with collected side effects.
+MyDocument.getInitialProps = async (ctx) => {
   const sheets = new ServerStyleSheets();
   const originalRenderPage = ctx.renderPage;
 
   ctx.renderPage = () =>
     originalRenderPage({
-      enhanceApp: App => props => sheets.collect(<App {...props} />)
+      enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
     });
 
   const initialProps = await Document.getInitialProps(ctx);
 
   return {
     ...initialProps,
-    // Styles fragment is rendered after the app and page rendering finish.
     styles: [
-      <React.Fragment key="styles">
-        {initialProps.styles}
-        {sheets.getStyleElement()}
-      </React.Fragment>
-    ]
+      ...React.Children.toArray(initialProps.styles),
+      sheets.getStyleElement(),
+    ],
   };
 };
 

pages/home.js

@@ -9,13 +9,13 @@ 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 Button from "components/CustomButtons/Button.js";
-
+import Footer from "components/Footer/Footer.js";
 import GetbusinessPartners from "../api/home/businessPartner.js";
 import Getservices from "../api/home/service.js";
 import Getcarousels from "../api/home/carousel.js";

server.js

@@ -1,20 +1,27 @@
-const { createServer } = require("http");
-const { parse } = require("url");
-const next = require("next");
-
-const dev = process.env.NODE_ENV !== "production";
-const app = next({ dev });
-const handle = app.getRequestHandler();
+// const { createServer } = require("http");
+// const { parse } = require("url");
+// const next = require("next");
+const cli = require("next/dist/cli/next-start");
+// const dev = process.env.NODE_ENV !== "production";
+// const app = next({ dev });
+// const handle = app.getRequestHandler();
+require("dotenv").config();
 
 const port = process.env.PORT || "14009";
 
-app.prepare().then(() => {
-	createServer((req, res) => {
-		const parsedUrl = parse(req.url, true);
-		const { pathname, query } = parsedUrl;
-		app.render(req, res, "/", query);
-	}).listen(port, (err) => {
-		if (err) throw err;
-		console.log(`Ready on port ${port}`);
-	});
-});
+// app.prepare().then(() => {
+// 	createServer((req, res) => {
+// 		const parsedUrl = parse(req.url, true);
+// 		const { pathname, query } = parsedUrl;
+// 		// if (!pathname.includes("_next")) {
+// 		console.log(pathname);
+// 		// 	app.render(req, res, pathname, query);
+// 		// }
+// 		app.render(req, res, "/abous_us/aboutus", query);
+// 	}).listen(port, (err) => {
+// 		if (err) throw err;
+// 		console.log(`Ready on port ${port}`);
+// 	});
+// });
+
+cli.nextStart(["-p", port]);

theme.js

@@ -0,0 +1,22 @@
+import { createMuiTheme } from "@material-ui/core/styles";
+import red from "@material-ui/core/colors/red";
+
+// Create a theme instance.
+const theme = createMuiTheme({
+  palette: {
+    primary: {
+      main: "#556cd6",
+    },
+    secondary: {
+      main: "#19857b",
+    },
+    error: {
+      main: red.A400,
+    },
+    background: {
+      default: "#fff",
+    },
+  },
+});
+
+export default theme;

yarn.lock

@@ -3688,7 +3688,7 @@ dot-prop@^5.2.0:
   dependencies:
     is-obj "^2.0.0"
 
-dotenv@^8.0.0:
+dotenv@^8.0.0, dotenv@^8.2.0:
   version "8.2.0"
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.2.0.tgz#97e619259ada750eea3e4ea3e26bceea5424b16a"
   integrity sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==