Fix user targeting variable and add User ID change functionality (#6)

Signed-off-by: André Silva <[email protected]>

Author: askpt

Workshop.md

@@ -275,7 +275,7 @@ You'll see how feature flags can safely control major architectural decisions an
 
    - Using the `EnableStatsHeader` flag, implement a simple A/B test
    - Use the `EvaluationContext` to differentiate between users, making sure to use the `_userId` property as the targetingKey
-   - Change the localStorage value for `userId` to simulate different users
+   - Use the "Change User ID" button on the homepage to simulate different users by changing your user ID
    - Observe how the tabs are displayed in the web application
 
 2. Create a new configuration in flagd for `EnableTabs`

src/Garage.AppHost/flags/flagd.json

@@ -24,7 +24,7 @@
           {
             "==": [
               {
-                "var": "user"
+                "var": "user_id"
               },
               "1"
             ]
@@ -42,4 +42,4 @@
       "defaultVariant": "off"
     }
   }
-}
+}

src/Garage.Web/Components/Pages/Home.razor

@@ -30,8 +30,8 @@
                 </div>
                 <div class="stat-item complete">
                     <span class="stat-number">@(_winners.Count > 0
-                                                      ? Math.Round((double)OwnedCount / _winners.Count * 100, 1)
-                                                      : 0)%</span>
+                                            ? Math.Round((double)OwnedCount / _winners.Count * 100, 1)
+                                            : 0)%</span>
                     <span class="stat-label">Complete</span>
                 </div>
             </div>
@@ -41,34 +41,59 @@
 
 <div class="collection-summary">
     <span class="collection-count">@_winners.Count of @_winners.Count cars</span>
+    <button class="btn btn-secondary btn-sm" @onclick="ShowUserIdModal">Change User ID</button>
 </div>
 
 <div class="collection-tabs">
     <button class="tab-btn @(_activeFilter == FilterType.All ? "active" : "")"
-            @onclick="() => SetFilter(FilterType.All)">All Winners (@_winners.Count)
+        @onclick="() => SetFilter(FilterType.All)">All Winners (@_winners.Count)
     </button>
     <button class="tab-btn @(_activeFilter == FilterType.Owned ? "active" : "")"
-            @onclick="() => SetFilter(FilterType.Owned)">Owned (@OwnedCount)
+        @onclick="() => SetFilter(FilterType.Owned)">Owned (@OwnedCount)
     </button>
     <button class="tab-btn @(_activeFilter == FilterType.NotOwned ? "active" : "")"
-            @onclick="() => SetFilter(FilterType.NotOwned)">Not Owned (@(_winners.Count - OwnedCount))
+        @onclick="() => SetFilter(FilterType.NotOwned)">Not Owned (@(_winners.Count - OwnedCount))
     </button>
 </div>
 
 <div class="car-grid">
     @foreach (var winner in FilteredWinners)
     {
-        <CarCard Car="@winner" OnOwnershipChanged="OnOwnershipChanged"/>
+        <CarCard Car="@winner" OnOwnershipChanged="OnOwnershipChanged" />
     }
 </div>
 
+<!-- User ID Change Modal -->
+@if (_showUserIdModal)
+{
+    <div class="modal-backdrop" @onclick="HideUserIdModal">
+        <div class="modal-content" @onclick:stopPropagation="true">
+            <div class="modal-header">
+                <h5>Change User ID</h5>
+                <button type="button" class="btn-close" @onclick="HideUserIdModal">×</button>
+            </div>
+            <div class="modal-body">
+                <p>Current User ID: <strong>@_userId</strong></p>
+                <label for="newUserId">New User ID:</label>
+                <input type="number" id="newUserId" @bind="_newUserId" class="form-control" min="1" />
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" @onclick="HideUserIdModal">Cancel</button>
+                <button type="button" class="btn btn-primary" @onclick="UpdateUserId">Update</button>
+            </div>
+        </div>
+    </div>
+}
+
 @code {
     private List<Winner> _winners = [];
     private FilterType _activeFilter = FilterType.All;
 
     private int OwnedCount => _winners.Count(c => c.IsOwned);
     private bool ShowHeader => FeatureFlags.EnableStatsHeader;
     private int _userId;
+    private bool _showUserIdModal;
+    private int _newUserId;
 
     private IEnumerable<Winner> FilteredWinners => _activeFilter switch
     {
@@ -103,8 +128,11 @@
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         // Initialize user ID from local storage
-        await GetUserId();
-        StateHasChanged();
+        if (firstRender)
+        {
+            await GetUserId();
+            StateHasChanged();
+        }
     }
 
     private async Task GetUserId()
@@ -149,4 +177,29 @@
         StateHasChanged();
     }
 
+    private void ShowUserIdModal()
+    {
+        _newUserId = _userId; // Initialize with current value
+        _showUserIdModal = true;
+        StateHasChanged();
+    }
+
+    private void HideUserIdModal()
+    {
+        _showUserIdModal = false;
+        StateHasChanged();
+    }
+
+    private async Task UpdateUserId()
+    {
+        if (_newUserId > 0)
+        {
+            _userId = _newUserId;
+            await JsRuntime.InvokeVoidAsync("localStorage.setItem", "userId", _userId.ToString());
+            Logger.LogInformation("Updated user ID to: {UserId}", _userId);
+            _showUserIdModal = false;
+            StateHasChanged();
+        }
+    }
+
 }