レビュー指摘の修正: テーマ対応テキスト色、sentinel値防止、transition中のボタン無効化、fetch競合対策

- RouteInfoModal: expandableToggleTextをLEDテーマ対応に分岐
- SelectBoundModal: handleToggleNotificationでstation.id nullチェックを追加し-1 sentinel防止
- SelectBoundModal: isTransitioning中に停車駅一覧・種別・保存・設定ボタンも無効化
- usePresetCarouselData: requestIdによるfetch競合対策を追加
- usePresetCarouselData: displayKeyにnotifyStationIdsを追加
- SelectBoundModal: effectiveStationのコメントを実態に合わせて修正

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: TinyKitten

src/components/RouteInfoModal.tsx

@@ -83,9 +83,12 @@ const styles = StyleSheet.create({
     elevation: 0,
     shadowOpacity: 0,
   },
-  expandableToggleText: {
+  expandableToggleTextLight: {
     color: '#333',
   },
+  expandableToggleTextLED: {
+    color: '#fff',
+  },
 });
 
 type Props = {
@@ -182,7 +185,11 @@ export const RouteInfoModal = ({
                     onToggle={() => onToggleNotification(item)}
                     state={isNotifyEnabled}
                     style={styles.expandableToggle}
-                    textStyle={styles.expandableToggleText}
+                    textStyle={
+                      isLEDTheme
+                        ? styles.expandableToggleTextLED
+                        : styles.expandableToggleTextLight
+                    }
                     activeOpacity={1}
                   >
                     {translate('enableNotificationMode')}
@@ -192,7 +199,11 @@ export const RouteInfoModal = ({
                   <ToggleButton
                     outline
                     style={styles.expandableToggle}
-                    textStyle={styles.expandableToggleText}
+                    textStyle={
+                      isLEDTheme
+                        ? styles.expandableToggleTextLED
+                        : styles.expandableToggleTextLight
+                    }
                     activeOpacity={1}
                     onToggle={() => onToggleDestination(item)}
                     state={isSetAsTerminus}
@@ -226,6 +237,7 @@ export const RouteInfoModal = ({
       wantedDestinationGroupId,
       onToggleNotification,
       onToggleDestination,
+      isLEDTheme,
     ]
   );
 

src/components/SelectBoundModal.tsx

@@ -176,7 +176,7 @@ export const SelectBoundModal: React.FC<Props> = ({
     }
   }, [visible]);
 
-  // pendingStation が区間外の場合、stations 内の最寄り駅にフォールバック
+  // pendingStation が区間外の場合、stations の先頭駅にフォールバック
   const effectiveStation =
     station && stations.some((s) => s.groupId === station.groupId)
       ? station
@@ -567,8 +567,10 @@ export const SelectBoundModal: React.FC<Props> = ({
 
   const handleToggleNotification = useCallback(
     (station: Station) => {
+      if (station.id == null) return;
+
+      const stationId = station.id;
       setNotifyState((prev) => {
-        const stationId = station.id ?? -1;
         const isEnabled = prev.targetStationIds.includes(stationId);
         return {
           ...prev,
@@ -707,7 +709,7 @@ export const SelectBoundModal: React.FC<Props> = ({
             <Button
               outline
               onPress={() => setRouteInfoModalVisible(true)}
-              disabled={loading}
+              disabled={loading || isTransitioning}
             >
               {isBus
                 ? translate('viewBusStops')
@@ -717,7 +719,7 @@ export const SelectBoundModal: React.FC<Props> = ({
             <Button
               outline
               onPress={() => setIsTrainTypeModalVisible(true)}
-              disabled={!fetchedTrainTypes.length || loading}
+              disabled={!fetchedTrainTypes.length || loading || isTransitioning}
             >
               {trainTypeText}
             </Button>
@@ -727,7 +729,9 @@ export const SelectBoundModal: React.FC<Props> = ({
               style={savedRoute ? styles.redOutlinedButton : null}
               textStyle={savedRoute ? styles.redOutlinedButtonText : null}
               onPress={handleSaveRoutePress}
-              disabled={!line || !isRoutesDBInitialized || loading}
+              disabled={
+                !line || !isRoutesDBInitialized || loading || isTransitioning
+              }
             >
               {translate(
                 !savedRoute ? 'saveCurrentRoute' : 'removeFromSavedRoutes'
@@ -736,6 +740,7 @@ export const SelectBoundModal: React.FC<Props> = ({
             <Button
               outline
               onPress={() => setSelectBoundSettingListModalVisible(true)}
+              disabled={isTransitioning}
             >
               {translate('settings')}
             </Button>

src/hooks/usePresetCarouselData.ts

@@ -19,6 +19,7 @@ export const usePresetCarouselData = (): UsePresetCarouselDataResult => {
   const [carouselData, setCarouselData] = useState<LoopItem[]>([]);
   const prevFetchKeyRef = useRef('');
   const prevDisplayKeyRef = useRef('');
+  const currentRequestIdRef = useRef(0);
 
   const {
     routes,
@@ -38,7 +39,7 @@ export const usePresetCarouselData = (): UsePresetCarouselDataResult => {
     const displayKey = routes
       .map(
         (r) =>
-          `${r.id}:${r.lineId}:${r.trainTypeId}:${r.hasTrainType}:${r.name}:${r.direction}:${r.wantedDestinationId}`
+          `${r.id}:${r.lineId}:${r.trainTypeId}:${r.hasTrainType}:${r.name}:${r.direction}:${r.wantedDestinationId}:${r.notifyStationIds.join(';')}`
       )
       .join(',');
 
@@ -47,6 +48,8 @@ export const usePresetCarouselData = (): UsePresetCarouselDataResult => {
 
     if (!needsFetch && !needsDisplayUpdate) return;
 
+    const requestId = ++currentRequestIdRef.current;
+
     const fetchAsync = async () => {
       try {
         const lineStationsMap = new Map<number, Station[]>();
@@ -99,6 +102,7 @@ export const usePresetCarouselData = (): UsePresetCarouselDataResult => {
             }
           }
 
+          if (requestId !== currentRequestIdRef.current) return;
           prevFetchKeyRef.current = fetchKey;
         } else {
           // fetch不要の場合は既存のcarouselDataから駅データを再利用
@@ -111,6 +115,8 @@ export const usePresetCarouselData = (): UsePresetCarouselDataResult => {
           }
         }
 
+        if (requestId !== currentRequestIdRef.current) return;
+
         setCarouselData(
           routes.map((r, i) => ({
             ...r,