Removed client-side markdown rendering

client/markdown/credits.md

@@ -1,10 +0,0 @@
-<header>
-	<h1 class="text centered">Credits</h1>
-</header>
-
-## MERN-template
-
-The MERN-template developed by Kayne Ruse, KR Game Studios
-
-[https://github.com/krgamestudios/MERN-template](https://github.com/krgamestudios/MERN-template)
-

client/markdown/privacy-policy.md

@@ -1,4 +0,0 @@
-<header>
-	<h1 class="text centered">Privacy Policy</h1>
-</header>
-

client/pages/administration/panels/news-editor.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useContext, useRef } from 'react';
-import Select from 'react-dropdown-select';
+import Select from 'react-select';
 
 import { TokenContext } from '../../utilities/token-provider';
 
@@ -39,11 +39,9 @@ const NewsEditor = props => {
 		<div className='panel'>
 			<h2 className='text centered'>News Editor</h2>
 			<Select
-				options={articles.map(article => { return { label: article.title, value: article.index }; })}
-				onChange={async values => {
+				options={articles.map(article => { return { label: article.title, index: article.index }; })}
+				onChange={async ({index}) => {
 					//fetch this article
-					const index = values[0].value;
-
 					const result = await fetch(`${process.env.NEWS_URI}/news/archive/${index}`, {
 						headers: {
 							'Access-Control-Allow-Origin': '*'

client/pages/administration/panels/news-publisher.jsx

@@ -28,7 +28,7 @@ const NewsPublisher = props => {
 				<input type='text' name='title' placeholder='Title' ref={titleRef} />
 				<input type='text' name='author' placeholder='Author' ref={authorRef} />
 				<textarea name='body' rows='10' cols='150' placeholder='Body of the article goes here...' ref={bodyRef} />
-	
+
 				<button type='submit'>Publish</button>
 			</form>
 		</div>

client/pages/app.jsx

@@ -5,7 +5,6 @@ import { TokenContext } from './utilities/token-provider';
 
 //library components
 import LazyRoute from './utilities/lazy-route';
-import MarkdownPage from './utilities/markdown-page';
 
 //styling
 import '../styles/styles.css';
@@ -34,8 +33,8 @@ const App = props => {
 					<LazyRoute path='/admin' component={() => import('./administration/admin')} />
 					<LazyRoute path='/mod' component={() => import('./administration/mod')} />
 
-					<LazyRoute path='/privacypolicy' component={async () => () => <MarkdownPage content={require('../markdown/privacy-policy.md').default} />} />
-					<LazyRoute path='/credits' component={async () => () => <MarkdownPage content={require('../markdown/credits.md').default} />} />
+					<LazyRoute path='/privacypolicy' component={() => import('./static/privacy-policy')} />
+					<LazyRoute path='/credits' component={() => import('./static/credits')} />
 
 					<LazyRoute path='*' component={() => import('./not-found')} />
 				</Switch>

client/pages/dashboard.jsx

@@ -5,7 +5,6 @@ import ApplyToBody from './utilities/apply-to-body';
 
 import { TokenContext } from './utilities/token-provider';
 
-import MarkdownPanel from './utilities/markdown-panel';
 import Logout from './accounts/panels/logout';
 
 const Dashboard = props => {

client/pages/homepage.jsx

@@ -5,7 +5,6 @@ import ApplyToBody from './utilities/apply-to-body';
 
 import { TokenContext } from './utilities/token-provider';
 
-import MarkdownPanel from './utilities/markdown-panel';
 import NewsFeed from './panels/news-feed';
 
 const HomePage = props => {

client/pages/panels/news-feed.jsx

@@ -1,8 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import dateFormat from 'dateformat';
 
-import MarkdownPanel from '../utilities/markdown-panel';
-
 const NewsFeed = props => {
 	const [articles, setArticles] = useState([]);
 	const aborter = useRef(new AbortController()); //BUGFIX: double-renders = double fetches + react update after unmount
@@ -29,6 +27,7 @@ const NewsFeed = props => {
 		<div className='panel'>
 			<h1 className='text centered'>News Feed</h1>
 			{articles.map((article, index) => {
+				console.log(article)
 				return (
 					<div key={index} className='panel'>
 						<hr />
@@ -40,7 +39,7 @@ const NewsFeed = props => {
 							<span>Published {dateFormat(article.createdAt, 'fullDate')}</span>
 						}</em></p>
 						<br />
-						<MarkdownPanel style={{whiteSpace: 'pre-wrap'}} content={article.body} />
+						<div dangerouslySetInnerHTML={{ __html: article.rendered }} />
 					</div>
 				);
 			})}

client/pages/static/credits.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+const Static = props => {
+	return (
+		<>
+			<header>
+				<h1 className='text centered'>Credits</h1>
+			</header>
+			<h2>MERN-template</h2>
+			<p>The <a href='https://github.com/krgamestudios/MERN-template'>MERN-template</a> developed by Kayne Ruse, KR Game Studios</p>
+		</>
+	);
+};
+
+export default Static;
+

client/pages/static/privacy-policy.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const Static = props => {
+	return (
+		<header>
+			<h1 className="text centered">Privacy Policy</h1>
+		</header>
+	);
+};
+
+export default Static;
+

client/pages/utilities/markdown-page.jsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-
-import ApplyToBody from '../utilities/apply-to-body';
-
-import MarkdownPanel from './markdown-panel';
-
-const MarkdownPage = props => {
-	return (
-		<>
-			<ApplyToBody className='dashboard' />
-			<div className='page'>
-				<div className='central panel'>
-					<MarkdownPanel uri={props.uri} content={props.content} />
-					<Link to='/' className='text centered'>Return Home</Link>
-				</div>
-			</div>
-		</>
-	)
-};
-
-export default MarkdownPage;

client/pages/utilities/markdown-panel.jsx

@@ -1,35 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import ReactMarkdown from 'react-markdown';
-import rehypeRaw from 'rehype-raw';
-
-const Markdown = props => {
-	//content?
-	let [contentHook, setContentHook] = useState(null);
-
-	//check arguments
-	if (!props.content) {
-		if (!props.uri) {
-			throw 'Markdown requires either content or uri prop';
-		}
-
-		//once
-		useEffect(() => {
-			fetch(props.uri)
-				.then(blob => blob.text())
-				.then(blob => setContentHook(blob))
-				.catch(e => console.error(e))
-			;
-		}, []);
-	}
-
-	//assume raw info
-	else if (!contentHook) {
-		setContentHook(props.content);
-	}
-
-	return (
-		<ReactMarkdown rehypePlugins={[rehypeRaw]} props={{...props}}>{contentHook}</ReactMarkdown>
-	);
-};
-
-export default Markdown;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mern-template",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "A website template using the MERN stack.",
   "main": "server/server.js",
   "scripts": {
@@ -8,9 +8,12 @@
     "build": "npm run build:server && npm run build:client",
     "build:server": "exit 0",
     "build:client": "webpack --env=production --config webpack.config.js",
-    "dev": "concurrently npm:watch:server npm:watch:client",
-    "watch:server": "nodemon ./* --ext js,jsx,json --ignore 'node_modules/*'",
-    "watch:client": "webpack serve --env=development --config webpack.config.js",
+    "dev": "concurrently npm:dev:server npm:dev:client",
+    "dev:server": "nodemon ./* --ext js,jsx,json --ignore 'node_modules/*'",
+    "dev:client": "webpack serve --env=development --config webpack.config.js",
+    "local": "concurrently npm:local:server npm:local:client",
+    "local:server": "nodemon ./* --ext js,jsx,json --ignore 'node_modules/*'",
+    "local:client": "webpack serve --env=local --config webpack.config.js",
     "analyze": "webpack --env=production --env=analyze --config webpack.config.js"
   },
   "repository": {
@@ -43,10 +46,9 @@
     "raw-loader": "^4.0.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-dropdown-select": "^4.7.4",
-    "react-markdown": "^6.0.2",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
+    "react-select": "^5.2.1",
     "rehype-raw": "^5.1.0",
     "sequelize": "^6.6.5",
     "socket.io-client": "^4.1.3",

webpack.config.js

@@ -9,7 +9,7 @@ const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const path = require('path');
 
 //the exported config function
-module.exports = ({ production, analyze }) => {
+module.exports = ({ production, development, local, analyze }) => {
 	return {
 		mode: production ? "production" : "development",
 		entry: path.resolve(__dirname, 'client', 'client.jsx'),
@@ -56,9 +56,9 @@ module.exports = ({ production, analyze }) => {
 			new DefinePlugin({
 				'process.env': {
 					'PRODUCTION': production,
-					'NEWS_URI': production ? `"${process.env.NEWS_URI}"` : '"https://dev-news.krgamestudios.com"',
-					'AUTH_URI': production ? `"${process.env.AUTH_URI}"` : '"https://dev-auth.krgamestudios.com"',
-					'CHAT_URI': production ? `"${process.env.CHAT_URI}"` : '"https://dev-chat.krgamestudios.com"',
+					'NEWS_URI': production ? `"${process.env.NEWS_URI}"` : development ? '"https://dev-news.krgamestudios.com"' : '"http://localhost:3100"',
+					'AUTH_URI': production ? `"${process.env.AUTH_URI}"` : development ? '"https://dev-auth.krgamestudios.com"' : '"http://localhost:3200"',
+					'CHAT_URI': production ? `"${process.env.CHAT_URI}"` : development ? '"https://dev-chat.krgamestudios.com"' : '"http://localhost:3300"',
 				}
 			}),
 			new CleanWebpackPlugin({
@@ -93,7 +93,21 @@ module.exports = ({ production, analyze }) => {
 				},
 			},
 
-			static: '/public'
+			watchFiles: {
+				options: {
+					ignored: ['node_modules/**']
+				}
+			},
+
+			proxy: {
+				'/api': {
+					target: 'http://localhost:3000'
+				}
+			},
+
+			static: '/public',
+
+			historyApiFallback: true
 		}
 	}
 };