[bug]: In Daily Progress, current days verses to read is not showing, like previously.

[Muhsin-42]

Is there an existing issue for this?

• There is no exsiting issue for this bug

Describe the bug

In the Daily Progress Page, in the right side card, it used to show the current days verses to read to complete the daily goal. but now it is not showing.

Relevant log output

Steps to reproduce

1. From Home page click on 'Daily Progress Card'
2. or Go to 'https://quran.com/reading-goal/progress'

Environment (please complete the following information) and Add any other context about this bug

OS: MacOs
browser: Chrome

Environment

Production(quran.com)

[traycerai]

Plan

Observations

The bug is in file:src/components/ReadingProgressPage/ProgressPageGoalWidgetDescription.tsx. For GoalType.RANGE goals, the component only displays verses when currentActivityDay?.remainingDailyTargetRanges has items. When this array is empty or undefined, nothing is shown. The component should fall back to displaying dailyTargetRanges when remainingDailyTargetRanges is empty but the daily goal hasn't been completed yet. The currentActivityDay.progress property (0-1 fraction) indicates completion status.

Approach

The fix involves modifying the range display logic in ProgressPageGoalWidgetDescription.tsx to implement a fallback mechanism. When remainingDailyTargetRanges is empty, check if the daily goal is incomplete (progress < 1) and dailyTargetRanges exists. If so, display the full daily target ranges instead. This ensures users always see what verses they need to read for the day, matching the previous behavior described in the bug report.

Implementation Steps

1. Update Range Display Logic in ProgressPageGoalWidgetDescription

File: file:src/components/ReadingProgressPage/ProgressPageGoalWidgetDescription.tsx

Modify the GoalType.RANGE condition (lines 64-83) to implement the fallback logic:

• First, attempt to use currentActivityDay?.remainingDailyTargetRanges
• If empty or undefined, check if the daily goal is incomplete by verifying currentActivityDay?.progress < 1
• If incomplete, fall back to currentActivityDay?.dailyTargetRanges to show the full day's target
• Only return null if both arrays are empty or if the day is complete with no remaining ranges

Key Changes:

• Add a variable to determine which ranges array to use: remainingDailyTargetRanges or dailyTargetRanges
• Check currentActivityDay?.progress to determine if the day is complete
• Use the fallback array when appropriate
• Ensure the existing display logic (parsing the first range, getting chapter data, formatting) remains unchanged

2. Verify Consistency with Other Components

Files to Review:

• file:src/components/HomePage/ReadingSection/StreakOrGoalCard/GoalStatus/index.tsx (lines 98-119)
• file:src/components/ReadingGoal/ReadingGoalAmount/index.tsx (lines 60-67)

These components use similar logic for displaying remainingDailyTargetRanges. Consider applying the same fallback pattern to maintain consistency across the application, especially in the home page reading goal card where users might encounter the same issue.

3. Test Scenarios

Verify the fix handles these cases correctly:

Scenario A - Fresh Day (Not Started):

• remainingDailyTargetRanges: empty or undefined
• dailyTargetRanges: has ranges
• progress: 0
• Expected: Display ranges from dailyTargetRanges

Scenario B - Partially Complete:

• remainingDailyTargetRanges: has ranges
• progress: 0 < progress < 1
• Expected: Display ranges from remainingDailyTargetRanges

Scenario C - Fully Complete:

• remainingDailyTargetRanges: empty
• progress: 1 (100%)
• Expected: Display completion message (handled by lines 32-34)

Scenario D - No Goal Set:

• currentActivityDay: undefined
• Expected: Return null (existing behavior)

4. Type Safety Verification

Ensure the implementation correctly handles:

• Optional chaining for currentActivityDay?.dailyTargetRanges
• Type compatibility between remainingDailyTargetRanges and dailyTargetRanges (both are string[])
• Proper null/undefined checks before accessing array properties

Flow Diagram

flowchart TD
    A[ProgressPageGoalWidgetDescription] --> B{Goal Type?}
    B -->|RANGE| C{remainingDailyTargetRanges exists?}
    B -->|TIME/PAGES| D[Display time/pages remaining]
    B -->|Other| E[Display days remaining]
    
    C -->|Yes & length > 0| F[Display remaining ranges]
    C -->|No or empty| G{Check progress < 1?}
    
    G -->|Yes| H{dailyTargetRanges exists?}
    G -->|No - Complete| I[Return null - show completion]
    
    H -->|Yes & length > 0| J[Display daily target ranges]
    H -->|No or empty| K[Return null]
    
    F --> L[Parse first range]
    J --> L
    L --> M[Get chapter data]
    M --> N[Format and display verse info]

Loading

Import In IDE

🤖 Prompt for AI Agents

## Observations

