Server based Gallery

src/client/app.js

@@ -116,16 +116,6 @@ app.config(($locationProvider, $routeProvider) => {
 				}
 			}
 		},
-		{
-			name: '/gallery',
-			template: '<page-gallery albums="$resolve.list"></page-gallery>',
-			title: 'Работы учащихся',
-			resolve: {
-				list: api => api.album
-					.list()
-					.then(i => i.data)
-			}
-		},
 		{
 			name: '/awards',
 			template: '<page-awards items="$resolve.awards"></page-awards>',

src/routes/albums.js

@@ -1,29 +1,9 @@
 const React = require('react')
 const Article = require('../components/Article')
+const Album = require('../core/Album')
 const {render} = require('../lib/render')
 const getPathWithNoTrailingSlash = require('../lib/url').getPathWithNoTrailingSlash
 const {get} = require('koa-route')
-const {c} = require('../core/db')
-
-async function findAlbum(id) {
-	return c('albums').findOne({id})
-}
-
-async function processAlbum(album) {
-	const url = `/album/${album.id}`
-
-	const previewFromImage = imgs => imgs.length ? imgs[0] : null
-	const previewImageId = album.preview ? album.preview : previewFromImage(album.images)
-	if (previewImageId) {
-		const image = await c('images').findOne({_id: previewImageId})
-		album.preview = image.data.medium
-	}
-
-	return {
-		...album,
-		url,
-	}
-}
 
 function getMeta(album) {
 	return {
@@ -35,11 +15,9 @@ function getMeta(album) {
 function getAlbum() {
 	return get('/album/:id', async (ctx, id) => {
 		const path = getPathWithNoTrailingSlash(ctx.path)
-		const record = await findAlbum(id)
-
-		if (record) {
-			const album = await processAlbum(record)
+		const album = await Album.findById(id)
 
+		if (album) {
 			const Component = (
 				<div className="content content_thin">
 					<Article

src/routes/gallery.js

@@ -1,43 +1,79 @@
-import compose from 'koa-compose';
-import route from 'koa-route';
-import {c} from '../core/db';
-import {json} from './';
+const React = require('react')
+const Article = require('../components/Article')
+const Album = require('../core/Album')
+const {render} = require('../lib/render')
+const getPathWithNoTrailingSlash = require('../lib/url').getPathWithNoTrailingSlash
+const {get} = require('koa-route')
 
-export default function () {
-    return compose([
-        gallery(),
-    ]);
-};
-
-function gallery() {
-    return route.get('/gallery', json(
-        async(ctx) => {
-            let query = {};
-            let albums = await c('albums')
-                .find(query)
-                .toArray();
-
-            ctx.body = await Promise.all(albums
-                .sort((a, b) => {
-                    const da = a.date.getTime();
-                    const db = b.date.getTime();
-                    return db - da;
-                })
-                .map(processAlbum)
-            );
-        }
-    ));
+function getMeta() {
+	return {
+		title: 'Галерея',
+		description: 'Галерея работ учащихся Шлиссельбургской Детской Художественной Школы'
+	}
 }
 
-const processAlbum = async album => {
-    album.url = `/album/${album.id}`;
+const GItem = ({album}) => (
+	<div className="gallery-item">
+		<a href={album.url}>
+			<h2>{album.title}</h2>
+			<img src={album.preview.url} alt={album.title}/>
+		</a>
+	</div>
+)
 
-    const previewFromImage = imgs => imgs.length ? imgs[0] : null;
-    const previewImageId = album.preview ? album.preview : previewFromImage(album.images);
-    if (previewImageId) {
-        const image = await c('images').findOne({_id: previewImageId});
-        album.preview = image.data.medium;
-    }
+const ACollection = ({title, albums}) => (
+	<div className="album-collection">
+		<div className="album-collection__title">{title}</div>
+		<div className="album-collection__body">{
+			albums.map((album, index) => (
+				<GItem key={index} album={album}/>
+			))
+		}</div>
+	</div>
+)
 
-    return album;
-};
+function splitBy(key) {
+	return items => {
+		return items.reduce((acc, item) => {
+			const name = key(item)
+			const items = acc.get(name) || []
+
+			return acc.set(key(item), [...items, item])
+		}, new Map())
+	}
+}
+
+function getGallery() {
+	return get('/gallery', async ctx => {
+		const path = getPathWithNoTrailingSlash(ctx.path)
+		const query = {}
+		const albums = await Album.find(query, {sort: {date: -1}})
+
+		if (albums.length) {
+			const meta = getMeta()
+			const albumsByYear = splitBy(a => a.date.getFullYear())(albums)
+
+			const Component = (
+				<div className="content content_wide">
+					<Article title={meta.title}>
+						{
+							[...albumsByYear.entries()].map(([year, albums]) => (
+								<ACollection
+									title={year}
+									albums={albums}
+								/>
+							))
+						}
+					</Article>
+				</div>
+			)
+
+			ctx.type = 'text/html'
+			ctx.body = await render(path, Component, getMeta())
+		} else {
+			ctx.status = 404
+		}
+	})
+}
+
+exports.getGallery = getGallery

src/routes/index.js

@@ -7,7 +7,6 @@ import {index as indexFile} from '../config'
 
 import sitemap from './sitemap'
 import schedule from './schedule'
-import gallery from './gallery'
 import documents from './documents'
 import teachers from './teachers'
 import pages from './pages'
@@ -16,7 +15,6 @@ export function routes(store) {
 	return compose([
 		sitemap(),
 		schedule(),
-		gallery(),
 		documents(store),
 		teachers(),
 		pages(),

src/server.js

@@ -23,6 +23,7 @@ const error = require('./middlewares/error')
 const home = require('./routes/home')
 const article = require('./routes/articles')
 const albums = require('./routes/albums')
+const gallery = require('./routes/gallery')
 
 const dirPublic = path.join(__dirname, '../public')
 const dirTemplates = path.join(__dirname, 'templates')
@@ -53,6 +54,7 @@ export default function (store) {
 
 	app.use(error.notFound(config.view404))
 	app.use(home.getHome(5))
+	app.use(gallery.getGallery())
 	app.use(article.getArticles(5))
 	app.use(article.getArticle())
 	app.use(albums.getAlbum())

src/style/components/album-collection.scss

@@ -7,9 +7,12 @@
     position: relative;
     justify-content: center;
     align-items:flex-start;
+
+    margin: 0 0 $double-margin;
   }
 
   &__title{
-
+    text-align: center;
+    margin: $single-margin 0;
   }
 }