diff --git a/components/Header/Header.js b/components/Header/Header.js index 3799fd0..738fd19 100644 --- a/components/Header/Header.js +++ b/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 = ( @@ -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, + }), }; diff --git a/components/Header/HeaderLinks.js b/components/Header/HeaderLinks.js index 170158c..dacce98 100644 --- a/components/Header/HeaderLinks.js +++ b/components/Header/HeaderLinks.js @@ -25,16 +25,17 @@ export default function HeaderLinks(props) { return ( - + - + + + - + + + diff --git a/next.config.js b/next.config.js index aa6cd85..a3f3acb 100644 --- a/next.config.js +++ b/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, +// }); diff --git a/package.json b/package.json index 390379a..8898182 100644 --- a/package.json +++ b/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", diff --git a/pages-sections/latest_news/news_details.js b/pages-sections/latest_news/news_details.js index b1c6478..cd751c1 100644 --- a/pages-sections/latest_news/news_details.js +++ b/pages-sections/latest_news/news_details.js @@ -1,36 +1,65 @@ -import React, { useState, useEffect } from 'react'; - +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 styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.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 ( -
-
-

{data.title}

-




-
- First slide -


- {data.published_at} +
+
+

{data.title}

+
+

+

+
+ First slide +
+

+ {data.published_at} +
-


-
- {data.description} -
-
+

+
{ReactHtmlParser(data.description)}
+
); - }) - return ( -
- {latnews} -
- ); -} + }); + return
{latnews}
; +}; export default DataLatestNews; diff --git a/pages/_app.js b/pages/_app.js index 9c4842c..5ebfe61 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -3,7 +3,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"; @@ -37,7 +36,6 @@ export default class MyApp extends App { } render() { const { Component, pageProps } = this.props; - return ( diff --git a/pages/_document.js b/pages/_document.js index 71095f3..42aa98e 100644 --- a/pages/_document.js +++ b/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" /> - + { - // 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() + enhanceApp: (App) => (props) => sheets.collect(), }); const initialProps = await Document.getInitialProps(ctx); return { ...initialProps, - // Styles fragment is rendered after the app and page rendering finish. styles: [ - - {initialProps.styles} - {sheets.getStyleElement()} - - ] + ...React.Children.toArray(initialProps.styles), + sheets.getStyleElement(), + ], }; }; diff --git a/pages/home.js b/pages/home.js index e924b1b..f5530f7 100644 --- a/pages/home.js +++ b/pages/home.js @@ -8,6 +8,13 @@ import Footer from "components/Footer/Footer.js"; import Parallax from "components/Parallax/Parallax.js"; import styles from "assets/jss/nextjs-material-kit/pages/components.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"; diff --git a/server.js b/server.js index ff4c424..9d93689 100644 --- a/server.js +++ b/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]); diff --git a/theme.js b/theme.js new file mode 100644 index 0000000..13a0354 --- /dev/null +++ b/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; diff --git a/yarn.lock b/yarn.lock index 882e679..cb3dd18 100644 --- a/yarn.lock +++ b/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==