require('isomorphic-fetch'); const markdown = require('markdown-it')({ breaks: true, html: true, linkify: true }); import Container from '../../components/container'; import Header from '../../components/header'; import Link from 'next/link'; import PageName from '../../components/page-name'; import slug from 'slug'; import { SessionContext } from '../../contexts/session'; import { useContext } from 'react'; const PAGE_TITLE = 'Latest News'; function formateDate(date) { return date.toLocaleString('en-gb', { year: 'numeric', month: 'long', day: 'numeric' }); } export default function NewsArticle(props) { const pageTitle = `${props.article.title} - ${PAGE_TITLE}`; const articleHTML = { __html: markdown.render(props.article.body) }; const { user } = useContext(SessionContext); let editArticle; if (user && user.rank === 3) { const confirmDelete = (event) => { if ( !window.confirm( `Are you sure you wish to delete "${props.article.title}"?` ) ) { event.preventDefault(); return false; } }; editArticle = ( <> <p className="rsc-centre-text" style={{ fontSize: '14px' }}> <Link href={`/news/write?id=${props.article.id}`}> <a className="rsc-link" style={{ display: 'block' }}> ➕ Edit news article </a> </Link> <br /> <a href={`/api/news?id=${props.article.id}&delete=true`} className="rsc-link" style={{ display: 'block' }} onClick={confirmDelete} > ❌ Delete news article </a> </p> <hr /> </> ); } return ( <div> <Header pageName={pageTitle} /> <Container> <PageName pageName={PAGE_TITLE}> <Link href="/news"> <a className="rsc-link rsc-small-block rsc-small-spaced"> All News </a> </Link> </PageName> <div className="rsc-row"> <div className="rsc-col rsc-col-100"> <main className="rsc-box rsc-article-box"> {editArticle} <h1> <time> {formateDate( new Date(props.article.date * 1000) )} </time> - {props.article.title} </h1> <div dangerouslySetInnerHTML={articleHTML} /> <div style={{ clear: 'both' }} /> </main> </div> </div> </Container> </div> ); } export async function getServerSideProps({ query }) { if (!query.article || query.article.length !== 2) { return { notFound: true }; } const id = !Number.isNaN(+query.article[1]) ? parseInt(query.article[1], 10) : undefined; if (typeof id !== 'number') { return { notFound: true }; } const response = await fetch(`${process.env.url}api/news?id=${id}`); if (response.ok) { const json = await response.json(); if (!json) { return { notFound: true }; } const article = json.articles; if (!article) { return { notFound: true }; } const urlSlug = query.article[0]; const articleSlug = slug(article.title); if (articleSlug !== urlSlug) { return { redirect: { destination: `/news/article/${articleSlug}/${id}`, permanent: true } }; } return { props: { article } }; } return { notFound: true }; }