Functional user theme loading though noising console

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -14,7 +14,7 @@ const NotificationPopup = require('./notificationPopup/notificationPopup.jsx');
 const Frame = require('react-frame-component').default;
 const dedent = require('dedent-tabs').default;
 
-const Themes = require('themes/themes.json');
+const staticThemes = require('themes/themes.json');
 
 const PAGE_HEIGHT = 1056;
 
@@ -182,18 +182,34 @@ const BrewRenderer = (props)=>{
 	};
 
 	let rendererPath  = props.renderer == 'V3' ? 'V3' : 'Legacy';
-	const themePath     = props.theme ?? '5ePHB';
+	let baseRendererPath = props.renderer == 'V3' ? 'V3' : 'Legacy';
-	const baseThemePath = Themes[rendererPath][themePath].baseTheme;
+	const blankRendererPath = props.renderer == 'V3' ? 'V3' : 'Legacy';
+	if(props.theme[0] === '#') {
+		rendererPath = 'Brew';
+	}
+	let themePath     = props.theme ?? '5ePHB';
+	console.log(`props.userThemes`);
+	console.log(props);
+	console.log(`props.userThemes`);
+	const Themes = { ...staticThemes, ...props.userThemes };
+	let baseThemePath = Themes[rendererPath][themePath]?.baseTheme;
 
 	// Override static theme values if a Brew theme.
 
 	if(themePath[0] == '#') {
-		themePath.slice(1);
+		themePath = themePath.slice(1);
 		rendererPath = '';
 	} else {
 		rendererPath += '/';
 	}
 
