feat(mobile): add status action

DIYgod · DIYgod · commit a4ce91d6e3ac · 2025-04-24T10:38:39.000+08:00
diff --git a/apps/mobile/src/components/ui/form/Select.tsx b/apps/mobile/src/components/ui/form/Select.tsx
@@ -30,12 +30,11 @@ export function Select<T>({
   wrapperStyle,
   label,
 }: SelectProps<T>) {
-  const [currentValue, setCurrentValue] = useState(() => {
-    if (!value) {
-      return options[0]!.value
-    }
-    return value
-  })
+  const [currentValue, setCurrentValue] = useState(() => value)
+
+  useEffect(() => {
+    setCurrentValue(value)
+  }, [value])
 
   const valueToLabelMap = useMemo(() => {
     return options.reduce((acc, option) => {
diff --git a/apps/mobile/src/modules/settings/actions/constant.ts b/apps/mobile/src/modules/settings/actions/constant.ts
@@ -12,8 +12,13 @@ import { EditWebhooksScreen } from "../routes/EditWebhooks"
 export const filterFieldOptions: Array<{
   label: Extract<ParseKeys<"settings">, `actions.action_card.feed_options.${string}`>
   value: string
-  type?: "text" | "number" | "view"
+  type?: "text" | "number" | "view" | "status"
 }> = [
+  {
+    label: "actions.action_card.feed_options.status",
+    value: "status",
+    type: "status",
+  },
   {
     label: "actions.action_card.feed_options.subscription_view",
     value: "view",
@@ -61,7 +66,7 @@ export const filterFieldOptions: Array<{
 export const filterOperatorOptions: Array<{
   label: Extract<ParseKeys<"settings">, `actions.action_card.operation_options.${string}`>
   value: string
-  types: Array<"text" | "number" | "view">
+  types: Array<"text" | "number" | "view" | "status">
 }> = [
   {
     label: "actions.action_card.operation_options.contains",
@@ -76,7 +81,7 @@ export const filterOperatorOptions: Array<{
   {
     label: "actions.action_card.operation_options.is_equal_to",
     value: "eq",
-    types: ["number", "text", "view"],
+    types: ["number", "text", "view", "status"],
   },
   {
     label: "actions.action_card.operation_options.is_not_equal_to",
diff --git a/apps/mobile/src/modules/settings/routes/EditCondition.tsx b/apps/mobile/src/modules/settings/routes/EditCondition.tsx
@@ -1,3 +1,4 @@
+import { useMemo } from "react"
 import { useTranslation } from "react-i18next"
 import { Text, View } from "react-native"
 
@@ -46,7 +47,17 @@ function ConditionForm({ index }: { index: ConditionIndex }) {
     currentField?.type === "view"
       ? views.find((view) => view.view === Number(item.value))
       : undefined
-  const { t: tCommon } = useTranslation("common")
+
+  const operatorOptions = useMemo(() => {
+    return filterOperatorOptions
+      .map((i) => ({ ...i, label: t(i.label) }))
+      .filter((operator) => operator.types.includes(currentField?.type ?? "text"))
+  }, [t, currentField])
+  if (operatorOptions.length === 1 && currentOperator?.value !== operatorOptions[0]!.value) {
+    actionActions.pathCondition(index, {
+      operator: operatorOptions[0]!.value as any,
+    })
+  }
 
   return (
     <>
@@ -69,9 +80,7 @@ function ConditionForm({ index }: { index: ConditionIndex }) {
         <GroupedInsetListBaseCell className="flex flex-row justify-between">
           <Text className="text-label">{t("actions.action_card.operator")}</Text>
           <Select
-            options={filterOperatorOptions
-              .map((i) => ({ ...i, label: t(i.label) }))
-              .filter((operator) => operator.types.includes(currentField?.type ?? "text"))}
+            options={operatorOptions}
             value={currentOperator?.value}
             onValueChange={(value) => {
               actionActions.pathCondition(index, {
@@ -84,30 +93,19 @@ function ConditionForm({ index }: { index: ConditionIndex }) {
 
         <GroupedInsetListBaseCell className="flex flex-row justify-between">
           <Text className="text-label">{t("actions.action_card.value")}</Text>
-          {currentField?.type === "view" ? (
-            <Select
-              options={views.map((field) => ({
-                label: tCommon(field.name),
-                value: String(field.view),
-              }))}
-              value={currentView?.view ? String(currentView.view) : undefined}
-              onValueChange={(val) => {
-                actionActions.pathCondition(index, { value: val })
-              }}
-              wrapperClassName="min-w-40"
-            />
-          ) : (
-            <PlainTextField
-              className="w-full flex-1 text-right"
-              value={item.value}
-              onChangeText={(value) => {
-                actionActions.pathCondition(index, { value })
-              }}
-              hitSlop={10}
-              selectionColor={accentColor}
-              placeholder="Enter value"
-            />
-          )}
+          <ValueField
+            type={currentField?.type ?? "text"}
+            value={
+              currentField?.type === "view"
+                ? currentView?.view !== undefined
+                  ? String(currentView.view)
+                  : undefined
+                : item.value
+            }
+            onChange={(value) => {
+              actionActions.pathCondition(index, { value })
+            }}
+          />
         </GroupedInsetListBaseCell>
       </GroupedInsetListCard>
       {__DEV__ && (
@@ -118,3 +116,67 @@ function ConditionForm({ index }: { index: ConditionIndex }) {
     </>
   )
 }
+
+function ValueField({
+  type,
+  value,
+  onChange,
+}: {
+  type: string
+  value?: string
+  onChange: (value: string | undefined) => void
+}) {
+  const { t } = useTranslation("common")
+
+  switch (type) {
+    case "view": {
+      return (
+        <Select
+          options={views.map((field) => ({
+            label: t(field.name),
+            value: String(field.view),
+          }))}
+          value={value}
+          onValueChange={(val) => {
+            onChange(val)
+          }}
+          wrapperClassName="min-w-40"
+        />
+      )
+    }
+    case "status": {
+      if (value === undefined) {
+        onChange("collected")
+      }
+      return (
+        <Select
+          options={[
+            {
+              label: t("words.starred"),
+              value: "collected",
+            },
+          ]}
+          value={value}
+          onValueChange={(val) => {
+            onChange(val as string)
+          }}
+          wrapperClassName="min-w-40"
+        />
+      )
+    }
+    default: {
+      return (
+        <PlainTextField
+          className="w-full flex-1 text-right"
+          value={value}
+          onChangeText={(value) => {
+            onChange(value)
+          }}
+          hitSlop={10}
+          selectionColor={accentColor}
+          placeholder="Enter value"
+        />
+      )
+    }
+  }
+}
