Merge pull request #334 from Yousef-Rabia/elapsed-time-by-request

Elapsed time by request

lib/models/request_model.dart

@@ -31,6 +31,7 @@ class RequestModel {
     this.message,
     this.responseModel,
     this.isWorking = false,
+    this.sendingTime,
   });
 
   final String id;
@@ -50,6 +51,7 @@ class RequestModel {
   final String? message;
   final ResponseModel? responseModel;
   final bool isWorking;
+  final DateTime? sendingTime;
 
   List<NameValueModel>? get enabledRequestHeaders =>
       getEnabledRows(requestHeaders, isHeaderEnabledList);
@@ -135,6 +137,7 @@ class RequestModel {
     String? message,
     ResponseModel? responseModel,
     bool? isWorking,
+    DateTime? sendingTime,
   }) {
     var headers = requestHeaders ?? this.requestHeaders;
     var params = requestParams ?? this.requestParams;
@@ -160,6 +163,7 @@ class RequestModel {
       message: message ?? this.message,
       responseModel: responseModel ?? this.responseModel,
       isWorking: isWorking ?? this.isWorking,
+      sendingTime: sendingTime ?? this.sendingTime,
     );
   }
 

lib/providers/collection_providers.dart

@@ -181,7 +181,10 @@ class CollectionStateNotifier
 
     // set current model's isWorking to true and update state
     var map = {...state!};
-    map[id] = requestModel.copyWith(isWorking: true);
+    map[id] = requestModel.copyWith(
+      isWorking: true,
+      sendingTime: DateTime.now(),
+    );
     state = map;
 
     (http.Response?, Duration?, String?)? responseRec = await request(

lib/screens/home_page/editor_pane/details_card/response_pane.dart

@@ -12,12 +12,17 @@ class ResponsePane extends ConsumerWidget {
     final isWorking = ref.watch(
             selectedRequestModelProvider.select((value) => value?.isWorking)) ??
         false;
+    final startSendingTime = ref.watch(
+        selectedRequestModelProvider.select((value) => value?.sendingTime));
     final responseStatus = ref.watch(
         selectedRequestModelProvider.select((value) => value?.responseStatus));
     final message = ref
         .watch(selectedRequestModelProvider.select((value) => value?.message));
+
     if (isWorking) {
-      return const SendingWidget();
+      return SendingWidget(
+        startSendingTime: startSendingTime,
+      );
     }
     if (responseStatus == null) {
       return const NotSentWidget();

lib/widgets/response_widgets.dart

@@ -1,3 +1,4 @@
+import 'dart:async';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:http_parser/http_parser.dart';
@@ -33,18 +34,80 @@ class NotSentWidget extends StatelessWidget {
   }
 }
 
-class SendingWidget extends StatelessWidget {
-  const SendingWidget({super.key});
+class SendingWidget extends StatefulWidget {
+  final DateTime? startSendingTime;
+  const SendingWidget({
+    super.key,
+    required this.startSendingTime,
+  });
+
+  @override
+  State<SendingWidget> createState() => _SendingWidgetState();
+}
+
+class _SendingWidgetState extends State<SendingWidget> {
+  int _millisecondsElapsed = 0;
+  Timer? _timer;
+
+  @override
+  void initState() {
+    super.initState();
+    if (widget.startSendingTime != null) {
+      _millisecondsElapsed =
+          (DateTime.now().difference(widget.startSendingTime!).inMilliseconds ~/
+                  100) *
+              100;
+      _timer = Timer.periodic(const Duration(milliseconds: 100), _updateTimer);
+    }
+  }
+
+  void _updateTimer(Timer timer) {
+    setState(() {
+      _millisecondsElapsed += 100;
+    });
+  }
+
+  @override
+  void dispose() {
+    if (_timer != null && _timer!.isActive) _timer?.cancel();
+    super.dispose();
+  }
 
   @override
   Widget build(BuildContext context) {
-    return Center(
-      child: Column(
+    return Stack(
+      children: [
+        Center(
+          child: Lottie.asset(kAssetSendingLottie),
+        ),
+        Padding(
+          padding: kPh20t40,
+          child: Visibility(
+            visible: _millisecondsElapsed >= 0,
+            child: Row(
               mainAxisAlignment: MainAxisAlignment.center,
               children: [
-          Lottie.asset(kAssetSendingLottie),
+                Icon(
+                  Icons.alarm,
+                  color: Theme.of(context).colorScheme.onSurfaceVariant,
+                ),
+                const SizedBox(
+                  width: 10,
+                ),
+                Text(
+                  'Time elapsed: ${humanizeDuration(Duration(milliseconds: _millisecondsElapsed))}',
+                  textAlign: TextAlign.center,
+                  overflow: TextOverflow.fade,
+                  softWrap: false,
+                  style: kTextStyleButton.copyWith(
+                    color: Theme.of(context).colorScheme.onSurfaceVariant,
+                  ),
+                ),
               ],
             ),
+          ),
+        ),
+      ],
     );
   }
 }

test/widgets/response_widgets_test.dart

@@ -10,13 +10,15 @@ import 'package:apidash/models/models.dart';
 import '../test_consts.dart';
 
 void main() {
-  testWidgets('Testing Sending Widget', (tester) async {
+  testWidgets('Testing Sending Widget Without Timer', (tester) async {
     await tester.pumpWidget(
       MaterialApp(
         title: 'Send',
         theme: kThemeDataDark,
         home: const Scaffold(
-          body: SendingWidget(),
+          body: SendingWidget(
+            startSendingTime: null,
+          ),
         ),
       ),
     );
@@ -24,6 +26,26 @@ void main() {
     expect(find.byType(Lottie), findsOneWidget);
   });
 
+  testWidgets('Testing Sending Widget With Timer', (tester) async {
+    await tester.pumpWidget(
+      MaterialApp(
+        title: 'Send',
+        theme: kThemeDataDark,
+        home: Scaffold(
+          body: SendingWidget(
+            startSendingTime: DateTime.now(),
+          ),
+        ),
+      ),
+    );
+    expect(find.text('Time elapsed: 0 ms'), findsOneWidget);
+    expect(find.byType(Lottie), findsOneWidget);
+
+    await tester.pump(const Duration(seconds: 1));
+
+    expect(find.text('Time elapsed: 1.00 s'), findsOneWidget);
+  });
+
   testWidgets('Testing Not Sent Widget', (tester) async {
     await tester.pumpWidget(
       const MaterialApp(