feat: load template legend data through the service

packages/flutter_availability/lib/src/ui/screens/availability_overview.dart

@@ -2,10 +2,10 @@ import "package:flutter/material.dart";
 import "package:flutter_availability/src/ui/widgets/calendar.dart";
 import "package:flutter_availability/src/ui/widgets/template_legend.dart";
 import "package:flutter_availability/src/util/scope.dart";
-import "package:flutter_availability_data_interface/flutter_availability_data_interface.dart";
+import "package:flutter_hooks/flutter_hooks.dart";
 
 ///
-class AvailabilityOverview extends StatefulWidget {
+class AvailabilityOverview extends StatefulHookWidget {
   ///
   const AvailabilityOverview({
     required this.onEditDateRange,
@@ -35,10 +35,18 @@ class _AvailabilityOverviewState extends State<AvailabilityOverview> {
   Widget build(BuildContext context) {
     var theme = Theme.of(context);
     var availabilityScope = AvailabilityScope.of(context);
+    var service = availabilityScope.service;
     var options = availabilityScope.options;
     var translations = options.translations;
     var spacing = options.spacing;
 
+    var availabilityStream = useMemoized(
+      () => service.getOverviewDataForMonth(_selectedDate),
+      [_selectedDate],
+    );
+
+    var availabilitySnapshot = useStream(availabilityStream);
+
     var title = Center(
       child: Text(
         translations.overviewScreenTitle,
@@ -62,33 +70,7 @@ class _AvailabilityOverviewState extends State<AvailabilityOverview> {
 
     var templateLegend = TemplateLegend(
       onViewTemplates: widget.onViewTemplates,
-      templates: [
-        for (var template in <(Color, String)>[
-          (Colors.red, "Template 1"),
-          (Colors.blue, "Template 2"),
-          // do 10 more
-          (Colors.green, "Template 3"),
-          (Colors.yellow, "Template 4"),
-          (Colors.purple, "Template 5"),
-          (Colors.orange, "Template 6"),
-          (Colors.teal, "Template 7"),
-          (Colors.pink, "Template 8"),
-          (Colors.indigo, "Template 9"),
-        ]) ...[
-          AvailabilityTemplateModel(
-            userId: "1",
-            id: "1",
-            name: template.$2,
-            templateType: AvailabilityTemplateType.day,
-            templateData: DayTemplateData(
-              startTime: DateTime.now(),
-              endTime: DateTime.now(),
-              breaks: [],
-            ),
-            color: template.$1.value,
-          ),
-        ],
-      ],
+      availabilities: availabilitySnapshot,
     );
 
     // if there is no range selected we want to disable the button

packages/flutter_availability/lib/src/ui/widgets/template_legend.dart

@@ -1,19 +1,19 @@
 import "package:flutter/material.dart";
+import "package:flutter_availability/src/service/availability_service.dart";
 import "package:flutter_availability/src/util/scope.dart";
-import "package:flutter_availability_data_interface/flutter_availability_data_interface.dart";
 
 /// This shows all the templates of a given month and an option to navigate to
 /// the template overview
 class TemplateLegend extends StatefulWidget {
   ///
   const TemplateLegend({
-    required this.templates,
+    required this.availabilities,
     required this.onViewTemplates,
     super.key,
   });
 
-  ///
-  final List<AvailabilityTemplateModel> templates;
+  /// The stream of availabilities with templates for the current month
+  final AsyncSnapshot<List<AvailabilityWithTemplate>> availabilities;
 
   /// Callback for when the user wants to navigate to the overview of templates
   final VoidCallback onViewTemplates;
@@ -36,7 +36,10 @@ class _TemplateLegendState extends State<TemplateLegend> {
     var colors = options.colors;
     var translations = options.translations;
 
-    var templatesAvailable = widget.templates.isNotEmpty;
+    var templatesLoading =
+        widget.availabilities.connectionState == ConnectionState.waiting;
+    var templatesAvailable = widget.availabilities.data?.isNotEmpty ?? false;
+    var templates = widget.availabilities.data?.getUniqueTemplates() ?? [];
 
     void onDrawerHeaderClick() {
       if (!templatesAvailable) {
@@ -79,7 +82,7 @@ class _TemplateLegendState extends State<TemplateLegend> {
                   style: textTheme.titleMedium,
                 ),
                 // a button to open a drawer with all the templates
-                if (templatesAvailable) ...[
+                if (templatesAvailable && !templatesLoading) ...[
                   Icon(
                     _templateDrawerOpen
                         ? Icons.arrow_drop_up
@@ -116,7 +119,7 @@ class _TemplateLegendState extends State<TemplateLegend> {
                           child: ListView.builder(
                             controller: _scrollController,
                             shrinkWrap: true,
-                            itemCount: widget.templates.length + 2,
+                            itemCount: templates.length + 2,
                             itemBuilder: (context, index) {
                               if (index == 0) {
                                 return _TemplateLegendItem(
@@ -126,7 +129,7 @@ class _TemplateLegendState extends State<TemplateLegend> {
                                   borderColor: colorScheme.primary,
                                 );
                               }
-                              if (index == widget.templates.length + 1) {
+                              if (index == templates.length + 1) {
                                 return Padding(
                                   padding: const EdgeInsets.only(
                                     top: 10,
@@ -135,7 +138,7 @@ class _TemplateLegendState extends State<TemplateLegend> {
                                   child: createNewTemplateButton,
                                 );
                               }
-                              var template = widget.templates[index - 1];
+                              var template = templates[index - 1];
                               return _TemplateLegendItem(
                                 name: template.name,
                                 backgroundColor: Color(template.color),
@@ -149,9 +152,13 @@ class _TemplateLegendState extends State<TemplateLegend> {
                 )
               : const Divider(height: 1),
         ),
-        if (!templatesAvailable) ...[
+        if (!templatesAvailable && !_templateDrawerOpen) ...[
           const SizedBox(height: 12),
-          createNewTemplateButton,
+          if (templatesLoading) ...[
+            const CircularProgressIndicator.adaptive(),
+          ] else ...[
+            createNewTemplateButton,
+          ],
         ],
       ],
     );

packages/flutter_availability/pubspec.yaml

@@ -12,6 +12,7 @@ dependencies:
     sdk: flutter
   intl: any
   rxdart: ^0.27.0
+  flutter_hooks: ^0.20.5
   flutter_availability_data_interface:
     git:
       url: https://github.com/Iconica-Development/flutter_availability