Refactor history and get preload for current dates

Author: Travis Lawrence

src/components/drawerViews/HistoryView.js

@@ -2,14 +2,14 @@ import React from "react";
 import ViewItem from "./ViewItem";
 
 function HistoryView({ historyHelper, specificDate, closeDrawer }) {
-  const { dates, responses } = historyHelper;
+  const { responses } = historyHelper;
 
   return (
     <div className="favorites">
       <h2>Recent Viewed APOD's</h2>
       <div className="drawer-list">
-        {dates.map((date, idx) => {
-          const { title } = responses[date];
+        {responses.map((response, idx) => {
+          const { title, date } = response;
 
           return (
             <ViewItem

src/utilities/history.js

@@ -1,25 +1,24 @@
 export default class History {
   constructor() {
-    this.dates = [];
-    this.responses = {};
+    this.responses = [];
     this.currentIdx = 0;
   }
 
   add(response) {
-    const dateIndex = this.dates.indexOf(response.date);
+    const dateIndex = this.responses.findIndex(
+      ({ date }) => date === response.date
+    );
 
     if (dateIndex === -1) {
-      this.dates.push(response.date);
-      this.responses[response.date] = response;
-      this.currentIdx = this.dates.length - 1;
+      this.responses.push(response);
+      this.currentIdx = this.responses.length - 1;
     } else {
       this.currentIdx = dateIndex;
     }
   }
 
   getResponse() {
-    const dateKey = this.dates[this.currentIdx];
-    return this.responses[dateKey];
+    return this.responses[this.currentIdx];
   }
 
   getPreviousDate() {
@@ -31,7 +30,7 @@ export default class History {
   }
 
   getNextDate() {
-    if (this.currentIdx === this.dates.length - 1) {
+    if (this.currentIdx === this.responses.length - 1) {
       return false;
     }
     this.currentIdx += 1;

src/utilities/preload-utility.js

@@ -28,19 +28,19 @@ export default class Preload {
     }
   };
 
-  processResponse = ({ data }) => {
-    data.forEach(response => {
-      this.loadingCount += 1;
-      !this.dates.find(date => date === response.date)
-        ? this.load(response)
-        : this.decreaseLoadCount();
-    });
-  };
-
+  // Preload APODs from today to {CURRENT_DATE_RANGE } days ago
+  // This doesn't need to be in the this.dates array since these dates
+  // don't need to be specifically navigated to.
   getDateRangeImages = (end_date = today()) => {
     const start_date = subtractDates(CURRENT_DATE_RANGE, end_date);
-    const params = { start_date, end_date, api_key: API_KEY }; // snake case for request
-    axios.get(APOD_API_URL, { params }).then(this.processResponse);
+    const params = { start_date, end_date, api_key: API_KEY };
+    axios.get(APOD_API_URL, { params }).then(({ data }) => {
+      data.forEach(response => {
+        const { hdurl } = response;
+        const loadedImage = new Image();
+        loadedImage.src = hdurl;
+      });
+    });
   };
 
   getImages = (count = PRELOAD_VALUE) => {
@@ -53,6 +53,15 @@ export default class Preload {
     });
   };
 
+  processResponse = ({ data }) => {
+    data.forEach(response => {
+      this.loadingCount += 1;
+      !this.dates.find(date => date === response.date)
+        ? this.load(response)
+        : this.decreaseLoadCount();
+    });
+  };
+
   load = response => {
     const { hdurl, media_type } = response;