feat(first_screen): First Screen added

Closed #142
zalando-stups · Dec 18, 2018 · 1ce3825 · 1ce3825
1 parent 55447a2
commit 1ce3825
Show file tree

Hide file tree

Showing 6 changed files with 108 additions and 45 deletions.
diff --git a/sandbox/README.md b/sandbox/README.md
@@ -31,7 +31,7 @@ npm start
 ## Run local development environment
 
 ```bash
-npm run dev
+UNSPLASH_APP_ID=[ID] UNSPLASH_APP_SECRET=[SECRET] npm run dev npm run dev
 ```
 
 ## Run production environment

diff --git a/sandbox/next.base.config.js b/sandbox/next.base.config.js
@@ -2,6 +2,7 @@ module.exports = {
   distDir: "dist",
   useFileSystemPublicRoutes: true,
   publicRuntimeConfig: {
-    API_URL: process.env.API_URL || "http://localhost:3000"
+    UNSPLASH_APP_ID: process.env.UNSPLASH_APP_ID || "",
+    UNSPLASH_APP_SECRET: process.env.UNSPLASH_APP_SECRET || ""
   }
 };
diff --git a/sandbox/package-lock.json b/sandbox/package-lock.json
diff --git a/sandbox/package.json b/sandbox/package.json
@@ -44,6 +44,7 @@
     "sanitize-html": "1.19.3",
     "semantic-ui-less": "2.4.1",
     "semantic-ui-react": "0.83.0",
+    "unsplash-js": "^4.8.0",
     "wretch": "1.4.2"
   },
   "devDependencies": {

diff --git a/sandbox/pages/index/index.tsx b/sandbox/pages/index/index.tsx
@@ -1,55 +1,81 @@
 import React, { Component } from "react";
 import Router from "next/router";
+// import getConfig from "next/config";
+// import Unsplash from "unsplash-js";
 import { Container, Header, Divider, Card } from "semantic-ui-react";
 
-export interface IImage {
-  url: string;
+export interface IUnsplashImage {
+  raw: string;
+  full: string;
+  small: string;
+  thumb: string;
 }
 
 export interface IMainPage {
   onImageSelect: (imageUrl: string) => void;
-  images: Array<IImage>;
+  images: Array<IUnsplashImage>;
 }
 
 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"
-      }
-    ];
+    // TODO: add Unsplash support
+    // const {
+    //   publicRuntimeConfig: { UNSPLASH_APP_ID, UNSPLASH_APP_SECRET }
+    // } = getConfig();
 
-    return { images };
+    // const unsplash = new Unsplash({
+    //   applicationId: UNSPLASH_APP_ID,
+    //   secret: UNSPLASH_APP_SECRET
+    // });
+
+    // try {
+    //   const imagesRequest = await unsplash.search.photos("fashion", 1, 72);
+    //   const jsonImages = await imagesRequest.json();
+    //   const images = jsonImages.results
+    //     .filter(({ width, height }) => height > width)
+    //     .map(({ urls }) => urls);
+    //   return { images };
+    // } catch (e) {
+    //   console.log(e);
+    //   return { images: [] };
+    // }
+
+    return {
+      images: [
+        {
+          small:
+            "https://images.unsplash.com/photo-1544868501-b2f493d76e35?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
+        },
+        {
+          small:
+            "https://images.unsplash.com/photo-1544617724-2d30b41f5d05?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
+        },
+        {
+          small:
+            "https://images.unsplash.com/photo-1544868501-b2f493d76e35?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
+        },
+        {
+          small:
+            "https://images.unsplash.com/photo-1544617724-2d30b41f5d05?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
+        },
+        {
+          small:
+            "https://images.unsplash.com/photo-1544868501-b2f493d76e35?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
+        },
+        {
+          small:
+            "https://images.unsplash.com/photo-1544617724-2d30b41f5d05?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
+        },
+        {
+          small:
+            "https://images.unsplash.com/photo-1544868501-b2f493d76e35?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
+        },
+        {
+          small:
+            "https://images.unsplash.com/photo-1544617724-2d30b41f5d05?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
+        }
+      ]
+    };
   }
 
   render() {
@@ -62,11 +88,11 @@ class MainPage extends Component<IMainPage> {
           </Header>
           <Divider hidden />
           <Card.Group itemsPerRow={4}>
-            {images.map(({ url }) => (
+            {images.map(({ small }) => (
               <Card
-                image={url}
+                image={small}
                 onClick={() => {
-                  onImageSelect(url);
+                  onImageSelect(small);
                   Router.push("/artboard");
                 }}
               />

diff --git a/sandbox/ui-components/menu/menu.tsx b/sandbox/ui-components/menu/menu.tsx
@@ -8,7 +8,7 @@ interface IMenu {
 const PageMenu: React.SFC<IMenu> = ({ logoSrc }) => (
   <Menu fixed="top" inverted>
     <Container>
-      <Menu.Item as="a" header>
+      <Menu.Item as="a" href="/" header>
         <Image size="mini" src={logoSrc} alt="Skrop Logo" />
       </Menu.Item>
       <Menu.Item as="a" href="/">