+	if(baseThemePath && baseThemePath[0] == '#') {
+		baseThemePath = baseThemePath.slice(1);
+		baseRendererPath = '';
+	} else {
+		baseRendererPath += '/';
+	}
+
 	return (
 		<>
 			{/*render dummy page while iFrame is mounting.*/}
@@ -220,9 +236,9 @@ const BrewRenderer = (props)=>{
 						<RenderWarnings />
 						<NotificationPopup />
 					</div>
-					<link href={`/css/${rendererPath}Blank`} rel='stylesheet'/>
+					<link href={`/css/${blankRendererPath}/Blank`} rel='stylesheet'/>
 					{baseThemePath &&
-						<link href={`/css/${rendererPath}${baseThemePath}`} rel='stylesheet'/>
+						<link href={`/css/${baseRendererPath}${baseThemePath}`} rel='stylesheet'/>
 					}
 					<link href={`/css/${rendererPath}${themePath}`} rel='stylesheet'/>
 

client/homebrew/editor/editor.jsx

@@ -378,6 +378,7 @@ const Editor = createClass({
 					showEditButtons={this.props.showEditButtons}
 					renderer={this.props.renderer}
 					theme={this.props.brew.theme}
+					userThemes={this.props.brew.userThemes}
 					undo={this.undo}
 					redo={this.redo}
 					foldCode={this.foldCode}

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -38,6 +38,7 @@ const MetadataEditor = createClass({
 				authors     : [],
 				systems     : [],
 				renderer    : 'legacy',
+				themeClass  : 'V3',
 				theme       : '5ePHB',
 				lang        : 'en'
 			},
@@ -110,8 +111,9 @@ const MetadataEditor = createClass({
 		});
 	},
 
-	handleTheme : function(theme){
+	handleTheme : function(theme, themeClass){
 		this.props.metadata.renderer = theme.renderer;
+		this.props.metadata.themeClass = themeClass;
 		this.props.metadata.theme    = theme.path;
 		this.props.onChange(this.props.metadata);
 	},
@@ -199,7 +201,7 @@ const MetadataEditor = createClass({
 		const listThemes = (renderer)=>{
 			return _.map(_.values(mergedThemes[renderer]), (theme)=>{
 				const preview = theme?.thumbnail ? theme.thumbnail : `/themes/${theme.renderer}/${theme.path}/dropdownPreview.png`;
-				return <div className='item' key={`${renderer}_${theme.name}`} onClick={()=>this.handleTheme(theme)} title={''}>
+				return <div className='item' key={`${renderer}_${theme.name}`} onClick={()=>this.handleTheme(theme, renderer)} title={''}>
 					{`${renderer} : ${theme.name}`}
 					<img src={`/themes/${theme.renderer}/${theme.path}/dropdownTexture.png`}/>
 					<div className='preview'>
@@ -210,7 +212,7 @@ const MetadataEditor = createClass({
 			});
 		};
 
-		const currentTheme = mergedThemes[`${_.upperFirst(this.props.metadata.renderer)}`][this.props.metadata.theme];
+		const currentTheme = mergedThemes[`${_.upperFirst(this.props.metadata.themeClass?this.props.metadata.themeClass:this.props.metadata.renderer)}`][this.props.metadata.theme];
 		let dropdown;
 
 		if(this.props.metadata.renderer == 'legacy') {
@@ -224,7 +226,7 @@ const MetadataEditor = createClass({
 			dropdown =
 				<Nav.dropdown className='value' trigger='click'>
 					<div>
-						{`${_.upperFirst(currentTheme.renderer)} : ${currentTheme.name}`} <i className='fas fa-caret-down'></i>
+						{`${_.upperFirst(this.props.metadata.themeClass?this.props.metadata.themeClass:this.props.metadata.renderer)} : ${currentTheme.name}`} <i className='fas fa-caret-down'></i>
 					</div>
 					{/*listThemes('Legacy')*/}
 					{listThemes('V3')}

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -84,7 +84,7 @@ const Snippetbar = createClass({
 
 	compileSnippets : function(rendererPath, themePath, snippets) {
 		let compiledSnippets = snippets;
-		const baseSnippetsPath = Themes[rendererPath][themePath].baseSnippets;
+		const baseSnippetsPath = themePath[0] != '#' ? Themes[rendererPath][themePath].baseSnippets : false;
 
 		const objB = _.keyBy(compiledSnippets, 'groupName');
 

client/homebrew/pages/editPage/editPage.jsx

@@ -388,6 +388,10 @@ const EditPage = createClass({
 		return <div className='editPage sitePage'>
 			<Meta name='robots' content='noindex, nofollow' />
 			{this.renderNavbar()}
+			{console.log('state')}
+			{console.log(this.state)}
+			{console.log('props')}
+			{console.log(this.props)}
 
 			<div className='content'>
 				<SplitPane onDragFinish={this.handleSplitMove} ref='pane'>
@@ -407,6 +411,8 @@ const EditPage = createClass({
 						theme={this.state.brew.theme}
 						errors={this.state.htmlErrors}
 						lang={this.state.brew.lang}
+						userThemes={this.props.brew.userThemes}
+						themeClass={this.state.brew.themeClass}
 						currentEditorPage={this.state.currentEditorPage}
 					/>
 				</SplitPane>

server/app.js

@@ -42,38 +42,6 @@ const sanitizeBrew = (brew, accessType)=>{
 	return brew;
 };
 
-const getUsersBrewThemes = async (username,id)=>{
-	const fields = [
-		'title',
-		'tags',
-		'editId',
-		'thumbnail'
-	];
-	const brews = await HomebrewModel.getByUser(username, true, fields, { tags: { $in: ['theme', 'Theme'] } }) //lean() converts results to JSObjects
-		.catch((error)=>{throw 'Can not find brews';});
-
-	const userThemes = {
-		Brew : {
-
-		}
-	};
-
-	brews.forEach((brew)=>{
-		if(id!=brew.editId) {
-			userThemes.Brew[brew.editId] = {
-				name         : brew.title,
-				renderer     : 'V3',
-				baseTheme    : false,
-				baseSnippets : false,
-				path         : `#${brew.editId}`,
-				thumbnail    : brew.thumbnail
-			};
-		}
-	});
-
-	return userThemes;
-};
-
 app.use('/', serveCompressedStaticAssets(`build`));
 app.use(require('./middleware/content-negotiation.js'));
 app.use(require('body-parser').json({ limit: '25mb' }));
@@ -318,6 +286,9 @@ app.get('/user/:username', async (req, res, next)=>{
 //Edit Page
 app.get('/edit/:id', asyncHandler(getBrew('edit')), async(req, res, next)=>{
 	req.brew = req.brew.toObject ? req.brew.toObject() : req.brew;
+	console.log('edit');
+	console.log(req);
+	console.log('edit');
 
 	req.ogMeta = { ...defaultMetaTags,
 		title       : req.brew.title || 'Untitled Brew',
@@ -326,7 +297,6 @@ app.get('/edit/:id', asyncHandler(getBrew('edit')), async(req, res, next)=>{
 		type        : 'article'
 	};
 
-	req.brew.userThemes = await getUsersBrewThemes(req.account.username, req.brew.editId);
 	sanitizeBrew(req.brew, 'edit');
 	splitTextStyleAndMetadata(req.brew);
 	res.header('Cache-Control', 'no-cache, no-store');	//reload the latest saved brew when pressing back button, not the cached version before save.
@@ -344,7 +314,7 @@ app.get('/new/:id', asyncHandler(getBrew('share')), (req, res, next)=>{
 		style    : req.brew.style,
 		renderer : req.brew.renderer,
 		theme    : req.brew.theme,
-		tags     : req.brew.tags
+		tags     : req.brew.tags,
 	};
 	req.brew = _.defaults(brew, DEFAULT_BREW);
 
@@ -378,13 +348,15 @@ app.get('/share/:id', asyncHandler(getBrew('share')), asyncHandler(async (req, r
 			await HomebrewModel.increaseView({ shareId: brew.shareId });
 		}
 	};
+	req.brew.userThemes = await getUsersBrewThemes(req.account.username, req.brew.editId);
 	sanitizeBrew(req.brew, 'share');
 	splitTextStyleAndMetadata(req.brew);
 	return next();
 }));
 
 //Print Page
-app.get('/print/:id', asyncHandler(getBrew('share')), (req, res, next)=>{
+app.get('/print/:id', asyncHandler(getBrew('share')), async (req, res, next)=>{
+	req.brew.userThemes = await getUsersBrewThemes(req.account.username, req.brew.editId);
 	sanitizeBrew(req.brew, 'share');
 	splitTextStyleAndMetadata(req.brew);
 	next();
@@ -477,7 +449,8 @@ const renderPage = async (req, res)=>{
 		enable_v3     : config.get('enable_v3'),
 		enable_themes : config.get('enable_themes'),
 		config        : configuration,
-		ogMeta        : req.ogMeta
+		ogMeta        : req.ogMeta,
+		userThemes    : req.userThemes
 	};
 	const title = req.brew ? req.brew.title : '';
 	const page = await templateFn('homebrew', title, props)

server/homebrew.api.js

@@ -46,8 +46,54 @@ const splitTextStyleAndMetadata = (brew)=>{
 		brew.style = brew.text.slice(7, index - 1);
 		brew.text = brew.text.slice(index + 5);
 	}
+	console.log(brew.theme);
 };
 
+const getUsersBrewThemes = async (username, id)=>{
+	console.log(username);
+	console.log(id);
+	const fields = [
+		'title',
+		'tags',
+		'editId',
+		'thumbnail',
+		'textBin'
+	];
+	const brews = await HomebrewModel.getByUser(username, true, fields, { tags: { $in: ['theme', 'Theme'] } }) //lean() converts results to JSObjects
+		.catch((error)=>{throw 'Can not find brews';});
+
+	const userThemes = {
+		Brew : {
+
+		}
+	};
+
+	console.log(`Length of user brews ${brews.size}`);
+
+	brews.forEach(async (brew)=>{
+		b = await HomebrewModel.get({ editId: brew.editId }, ['textBin']);
+		splitTextStyleAndMetadata(b);
+		console.log(`whee!!!! ${b.theme}`);
+		console.log(id);
+		console.log(brew.editId);
+		if(id!=brew.editId) {
+
+			userThemes.Brew[`#${brew.editId}`] = {
+				name         : brew.title,
+				renderer     : 'V3',
+				baseTheme    : b.theme,
+				baseSnippets : false,
+				path         : `#${brew.editId}`,
+				thumbnail    : brew.thumbnail.length > 0 ? brew.thumbnail : '/assets/naturalCritLogoWhite.svg'
+			};
+			console.log(`Wheee! ${userThemes.Brew[`#${brew.editId}`].baseTheme}`);
+		}
+	});
+
+	return userThemes;
+};
+
+
 const api = {
 	homebrewApi : router,
 	getId       : (req)=>{
@@ -119,11 +165,14 @@ const api = {
 				throw { name: 'BrewLoad Error', message: 'Brew not found', status: 404, HBErrorCode: '05', accessType: accessType, brewId: id };
 			}
 
+			const userID = accessType === 'edit' ? req.account.username : stub.authors.split(',')[0];
+
 			// Clean up brew: fill in missing fields with defaults / fix old invalid values
 			if(stub) {
 				stub.tags     = stub.tags     || undefined; // Clear empty strings
 				stub.renderer = stub.renderer || undefined; // Clear empty strings
 				stub = _.defaults(stub, DEFAULT_BREW_LOAD); // Fill in blank fields
+				stub.userThemes = await getUsersBrewThemes(userID, id);
 			}
 
 			req.brew = stub ?? {};
@@ -239,8 +288,8 @@ const api = {
 		const brew = req.brew;
 		splitTextStyleAndMetadata(brew);
 		res.set('Content-Type', 'text/css');
-		const staticTheme = `/api/css/${req.brew.renderer}/${req.brew.theme}/styles.css`;
+		const staticTheme = `/css/${req.brew.renderer}/${req.brew.theme}`;
-		const userTheme = `/api/css/${req.brew.theme.slice(1)}`;
+		const userTheme = `/css/${req.brew.theme.slice(1)}`;
 		const parentThemeImport = `@import url(\"${req.brew.theme[0] != '#' ? staticTheme : userTheme}\");\n\n/* From Brew: ${req.brew.title}*/\n\n`;
 		return res.status(200).send(`${req.brew.renderer == 'legacy' ? '' : parentThemeImport}${req.brew.style}`);
 	},
@@ -273,6 +322,9 @@ const api = {
 		brew.title = brew.title.trim();
 		brew.description = brew.description.trim() || '';
 		brew.text = api.mergeBrewText(brew);
+		const userID = req?.account?.username ? req.account.username : brew.authors.split(',')[0];
+		brew.userThemes = await getUsersBrewThemes(userID, brew.editId);
+
 
 		if(brew.googleId && removeFromGoogle) {
 			// If the google id exists and we're removing it from google, set afterSave to delete the google brew and mark the brew's google id as undefined