Merge pull request #31 from TravisL12/api-history

New API & New History View

Author: TravisL12

public/manifest.json

@@ -4,7 +4,7 @@
   "name": "Astronomy Picture of the Day APOD by The Trav",
   "short_name": "APOD by The Trav",
   "description": "Displays the Astronomy Picture of the Day (APOD) and allows you to review similar images of planets, stars, galaxies and nebulas",
-  "version": "3.4.3",
+  "version": "3.5.0",
 
   "browser_action": {
     "default_icon": "sun_icon.png",
@@ -30,11 +30,5 @@
     "newtab": "index.html"
   },
 
-  "permissions": [
-    "topSites",
-    "storage",
-    "https://api.nasa.gov/*",
-    "https://apod.nasa.gov/cgi-bin/apod/apod_search",
-    "https://www.google-analytics.com/collect"
-  ]
+  "permissions": ["topSites", "storage", "https://apodapi.herokuapp.com/*"]
 }

public/options.html

@@ -62,6 +62,22 @@ <h3>
           </div>
         </div>
 
+        <div class="option">
+          <div class="info">
+            <span>Show History</span>
+            <div class="sub-info">
+              This will show/hide the history row at the bottom of the page.
+            </div>
+          </div>
+          <div class="inputs">
+            <input
+              type="checkbox"
+              id="history-row-toggle"
+              name="show-history-row"
+            />
+          </div>
+        </div>
+
         <div class="option">
           <div class="info">
             <span>Switch from Today to Random</span>

public/options.js

