From 2b42691434028aaca4db75c2a19c0f80097a3e32 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tommy=20=C3=96man?= <tommy.oman@gmail.com>
Date: Tue, 23 Aug 2022 23:31:45 +0200
Subject: [PATCH] Application ready before dependency injction

---
 .../Commands/CreateYouTubeViewerCommand.cs    |   1 +
 .../Commands/DeleteYouTubeViewerCommand.cs    |   1 -
 .../Commands/UpdateYouTubeViewerCommand.cs    |   1 +
 YouTubeViewers.WPF/App.xaml                   |   8 +-
 .../Commands/AddYouTubeViewerCommand.cs       |   3 +-
 .../Commands/DeleteYouTubeViewerCommand.cs    |   8 +-
 .../Commands/EditYouTubeViewerCommand.cs      |   3 +-
 .../Commands/LoadYouTubeViewersCommand.cs     |   3 +-
 .../Components/YouTubeViewerDetailsForm.xaml  |  11 ++
 .../Components/YouTubeViewersListingItem.xaml | 143 +++++++++++-------
 .../YouTubeViewerDetailsFormViewModel.cs      |  19 +++
 .../YouTubeViewersListingItemViewModel.cs     |  29 ++++
 .../ViewModels/YouTubeViewersViewModel.cs     |  17 +++
 .../Views/AddYouTubeViewerView.xaml           |   4 +-
 .../Views/YouTubeViewersView.xaml             |  61 +++++---
 15 files changed, 234 insertions(+), 78 deletions(-)

