Add proper error popup when theme fails to load

client/homebrew/navbar/error-navitem.jsx

@@ -104,6 +104,18 @@ const ErrorNavItem = createClass({
 			</Nav.item>;
 		}
 
+		if(HBErrorCode === '09') {
+			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+				Oops!
+				<div className='errorContainer' onClick={clearError}>
+					Looks like there was a problem retreiving
+					the theme, or a theme that it inherits,
+					for this brew. Verify that brew <a className='lowercase' target='_blank' rel='noopener noreferrer' href={`/share/${response.body.brewId}`}>
+					{response.body.brewId}</a> still exists! 
+				</div>
+			</Nav.item>;
+		}
+
 		return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
 			Oops!
 			<div className='errorContainer'>

client/homebrew/navbar/error-navitem.less

@@ -21,6 +21,9 @@
   font-size        : 10px;
   font-weight      : 800;
   text-transform   : uppercase;
+	.lowercase {
+		text-transform : none;
+	}
   a{
     color : @teal;
   }

client/homebrew/pages/errorPage/errors/errorIndex.js

@@ -136,6 +136,19 @@ const errorIndex = (props)=>{
 
 		**Brew ID:**  ${props.brew.brewId}`,
 
+		// Theme load error
+		'09' : dedent`
+		## No Homebrewery theme document could be found.
+		
+		The server could not locate the Homebrewery document. It was likely deleted by
+		its owner.
+		
+		:
+
+		**Requested access:** ${props.brew.accessType}
+
+		**Brew ID:**  ${props.brew.brewId}`,
+
 		// Brew locked by Administrators error
 		'100' : dedent`
 		## This brew has been locked.

server/app.js

@@ -9,7 +9,7 @@ const yaml = require('js-yaml');
 const app = express();
 const config = require('./config.js');
 
-const { homebrewApi, getBrew, getThemeBundle, getUsersBrewThemes } = require('./homebrew.api.js');
+const { homebrewApi, getBrew, getUsersBrewThemes } = require('./homebrew.api.js');
 const GoogleActions = require('./googleActions.js');
 const serveCompressedStaticAssets = require('./static-assets.mv.js');
 const sanitizeFilename = require('sanitize-filename');
@@ -77,9 +77,6 @@ app.get('/robots.txt', (req, res)=>{
 	return res.sendFile(`robots.txt`, { root: process.cwd() });
 });
 
-// Theme
-app.get('/theme/:renderer/:id', asyncHandler(getThemeBundle));
-
 //Home page
 app.get('/', (req, res, next)=>{
 	req.brew = {

server/homebrew.api.js

@@ -271,15 +271,10 @@ const api = {
 			if(!isStaticTheme(req.params.renderer, req.params.id)) {
 				await api.getBrew('share')(req, res, ()=>{})
 					.catch((err)=>{
-						console.error(err);
 						if(err.HBErrorCode == '05')
-							res.status(err.status).send(`Theme Not Found - Renderer: ${req.params.renderer}, Name: ${req.params.id}`);
-						else
-							res.status(err.status || err.response.status).send(err.message || err);
-						req.brew = undefined;
+							err = {...err, name: 'ThemeLoad Error', message: 'Theme Not Found', HBErrorCode: '09'};
+						throw err;
 					});
-				if (!req.brew)
-					return;
 
 				currentTheme = req.brew;
 				splitTextStyleAndMetadata(currentTheme);
@@ -496,5 +491,6 @@ router.put('/api/:id', asyncHandler(api.getBrew('edit', true)), asyncHandler(api
 router.put('/api/update/:id', asyncHandler(api.getBrew('edit', true)), asyncHandler(api.updateBrew));
 router.delete('/api/:id', asyncHandler(api.deleteBrew));
 router.get('/api/remove/:id', asyncHandler(api.deleteBrew));
+router.get('/api/theme/:renderer/:id', asyncHandler(api.getThemeBundle));
 
 module.exports = api;

server/homebrew.api.spec.js

@@ -682,14 +682,20 @@ brew`);
 			model.get = jest.fn((getParams) => toBrewPromise(brews[getParams.shareId]));
 			const req = { params: { renderer: "V3", id: "userThemeAID" }, get: () => { return 'localhost'; }, protocol: 'https' };
 
-			await api.getThemeBundle(req, res);
+			let err
+			await api.getThemeBundle(req, res)
+			.catch(e => err = e);
 
-			expect(res.status).toHaveBeenCalledWith(404);
-			expect(res.send).toHaveBeenCalledWith('Theme Not Found - Renderer: V3, Name: missingTheme');
+			expect(err).toEqual({
+				HBErrorCode : "09",
+				accessType  : "share",
+				brewId      : "missingTheme",
+				message     : "Theme Not Found",
+				name        : "ThemeLoad Error",
+				status      : 404});
 		});
 	});
 
-//////////////////////////////
 	describe('getBrewThemeWithStaticParent', ()=>{
 		it('should collect parent theme and brew style - returning as css with static parent imported.', async ()=>{
 			const toBrewPromise = (brew)=>new Promise((res)=>res({ toObject: ()=>brew }));
@@ -748,7 +754,6 @@ brew`);
 			expect(res.status).toHaveBeenCalledWith(404);
 		});
 	});
-////////////////////////////////
 
 	describe('deleteBrew', ()=>{
 		it('should handle case where fetching the brew returns an error', async ()=>{

shared/helpers.js

@@ -1,5 +1,6 @@
 const _ = require('lodash');
 const yaml = require('js-yaml');
+const request = require('../client/homebrew/utils/request-middleware.js');
 
 const splitTextStyleAndMetadata = (brew)=>{
 	brew.text = brew.text.replaceAll('\r\n', '\n');
@@ -33,14 +34,20 @@ const printCurrentBrew = ()=>{
 	}
 };
 
-const fetchThemeBundle = (obj, renderer, theme)=>{
-	fetch(`${window.location.protocol}//${window.location.host}/theme/${renderer}/${theme}`).then((response)=>response.json()).then((themeBundle)=>{
-		themeBundle.joinedStyles = themeBundle.styles.map((style)=>`<style>${style}</style>`).join('\n\n'); //DOMPurify.sanitize(joinedStyles, purifyConfig);
-		obj.setState((prevState)=>({
+const fetchThemeBundle = async (obj, renderer, theme) => {
+	const res = await request
+			.get(`${window.location.protocol}//${window.location.host}/api/theme/${renderer}/${theme}`)
+			.catch((err) => {
+					obj.setState({ error: err });
+			});
+	if (!res) return;
+
+	const themeBundle = res.body;
+	themeBundle.joinedStyles = themeBundle.styles.map((style) => `<style>${style}</style>`).join('\n\n');
+	obj.setState((prevState) => ({
 			...prevState,
-			themeBundle : themeBundle
-		}));
-	});
+			themeBundle: themeBundle
+	}));
 };
 
 module.exports = {