Merge pull request #78 from TravisL12/fix-day-count

Fix day count

Author: TravisL12

src/hooks/useNavigation.ts

@@ -18,6 +18,7 @@ import {
   THistoryItem,
   TNavigationButton,
   TUseNavigationProps,
+  TAppOptions,
 } from '../pages/types';
 import {
   adjacentDate,
@@ -27,6 +28,10 @@ import {
   trimDateString,
 } from '../utilities';
 
+const incrementDayCount = (options: TAppOptions) => {
+  setChrome({ [TODAY_COUNT]: options[TODAY_COUNT] + 1 });
+};
+
 export const useNavigation = ({
   response,
   options,
@@ -155,6 +160,7 @@ export const useNavigation = ({
 
     if (options[IS_TODAY_LIMIT_ON] && showToday) {
       showToday = options[TODAY_COUNT] < options[TODAY_LIMIT];
+      incrementDayCount(options);
     }
 
     showToday ? fetchToday() : fetchRandom();

src/manifest.json

@@ -4,7 +4,7 @@
   "description": "Displays the Astronomy Picture of the Day (APOD) and allows you to review similar images of planets, stars, galaxies and nebulas",
   "options_page": "popup.html",
   "short_name": "APOD by The Trav",
-  "version": "4.1.3",
+  "version": "4.1.4",
   "background": { "service_worker": "background.bundle.js" },
   "action": {
     "default_popup": "popup.html",

src/pages/Popup/Popup.jsx

@@ -8,6 +8,7 @@ import {
   DEFAULT_OPTIONS,
   APOD_OPTIONS,
   TODAY_LIMIT_COUNT,
+  TODAY_LIMIT,
 } from '../../constants';
 import { getChrome, setChrome } from '../../utilities';
 import {
@@ -42,7 +43,8 @@ const optionsConfig = [
   {
     id: IS_TODAY_LIMIT_ON,
     label: 'Switch from Today to Random',
-    description: `Show today's APOD ${TODAY_LIMIT_COUNT} times and then will switch to random APOD's.`,
+    description: `Show today's APOD multiple times and then will switch to random APOD's.
+    Use the input below to set the limit.`,
     type: 'checkbox',
   },
 ];
@@ -74,24 +76,42 @@ const Popup = () => {
     <SPopupContainer>
       <h3>Options</h3>
       <SOptionsContainer>
-        {optionsConfig.map((option) => {
-          return (
-            <SOption key={option.id} className="option">
-              <div className="info">
-                <label htmlFor={option.id}>{option.label}</label>
-                <div className="sub-info">{option.description}</div>
-              </div>
-              <div className="inputs">
-                <input
-                  onChange={handleCheckboxChange}
-                  type={option.type}
-                  id={option.id}
-                  checked={popupOptions[option.id]}
-                />
-              </div>
-            </SOption>
-          );
-        })}
+        {optionsConfig.map((option) => (
+          <SOption key={option.id}>
+            <div className="info">
+              <label htmlFor={option.id}>{option.label}</label>
+              <div className="sub-info">{option.description}</div>
+            </div>
+            <div className="inputs">
+              <input
+                onChange={handleCheckboxChange}
+                type={option.type}
+                id={option.id}
+                checked={popupOptions[option.id]}
+              />
+            </div>
+          </SOption>
+        ))}
+        <SOption>
+          <div className="info">
+            <label htmlFor={'today-count'}>Today Limit</label>
+            <div className="sub-info">
+              The APOD for today will be shown this number of times before
+              switching to random.
+            </div>
+          </div>
+          <div className="inputs">
+            <input
+              disabled={!popupOptions[IS_TODAY_LIMIT_ON]}
+              onChange={(event) => {
+                setChrome({ [TODAY_LIMIT]: +event.target.value });
+              }}
+              defaultValue={popupOptions[TODAY_LIMIT]}
+              type="number"
+              id="today-count"
+            />
+          </div>
+        </SOption>
       </SOptionsContainer>
       <SAboutApod>
         <p>

src/pages/Popup/styles.ts

@@ -27,6 +27,11 @@ export const SOption = styled.div`
     margin-top: 4px;
     color: #444;
   }
+
+  input[type='number'] {
+    width: 50px;
+    text-align: right;
+  }
 `;
 
 export const SAboutApod = styled.div``;