Merge pull request #47 from kendallroth/46-day-details-always-show-co…

…untdown

#46 Day Details always show countdown

CHANGELOG.md

@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.4.2] - 2023-03-10
+
+### Fixed
+- Day Details always showed countdown state
+
 ## [0.4.1] - 2023-03-10
 
 ### Added

app.config.ts

@@ -30,18 +30,18 @@ const lightenedPrimaryColor = "#00629E";
  * Android - 'versionName'
  * iOS     - 'CFBundleShortVersionString'
  */
-const versionName = "0.4.1";
+const versionName = "0.4.2";
 /**
  * Android build code (must increment with each submitted build)
  */
-const androidVersionCode = 6;
+const androidVersionCode = 7;
 /**
  * iOS semantic build code (increment with each submitted build)
  *
  * NOTE: Different from Android version code in that it may be reset
  *         with each version change; however, this is deemed confusing!
  */
-const iosBuildNumber = 6;
+const iosBuildNumber = 7;
 
 /**
  * Runtime version associated with build manifest, used when applying OTA updates.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "my-days",
   "description": "Simple mobile app to track time to/from an important date.",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "main": "index.js",
   "keywords": [
     "app",

src/screens/Details/DayStat.tsx

@@ -6,18 +6,27 @@ import { Text } from "react-native-paper";
 interface DayStatProps {
   colorHighlight: string;
   colorNormal: string;
+  countDirection: "up" | "down";
   highlighted?: boolean;
-  number: number | string;
   style?: StyleProp<ViewStyle>;
   today?: boolean;
   unitLabel: string;
+  value: string;
 }
 
 const DayStat = (props: DayStatProps) => {
-  const { colorHighlight, colorNormal, highlighted, number, style, today, unitLabel } = props;
+  const {
+    colorHighlight,
+    colorNormal,
+    countDirection,
+    highlighted,
+    style,
+    today,
+    unitLabel,
+    value,
+  } = props;
 
   const textColor = highlighted ? colorHighlight : colorNormal;
-  const countdown = number >= 0;
 
   return (
     <View style={[styles.dayStat, style]}>
@@ -34,12 +43,12 @@ const DayStat = (props: DayStatProps) => {
           ]}
           variant={highlighted ? "displayLarge" : "displayMedium"}
         >
-          {number}
+          {value}
         </Text>
         {highlighted && !today && (
           <Icon
             color={colorNormal}
-            name={countdown ? "arrow-down" : "arrow-up"}
+            name={countDirection === "down" ? "arrow-down" : "arrow-up"}
             size={40}
             style={styles.dayStatDirectionIcon}
           />

src/screens/Details/DetailsScreen.tsx

@@ -219,16 +219,17 @@ const DetailScreen = () => {
                 key={stat.unit}
                 colorHighlight={mainColorText}
                 colorNormal={mainColorContainer}
-                number={t("common:format.number", {
+                countDirection={dateCount.direction}
+                highlighted={stat.unit === selectedDay.unit}
+                style={idx > 0 ? { marginTop: pagePadding / 1.5 } : undefined}
+                today={dateCount.today}
+                unitLabel={stat.unitLabel}
+                value={t("common:format.number", {
                   value: stat.number,
                   signDisplay: "never",
                   maximumFractionDigits: decimals,
                   minimumFractionDigits: decimals,
                 })}
-                unitLabel={stat.unitLabel}
-                highlighted={stat.unit === selectedDay.unit}
-                today={dateCount.today}
-                style={idx > 0 ? { marginTop: pagePadding / 1.5 } : undefined}
               />
             );
           })}