The bug is in `file:src/components/ReadingProgressPage/ProgressPageGoalWidgetDescription.tsx`. For `GoalType.RANGE` goals, the component only displays verses when `currentActivityDay?.remainingDailyTargetRanges` has items. When this array is empty or undefined, nothing is shown. The component should fall back to displaying `dailyTargetRanges` when `remainingDailyTargetRanges` is empty but the daily goal hasn't been completed yet. The `currentActivityDay.progress` property (0-1 fraction) indicates completion status.

## Approach

The fix involves modifying the range display logic in `ProgressPageGoalWidgetDescription.tsx` to implement a fallback mechanism. When `remainingDailyTargetRanges` is empty, check if the daily goal is incomplete (`progress < 1`) and `dailyTargetRanges` exists. If so, display the full daily target ranges instead. This ensures users always see what verses they need to read for the day, matching the previous behavior described in the bug report.

## Implementation Steps

### 1. Update Range Display Logic in ProgressPageGoalWidgetDescription

**File**: `file:src/components/ReadingProgressPage/ProgressPageGoalWidgetDescription.tsx`

Modify the `GoalType.RANGE` condition (lines 64-83) to implement the fallback logic:

- First, attempt to use `currentActivityDay?.remainingDailyTargetRanges`
- If empty or undefined, check if the daily goal is incomplete by verifying `currentActivityDay?.progress < 1`
- If incomplete, fall back to `currentActivityDay?.dailyTargetRanges` to show the full day's target
- Only return `null` if both arrays are empty or if the day is complete with no remaining ranges

**Key Changes**:
- Add a variable to determine which ranges array to use: `remainingDailyTargetRanges` or `dailyTargetRanges`
- Check `currentActivityDay?.progress` to determine if the day is complete
- Use the fallback array when appropriate
- Ensure the existing display logic (parsing the first range, getting chapter data, formatting) remains unchanged

### 2. Verify Consistency with Other Components

**Files to Review**:
- `file:src/components/HomePage/ReadingSection/StreakOrGoalCard/GoalStatus/index.tsx` (lines 98-119)
- `file:src/components/ReadingGoal/ReadingGoalAmount/index.tsx` (lines 60-67)

These components use similar logic for displaying `remainingDailyTargetRanges`. Consider applying the same fallback pattern to maintain consistency across the application, especially in the home page reading goal card where users might encounter the same issue.

### 3. Test Scenarios

Verify the fix handles these cases correctly:

**Scenario A - Fresh Day (Not Started)**:
- `remainingDailyTargetRanges`: empty or undefined
- `dailyTargetRanges`: has ranges
- `progress`: 0
- **Expected**: Display ranges from `dailyTargetRanges`

**Scenario B - Partially Complete**:
- `remainingDailyTargetRanges`: has ranges
- `progress`: 0 < progress < 1
- **Expected**: Display ranges from `remainingDailyTargetRanges`

**Scenario C - Fully Complete**:
- `remainingDailyTargetRanges`: empty
- `progress`: 1 (100%)
- **Expected**: Display completion message (handled by lines 32-34)

**Scenario D - No Goal Set**:
- `currentActivityDay`: undefined
- **Expected**: Return null (existing behavior)

### 4. Type Safety Verification

Ensure the implementation correctly handles:
- Optional chaining for `currentActivityDay?.dailyTargetRanges`
- Type compatibility between `remainingDailyTargetRanges` and `dailyTargetRanges` (both are `string[]`)
- Proper null/undefined checks before accessing array properties

## Flow Diagram

```mermaid
flowchart TD
    A[ProgressPageGoalWidgetDescription] --> B{Goal Type?}
    B -->|RANGE| C{remainingDailyTargetRanges exists?}
    B -->|TIME/PAGES| D[Display time/pages remaining]
    B -->|Other| E[Display days remaining]
    
    C -->|Yes & length > 0| F[Display remaining ranges]
    C -->|No or empty| G{Check progress < 1?}
    
    G -->|Yes| H{dailyTargetRanges exists?}
    G -->|No - Complete| I[Return null - show completion]
    
    H -->|Yes & length > 0| J[Display daily target ranges]
    H -->|No or empty| K[Return null]
    
    F --> L[Parse first range]
    J --> L
    L --> M[Get chapter data]
    M --> N[Format and display verse info]
```

---

Execution Information

Branch: production
Commit: 5436c5a

---

💡 Tips

Supported Commands (Inside Comments)

• Use @traycerai generate to iterate on the previous version of the implementation plan.

Supported Commands (Inside Description)

• Add @traycerai ignore anywhere in the ticket description to prevent this ticket from being processed.
• Add @traycerai branch:<branch-name> anywhere in the ticket description to specify the target branch for the implementation plan.

Community

• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

Warning

Something went wrong while processing your request.

Reference ID: be3ec368-1c74-4f38-b952-215caad5777f

Please try again or contact support if the issue persists, referencing this ID.

[Rio-0912]

yeah thats truee, its kinda big issue as now we have know idea about the cap of reading and should we fasten up or slow down