Make it easier to read old sets on ViewSetList - 1.168 🚀

Now sets alternate background color based on the day
they were entered.

SetItem.tsx

@@ -15,12 +15,14 @@ export default function SetItem({
   ids,
   setIds,
   disablePress,
+  customBg,
 }: {
   item: GymSet;
   settings: Settings;
   ids: number[];
   setIds: (value: number[]) => void;
   disablePress?: boolean;
+  customBg?: string;
 }) {
   const dark = useDark();
   const navigation = useNavigation<NavigationProp<StackParams>>();
@@ -71,7 +73,7 @@ export default function SetItem({
       title={item.name}
       description={`${item.reps} x ${item.weight}${item.unit || "kg"}`}
       onLongPress={longPress}
-      style={{ backgroundColor }}
+      style={{ backgroundColor: customBg || backgroundColor }}
       left={left}
       right={right}
     />

ViewSetList.tsx

@@ -1,7 +1,7 @@
 import { RouteProp, useRoute } from "@react-navigation/native";
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { FlatList } from "react-native";
-import { List } from "react-native-paper";
+import { List, useTheme } from "react-native-paper";
 import { Like } from "typeorm";
 import { StackParams } from "./AppStack";
 import SetItem from "./SetItem";
@@ -11,39 +11,57 @@ import { setRepo, settingsRepo } from "./db";
 import GymSet from "./gym-set";
 import Settings from "./settings";
 
+interface ColorSet extends GymSet {
+  color?: string;
+}
+
 export default function ViewSetList() {
-  const [sets, setSets] = useState<GymSet[]>();
+  const [sets, setSets] = useState<ColorSet[]>();
   const [settings, setSettings] = useState<Settings>();
+  const { colors } = useTheme();
   const { params } = useRoute<RouteProp<StackParams, "ViewSetList">>();
 
   useEffect(() => {
     settingsRepo.findOne({ where: {} }).then(setSettings);
 
     const reset = async () => {
-      const newSets = await setRepo.find({
+      const newSets: ColorSet[] = await setRepo.find({
         where: { name: Like(`%${params.name}%`), hidden: 0 as any },
-        take: LIMIT * 2,
+        take: LIMIT,
         skip: 0,
         order: { created: "DESC" },
       });
+
+      let prevDate = null;
+      let color = colors.elevation.level3;
+
+      for (let i = 0; i < newSets.length; i++) {
+        let currDate = new Date(newSets[i].created).toDateString();
+        if (currDate !== prevDate)
+          color =
+            color === colors.elevation.level3
+              ? colors.elevation.level0
+              : colors.elevation.level3;
+        newSets[i].color = color;
+        prevDate = currDate;
+      }
+
       setSets(newSets);
     };
 
     reset();
-  }, [params.name]);
+  }, [params.name, colors]);
 
-  const renderItem = useCallback(
-    ({ item }: { item: GymSet }) => (
-      <SetItem
-        settings={settings}
-        item={item}
-        key={item.id}
-        ids={[]}
-        setIds={() => null}
-        disablePress
-      />
-    ),
-    [settings]
+  const renderItem = ({ item }: { item: ColorSet; index: number }) => (
+    <SetItem
+      settings={settings}
+      item={item}
+      key={item.id}
+      ids={[]}
+      setIds={() => null}
+      disablePress
+      customBg={item.color}
+    />
   );
 
   const getContent = () => {

android/app/build.gradle

@@ -85,8 +85,8 @@ android {
         applicationId "com.massive"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 36193
-        versionName "1.167"
+        versionCode 36194
+        versionName "1.168"
     }
     signingConfigs {
         release {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "massive",
-  "version": "1.167",
+  "version": "1.168",
   "private": true,
   "license": "GPL-3.0-only",
   "scripts": {