pre-select filtered tag on new task

Author: dtom90

app/(tabs)/quick-wins/index.tsx

@@ -4,17 +4,19 @@ import QuickWinsList from '@/components/quick-wins/list/QuickWinsList';
 import AddTaskButton from '@/components/quick-wins/list/AddTaskButton';
 import { useTasksForDate } from '@/db/useTasks';
 import { useSelectedDate } from '@/lib/selectedDateStore';
+import { useState } from 'react';
 
 export default function QuickWinsScreen() {
   const { selectedDate } = useSelectedDate();
   const { refetch, isFetching } = useTasksForDate(selectedDate);
+  const [selectedTagId, setSelectedTagId] = useState<number | null>(null);
 
   return (
     <>
       <WeekHeader />
       <NarrowView refreshing={isFetching} onRefresh={() => { void refetch(); }}>
-        <QuickWinsList />
-        <AddTaskButton />
+        <QuickWinsList selectedTagId={selectedTagId} onSelectTagId={setSelectedTagId} />
+        <AddTaskButton initialTagId={selectedTagId} />
       </NarrowView>
     </>
   );

components/quick-wins/list/AddTaskButton.tsx

@@ -2,7 +2,11 @@ import { useState } from 'react';
 import { AddButton } from '@/components/common/AddButton';
 import AddTaskModal from './AddTaskModal';
 
-export default function AddTaskButton() {
+type AddTaskButtonProps = {
+  initialTagId?: number | null;
+};
+
+export default function AddTaskButton({ initialTagId = null }: AddTaskButtonProps) {
   const [modalVisible, setModalVisible] = useState(false);
 
   return (
@@ -12,6 +16,7 @@ export default function AddTaskButton() {
         visible={modalVisible}
         onClose={() => setModalVisible(false)}
         title="Add Task"
+        initialTagIds={initialTagId != null ? [initialTagId] : []}
       />
     </>
   );

components/quick-wins/list/AddTaskModal.tsx

@@ -17,6 +17,7 @@ interface AddTaskModalProps {
   visible: boolean;
   onClose: () => void;
   title?: string;
+  initialTagIds?: number[];
 }
 
 const { height: screenHeight } = Dimensions.get('window');
@@ -25,6 +26,7 @@ export default function AddTaskModal({
   visible,
   onClose,
   title = 'Add Task',
+  initialTagIds,
 }: AddTaskModalProps) {
   const [modalVisible, setModalVisible] = useState(visible);
   const slideAnim = useRef(new Animated.Value(screenHeight)).current;
@@ -103,9 +105,10 @@ export default function AddTaskModal({
                 </View>
 
                 <TaskForm
-                  key={visible ? 'open' : 'closed'}
+                  key={`${visible ? 'open' : 'closed'}-${(initialTagIds ?? []).join(',')}`}
                   ref={formRef}
                   onSuccess={handleClose}
+                  initialTagIds={initialTagIds}
                 />
               </Animated.View>
             </TouchableWithoutFeedback>

components/quick-wins/list/QuickWinsList.tsx

@@ -6,8 +6,15 @@ import QuickWinsTagFilter from './QuickWinsTagFilter';
 import QuickWinsTaskList from './QuickWinsTaskList';
 import { useQuickWinsList } from './useQuickWinsList';
 
-export default function QuickWinsList() {
-  const [selectedTagId, setSelectedTagId] = useState<number | null>(null);
+type QuickWinsListProps = {
+  selectedTagId: number | null;
+  onSelectTagId: (id: number | null) => void;
+};
+
+export default function QuickWinsList({
+  selectedTagId,
+  onSelectTagId,
+}: QuickWinsListProps) {
   const [tagOrderModalVisible, setTagOrderModalVisible] = useState(false);
   const {
     tasksFiltered,
@@ -26,7 +33,7 @@ export default function QuickWinsList() {
       <QuickWinsTagFilter
         tagsInUse={tagsInUse}
         selectedTagId={selectedTagId}
-        onSelectTagId={setSelectedTagId}
+        onSelectTagId={onSelectTagId}
         onReorderPress={() => setTagOrderModalVisible(true)}
         showReorderButton={tags.length > 0}
       />

components/quick-wins/list/TaskForm.tsx

@@ -25,9 +25,11 @@ export interface TaskFormRef {
 interface TaskFormProps {
   task?: Task;
   onSuccess?: () => void;
+  initialTagIds?: number[];
 }
 
-const TaskForm = forwardRef<TaskFormRef, TaskFormProps>(({ task, onSuccess }, ref) => {
+const TaskForm = forwardRef<TaskFormRef, TaskFormProps>(
+  ({ task, onSuccess, initialTagIds }, ref) => {
   const { selectedDate } = useSelectedDate();
   const isEdit = task != null;
 
@@ -37,7 +39,7 @@ const TaskForm = forwardRef<TaskFormRef, TaskFormProps>(({ task, onSuccess }, re
   );
   const [showDatePicker, setShowDatePicker] = useState(false);
   const [tagNames, setTagNames] = useState<string[]>([]);
-  const [tagNamesInitialized, setTagNamesInitialized] = useState(!isEdit);
+  const [tagNamesInitialized, setTagNamesInitialized] = useState(false);
 
   const { data: tagIds = [] } = useTaskTagIds(isEdit ? task!.id : undefined);
   const { data: tags = [] } = useTagsQuery();
@@ -51,6 +53,24 @@ const TaskForm = forwardRef<TaskFormRef, TaskFormProps>(({ task, onSuccess }, re
     setTagNamesInitialized(true);
   }, [isEdit, tagIds, tags]);
 
+  useEffect(() => {
+    if (isEdit) return;
+    if (tagNamesInitialized) return;
+    if (!initialTagIds || initialTagIds.length === 0) {
+      setTagNamesInitialized(true);
+      return;
+    }
+    if (tags.length === 0) {
+      setTagNamesInitialized(true);
+      return;
+    }
+    const initialNames = initialTagIds
+      .map((id) => tags.find((t) => t.id === id)?.name)
+      .filter((n): n is string => Boolean(n));
+    setTagNames(initialNames);
+    setTagNamesInitialized(true);
+  }, [isEdit, initialTagIds, tagNamesInitialized, tags]);
+
   const [isSubmitting, setIsSubmitting] = useState(false);
   const createTask = useCreateTask();
   const updateTask = useUpdateTask();
@@ -102,8 +122,13 @@ const TaskForm = forwardRef<TaskFormRef, TaskFormProps>(({ task, onSuccess }, re
         if (tagNames.length > 0) {
           const tagIdsToSet: number[] = [];
           for (const name of tagNames) {
-            const tag = await createTag.mutateAsync(name);
-            tagIdsToSet.push(tag.id);
+            const existing = tags.find((t) => t.name === name);
+            if (existing) {
+              tagIdsToSet.push(existing.id);
+            } else {
+              const tag = await createTag.mutateAsync(name);
+              tagIdsToSet.push(tag.id);
+            }
           }
           await setTaskTags.mutateAsync({ taskId: newTask.id, tagIds: tagIdsToSet });
         }
@@ -210,7 +235,8 @@ const TaskForm = forwardRef<TaskFormRef, TaskFormProps>(({ task, onSuccess }, re
           isSubmitting ||
           pending ||
           !taskTitle.trim() ||
-          (isEdit && !tagNamesInitialized)
+          ((isEdit || (initialTagIds != null && initialTagIds.length > 0)) &&
+            !tagNamesInitialized)
         }
       >
         <Text className="text-base font-bold" style={{ color: Colors.text }}>
@@ -226,7 +252,8 @@ const TaskForm = forwardRef<TaskFormRef, TaskFormProps>(({ task, onSuccess }, re
       )}
     </View>
   );
-});
+  }
+);
 
 const styles = StyleSheet.create({
   formWrap: {