History

Recall we added a history page to the counter tab a while back? Let use it to display all the past timestamps.

First we'll want to export the countdownStorageKey and PersistedCountdownState from the counter page so we could reuse them here:

Update: app/counter/index.tsx

@@ -10,9 +10,9 @@ import { getFromStorage, saveToStorage } from "../../utils/storage";
 // 10 seconds in ms
 const frequency = 10 * 1000;

-const countdownStorageKey = "taskly-countdown";
+export const countdownStorageKey = "taskly-countdown";

-type PersistedCountdownState = {
+export type PersistedCountdownState = {
   currentNotificationId: string | undefined;
   completedAtTimestamps: number[];
 };

And then add a simple UI to display the past completions in a FlatList:

Update: app/counter/history.tsx

@@ -1,20 +1,67 @@
-import { Text, View, StyleSheet } from "react-native";
+import { Text, StyleSheet, FlatList, View } from "react-native";
+import { countdownStorageKey, PersistedCountdownState } from "./";
+import { useEffect, useState } from "react";
+import { getFromStorage } from "../../utils/storage";
+import { format } from "date-fns";
+import { theme } from "../../theme";
+
+const fullDateFormat = `LLL d yyyy, h:mm aaa`;

 export default function HistoryScreen() {
+  const [countdownState, setCountdownState] =
+    useState<PersistedCountdownState>();
+
+  useEffect(() => {
+    const init = async () => {
+      const value = await getFromStorage(countdownStorageKey);
+      setCountdownState(value);
+    };
+    init();
+  }, []);
+
   return (
-    <View style={styles.container}>
-      <Text style={styles.text}>History</Text>
-    </View>
+    <FlatList
+      style={styles.list}
+      contentContainerStyle={styles.contentContainer}
+      data={countdownState?.completedAtTimestamps}
+      renderItem={({ item }) => (
+        <View style={styles.listItem}>
+          <Text style={styles.listItemText}>
+            {format(item, fullDateFormat)}
+          </Text>
+        </View>
+      )}
+      ListEmptyComponent={
+        <View style={styles.listEmptyContainer}>
+          <Text>Your shopping list is empty</Text>
+        </View>
+      }
+    />
   );
 }

 const styles = StyleSheet.create({
-  container: {
+  list: {
     flex: 1,
+    backgroundColor: theme.colorWhite,
+  },
+  contentContainer: {
+    marginTop: 8,
+  },
+  listEmptyContainer: {
     justifyContent: "center",
     alignItems: "center",
+    marginVertical: 18,
+  },
+  listItem: {
+    marginHorizontal: 8,
+    marginBottom: 8,
+    alignItems: "center",
+    backgroundColor: theme.colorLightGrey,
+    padding: 12,
+    borderRadius: 6,
   },
-  text: {
-    fontSize: 24,
+  listItemText: {
+    fontSize: 18,
   },
 });

Checkpoint

Android	iOS

Checkpoint

✔️ Show past completions on the history page