feat(unsplash): First screen with mocked data added

Related to #142
zalando-stups · Dec 18, 2018 · 55447a2 · 55447a2
1 parent 10320d9
commit 55447a2
Showing 1 changed file with 73 additions and 22 deletions.
diff --git a/sandbox/pages/index/index.tsx b/sandbox/pages/index/index.tsx
@@ -1,29 +1,80 @@
-import React from "react";
+import React, { Component } from "react";
 import Router from "next/router";
-import { Container, Header, Button } from "semantic-ui-react";
+import { Container, Header, Divider, Card } from "semantic-ui-react";
+
+export interface IImage {
+  url: string;
+}
 
 export interface IMainPage {
   onImageSelect: (imageUrl: string) => void;
+  images: Array<IImage>;
 }
 
-const MainPage: React.SFC<IMainPage> = ({ onImageSelect }) => (
-  <div>
-    <Container>
-      <Header as="h1" textAlign="center">
-        Select Image
-      </Header>
-      <Button
-        onClick={() => {
-          onImageSelect(
-            "https://images.unsplash.com/photo-1544868501-b2f493d76e35?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
-          );
-          Router.push("/artboard");
-        }}
-        primary
-      >
-        Simulate Image Select
-      </Button>
-    </Container>
-  </div>
-);
+class MainPage extends Component<IMainPage> {
+  static async getInitialProps() {
+    // TODO API call to Unsplash here
+    const images = [
+      {
+        url:
+          "https://images.unsplash.com/photo-1544868501-b2f493d76e35?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
+      },
+      {
+        url:
+          "https://images.unsplash.com/photo-1544617724-2d30b41f5d05?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
+      },
+      {
+        url:
+          "https://images.unsplash.com/photo-1544868501-b2f493d76e35?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
+      },
+      {
+        url:
+          "https://images.unsplash.com/photo-1544617724-2d30b41f5d05?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
+      },
+      {
+        url:
+          "https://images.unsplash.com/photo-1544868501-b2f493d76e35?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
+      },
+      {
+        url:
+          "https://images.unsplash.com/photo-1544617724-2d30b41f5d05?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
+      },
+      {
+        url:
+          "https://images.unsplash.com/photo-1544868501-b2f493d76e35?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
+      },
+      {
+        url:
+          "https://images.unsplash.com/photo-1544617724-2d30b41f5d05?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
+      }
+    ];
+
+    return { images };
+  }
+
+  render() {
+    const { onImageSelect, images } = this.props;
+    return (
+      <div>
+        <Container>
+          <Header as="h1" textAlign="center">
+            Select Image
+          </Header>
+          <Divider hidden />
+          <Card.Group itemsPerRow={4}>
+            {images.map(({ url }) => (
+              <Card
+                image={url}
+                onClick={() => {
+                  onImageSelect(url);
+                  Router.push("/artboard");
+                }}
+              />
+            ))}
+          </Card.Group>
+        </Container>
+      </div>
+    );
+  }
+}
 export default MainPage;