Support multiple image sets

src/components/big_picture.tsx

@@ -3,7 +3,6 @@ import * as Model from "../model";
 import * as React from "react";
 
 export interface Props {
-    src: string;
     image: Model.Image;
     onClose: () => void;
     width: number;
@@ -13,7 +12,7 @@ export class BigPicture extends React.PureComponent<Props, {}> {
     static displayName = "BigPicture";
 
     render() {
-        const src = `img/1600/${this.props.src}`;
+        const src = `img/1600/${this.props.image.src}`;
         return <div className="BigPicture">
             <div
                 className="BigPicture-image"
@@ -23,16 +22,23 @@ export class BigPicture extends React.PureComponent<Props, {}> {
             </div>
             <div className="BigPicture-footer">
                 <a className="BigPicture-footerLink"
-                    href={`img/${this.props.src}`}
+                    href={`img/${this.props.image.src}`}
                     target="_blank">
                     Download
                 </a>
                 <span className="BigPicture-footerLink"
                     onClick={this.props.onClose}
-                    tabIndex={1} >
+                    onKeyPress={this._keyPress}
+                    tabIndex={0} >
                     Close
                 </span>
             </div>
         </div>;
     }
+
+    private _keyPress = (e: React.KeyboardEvent) => {
+        if (e.key === "Enter") {
+            this.props.onClose();
+        }
+    }
 }

src/components/grid.tsx

@@ -4,59 +4,66 @@ import * as Model from "../model";
 import * as React from "react";
 
 export interface Props {
-    images: Model.Images;
-    onImageSelected: (key: string) => void;
+    images: Model.Image[];
+    onImageSelected: (image: Model.Image) => void;
     width: number;
 }
 
 export const ROW_HEIGHT = 200;
 export const MOBILE_ROW_HEIGHT = 100;
 
+interface Row {
+    images: Model.Image[];
+    width: number;
+}
+
 export class Grid extends React.PureComponent<Props, {}> {
     static displayName = "Grid";
 
     render() {
-        const keys = Object.keys(this.props.images);
-
-        let row: string[] = [];
-        const rows: string[][] = [];
-        const rowWidths: number[] = [];
+        let row: Model.Image[] = [];
+        const rows: Row[] = [];
         let rowWidth = 0;
 
-        keys.forEach(key => {
-            const image = this.props.images[key];
-
+        this.props.images.forEach(image => {
             const newWidth = rowWidth + (image.width/image.height);
             const height = this.props.width / newWidth;
 
             if (height < this._rowHeight()) {
-                rows.push(row);
-                rowWidths.push(rowWidth);
+                rows.push({
+                    images: row,
+                    width: rowWidth
+                });
 
                 row = [];
                 rowWidth = (image.width/image.height);
             } else {
                 rowWidth = newWidth;
             }
-            row.push(key);
+            row.push(image);
+        });
+        rows.push({
+            images: row,
+            width: rowWidth
         });
-        rows.push(row);
-        rowWidths.push(rowWidth);
 
-        const images = rows.map((row, idx) => {
-            const scale = this.props.width / rowWidths[idx];
+        const images = rows.map(row => {
+            const height = this.props.width / row.width;
 
-            const pics = row.map(key => {
-                const image = this.props.images[key];
+            const pics = row.images.map(image => {
                 return <Picture
                     image={image}
-                    onClick={() => this.props.onImageSelected(key)}
-                    src={key}
-                    key={key}
-                    width={image.width/image.height * scale}
+                    onClick={() => this.props.onImageSelected(image)}
+                    key={image.src}
+                    width={image.width/image.height * height}
                 />
             });
-            return <div className="Grid-row" style={{height: scale + "px"}} key={row.join(",")}>{pics}</div>;
+            return <div
+                className="Grid-row"
+                style={{height: height + "px"}}
+                key={row.images.map(image => image.src).join(",")}>
+                {pics}
+            </div>;
         });
 
         return <div className="Grid">{images}</div>;

src/components/image_set.tsx

@@ -0,0 +1,24 @@
+import { Grid } from "./grid";
+import * as Model from "../model";
+
+import * as React from "react";
+
+export interface Props {
+    imageSet: Model.ImageSet;
+    onImageSelected: (img: Model.Image) => void;
+    width: number;
+}
+
+export class ImageSet extends React.PureComponent<Props, {}> {
+    static displayName = "ImageSet";
+
+    render() {
+        return <div className="ImageSet">
+            <h2>{ this.props.imageSet.location } · { this.props.imageSet.description }</h2>
+            <Grid
+                images={ this.props.imageSet.images}
+                onImageSelected={ this.props.onImageSelected }
+                width={ this.props.width } />
+        </div>;
+    }
+}

src/components/picture.tsx

@@ -3,7 +3,6 @@ import * as Model from "../model";
 import * as React from "react";
 
 export interface Props {
-    src: string;
     image: Model.Image;
     onClick: () => void;
     width: number;
@@ -13,7 +12,7 @@ export class Picture extends React.PureComponent<Props, {}> {
     static displayName = "Picture";
 
     render() {
-        const src = `img/600/${this.props.src}`;
+        const src = `img/600/${this.props.image.src}`;
         return <img
             onClick={this.props.onClick}
             srcSet={this._srcset()}
@@ -33,7 +32,7 @@ export class Picture extends React.PureComponent<Props, {}> {
             const scale = width / this.props.width;
 
             if (scale >= 1) {
-                srcs.push(`img/${size}/${this.props.src} ${scale}x`);
+                srcs.push(`img/${size}/${this.props.image.src} ${scale}x`);
             }
         });
 

src/components/root.tsx

@@ -1,5 +1,5 @@
 import { BigPicture } from "./big_picture";
-import { Grid } from "./grid";
+import { ImageSet } from "./image_set";
 import * as Model from "../model";
 
 import * as React from "react";
@@ -7,8 +7,8 @@ import * as React from "react";
 export interface Props {}
 
 export interface State {
-    images: Model.Images;
-    selectedImage?: string | null;
+    data?: Model.Data | null;
+    selectedImage?: Model.Image | null;
     width: number;
 }
 
@@ -16,14 +16,14 @@ export class Root extends React.PureComponent<Props, State> {
     static displayName = "Root";
 
     state: State = {
-        images: {},
         width: window.innerWidth
     }
 
     componentDidMount() {
         window.fetch(Model.URL)
             .then(data => data.json())
-            .then(json => this.setState({ images: json }))
+            .then(json => this.setState({ data: json }))
+            .then(this._loadHash)
             .catch(e => console.error("Error fetching data", e));
 
         window.onresize = () => {
@@ -32,45 +32,55 @@ export class Root extends React.PureComponent<Props, State> {
 
         window.onpopstate = this._loadHash;
 
-        this._loadHash();
     }
 
     render() {
+        const imageSets = this.state.data
+            ? this.state.data.sets.map(set =>
+                <ImageSet
+                    key={set.location + set.description}
+                    imageSet={set}
+                    onImageSelected={this._onImageSelected}
+                    width={this.state.width} />
+            )
+            : null;
+
         return <div className="Root">
             { this._bigPicture() }
             <h1>Ski</h1>
-                <h2>CMH Galena</h2>
-                <Grid
-                    images={ this.state.images }
-                    onImageSelected={ this._onImageSelected }
-                    width={ this.state.width } />
+            { imageSets }
         </div>;
     }
 
-    private _bigPicture = () => {
-        if (this.state.selectedImage && this.state.images[this.state.selectedImage]) {
-            return <BigPicture
-                image={this.state.images[this.state.selectedImage]}
-                src={this.state.selectedImage}
+    private _bigPicture = () =>
+        this.state.selectedImage
+            ? <BigPicture
+                    image={this.state.selectedImage}
                     onClose={this._showGrid}
-                width={this.state.width}
-            />
-        } else {
-            return null;
-        }
-    }
+                    width={this.state.width} />
+            : null
 
     private _loadHash = () => {
-        if (window.location.hash.length > 0) {
-            this.setState({ selectedImage: window.location.hash.slice(1) });
+        if (window.location.hash.length > 0 && this.state.data) {
+            const src = window.location.hash.slice(1);
+            let selectedImage: Model.Image | null = null;
+
+            this.state.data.sets.forEach(set => {
+                const image = set.images.find(image => image.src === src);
+                if (image) {
+                    selectedImage = image;
+                }
+            });
+
+            this.setState({ selectedImage: selectedImage });
         } else {
             this.setState({ selectedImage: null });
         }
     }
 
-    private _onImageSelected = (key: string) => {
-        this.setState({ selectedImage: key });
-        window.history.pushState(null, "", `#${key}`);
+    private _onImageSelected = (img: Model.Image) => {
+        this.setState({ selectedImage: img });
+        window.history.pushState(null, "", `#${img.src}`);
     }
 
     private _showGrid = () => {

src/model.ts

@@ -1,11 +1,18 @@
 export const SIZES = [1600, 1200, 800, 600, 400, 200];
 export const URL = "img/data.json";
 
-export interface Images {
-    [name: string]: Image
+export interface Data {
+    sets: ImageSet[]
+}
+
+export interface ImageSet {
+    location: string;
+    description: string;
+    images: Image[]
 }
 
 export interface Image {
+    src: string;
     height: number;
     width: number;
 }