Enable re-ordering of workouts in EditPlan - 1.170 🚀

Closes #176
2023-11-09 12:58:26 +13:00 · 2023-11-09 12:58:26 +13:00 · 2e96398b38
parent 1a289f1b7b
commit 2e96398b38
4 changed files with 115 additions and 45 deletions
--- a/EditPlan.tsx
+++ b/EditPlan.tsx
@ -5,17 +5,25 @@ import {
  useRoute,
 } from "@react-navigation/native";
 import { useCallback, useEffect, useState } from "react";
-import { ScrollView, StyleSheet, View } from "react-native";
-import { Button, IconButton, Text } from "react-native-paper";
-import { MARGIN, PADDING } from "./constants";
-import { planRepo, setRepo } from "./db";
-import { defaultSet } from "./gym-set";
-import StackHeader from "./StackHeader";
-import Switch from "./Switch";
-import { DAYS } from "./days";
+import { Pressable, StyleSheet, View } from "react-native";
+import {
+  Button,
+  IconButton,
+  Switch as PaperSwitch,
+  Text,
+} from "react-native-paper";
+import ReorderableList, {
+  ReorderableListRenderItemInfo,
+} from "react-native-reorderable-list";
 import AppInput from "./AppInput";
 import { StackParams } from "./AppStack";
+import StackHeader from "./StackHeader";
+import Switch from "./Switch";
+import { MARGIN, PADDING } from "./constants";
+import { DAYS } from "./days";
+import { planRepo, setRepo } from "./db";
 import { DrawerParams } from "./drawer-param-list";
+import { defaultSet } from "./gym-set";

 export default function EditPlan() {
  const { params } = useRoute<RouteProp<StackParams, "EditPlan">>();
@ -41,8 +49,9 @@ export default function EditPlan() {
      .orderBy("name")
      .getRawMany()
      .then((values) => {
-        console.log(EditPlan.name, { values });
-        setNames(values.map((value) => value.name));
+        const newNames = values.map((value) => value.name);
+        console.log(EditPlan.name, { newNames });
+        setNames(newNames);
      });
  }, []);

@ -81,6 +90,43 @@ export default function EditPlan() {
    [setDays, days]
  );

+  const renderDay = (day: string) => (
+    <Switch
+      key={day}
+      onChange={(value) => toggleDay(value, day)}
+      value={days.includes(day)}
+      title={day}
+    />
+  );
+
+  const renderWorkout = ({
+    item,
+    drag,
+  }: ReorderableListRenderItemInfo<string>) => (
+    <Pressable
+      onLongPress={drag}
+      onPress={() => toggleWorkout(!workouts.includes(item), item)}
+      style={{ flexDirection: "row", alignItems: "center" }}
+    >
+      <PaperSwitch
+        value={workouts.includes(item)}
+        style={{ marginRight: MARGIN }}
+        onValueChange={(value) => toggleWorkout(value, item)}
+      />
+      <Text>{item}</Text>
+    </Pressable>
+  );
+
+  const reorderWorkout = (from: number, to: number) => {
+    const newNames = [...names];
+    const copy = newNames[from];
+    newNames[from] = newNames[to];
+    newNames[to] = copy;
+    const newWorkouts = newNames.filter((name) => workouts.includes(name));
+    console.log({ newWorkouts });
+    setWorkouts(newWorkouts);
+  };
+
  return (
    <>
      <StackHeader
@ -106,37 +152,35 @@ export default function EditPlan() {
        )}
      </StackHeader>
      <View style={{ padding: PADDING, flex: 1 }}>
