fix: refactoring of user button [CLERK_SDK #20]

Author: shinyford

packages/clerk_flutter/example/lib/main.dart

@@ -27,7 +27,7 @@ class MainApp extends StatelessWidget {
             padding: horizontalPadding32,
             child: Center(
               child: ClerkAuthBuilder(
-                signedInBuilder: (context, auth) => const ClerkUserButton(),
+                signedInBuilder: (context, auth) => ClerkUserButton(),
                 signedOutBuilder: (context, auth) => const ClerkAuthenticationWidget(),
               ),
             ),

packages/clerk_flutter/lib/src/widgets/control/clerk_auth.dart

@@ -38,7 +38,14 @@ class ClerkAuth extends StatefulWidget {
     this.translator = const DefaultClerkTranslator(),
     this.persistor,
     this.loading,
-  }) : assert((publicKey is String && publishableKey is String) != auth is ClerkAuthProvider);
+  })  : assert(
+          (publicKey is String) != (auth is ClerkAuthProvider),
+          'Either publicKey or an auth instance must be provided, but not both',
+        ),
+        assert(
+          (publicKey is String) == (publishableKey is String),
+          'Both publicKey and publishableKey must be provided, or neither',
+        );
 
   @override
   State<ClerkAuth> createState() => _ClerkAuthState();

packages/clerk_flutter/lib/src/widgets/user/clerk_user_button.dart

@@ -5,19 +5,14 @@ import 'package:clerk_flutter/clerk_flutter.dart';
 import 'package:common/common.dart';
 import 'package:flutter/material.dart';
 
-class ClerkUserButton extends StatefulWidget {
-  final bool showName;
-
-  const ClerkUserButton({super.key, this.showName = true});
+class ClerkUserButton extends StatelessWidget {
+  static const _closeDelay = Duration(milliseconds: 250);
 
-  @override
-  State<ClerkUserButton> createState() => _ClerkUserButtonState();
-}
+  final bool showName;
 
-class _ClerkUserButtonState extends State<ClerkUserButton> {
-  static const _closeDelay = Duration(milliseconds: 250);
+  ClerkUserButton({super.key, this.showName = true});
 
-  List<Clerk.Session> _sessions = [];
+  final _sessions = <Clerk.Session>[];
 
   @override
   Widget build(BuildContext context) {
@@ -32,7 +27,7 @@ class _ClerkUserButtonState extends State<ClerkUserButton> {
         final sessions = auth.client.sessions;
 
         // adding to a list of existing sessions means we have ones that are now deleted
-        // available for prettier UI
+        // still available in `_sessions`, making for prettier UI
         _sessions.addOrReplaceAll(sessions, by: (s) => s.id);
 
         // after a delay period, all deleted sessions will have been closed, so we can
@@ -55,7 +50,7 @@ class _ClerkUserButtonState extends State<ClerkUserButton> {
                   session: session,
                   closed: auth.client.sessions.contains(session) == false,
                   selected: session == auth.client.activeSession,
-                  showName: widget.showName,
+                  showName: showName,
                   onTap: () => auth.call(context, () => auth.setActiveSession(session)),
                 ),
               if (auth.env.config.singleSessionMode == false)
@@ -71,6 +66,7 @@ class _ClerkUserButtonState extends State<ClerkUserButton> {
                           icon: Icons.add,
                           backgroundColor: ClerkColors.dawnPink,
                           borderColor: ClerkColors.nobel,
+                          dashed: true,
                         ),
                         horizontalMargin24,
                         Text(
@@ -163,13 +159,15 @@ class _CircleIcon extends StatelessWidget {
   final Color color;
   final Color backgroundColor;
   final Color? borderColor;
+  final bool dashed;
 
   const _CircleIcon({
     super.key,
     required this.icon,
     this.color = ClerkColors.stormGrey,
     this.backgroundColor = Colors.transparent,
     this.borderColor,
+    this.dashed = false,
   });
 
   @override
@@ -181,7 +179,7 @@ class _CircleIcon extends StatelessWidget {
           color: borderColor ?? color,
           backgroundColor: backgroundColor,
           dashLength: 2,
-          gapLength: 2,
+          gapLength: dashed ? 2 : 0,
         ),
         child: Icon(icon, size: 16, color: color),
       ),
@@ -290,8 +288,9 @@ class _SessionRow extends StatelessWidget {
                         if (showName)
                           Text(
                             user.name,
-                            style:
-                                ClerkTextStyle.buttonTitle.copyWith(color: ClerkColors.almostBlack),
+                            style: ClerkTextStyle.buttonTitle.copyWith(
+                              color: ClerkColors.almostBlack,
+                            ),
                           ),
                         if (user.email is String)
                           Text(user.email!, style: ClerkTextStyle.buttonTitle),

packages/common/lib/src/extensions.dart

@@ -32,19 +32,14 @@ extension StringExtension on String {
 }
 
 extension ListExtension on List {
-  void addOrReplaceAll<T>(Iterable<T> list, {dynamic Function(T)? by}) {
-    if (isEmpty) {
-      addAll(list);
-    } else {
-      by ??= (t) => t;
-      for (final item in list) {
-        final identifier = by.call(item);
-        final idx = indexWhere((i) => by!.call(i) == identifier);
-        if (idx > -1) {
+  void addOrReplaceAll<T, S>(Iterable<T> list, {S Function(T)? by}) {
+    for (final item in list) {
+      final identifier = by?.call(item) ?? item;
+      switch (indexWhere((i) => (by?.call(i) ?? i) == identifier)) {
+        case int idx when idx > -1:
           this[idx] = item;
-        } else {
+        default:
           add(item);
-        }
       }
     }
   }