done!

Author: taejs

nasa-apod/package.json

@@ -40,6 +40,7 @@
     "jest-watch-typeahead": "0.3.1",
     "mini-css-extract-plugin": "0.5.0",
     "moment": "^2.24.0",
+    "node-sass": "^4.12.0",
     "open-color": "^1.7.0",
     "optimize-css-assets-webpack-plugin": "5.0.3",
     "pnp-webpack-plugin": "1.5.0",
@@ -53,12 +54,12 @@
     "react-dev-utils": "^9.0.3",
     "react-dom": "^16.9.0",
     "react-icons": "^3.7.0",
-    "resolve": "1.12.0",
+    "resolve": "^1.12.0",
     "resolve-url-loader": "3.1.0",
     "sass-loader": "7.2.0",
     "semver": "6.3.0",
     "style-loader": "1.0.0",
-    "terser-webpack-plugin": "1.4.1",
+    "terser-webpack-plugin": "^1.4.1",
     "ts-pnp": "1.1.2",
     "url-loader": "2.1.0",
     "webpack": "4.39.1",

nasa-apod/src/App.js

@@ -1,11 +1,71 @@
 import React from 'react';
+import ViewerTemplate from './components/ViewerTemplate';
+import SpaceNavigator from './components/SpaceNavigator';
+import Viewer from './components/Viewer';
+import * as api from './lib/api';
+import moment from 'moment';
 
 class App extends React.Component {
+  state = {
+    loading : false,
+    maxDate : null,
+    date : null,
+    url : null,
+    mediaType : null
+  };
+
+  getAPOD = async (date) => {
+
+    if(this.state.loading) return;
+
+    this.setState({
+      loading : true
+    });
+
+    try {
+      const response = await api.getAPOD(date);
+      const { date : retrievedDate, url, media_type : mediaType} = response.data;
+      if(!this.state.maxDate) {
+        this.setState({
+          maxData : retrievedDate
+        });
+      }
+
+      this.setState({
+        date : retrievedDate,
+        mediaType,
+        url
+      })
+    }catch (e) {
+      console.log(e);
+    }
+
+    this.setState({
+      loading : false
+    });
+  }
+
+  componentDidMount() {
+    this.getAPOD();
+  }
+
+  calcDate(number) {
+    const date = moment(this.state.date).add(number, 'days').format('YYYY-MM-DD');
+    return date;
+  }
+
   render() {
+    const {url, mediaType, loading} = this.state;
     return (
-      <div>
-        App
-       </div>
+      <ViewerTemplate
+        spaceNavigator={<SpaceNavigator onNext={this.getAPOD.bind(this, this.calcDate(1))} onPrev={this.getAPOD.bind(this, this.calcDate(-1))}/>}
+        viewer={(
+          <Viewer
+            url={url}
+            mediaType={mediaType}
+            loading={loading}/>
+        )}
+      />
     )
   }
 }

nasa-apod/src/components/SpaceNavigator/SpaceNavigator.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import styles from './SpaceNavigator.scss';
+import classNames from 'classnames/bind';
+import { MdChevronLeft as LeftIcon, MdChevronRight as RightIcon } from 'react-icons/md';
+
+const cx = classNames.bind(styles);
+const SpaceNavigator = ({onPrev, onNext}) => {
+  return (
+    <div className={cx('space-navigator')}>
+      <div className={cx('left', 'end')}>
+        <div className={cx('circle')} onClick={onPrev}>
+          <LeftIcon/>
+        </div>
+      </div>
+      <div className={cx('right', 'end')}>
+        <div className={cx('circle')} onClick={onNext}>
+          <RightIcon />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default SpaceNavigator;

nasa-apod/src/components/SpaceNavigator/SpaceNavigator.scss

@@ -0,0 +1,35 @@
+.space-navigator {
+  .end {
+    position: absolute;
+    top : 0;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    color : #fff;
+    &.left {
+      padding : 1rem;
+    }
+    &.right {
+      right : 1rem;
+    }
+    .circle {
+      width:3rem;
+      height:3rem;
+      background:transparent;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius:50%;
+      cursor:pointer;
+      &:hover {
+        background : rgba(0, 0, 0, 0.25);
+      }
+      &:active {
+        background : rgba(0,0,0,0.5);
+      }
+      svg {
+        font-size : 2rem;
+      }
+    }
+  }
+}

nasa-apod/src/components/SpaceNavigator/index.js

@@ -0,0 +1 @@
+export { default } from './SpaceNavigator';

nasa-apod/src/components/Viewer/Viewer.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import styles from './Viewer.scss';
+import classNames from 'classnames/bind';
+import {
+  ChasingDots
+} from 'better-react-spinkit'
+
+const cx = classNames.bind(styles);
+
+const Viewer = ({mediaType, url, loading}) => {
+  if(loading) {
+    return <div className={cx('viewer')}>
+      <ChasingDots color="white" size={60}/>
+    </div>
+  }
+
+  if(!url) return null;
+  return (
+    <div className={cx('viewer')}>
+      {
+        mediaType === 'image' ? (
+          <img onClick={()=>window.open(url)} src={url} alt={"space"}/>
+        ) : (
+          <iframe src={url} allowFullScreen autoPlay></iframe>
+        )
+      }
+    </div>
+  )
+}
+export default Viewer;

nasa-apod/src/components/Viewer/Viewer.scss

@@ -0,0 +1,27 @@
+@import "utils";
+
+.viewer {
+  height : 100%;
+  width : 100%;
+  display : flex;
+  align-items: center;
+  justify-content: center;
+  img {
+    display:block;
+    width : auto;
+    max-width : calc(100% - 10rem);
+    max-height : calc(100% - 10rem);
+    cursor:pointer;
+    transition : all 0.3s ease-in;
+    box-shadow : 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+    &:hover {
+      box-shadow: 0 19px 38px rgba(0,0,0,0.3), 0 15px 12px rgba(0,0,0,0.22);
+    }
+  }
+  iframe {
+    background: black;
+    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
+    width: calc(100% - 10rem);
+    height: calc(100% - 10rem);
+  }
+}

nasa-apod/src/components/Viewer/index.js

@@ -0,0 +1 @@
+export { default } from './Viewer';

nasa-apod/src/components/ViewerTemplate/ViewerTemplate.js

@@ -7,7 +7,15 @@ const cx = classNames.bind(styles);
 const ViewerTemplate = ({viewer, spaceNavigator}) => {
   return (
     <div className={cx('viewer-template')}>
-
+      <header>
+        Astronomy Picture of the Day
+      </header>
+      <div className={cx('viewer-wrapper')}>
+        {viewer}
+        <div className={cx('space-navigator-wrapper')}>
+          {spaceNavigator}
+        </div>
+      </div>
     </div>
   )
 }

nasa-apod/src/components/ViewerTemplate/ViewerTemplate.scss

@@ -0,0 +1,26 @@
+@import 'utils';
+
+.viewer-template {
+  header {
+    background : $oc-gray-9;
+    height : 5rem;
+    color : white;
+    padding : 1rem;
+
+    display: flex;
+    align-items: center;
+
+    font-size : 2rem;
+    font-weight: 600;
+
+    @include media("<tablet") {
+      font-size : 1.25rem;
+    }
+  }
+
+  .viewer-wrapper {
+    position: relative;
+    width: 100%;
+    height : calc(100vh - 5rem);
+  }
+}