-        <ScrollView style={{ flex: 1 }}>
-          <AppInput
-            label="Title"
-            value={title}
-            onChangeText={(value) => setTitle(value)}
+        <AppInput
+          label="Title"
+          value={title}
+          onChangeText={(value) => setTitle(value)}
+        />
+
+        <Text style={styles.title}>Days</Text>
+        {DAYS.map((day) => renderDay(day))}
+
+        <Text style={[styles.title, { marginTop: MARGIN }]}>Workouts</Text>
+        {names.length === 0 ? (
+          <View>
+            <Text>No workouts found.</Text>
+          </View>
+        ) : (
+          <ReorderableList
+            data={names}
+            onReorder={({ fromIndex, toIndex }) =>
+              reorderWorkout(fromIndex, toIndex)
+            }
+            renderItem={renderWorkout}
+            keyExtractor={(item) => item}
+            dragScale={1.025}
+            style={{
+              flex: 1,
+            }}
+            containerStyle={{ flex: 1 }}
          />
-          <Text style={styles.title}>Days</Text>
-          {DAYS.map((day) => (
-            <Switch
-              key={day}
-              onChange={(value) => toggleDay(value, day)}
-              value={days.includes(day)}
-              title={day}
-            />
-          ))}
-          <Text style={[styles.title, { marginTop: MARGIN }]}>Workouts</Text>
-          {names.length === 0 ? (
-            <View>
-              <Text>No workouts found.</Text>
-            </View>
-          ) : (
-            names.map((name) => (
-              <Switch
-                key={name}
-                onChange={(value) => toggleWorkout(value, name)}
-                value={workouts.includes(name)}
-                title={name}
-              />
-            ))
-          )}
-        </ScrollView>
+        )}

        <Button
          disabled={workouts.length === 0 && days.length === 0}
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@ -85,8 +85,8 @@ android {
        applicationId "com.massive"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 36195
-        versionName "1.169"
+        versionCode 36196
+        versionName "1.170"
    }
    signingConfigs {
        release {
--- a/package-lock.json
+++ b/package-lock.json
@ -1,12 +1,12 @@
 {
  "name": "massive",
-  "version": "1.164",
+  "version": "1.169",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "massive",
-      "version": "1.164",
+      "version": "1.169",
      "license": "GPL-3.0-only",
      "dependencies": {
        "@babel/plugin-proposal-class-properties": "^7.18.6",
@ -38,6 +38,7 @@
        "react-native-pager-view": "^6.2.0",
        "react-native-paper": "^5.9.1",
        "react-native-reanimated": "^3.3.0",
+        "react-native-reorderable-list": "^0.4.0",
        "react-native-safe-area-context": "^4.7.1",
        "react-native-screens": "^3.22.1",
        "react-native-share": "^9.2.3",
@ -3027,6 +3028,11 @@
        "react-native-screens": ">= 3.0.0"
      }
    },
+    "node_modules/@seznam/compose-react-refs": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@seznam/compose-react-refs/-/compose-react-refs-1.0.6.tgz",
+      "integrity": "sha512-izzOXQfeQLonzrIQb8u6LQ8dk+ymz3WXTIXjvOlTXHq6sbzROg3NWU+9TTAOpEoK9Bth24/6F/XrfHJ5yR5n6Q=="
+    },
    "node_modules/@sideway/address": {
      "version": "4.1.4",
      "license": "BSD-3-Clause",
@ -6183,6 +6189,11 @@
      "version": "2.0.6",
      "license": "MIT"
    },
+    "node_modules/fast-memoize": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/fast-memoize/-/fast-memoize-2.5.2.tgz",
+      "integrity": "sha512-Ue0LwpDYErFbmNnZSF0UH6eImUwDmogUO1jyE+JbN2gsQz/jICm1Ve7t9QT0rNSsfJt+Hs4/S3GnsDVjL4HVrw=="
+    },
    "node_modules/fast-xml-parser": {
      "version": "4.2.5",
      "funding": [
@ -9909,6 +9920,20 @@
      "version": "2.0.0",
      "license": "MIT"
    },
+    "node_modules/react-native-reorderable-list": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/react-native-reorderable-list/-/react-native-reorderable-list-0.4.0.tgz",
+      "integrity": "sha512-XC0BpYFNZcTgfO6xAHvB2KefdiFZEp1WOFjZRR9Du9YX5NQtZg4DUKjtXWNgwnoB9SCQh04sOWxRf3rnAXpDww==",
+      "dependencies": {
+        "@seznam/compose-react-refs": "^1.0.6",
+        "fast-memoize": "^2.5.2"
+      },
+      "peerDependencies": {
+        "react-native": ">=0.62.0",
+        "react-native-gesture-handler": ">=1.10.0",
+        "react-native-reanimated": ">=2.2.0"
+      }
+    },
    "node_modules/react-native-safe-area-context": {
      "version": "4.7.1",
      "license": "MIT",
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "massive",
-  "version": "1.169",
+  "version": "1.170",
  "private": true,
  "license": "GPL-3.0-only",
  "scripts": {
@ -41,6 +41,7 @@
    "react-native-pager-view": "^6.2.0",
    "react-native-paper": "^5.9.1",
    "react-native-reanimated": "^3.3.0",
+    "react-native-reorderable-list": "^0.4.0",
    "react-native-safe-area-context": "^4.7.1",
    "react-native-screens": "^3.22.1",
    "react-native-share": "^9.2.3",