prettier

src/components/big_picture.tsx

@@ -13,32 +13,38 @@ export class BigPicture extends React.PureComponent<Props, {}> {
 
   render() {
     const src = `img/1600/${this.props.image.src}`;
-        return <div className="BigPicture">
+    return (
+      <div className="BigPicture">
         <div
           className="BigPicture-image"
           style={{
             backgroundImage: `url(${src})`
-                }}>
+          }}
-            </div>
+        />
         <div className="BigPicture-footer">
-                <a className="BigPicture-footerLink"
+          <a
+            className="BigPicture-footerLink"
             href={`img/${this.props.image.src}`}
-                    target="_blank">
+            target="_blank"
+          >
             Download
           </a>
-                <span className="BigPicture-footerLink"
+          <span
+            className="BigPicture-footerLink"
             onClick={this.props.onClose}
             onKeyPress={this._keyPress}
-                    tabIndex={0} >
+            tabIndex={0}
+          >
             Close
           </span>
         </div>
-        </div>;
+      </div>
+    );
   }
 
   private _keyPress = (e: React.KeyboardEvent) => {
     if (e.key === "Enter") {
       this.props.onClose();
     }
-    }
+  };
 }

src/components/grid.tsx

@@ -26,7 +26,7 @@ export class Grid extends React.PureComponent<Props, {}> {
     let rowWidth = 0;
 
     this.props.images.forEach(image => {
-            const newWidth = rowWidth + (image.width/image.height);
+      const newWidth = rowWidth + image.width / image.height;
       const height = this.props.width / newWidth;
 
       if (height < this._rowHeight()) {
@@ -36,7 +36,7 @@ export class Grid extends React.PureComponent<Props, {}> {
         });
 
         row = [];
-                rowWidth = (image.width/image.height);
+        rowWidth = image.width / image.height;
       } else {
         rowWidth = newWidth;
       }
@@ -51,19 +51,24 @@ export class Grid extends React.PureComponent<Props, {}> {
       const height = this.props.width / row.width;
 
       const pics = row.images.map(image => {
-                return <Picture
+        return (
+          <Picture
             image={image}
             onClick={() => this.props.onImageSelected(image)}
             key={image.src}
-                    width={image.width/image.height * height}
+            width={(image.width / image.height) * height}
           />
+        );
       });
-            return <div
+      return (
+        <div
           className="Grid-row"
           style={{ height: height + "px" }}
-                key={row.images.map(image => image.src).join(",")}>
+          key={row.images.map(image => image.src).join(",")}
+        >
           {pics}
-            </div>;
+        </div>
+      );
     });
 
     return <div className="Grid">{images}</div>;

src/components/image_set.tsx

@@ -13,12 +13,17 @@ export class ImageSet extends React.PureComponent<Props, {}> {
   static displayName = "ImageSet";
 
   render() {
-        return <div className="ImageSet">
+    return (
-            <h2>{ this.props.imageSet.location } · { this.props.imageSet.description }</h2>
+      <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 } />
+          width={this.props.width}
-        </div>;
+        />
+      </div>
+    );
   }
 }

src/components/picture.tsx

@@ -13,21 +13,24 @@ export class Picture extends React.PureComponent<Props, {}> {
 
   render() {
     const src = `img/600/${this.props.image.src}`;
-        return <img
+    return (
+      <img
         onClick={this.props.onClick}
         srcSet={this._srcset()}
         src={src}
         width={this.props.width + "px"}
-        />;
+      />
+    );
   }
 
   private _srcset = (): string => {
     const srcs: string[] = [];
 
     Model.SIZES.forEach(size => {
-            const width = this.props.image.width > this.props.image.height
+      const width =
+        this.props.image.width > this.props.image.height
           ? size
-                : this.props.image.width / this.props.image.height * size;
+          : (this.props.image.width / this.props.image.height) * size;
 
       const scale = width / this.props.width;
 
@@ -37,5 +40,5 @@ export class Picture extends React.PureComponent<Props, {}> {
     });
 
     return srcs.join(",");
-    }
+  };
 }

src/components/root.tsx

@@ -17,10 +17,11 @@ export class Root extends React.PureComponent<Props, State> {
 
   state: State = {
     width: window.innerWidth
-    }
+  };
 
   componentDidMount() {
-        window.fetch(Model.URL)
+    window
+      .fetch(Model.URL)
       .then(data => data.json())
       .then(json => this.setState({ data: json }))
       .then(this._loadHash)
@@ -28,37 +29,40 @@ export class Root extends React.PureComponent<Props, State> {
 
     window.onresize = () => {
       this.setState({ width: window.innerWidth });
-        }
+    };
 
     window.onpopstate = this._loadHash;
-
   }
 
   render() {
     const imageSets = this.state.data
-            ? this.state.data.sets.map(set =>
+      ? this.state.data.sets.map(set => (
           <ImageSet
             key={set.location + set.description}
             imageSet={set}
             onImageSelected={this._onImageSelected}
-                    width={this.state.width} />
+            width={this.state.width}
-            )
+          />
+        ))
       : null;
 
-        return <div className="Root">
+    return (
+      <div className="Root">
         {this._bigPicture()}
         <h1>Ski</h1>
         {imageSets}
-        </div>;
+      </div>
+    );
   }
 
   private _bigPicture = () =>
-        this.state.selectedImage
+    this.state.selectedImage ? (
-            ? <BigPicture
+      <BigPicture
         image={this.state.selectedImage}
         onClose={this._showGrid}
-                    width={this.state.width} />
+        width={this.state.width}
-            : null
+      />
+    ) : null;
 
   private _loadHash = () => {
     if (window.location.hash.length > 0 && this.state.data) {
@@ -76,15 +80,15 @@ export class Root extends React.PureComponent<Props, State> {
     } else {
       this.setState({ selectedImage: null });
     }
-    }
+  };
 
   private _onImageSelected = (img: Model.Image) => {
     this.setState({ selectedImage: img });
     window.history.pushState(null, "", `#${img.src}`);
-    }
+  };
 
   private _showGrid = () => {
     this.setState({ selectedImage: null });
     window.history.pushState(null, "", "#");
-    }
+  };
 }

src/model.ts

@@ -2,13 +2,13 @@ export const SIZES = [1600, 1200, 800, 600, 400, 200];
 export const URL = "img/data.json";
 
 export interface Data {
-    sets: ImageSet[]
+  sets: ImageSet[];
 }
 
 export interface ImageSet {
   location: string;
   description: string;
-    images: Image[]
+  images: Image[];
 }
 
 export interface Image {