only filter on search page, fix stats page in dark mode, show n/a for recently added app DL counts

Author: vgmoose

src/AppDetails.js

@@ -207,6 +207,18 @@ class AppDetails extends Component {
       </div>
     ) : null;
 
+    const isWithinOneWeek = timestamp => {
+      // check if the given timestamp is within the last 7 days
+      const twoDaysInMilliseconds = 7 * 24 * 60 * 60 * 1000;
+      const currentTime = new Date().getTime();
+      const appUpdateTime = new Date(timestamp).getTime();
+      return (currentTime - appUpdateTime) < twoDaysInMilliseconds;
+    };
+
+    const formatWithCommas = number => {
+      return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+    }
+
     return (
       <div className="AppDetails">
         <Mobile />
@@ -234,7 +246,7 @@ class AppDetails extends Component {
               <div><span>{t("updated")}</span> {formattedUpdate}</div>
               <br />
               <div className="sideHeader">{t("downloadStats")}</div>
-              <div><span>{t("count")}</span> {app_dls}</div>
+              <div><span>{t("count")}</span> {app_dls === 0 && isWithinOneWeek(updated) ? "n/a" : formatWithCommas(app_dls)}</div>
               <div><span>md5</span><input className="md5text" defaultValue={md5} type="text" readonly></input></div>
               {shaBlock}
             </div>

src/AppList.js

@@ -73,7 +73,7 @@ class AppList extends Component {
   doesSearchMatch(query = "", pkg = {}) {
     const { title, description, author } = pkg;
     const { showLegacy } = this.state;
-    // skip if package category is legacy and they're disabled
+    // skip if package category is legacy and legacy is disabled
     if (!showLegacy && pkg.category === "legacy") return false;
     const searchUs = [title, description, author];
     return searchUs.filter(a => a && a.toLowerCase().indexOf(query.toLowerCase()) >= 0).length > 0;
@@ -106,7 +106,10 @@ class AppList extends Component {
         (me.query);
     });
 
-    packages = packages.filter(pkg => me.doesSearchMatch(me.query, pkg));
+    // filter packages if we have a search query only
+    if (me.query) {
+      packages = packages.filter(pkg => me.doesSearchMatch(me.query, pkg));
+    }
 
     me.setState({ packages, query: me.query });
   }

src/AppStatsChart.js

@@ -197,7 +197,7 @@ const AppStatsChart = () => {
   // actual chart
   const chartInfo = (<div
     style={{
-      width: '100%',
+      width: '100%'
     }}>
       <LineChart
         width={800}
@@ -219,9 +219,11 @@ const AppStatsChart = () => {
         type = 'number'
       />
       <YAxis />
-      <Tooltip 
+      <Tooltip
         labelFormatter={(unixTime) => {
-          return moment.unix(unixTime / 1000).format('MMM DD YYYY');
+          return <span style={{color: "black"}}>
+            {moment.unix(unixTime / 1000).format('MMM DD YYYY')}
+          </span>
         }}
       />
         <Legend />
@@ -252,31 +254,15 @@ const AppStatsChart = () => {
     }
   }
 
-  const darkStyles = {
-    control: (provided, state) => ({
-      ...provided,
-      backgroundColor: "black",
-      color: "#000000",
-      
-    }),
-    option: (provided, state) => ({
-      ...provided,
-      backgroundColor: 'black',
-    })
-  };
-
-  const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)') && window.matchMedia('(prefers-color-scheme: dark)').matches;
-
   const customStyle = {
     multiValue: (base, state) => ({
       ...base,
       backgroundColor: state.data.color,
-    }),
-    ...(isDarkMode ? darkStyles : {})
+    })
   };
 
   const maxOptions = 8; // gets a bit laggy after this, also we only have 8 colors
-  const pkgSelector = <div style={{ width: 450 }}>
+  const pkgSelector = <div style={{ width: 450, color: "black" }}>
     <Select
       styles={customStyle}
       isMulti={true}