@@ -8,23 +8,26 @@ const defaultOptions = {
   apodType: "random",
   hiResOnly: false,
   showTopSites: true,
+  showHistoryRow: true,
   isTodayLimitOn: false,
-  todayLimit: 5
+  todayLimit: 5,
 };
 const optionsForm = {
   chooseApod: optionsEl["choose-apod"],
   highResOnly: optionsEl["high-res-only"],
   showTopSites: optionsEl["show-top-sites"],
+  showHistoryRow: optionsEl["show-history-row"],
   isTodayLimitOn: optionsEl["show-today-limit"],
-  todayCountInput: optionsEl["today-count-input"]
+  todayCountInput: optionsEl["today-count-input"],
 };
 
 const syncGetOptions = [
   "apodType",
   "hiResOnly",
   "showTopSites",
+  "showHistoryRow",
   "isTodayLimitOn",
-  "todayLimit"
+  "todayLimit",
 ];
 
 function storageSync(fn) {
@@ -65,6 +68,10 @@ class ApodOptions {
     saveOption({ showTopSites: optionsForm.showTopSites.checked });
   }
 
+  saveHistoryRowToggle() {
+    saveOption({ showHistoryRow: optionsForm.showHistoryRow.checked });
+  }
+
   saveTodayCountInput() {
     const todayLimit = parseInt(optionsForm.todayCountInput.value);
     saveOption({ todayLimit });
@@ -84,13 +91,21 @@ class ApodOptions {
     this.createListener(optionsForm.chooseApod[1], this.saveApodType);
     this.createListener(optionsForm.highResOnly, this.saveHiResOnly);
     this.createListener(optionsForm.showTopSites, this.saveTopSitesToggle);
+    this.createListener(optionsForm.showHistoryRow, this.saveHistoryRowToggle);
     this.createListener(optionsForm.todayCountInput, this.saveTodayCountInput);
     this.createListener(optionsForm.isTodayLimitOn, this.saveIsTodayLimitOn);
   }
 
   setDefaultValues() {
     storageSync(
-      ({ apodType, hiResOnly, showTopSites, isTodayLimitOn, todayLimit }) => {
+      ({
+        apodType,
+        hiResOnly,
+        showTopSites,
+        showHistoryRow,
+        isTodayLimitOn,
+        todayLimit,
+      }) => {
         const options = {};
 
         if (!apodType) {
@@ -102,6 +117,9 @@ class ApodOptions {
         if (showTopSites === undefined) {
           options.showTopSites = defaultOptions.showTopSites;
         }
+        if (showHistoryRow === undefined) {
+          options.showHistoryRow = defaultOptions.showHistoryRow;
+        }
         if (isTodayLimitOn === undefined) {
           options.isTodayLimitOn = defaultOptions.isTodayLimitOn;
         }
@@ -116,10 +134,18 @@ class ApodOptions {
 
   loadOptions() {
     storageSync(
-      ({ apodType, hiResOnly, showTopSites, isTodayLimitOn, todayLimit }) => {
+      ({
+        apodType,
+        hiResOnly,
+        showTopSites,
+        showHistoryRow,
+        isTodayLimitOn,
+        todayLimit,
+      }) => {
         optionsEl[apodType].checked = true;
         optionsForm.highResOnly.checked = hiResOnly;
         optionsForm.showTopSites.checked = showTopSites;
+        optionsForm.showHistoryRow.checked = showHistoryRow;
         optionsForm.isTodayLimitOn.checked = isTodayLimitOn;
         optionsForm.todayCountInput.value = todayLimit;
         optionsForm.todayCountInput.disabled = !isTodayLimitOn;

src/ajax-loader-black.gif

@@ -9,16 +9,17 @@ import Drawer from "./Drawer";
 import Title from "./Title";
 import TopSites from "./TopSites";
 import { TitleLoader } from "./LoadingSpinner";
-import { thumbSourceLink, KEY_MAP, APOD_API_URL, API_KEY } from "../utilities";
+import { KEY_MAP, APOD_API_URL } from "../utilities";
 import {
   adjacentDate,
   isToday,
   today,
   randomDate,
-  MIN_APOD_DATE
+  MIN_APOD_DATE,
 } from "../utilities/dateUtility";
 import HistoryHelper from "../utilities/history";
 import Preload from "../utilities/preload-utility";
+import HistoryRow from "./HistoryRow";
 
 const MAX_ERROR_TRIES = 3;
 const ERROR_MESSAGE = "NASA APOD Error: Please reload or try Again Later";
@@ -31,17 +32,18 @@ class Apod extends Component {
     selection: string,
     isHighRes: bool,
     showTopSites: bool,
+    showHistoryRow: bool,
     showTodayOptions: shape({
       count: number,
       limit: number,
-      isLimitOn: bool
+      isLimitOn: bool,
     }),
     favorites: objectOf(
       shape({
         url: string,
-        title: string
+        title: string,
       })
-    )
+    ),
   };
 
   state = {
@@ -50,14 +52,14 @@ class Apod extends Component {
     isLoading: true,
     isImageHD: false,
     hasLoadingError: false,
-    videoUrl: undefined
+    videoUrl: undefined,
   };
 
   componentDidMount() {
     const bypassLoadCount = true;
     const {
       selection,
-      showTodayOptions: { count, limit, isLimitOn }
+      showTodayOptions: { count, limit, isLimitOn },
     } = this.props;
 
     const chooseRandom =
@@ -74,7 +76,7 @@ class Apod extends Component {
     this.setState({ isLoading: true, response: undefined });
   };
 
-  specificDate = date => {
+  specificDate = (date) => {
     this.getImage(date);
   };
 
@@ -120,7 +122,11 @@ class Apod extends Component {
 
   getImage = (date, errorCount = 0) => {
     this.setLoading();
-    const params = { date, api_key: API_KEY };
+    const params = {
+      date,
+      image_thumbnail_size: 450,
+      absolute_thumbnail_url: true,
+    };
     axios.get(APOD_API_URL, { params }).then(
       ({ data }) => this.loadApod(data),
       () => this.errorApod(errorCount)
@@ -139,22 +145,22 @@ class Apod extends Component {
 
   saveFavorite = () => {
     const { favorites } = this.props;
-    const { date, title } = this.state.response;
+    const { date, title, image_thumbnail } = this.state.response;
 
     if (!favorites || !favorites[date]) {
       chrome.storage.sync.set({
         apodFavorites: {
           ...favorites,
           [date]: {
             title,
-            imgUrl: thumbSourceLink(date)
-          }
-        }
+            imgUrl: image_thumbnail,
+          },
+        },
       });
     }
   };
 
-  loadApod = response => {
+  loadApod = (response) => {
     const { isHighRes } = this.props;
     historyHelper.add(response);
     if (response.media_type === "video") {
@@ -164,7 +170,7 @@ class Apod extends Component {
           response,
           videoUrl,
           apodImage: undefined,
-          isLoading: false
+          isLoading: false,
         });
       } catch (err) {
         console.log(err);
@@ -175,7 +181,7 @@ class Apod extends Component {
     }
   };
 
-  errorApod = errorCount => {
+  errorApod = (errorCount) => {
     if (errorCount >= MAX_ERROR_TRIES) {
       this.setState({ hasLoadingError: true });
     } else {
@@ -206,7 +212,7 @@ class Apod extends Component {
         response,
         isImageHD,
         isLoading: false,
-        apodImage: loadedImage
+        apodImage: loadedImage,
       });
     };
 
@@ -216,14 +222,14 @@ class Apod extends Component {
   };
 
   render() {
-    const { favorites, showTopSites } = this.props;
+    const { favorites, showTopSites, showHistoryRow } = this.props;
     const {
       response,
       apodImage,
       isImageHD,
       isLoading,
       hasLoadingError,
-      videoUrl
+      videoUrl,
     } = this.state;
 
     const handlers = {
@@ -244,7 +250,7 @@ class Apod extends Component {
       },
       NEXT_HISTORY: () => {
         this.recallHistory(true);
-      }
+      },
     };
 
     const dateNavigation = {
@@ -253,11 +259,11 @@ class Apod extends Component {
       current: this.current,
       random: this.random,
       forceHighDef: this.forceHighDef,
-      saveFavorite: this.saveFavorite
+      saveFavorite: this.saveFavorite,
     };
 
     const headerStyle = {
-      justifyContent: showTopSites ? "space-between" : "flex-end"
+      justifyContent: showTopSites ? "space-between" : "flex-end",
     };
 
     return (
@@ -286,8 +292,14 @@ class Apod extends Component {
             response={response}
             favorites={favorites}
             specificDate={this.specificDate}
-            historyHelper={historyHelper}
           />
+          {showHistoryRow && (
+            <HistoryRow
+              historyHelper={historyHelper}
+              specificDate={this.specificDate}
+              activeResponse={response}
+            />
+          )}
         </div>
       </GlobalHotKeys>
     );