Added missing Reddit service section

Author: Sergio0694

docs/mvvm/PuttingThingsTogether.md

@@ -256,6 +256,84 @@ Ioc.Default.ConfigureServices(services =>
 
 This will register a singleton instance of our `SettingsService` as a type implementing `ISettingsService`. This means that every time one of our viewmodels uses `Ioc.Default.GetService<ISettingsService>()` while the app in use is the UWP one, it will receive a `SettingsService` instance, which will use the UWP APIs behind the scene to manipulate settings. Perfect!
 
+## Building the Reddit service
+
+The last component of the backend that we're missing is a service that is able to use the Reddit REST APIs to fetch the posts from the subreddits we're interested in. To build it, we're going to use [refit](https://github.com/reactiveui/refit), which is a library to easily build type-safe services to interact with REST APIs. As before, we need to define the interface with all the APIs that our service will implement, like so:
+
+```csharp
+public interface IRedditService
+{
+    /// <summary>
+    /// Get a list of posts from a given subreddit
+    /// </summary>
+    /// <param name="subreddit">The subreddit name.</param>
+    [Get("/r/{subreddit}/.json")]
+    Task<PostsQueryResponse> GetSubredditPostsAsync(string subreddit);
+}
+```
+
+That `PostsQueryResponse` is a model we wrote that maps the JSON response for that API. The exact structure of that class is not important - suffice to say that it contains a collection of `Post` items, which are simple models representing our posts, that like like this:
+
+```csharp
+public class Post
+{
+    /// <summary>
+    /// Gets or sets the title of the post.
+    /// </summary>
+    public string Title { get; set; }
+
+    /// <summary>
+    /// Gets or sets the URL to the post thumbnail, if present.
+    /// </summary>
+    public string Thumbnail { get; set; }
+
+    /// <summary>
+    /// Gets the text of the post.
+    /// </summary>
+    public string SelfText { get; }
+}
+```
+
+Once we have our service and our models, can plug them into our viewmodels to complete our backend. While doing so, we can also replace those `object` placeholders with the `Post` type we've defined:
+
+```csharp
+public sealed class SubredditWidgetViewModel : ObservableRecipient
+{
+/// <summary>
+/// Gets the <see cref="IRedditService"/> instance to use.
+/// </summary>
+private readonly IRedditService RedditService = Ioc.Default.GetRequiredService<IRedditService>();
+
+/// <summary>
+/// Loads the posts from a specified subreddit.
+/// </summary>
+private async Task LoadPostsAsync()
+{
+    var response = await RedditService.GetSubredditPostsAsync(SelectedSubreddit);
+
+    Posts.Clear();
+
+    foreach (var item in response.Data.Items)
+    {
+        Posts.Add(item.Data);
+    }
+}
+```
+
+We have added a new `IRedditService` field to store our service, just like we did for the settings service, and we implemented our `LoadPostsAsync` method, which was previously empty.
+
+The last missing piece now is just to inject the actual service into our service provider. The big difference in this case is that by using `refit` we don't actually need to implement the service at all! The library will automatically create a type implementing the service for us, behind the scenes. So we only need to get an `IRedditService` instance and inject it directly, like so:
+
+```csharp
+Ioc.Default.ConfigureServices(services =>
+{
+    services.AddSingleton<ISettingsService, SettingsService>();
+    services.AddSingleton(RestService.For<IRedditService>("https://www.reddit.com/"));
+});
+```
+
+And that's all we need to do! We now have all our backend ready to use, including two custom services that we created specifically for this app! 🎉
+
 ## Building the UI
 
 Now that all the backend is completed, we can write the UI for our widgets. Note how using the MVVM pattern let us focus exclusively on the business logic at first, without having to write any UI-related code until now. Here we'll remove all the UI code that's not interacting with our viewmodels, for simplicity, and we'll go through each different control one by one. The full source code can be found in the sample app.

samples/MvvmSampleUwp/MvvmSampleUwp/Assets/docs/PuttingThingsTogether.md

@@ -256,6 +256,84 @@ Ioc.Default.ConfigureServices(services =>
 
 This will register a singleton instance of our `SettingsService` as a type implementing `ISettingsService`. This means that every time one of our viewmodels uses `Ioc.Default.GetService<ISettingsService>()` while the app in use is the UWP one, it will receive a `SettingsService` instance, which will use the UWP APIs behind the scene to manipulate settings. Perfect!
 
+## Building the Reddit service
+
+The last component of the backend that we're missing is a service that is able to use the Reddit REST APIs to fetch the posts from the subreddits we're interested in. To build it, we're going to use [refit](https://github.com/reactiveui/refit), which is a library to easily build type-safe services to interact with REST APIs. As before, we need to define the interface with all the APIs that our service will implement, like so:
+
+```csharp
+public interface IRedditService
+{
+    /// <summary>
+    /// Get a list of posts from a given subreddit
+    /// </summary>
+    /// <param name="subreddit">The subreddit name.</param>
+    [Get("/r/{subreddit}/.json")]
+    Task<PostsQueryResponse> GetSubredditPostsAsync(string subreddit);
+}
+```
+
+That `PostsQueryResponse` is a model we wrote that maps the JSON response for that API. The exact structure of that class is not important - suffice to say that it contains a collection of `Post` items, which are simple models representing our posts, that like like this:
+
+```csharp
+public class Post
+{
+    /// <summary>
+    /// Gets or sets the title of the post.
+    /// </summary>
+    public string Title { get; set; }
+
+    /// <summary>
+    /// Gets or sets the URL to the post thumbnail, if present.
+    /// </summary>
+    public string Thumbnail { get; set; }
+
+    /// <summary>
+    /// Gets the text of the post.
+    /// </summary>
+    public string SelfText { get; }
+}
+```
+
+Once we have our service and our models, can plug them into our viewmodels to complete our backend. While doing so, we can also replace those `object` placeholders with the `Post` type we've defined:
+
+```csharp
+public sealed class SubredditWidgetViewModel : ObservableRecipient
+{
+/// <summary>
+/// Gets the <see cref="IRedditService"/> instance to use.
+/// </summary>
+private readonly IRedditService RedditService = Ioc.Default.GetRequiredService<IRedditService>();
+
+/// <summary>
+/// Loads the posts from a specified subreddit.
+/// </summary>
+private async Task LoadPostsAsync()
+{
+    var response = await RedditService.GetSubredditPostsAsync(SelectedSubreddit);
+
+    Posts.Clear();
+
+    foreach (var item in response.Data.Items)
+    {
+        Posts.Add(item.Data);
+    }
+}
+```
+
+We have added a new `IRedditService` field to store our service, just like we did for the settings service, and we implemented our `LoadPostsAsync` method, which was previously empty.
+
+The last missing piece now is just to inject the actual service into our service provider. The big difference in this case is that by using `refit` we don't actually need to implement the service at all! The library will automatically create a type implementing the service for us, behind the scenes. So we only need to get an `IRedditService` instance and inject it directly, like so:
+
+```csharp
+Ioc.Default.ConfigureServices(services =>
+{
+    services.AddSingleton<ISettingsService, SettingsService>();
+    services.AddSingleton(RestService.For<IRedditService>("https://www.reddit.com/"));
+});
+```
+
+And that's all we need to do! We now have all our backend ready to use, including two custom services that we created specifically for this app! 🎉
+
 ## Building the UI
 
 Now that all the backend is completed, we can write the UI for our widgets. Note how using the MVVM pattern let us focus exclusively on the business logic at first, without having to write any UI-related code until now. Here we'll remove all the UI code that's not interacting with our viewmodels, for simplicity, and we'll go through each different control one by one. The full source code can be found in the sample app.

samples/MvvmSampleUwp/MvvmSampleUwp/MvvmSampleUwp.csproj

@@ -147,6 +147,9 @@
     <Compile Include="Views\BuildingTheUIPage.xaml.cs">
       <DependentUpon>BuildingTheUIPage.xaml</DependentUpon>
     </Compile>
+    <Compile Include="Views\RedditServicePage.xaml.cs">
+      <DependentUpon>RedditServicePage.xaml</DependentUpon>
+    </Compile>
     <Compile Include="Views\SettingsServicePage.xaml.cs">
       <DependentUpon>SettingsServicePage.xaml</DependentUpon>
     </Compile>
@@ -253,6 +256,10 @@
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
     </Page>
+    <Page Include="Views\RedditServicePage.xaml">
+      <Generator>MSBuild:Compile</Generator>
+      <SubType>Designer</SubType>
+    </Page>
     <Page Include="Views\SettingsServicePage.xaml">
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>

samples/MvvmSampleUwp/MvvmSampleUwp/Shell.xaml

@@ -117,7 +117,7 @@
                         <muxc:NavigationViewItem Content="Creating a Service" Icon="Calendar" ToolTipService.ToolTip="Calendar">
                             <muxc:NavigationViewItem.MenuItems>
                                 <muxc:NavigationViewItem x:Name="SettingsServiceItem" Content="Settings service" Icon="Mail" ToolTipService.ToolTip="Mail" />
-                                <muxc:NavigationViewItem Content="Navigation" Icon="Calendar" ToolTipService.ToolTip="Calendar"/>
+                                <muxc:NavigationViewItem x:Name="RedditServiceItem" Content="Reddit service" Icon="Mail" ToolTipService.ToolTip="Mail" />
                             </muxc:NavigationViewItem.MenuItems>
                         </muxc:NavigationViewItem>
                         <muxc:NavigationViewItem

samples/MvvmSampleUwp/MvvmSampleUwp/Shell.xaml.cs

@@ -39,6 +39,7 @@ public Shell()
                 new SampleEntry(RedditBrowserOverviewItem, typeof(PuttingThingsTogetherPage), "Putting things together"),
                 new SampleEntry(ViewModelsSetupItem, typeof(SettingUpTheViewModelsPage), "Setting up the ViewModels"),
                 new SampleEntry(SettingsServiceItem, typeof(SettingsServicePage), "Settings service"),
+                new SampleEntry(RedditServiceItem, typeof(RedditServicePage), "Reddit service"),
                 new SampleEntry(BuildingTheUIItem, typeof(BuildingTheUIPage), "Building the UI"),
                 new SampleEntry(FinalResultItem, typeof(RedditBrowserPage), "Reddit browser")
             };

samples/MvvmSampleUwp/MvvmSampleUwp/Views/RedditServicePage.xaml

@@ -0,0 +1,27 @@
+<Page
+    x:Class="MvvmSampleUwp.Views.RedditServicePage"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:toolkit="using:Microsoft.Toolkit.Uwp.UI.Controls"
+    xmlns:viewModels="using:MvvmSampleUwp.ViewModels"
+    xmlns:core="using:Microsoft.Xaml.Interactions.Core"
+    xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
+    mc:Ignorable="d"
+    NavigationCacheMode="Enabled">
+    <Page.DataContext>
+        <viewModels:SamplePageViewModel x:Name="ViewModel"/>
+    </Page.DataContext>
+    <interactivity:Interaction.Behaviors>
+        <core:EventTriggerBehavior EventName="Loaded">
+            <core:InvokeCommandAction Command="{x:Bind ViewModel.LoadDocsCommand}" CommandParameter="PuttingThingsTogether"/>
+        </core:EventTriggerBehavior>
+    </interactivity:Interaction.Behaviors>
+
+    <ScrollViewer Padding="16" CanContentRenderOutsideBounds="True">
+        <StackPanel Spacing="16">
+            <toolkit:MarkdownTextBlock Text="{x:Bind ViewModel.GetParagraph('Building the Reddit service'), Mode=OneWay}"/>
+        </StackPanel>
+    </ScrollViewer>
+</Page>

samples/MvvmSampleUwp/MvvmSampleUwp/Views/RedditServicePage.xaml.cs

@@ -0,0 +1,19 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using Windows.UI.Xaml.Controls;
+
+namespace MvvmSampleUwp.Views
+{
+    /// <summary>
+    /// An empty page that can be used on its own or navigated to within a Frame.
+    /// </summary>
+    public sealed partial class RedditServicePage : Page
+    {
+        public RedditServicePage()
+        {
+            this.InitializeComponent();
+        }
+    }
+}

samples/MvvmSampleUwp/MvvmSampleUwp/Views/Widgets/SubredditWidget.xaml

@@ -60,7 +60,7 @@
             ScrollViewer.CanContentRenderOutsideBounds="True">
             <ListView.ItemContainerStyle>
                 <Style TargetType="ListViewItem">
-                    <Setter Property="Background" Value="#10FFFFFF"/>
+                    <Setter Property="Background" Value="#30808080"/>
                     <Setter Property="Margin" Value="0,2,0,2"/>
                     <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                 </Style>