diff --git a/YouTubeViewers.EntityFramework/Commands/CreateYouTubeViewerCommand.cs b/YouTubeViewers.EntityFramework/Commands/CreateYouTubeViewerCommand.cs
index c74c930..0c2559c 100644
--- a/YouTubeViewers.EntityFramework/Commands/CreateYouTubeViewerCommand.cs
+++ b/YouTubeViewers.EntityFramework/Commands/CreateYouTubeViewerCommand.cs
@@ -20,6 +20,7 @@ namespace YouTubeViewers.EntityFramework.Commands
 
         public async Task Execute(YouTubeViewer youTubeViewer)
         {
+
             using (YouTubeViewersDbContext context = _contextFactory.Create())
             {
                 YouTubeViewerDto youTubeViewerDto = new YouTubeViewerDto()
diff --git a/YouTubeViewers.EntityFramework/Commands/DeleteYouTubeViewerCommand.cs b/YouTubeViewers.EntityFramework/Commands/DeleteYouTubeViewerCommand.cs
index 52a27d3..bf4819b 100644
--- a/YouTubeViewers.EntityFramework/Commands/DeleteYouTubeViewerCommand.cs
+++ b/YouTubeViewers.EntityFramework/Commands/DeleteYouTubeViewerCommand.cs
@@ -21,7 +21,6 @@ namespace YouTubeViewers.EntityFramework.Commands
         {
             using (YouTubeViewersDbContext context = _contextFactory.Create())
             {
-                await Task.Delay(5000);
                 YouTubeViewerDto youTubeViewerDto = new YouTubeViewerDto()
                 {
                     Id = id,
diff --git a/YouTubeViewers.EntityFramework/Commands/UpdateYouTubeViewerCommand.cs b/YouTubeViewers.EntityFramework/Commands/UpdateYouTubeViewerCommand.cs
index afc68d9..75ed632 100644
--- a/YouTubeViewers.EntityFramework/Commands/UpdateYouTubeViewerCommand.cs
+++ b/YouTubeViewers.EntityFramework/Commands/UpdateYouTubeViewerCommand.cs
@@ -20,6 +20,7 @@ namespace YouTubeViewers.EntityFramework.Commands
 
         public async Task Execute(YouTubeViewer youTubeViewer)
         {
+
             using (YouTubeViewersDbContext context = _contextFactory.Create())
             {
                 YouTubeViewerDto youTubeViewerDto = new YouTubeViewerDto()
diff --git a/YouTubeViewers.WPF/App.xaml b/YouTubeViewers.WPF/App.xaml
index 025ae7c..315b465 100644
--- a/YouTubeViewers.WPF/App.xaml
+++ b/YouTubeViewers.WPF/App.xaml
@@ -8,8 +8,12 @@
 
             <Style x:Key="PageHeader" TargetType="TextBlock" >
                 <Setter Property="FontSize" Value="32" />
-            </Style> 
-                   
+            </Style>
+            
+            <Style x:Key="ErrorMessage" TargetType="TextBlock" >
+                <Setter Property="Foreground" Value="Red" />
+            </Style>
+
             <Style TargetType="Button">
                 <Setter Property="Foreground" Value="White" />
                 <Setter Property="Background" Value="#547AFF" />
diff --git a/YouTubeViewers.WPF/Commands/AddYouTubeViewerCommand.cs b/YouTubeViewers.WPF/Commands/AddYouTubeViewerCommand.cs
index 9015639..3fabecd 100644
--- a/YouTubeViewers.WPF/Commands/AddYouTubeViewerCommand.cs
+++ b/YouTubeViewers.WPF/Commands/AddYouTubeViewerCommand.cs
@@ -24,6 +24,7 @@ namespace YouTubeViewers.WPF.Commands
         public override async Task ExecuteAsync(object? parameter)
         {
             YouTubeViewerDetailsFormViewModel formViewModel =  _addYouTubeViewerViewModel.YouTubeViewerDetailsFormViewModel;
+            formViewModel.ErrorMessage = null;
             formViewModel.IsSubmitting = true;
             YouTubeViewer youTubeViewer = new YouTubeViewer(
                 Guid.NewGuid(),
@@ -39,7 +40,7 @@ namespace YouTubeViewers.WPF.Commands
             }
             catch (Exception)
             {
-                throw;
+                formViewModel.ErrorMessage = "Failed to add YouTube Viewer. Please try again later.";
             }
             finally
             {
diff --git a/YouTubeViewers.WPF/Commands/DeleteYouTubeViewerCommand.cs b/YouTubeViewers.WPF/Commands/DeleteYouTubeViewerCommand.cs
index 041c776..476bd49 100644
--- a/YouTubeViewers.WPF/Commands/DeleteYouTubeViewerCommand.cs
+++ b/YouTubeViewers.WPF/Commands/DeleteYouTubeViewerCommand.cs
@@ -25,6 +25,8 @@ namespace YouTubeViewers.WPF.Commands
 
         public override async Task ExecuteAsync(object? parameter)
         {
+            _youTubeViewersListingItemViewModel.ErrorMessage = null;
+            _youTubeViewersListingItemViewModel.IsDeleting = true;
             YouTubeViewer youTubeViewer = _youTubeViewersListingItemViewModel.YouTubeViewer;
             try
             {
@@ -32,7 +34,11 @@ namespace YouTubeViewers.WPF.Commands
             }
             catch (Exception)
             {
-                throw;
+                _youTubeViewersListingItemViewModel.ErrorMessage = "Failed to delete YouTube viewer. Please try again later.";
+            }
+            finally
+            {
+                _youTubeViewersListingItemViewModel.IsDeleting = false;
             }
         }
     }
diff --git a/YouTubeViewers.WPF/Commands/EditYouTubeViewerCommand.cs b/YouTubeViewers.WPF/Commands/EditYouTubeViewerCommand.cs
index 2b9dd32..eb4d2cf 100644
--- a/YouTubeViewers.WPF/Commands/EditYouTubeViewerCommand.cs
+++ b/YouTubeViewers.WPF/Commands/EditYouTubeViewerCommand.cs
@@ -24,6 +24,7 @@ namespace YouTubeViewers.WPF.Commands
         public override async Task ExecuteAsync(object? parameter)
         {
             YouTubeViewerDetailsFormViewModel formViewModel = _editYouTubeViewerViewModel.YouTubeViewerDetailsFormViewModel;
+            formViewModel.ErrorMessage = null;
             formViewModel.IsSubmitting = true;
             YouTubeViewer youTubeViewer = new YouTubeViewer(
                 _editYouTubeViewerViewModel.YouTubeViewerId,
@@ -39,7 +40,7 @@ namespace YouTubeViewers.WPF.Commands
             }
             catch (Exception)
             {
-                throw;
+                formViewModel.ErrorMessage = "Failed to update YouTube Viewer. Please try again later.";
             }
             finally
             {
diff --git a/YouTubeViewers.WPF/Commands/LoadYouTubeViewersCommand.cs b/YouTubeViewers.WPF/Commands/LoadYouTubeViewersCommand.cs
index 43a6ec7..3e5c1db 100644
--- a/YouTubeViewers.WPF/Commands/LoadYouTubeViewersCommand.cs
+++ b/YouTubeViewers.WPF/Commands/LoadYouTubeViewersCommand.cs
@@ -21,6 +21,7 @@ namespace YouTubeViewers.WPF.Commands
 
         public override async Task ExecuteAsync(object? parameter)
         {
+            _youTubeViewersViewModel.ErrorMessage = null;
             _youTubeViewersViewModel.IsLoading = true;
             
             try
@@ -29,7 +30,7 @@ namespace YouTubeViewers.WPF.Commands
             }
             catch (Exception)
             {
-                throw;
+                _youTubeViewersViewModel.ErrorMessage = "Failed to load YouTube viewers. Please restart the application.";
             }
             finally
             {
diff --git a/YouTubeViewers.WPF/Components/YouTubeViewerDetailsForm.xaml b/YouTubeViewers.WPF/Components/YouTubeViewerDetailsForm.xaml
index cb258b8..aec7355 100644
--- a/YouTubeViewers.WPF/Components/YouTubeViewerDetailsForm.xaml
+++ b/YouTubeViewers.WPF/Components/YouTubeViewerDetailsForm.xaml
@@ -7,10 +7,14 @@
              xmlns:custom="clr-namespace:LoadingSpinnerControl;assembly=LoadingSpinnerControl"
              mc:Ignorable="d" 
              d:DesignHeight="450" d:DesignWidth="800">
+    <UserControl.Resources>
+        <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
+    </UserControl.Resources>
     <Grid>
         <Grid.RowDefinitions>
             <RowDefinition Height="auto"/>
             <RowDefinition Height="auto"/>
+            <RowDefinition Height="auto"/>
         </Grid.RowDefinitions>
         <Grid Grid.IsSharedSizeScope="True">
             <Grid.RowDefinitions>
@@ -66,5 +70,12 @@
                     Style="{StaticResource ButtonSecondary}"/>
             <custom:LoadingSpinner IsLoading="{Binding IsSubmitting}" Diameter="25" Thickness="2"/>
         </WrapPanel>
+
+        <TextBlock 
+            Grid.Row="2"
+            Margin="0 15 0 0"
+            Style="{StaticResource  ErrorMessage}"
+            Text="{Binding ErrorMessage}"
+            Visibility="{Binding HasErrorMessage, Converter={StaticResource BooleanToVisibilityConverter}}"/>
     </Grid>
 </UserControl>
diff --git a/YouTubeViewers.WPF/Components/YouTubeViewersListingItem.xaml b/YouTubeViewers.WPF/Components/YouTubeViewersListingItem.xaml
index bf41a2a..8b75c39 100644
--- a/YouTubeViewers.WPF/Components/YouTubeViewersListingItem.xaml
+++ b/YouTubeViewers.WPF/Components/YouTubeViewersListingItem.xaml
@@ -5,76 +5,115 @@
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
              xmlns:local="clr-namespace:YouTubeViewers.WPF.Components"
              xmlns:custom="clr-namespace:DropdownMenuControl;assembly=DropdownMenuControl"
+             xmlns:loadingspinner="clr-namespace:LoadingSpinnerControl;assembly=LoadingSpinnerControl"
              mc:Ignorable="d" 
              d:DesignHeight="450" d:DesignWidth="800">
+    <UserControl.Resources>
+        <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
+    </UserControl.Resources>
     <Border Padding="10" TextBlock.FontSize="16">
         <Grid>
             <Grid.ColumnDefinitions>
                 <ColumnDefinition Width="*"/>
                 <ColumnDefinition Width="auto"/>
             </Grid.ColumnDefinitions>
+            <StackPanel Grid.Column="0">
+                <TextBlock  Text="{Binding UserName}"/>
+                <TextBlock 
+                    FontSize="10"
+                    Style="{StaticResource  ErrorMessage}"
+                    Text="{Binding ErrorMessage}"
+                    Visibility="{Binding HasErrorMessage, Converter={StaticResource BooleanToVisibilityConverter}}"/>
+            </StackPanel>
 
-            <TextBlock Grid.Column="0" Text="{Binding UserName}"/>
+            <Grid Grid.Column="1" Margin="10 0 0 0">
+                <Grid VerticalAlignment="Center">
+                    <Grid.Style>
+                        <Style TargetType="Grid">
+                            <Setter Property="Visibility" Value="Collapsed"/>
+                            <Style.Triggers>
+                                <DataTrigger Binding="{Binding IsDeleting}" Value="true">
+                                    <Setter Property="Visibility" Value="Visible"/>
+                                </DataTrigger>
+                            </Style.Triggers>
+                        </Style>
+                    </Grid.Style>
+                    <loadingspinner:LoadingSpinner Diameter="20" IsLoading="True" Thickness="2"/>
+                </Grid>
+                <Grid>
+                    <Grid.Style>
+                        <Style TargetType="Grid">
+                            <Setter Property="Visibility" Value="Collapsed"/>
+                            <Style.Triggers>
+                                <DataTrigger Binding="{Binding IsDeleting}" Value="false">
+                                    <Setter Property="Visibility" Value="Visible"/>
+                                </DataTrigger>
+                            </Style.Triggers>
+                        </Style>
+                    </Grid.Style>
 
-            <custom:DropdownMenu x:Name="dropdown" Grid.Column="1" Margin="10 0 0 0">
-                <Border
+                    <custom:DropdownMenu x:Name="dropdown" >
+                        <Border
                                             Background="White"
                                             BorderThickness="1"
                                             BorderBrush="Gray">
-                    <StackPanel MinWidth="125">
-                        <StackPanel.Resources>
-                            <Style  TargetType="Button">
-                                <Setter Property="Background" Value="#f0f0f0"/>
-                                <Setter Property="Foreground" Value="Black"/>
-                                <Setter Property="HorizontalAlignment" Value="Stretch"/>
-                                <Setter Property="Padding" Value="20 10"/>
-                                <Setter Property="Cursor" Value="Hand"/>
-                                <EventSetter Event="Click" Handler="Button_Click"/>
+                            <StackPanel MinWidth="125">
+                                <StackPanel.Resources>
+                                    <Style  TargetType="Button">
+                                        <Setter Property="Background" Value="#f0f0f0"/>
+                                        <Setter Property="Foreground" Value="Black"/>
+                                        <Setter Property="HorizontalAlignment" Value="Stretch"/>
+                                        <Setter Property="Padding" Value="20 10"/>
+                                        <Setter Property="Cursor" Value="Hand"/>
+                                        <EventSetter Event="Click" Handler="Button_Click"/>
 
-                                <Setter Property="Template">
-                                    <Setter.Value>
-                                        <ControlTemplate TargetType="Button">
-                                            <Border 
+                                        <Setter Property="Template">
+                                            <Setter.Value>
+                                                <ControlTemplate TargetType="Button">
+                                                    <Border 
                                                                         Margin="{TemplateBinding Margin}"
                                                                         Padding="{TemplateBinding Padding}"
                                                                         Background="{TemplateBinding Background}">
-                                                <ContentPresenter  />
-                                            </Border>
-                                        </ControlTemplate>
-                                    </Setter.Value>
-                                </Setter>
+                                                        <ContentPresenter  />
+                                                    </Border>
+                                                </ControlTemplate>
+                                            </Setter.Value>
+                                        </Setter>
+
+                                        <Style.Triggers>
+                                            <Trigger Property="IsMouseOver" Value="True">
+                                                <Trigger.EnterActions>
+                                                    <BeginStoryboard>
+                                                        <Storyboard>
+                                                            <ColorAnimation
+                                                            Storyboard.TargetProperty="Background.(SolidColorBrush.Color)"   
+                                                            To="#c7c7c7" 
+                                                            Duration="0:0:0.1" />
+                                                        </Storyboard>
+                                                    </BeginStoryboard>
+                                                </Trigger.EnterActions>
+                                                <Trigger.ExitActions>
+                                                    <BeginStoryboard>
+                                                        <Storyboard>
+                                                            <ColorAnimation
+                                                            Storyboard.TargetProperty="Background.(SolidColorBrush.Color)"   
+                                                            To="#f0f0f0" 
+                                                            Duration="0:0:0.1" />
+                                                        </Storyboard>
+                                                    </BeginStoryboard>
+                                                </Trigger.ExitActions>
+                                            </Trigger>
+                                        </Style.Triggers>
+                                    </Style>
+                                </StackPanel.Resources>
+                                <Button  Content="Edit" Command="{Binding EditCommand}"/>
+                                <Button  Content="Delete"  Command="{Binding DeleteCommand}"/>
+                            </StackPanel>
+                        </Border>
+                    </custom:DropdownMenu>
+                </Grid>
+            </Grid>
 
-                                <Style.Triggers>
-                                    <Trigger Property="IsMouseOver" Value="True">
-                                        <Trigger.EnterActions>
-                                            <BeginStoryboard>
-                                                <Storyboard>
-                                                    <ColorAnimation
-                                                                                Storyboard.TargetProperty="Background.(SolidColorBrush.Color)"   
-                                                                                To="#c7c7c7" 
-                                                                                Duration="0:0:0.1" />
-                                                </Storyboard>
-                                            </BeginStoryboard>
-                                        </Trigger.EnterActions>
-                                        <Trigger.ExitActions>
-                                            <BeginStoryboard>
-                                                <Storyboard>
-                                                    <ColorAnimation
-                                                                                Storyboard.TargetProperty="Background.(SolidColorBrush.Color)"   
-                                                                                To="#f0f0f0" 
-                                                                                Duration="0:0:0.1" />
-                                                </Storyboard>
-                                            </BeginStoryboard>
-                                        </Trigger.ExitActions>
-                                    </Trigger>
-                                </Style.Triggers>
-                            </Style>
-                        </StackPanel.Resources>
-                        <Button Content="Edit" Command="{Binding EditCommand}"/>
-                        <Button Content="Delete" Command="{Binding DeleteCommand}"/>
-                    </StackPanel>
-                </Border>
-            </custom:DropdownMenu>
         </Grid>
     </Border>
 </UserControl>
diff --git a/YouTubeViewers.WPF/ViewModels/YouTubeViewerDetailsFormViewModel.cs b/YouTubeViewers.WPF/ViewModels/YouTubeViewerDetailsFormViewModel.cs
index 7665626..1b088e6 100644
--- a/YouTubeViewers.WPF/ViewModels/YouTubeViewerDetailsFormViewModel.cs
+++ b/YouTubeViewers.WPF/ViewModels/YouTubeViewerDetailsFormViewModel.cs
@@ -59,6 +59,25 @@ public class YouTubeViewerDetailsFormViewModel : ViewModelBase
 
     #endregion IsSubmitting
 
+    #region ErrorMessage
+
+    private string _errorMessage;
+    public string ErrorMessage
+    {
+        get { return _errorMessage; }
+        set
+        {
+            _errorMessage = value;
+            OnPropertyChanged(nameof(ErrorMessage));
+            OnPropertyChanged(nameof(HasErrorMessage));
+        }
+    }
+
+    #endregion ErrorMessage
+
+    public bool HasErrorMessage => !string.IsNullOrEmpty(ErrorMessage);
+
+
     public bool CanSubmit => !string.IsNullOrEmpty(UserName);
     public ICommand SubmitCommand { get; }
     public ICommand CancelCommand { get; }
diff --git a/YouTubeViewers.WPF/ViewModels/YouTubeViewersListingItemViewModel.cs b/YouTubeViewers.WPF/ViewModels/YouTubeViewersListingItemViewModel.cs
index e81168d..8a26ad3 100644
--- a/YouTubeViewers.WPF/ViewModels/YouTubeViewersListingItemViewModel.cs
+++ b/YouTubeViewers.WPF/ViewModels/YouTubeViewersListingItemViewModel.cs
@@ -20,6 +20,35 @@ namespace YouTubeViewers.WPF.ViewModels
 
         public string UserName => YouTubeViewer.Username;
 
+
+        #region IsDeleting
+
+        private bool _isDeleting;
+        public bool IsDeleting
+        {
+            get { return _isDeleting; }
+            set { _isDeleting = value; OnPropertyChanged(); }
+        }
+
+        #endregion IsDeleting
+
+        #region ErrorMessage
+
+        private string _errorMessage;
+        public string ErrorMessage
+        {
+            get { return _errorMessage; }
+            set
+            {
+                _errorMessage = value;
+                OnPropertyChanged(nameof(ErrorMessage));
+                OnPropertyChanged(nameof(HasErrorMessage));
+            }
+        }
+
+        #endregion ErrorMessage
+
+        public bool HasErrorMessage => !string.IsNullOrEmpty(ErrorMessage);
         public ICommand EditCommand { get; }
         public ICommand DeleteCommand { get; }
 
diff --git a/YouTubeViewers.WPF/ViewModels/YouTubeViewersViewModel.cs b/YouTubeViewers.WPF/ViewModels/YouTubeViewersViewModel.cs
index f574071..d740bfe 100644
--- a/YouTubeViewers.WPF/ViewModels/YouTubeViewersViewModel.cs
+++ b/YouTubeViewers.WPF/ViewModels/YouTubeViewersViewModel.cs
@@ -29,6 +29,23 @@ namespace YouTubeViewers.WPF.ViewModels
             }
         }
 
+
+        #region ErrorMessage
+
+        private string _errorMessage;
+        public string ErrorMessage
+        {
+            get { return _errorMessage; }
+            set { _errorMessage = value; 
+                OnPropertyChanged(nameof(ErrorMessage));
+                OnPropertyChanged(nameof(HasErrorMessage));
+            }
+        }
+
+        #endregion ErrorMessage
+
+        public bool HasErrorMessage => !string.IsNullOrEmpty(ErrorMessage);
+
         public ICommand LoadYouTubeViewersCommand { get; }
         public ICommand AddYouTubeViewersCommand { get; }
         public YouTubeViewersViewModel(YouTubeViewersStore youTubeViewersStore, SelectedYouTubeViewerStore _selectedYouTubeViewerStore, ModalNavigationStore modalNavigationStore)
diff --git a/YouTubeViewers.WPF/Views/AddYouTubeViewerView.xaml b/YouTubeViewers.WPF/Views/AddYouTubeViewerView.xaml
index bb39867..de3a2ed 100644
--- a/YouTubeViewers.WPF/Views/AddYouTubeViewerView.xaml
+++ b/YouTubeViewers.WPF/Views/AddYouTubeViewerView.xaml
@@ -6,7 +6,9 @@
              xmlns:local="clr-namespace:YouTubeViewers.WPF.Views"
              xmlns:components="clr-namespace:YouTubeViewers.WPF.Components"
              mc:Ignorable="d" 
-             d:DesignHeight="450" d:DesignWidth="800">
+             d:DesignHeight="450" d:DesignWidth="800"
+             Width="400"
+             >
     <Grid>
         <Grid.RowDefinitions>
             <RowDefinition Height="auto"/>
diff --git a/YouTubeViewers.WPF/Views/YouTubeViewersView.xaml b/YouTubeViewers.WPF/Views/YouTubeViewersView.xaml
index 9a586d7..e2973b4 100644
--- a/YouTubeViewers.WPF/Views/YouTubeViewersView.xaml
+++ b/YouTubeViewers.WPF/Views/YouTubeViewersView.xaml
@@ -34,25 +34,50 @@
                     </Style.Triggers>
                 </Style>
             </Grid.Style>
-            <Grid.RowDefinitions>
-                <RowDefinition Height="Auto"/>
-                <RowDefinition Height="*"/>
-            </Grid.RowDefinitions>
-            <Grid Grid.Row="0">
-                <Grid.ColumnDefinitions>
-                    <ColumnDefinition Width="*"/>
-                    <ColumnDefinition Width="Auto"/>
-                </Grid.ColumnDefinitions>
-                <TextBlock Grid.Column="0" Style="{StaticResource PageHeader}" Text="YouTube Viewers" />
-                <Button Grid.Column="1"  Content="Add" FontSize="16" Command="{Binding AddYouTubeViewersCommand}"/>
+            <Grid>
+                <Grid.Style>
+                    <Style TargetType="Grid">
+                        <Setter Property="Visibility" Value="Collapsed"/>
+                        <Style.Triggers>
+                            <DataTrigger Binding="{Binding HasErrorMessage}" Value="True">
+                                <Setter Property="Visibility" Value="Visible"/>
+                            </DataTrigger>
+                        </Style.Triggers>
+                    </Style>
+                </Grid.Style>
+                <TextBlock TextAlignment="Center" VerticalAlignment="Center" Style="{StaticResource ErrorMessage}" Text="{Binding ErrorMessage}"/>
             </Grid>
-            <Grid Grid.Row="1" Margin="0 20 0 0">
-                <Grid.ColumnDefinitions>
-                    <ColumnDefinition Width="*"/>
-                    <ColumnDefinition Width="2*"/>
-                </Grid.ColumnDefinitions>
-                <components:YouTubeViewersListing Grid.Column="0" DataContext="{Binding YouTubeViewersListingViewModel}"/>
-                <components:YouTubeViewersDetails Grid.Column="1" Margin="20 0 0 0" DataContext="{Binding YouTubeViewersDetailsViewModel}"/>
+            <Grid>
+                <Grid.Style>
+                    <Style TargetType="Grid">
+                        <Setter Property="Visibility" Value="Collapsed"/>
+                        <Style.Triggers>
+                            <DataTrigger Binding="{Binding HasErrorMessage}" Value="false">
+                                <Setter Property="Visibility" Value="Visible"/>
+                            </DataTrigger>
+                        </Style.Triggers>
+                    </Style>
+                </Grid.Style>
+                <Grid.RowDefinitions>
+                    <RowDefinition Height="Auto"/>
+                    <RowDefinition Height="*"/>
+                </Grid.RowDefinitions>
+                <Grid Grid.Row="0">
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="*"/>
+                        <ColumnDefinition Width="Auto"/>
+                    </Grid.ColumnDefinitions>
+                    <TextBlock Grid.Column="0" Style="{StaticResource PageHeader}" Text="YouTube Viewers" />
+                    <Button Grid.Column="1"  Content="Add" FontSize="16" Command="{Binding AddYouTubeViewersCommand}"/>
+                </Grid>
+                <Grid Grid.Row="1" Margin="0 20 0 0">
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="*"/>
+                        <ColumnDefinition Width="2*"/>
+                    </Grid.ColumnDefinitions>
+                    <components:YouTubeViewersListing Grid.Column="0" DataContext="{Binding YouTubeViewersListingViewModel}"/>
+                    <components:YouTubeViewersDetails Grid.Column="1" Margin="20 0 0 0" DataContext="{Binding YouTubeViewersDetailsViewModel}"/>
+                </Grid>
             </Grid>
         </Grid>
     </Grid>