Update Theme Picker to use Brews tagged as a theme

This updates the theme picker to include brews tagged as themes owned by
the user.

Some supporting functions were updated. User themes are loaded on /edit
and added to the request.

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -8,6 +8,8 @@ const request = require('../../utils/request-middleware.js');
 const Nav = require('naturalcrit/nav/nav.jsx');
 const Combobox = require('client/components/combobox.jsx');
 const StringArrayEditor = require('../stringArrayEditor/stringArrayEditor.jsx');
+const HomebrewModel     = require('../../../../server/homebrew.model.js').model;
+
 
 const Themes = require('themes/themes.json');
 const validations = require('./validations.js');
@@ -192,20 +194,23 @@ const MetadataEditor = createClass({
 	renderThemeDropdown : function(){
 		if(!global.enable_themes) return;
 
+		const mergedThemes = { ...Themes, ...this.props.metadata.userThemes };
+
 		const listThemes = (renderer)=>{
-			return _.map(_.values(Themes[renderer]), (theme)=>{
+			return _.map(_.values(mergedThemes[renderer]), (theme)=>{
-				return <div className='item' key={''} onClick={()=>this.handleTheme(theme)} title={''}>
+				const preview = theme?.thumbnail ? theme.thumbnail : `/themes/${theme.renderer}/${theme.path}/dropdownPreview.png`;
-					{`${theme.renderer} : ${theme.name}`}
+				return <div className='item' key={`${renderer}_${theme.name}`} onClick={()=>this.handleTheme(theme)} title={''}>
+					{`${renderer} : ${theme.name}`}
 					<img src={`/themes/${theme.renderer}/${theme.path}/dropdownTexture.png`}/>
 					<div className='preview'>
 						<h6>{`${theme.name}`} preview</h6>
-						<img src={`/themes/${theme.renderer}/${theme.path}/dropdownPreview.png`}/>
+						<img src={`${preview}`}/>
 					</div>
 				</div>;
 			});
 		};
 
-		const currentTheme = Themes[`${_.upperFirst(this.props.metadata.renderer)}`][this.props.metadata.theme];
+		const currentTheme = mergedThemes[`${_.upperFirst(this.props.metadata.renderer)}`][this.props.metadata.theme];
 		let dropdown;
 
 		if(this.props.metadata.renderer == 'legacy') {
@@ -223,6 +228,7 @@ const MetadataEditor = createClass({
 					</div>
 					{/*listThemes('Legacy')*/}
 					{listThemes('V3')}
+					{listThemes('Brew')}
 				</Nav.dropdown>;
 		}
 

config/default.json

@@ -4,6 +4,7 @@
 	"secret" : "secret",
 	"web_port" : 8000,
 	"enable_v3" : true,
+	"enable_themes" : true,
 	"local_environments" : ["docker", "local"],
 	"publicUrl" : "https://homebrewery.naturalcrit.com"
 }

server/app.js

@@ -42,6 +42,36 @@ const sanitizeBrew = (brew, accessType)=>{
 	return brew;
 };
 
+const getUsersBrewThemes = async (username)=>{
+	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)=>{
+		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' }));
@@ -278,7 +308,7 @@ app.get('/user/:username', async (req, res, next)=>{
 });
 
 //Edit Page
-app.get('/edit/:id', asyncHandler(getBrew('edit')), (req, res, next)=>{
+app.get('/edit/:id', asyncHandler(getBrew('edit')), async(req, res, next)=>{
 	req.brew = req.brew.toObject ? req.brew.toObject() : req.brew;
 
 	req.ogMeta = { ...defaultMetaTags,
@@ -288,6 +318,7 @@ app.get('/edit/:id', asyncHandler(getBrew('edit')), (req, res, next)=>{
 		type        : 'article'
 	};
 
+	req.brew.userThemes = await getUsersBrewThemes(req.account.username);
 	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.

server/homebrew.model.js

@@ -50,8 +50,8 @@ HomebrewSchema.statics.get = async function(query, fields=null){
 	return brew;
 };
 
-HomebrewSchema.statics.getByUser = async function(username, allowAccess=false, fields=null){
+HomebrewSchema.statics.getByUser = async function(username, allowAccess=false, fields=null, filter=null){
-	const query = { authors: username, published: true };
+	const query = { authors: username, published: true, ...filter };
 	if(allowAccess){
 		delete query.published;
 	}