diff --git a/EditPlan.tsx b/EditPlan.tsx index a9e9c52..27d7aa3 100644 --- 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>(); @@ -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) => ( + toggleDay(value, day)} + value={days.includes(day)} + title={day} + /> + ); + + const renderWorkout = ({ + item, + drag, + }: ReorderableListRenderItemInfo) => ( + toggleWorkout(!workouts.includes(item), item)} + style={{ flexDirection: "row", alignItems: "center" }} + > + toggleWorkout(value, item)} + /> + {item} + + ); + + 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 ( <> - - setTitle(value)} + setTitle(value)} + /> + + Days + {DAYS.map((day) => renderDay(day))} + + Workouts + {names.length === 0 ? ( + + No workouts found. + + ) : ( + + reorderWorkout(fromIndex, toIndex) + } + renderItem={renderWorkout} + keyExtractor={(item) => item} + dragScale={1.025} + style={{ + flex: 1, + }} + containerStyle={{ flex: 1 }} /> - Days - {DAYS.map((day) => ( - toggleDay(value, day)} - value={days.includes(day)} - title={day} - /> - ))} - Workouts - {names.length === 0 ? ( - - No workouts found. - - ) : ( - names.map((name) => ( - toggleWorkout(value, name)} - value={workouts.includes(name)} - title={name} - /> - )) - )} - + )}