|
- 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;
|