CollectionView Challenge - dog list implementation

CollectionViewChallenge/CollectionViewChallenge.Android/CollectionViewChallenge.Android.csproj

@@ -52,6 +52,12 @@
     <Reference Include="System.Xml" />
   </ItemGroup>
   <ItemGroup>
+    <PackageReference Include="Newtonsoft.Json">
+      <Version>12.0.2</Version>
+    </PackageReference>
+    <PackageReference Include="Xam.Plugins.Forms.ImageCircle">
+      <Version>3.0.0.5</Version>
+    </PackageReference>
     <PackageReference Include="Xamarin.Forms" Version="4.0.0.346134-pre9" />
     <PackageReference Include="Xamarin.Android.Support.ViewPager" Version="28.0.0.1" />
     <PackageReference Include="Xamarin.Android.Support.Design" Version="28.0.0.1" />

CollectionViewChallenge/CollectionViewChallenge.Android/MainActivity.cs

@@ -22,6 +22,7 @@ protected override void OnCreate(Bundle savedInstanceState)
             global::Xamarin.Forms.Forms.SetFlags("Shell_Experimental", "Visual_Experimental", "CollectionView_Experimental", "FastRenderers_Experimental");
             Xamarin.Essentials.Platform.Init(this, savedInstanceState);
             global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
+            ImageCircle.Forms.Plugin.Droid.ImageCircleRenderer.Init();
             LoadApplication(new App());
         }
         public override void OnRequestPermissionsResult(int requestCode, string[] permissions, [GeneratedEnum] Android.Content.PM.Permission[] grantResults)

CollectionViewChallenge/CollectionViewChallenge.iOS/CollectionViewChallenge.iOS.csproj

@@ -133,6 +133,12 @@
     <Reference Include="System.Numerics.Vectors" />
   </ItemGroup>
   <ItemGroup>
+    <PackageReference Include="Newtonsoft.Json">
+      <Version>12.0.2</Version>
+    </PackageReference>
+    <PackageReference Include="Xam.Plugins.Forms.ImageCircle">
+      <Version>3.0.0.5</Version>
+    </PackageReference>
     <PackageReference Include="Xamarin.Forms" Version="4.0.0.346134-pre9" />
     <PackageReference Include="Xamarin.Essentials" Version="1.1.0" />
   </ItemGroup>

CollectionViewChallenge/CollectionViewChallenge/AppShell.xaml

@@ -72,7 +72,7 @@
     <ShellItem>
         <ShellSection Title="CollectionView" Icon="tab_feed.png">
             <ShellContent Title="CollectionView">
-                <local:CollectionViewChallengePage Title="CollectionView"/>
+                <local:CollectionViewChallengePage Title="Dog List"/>
             </ShellContent>
         </ShellSection>
     </ShellItem>

CollectionViewChallenge/CollectionViewChallenge/CollectionViewChallenge.csproj

@@ -11,6 +11,8 @@
   </PropertyGroup>
 
   <ItemGroup>
+    <PackageReference Include="Newtonsoft.Json" Version="12.0.2" />
+    <PackageReference Include="Xam.Plugins.Forms.ImageCircle" Version="3.0.0.5" />
     <PackageReference Include="Xamarin.Forms" Version="4.0.0.346134-pre9" />  
     <PackageReference Include="Xamarin.Essentials" Version="1.1.0" />
   </ItemGroup>
@@ -20,9 +22,4 @@
       <Generator>MSBuild:UpdateDesignTimeXaml</Generator>
     </EmbeddedResource>
   </ItemGroup>
-
-  <ItemGroup>
-    <Folder Include="Models\" />
-    <Folder Include="ViewModels\" />
-  </ItemGroup>
 </Project>

CollectionViewChallenge/CollectionViewChallenge/Models/Dog.cs

@@ -0,0 +1,46 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using System.Linq;
+
+namespace CollectionViewChallenge.Models
+{
+    public class Dog
+    {
+        public Breed[] breeds { get; set; }
+        public string id { get; set; }
+        public string url { get; set; }
+        public int width { get; set; }
+        public int height { get; set; }
+
+        public string breed => string.Join(", ", breeds.Select(x => x.name));
+        public string temperament => string.Join(", ", breeds.Select(x => x.temperament));
+    }
+
+    public class Breed
+    {
+        public Weight weight { get; set; }
+        public Height height { get; set; }
+        public int id { get; set; }
+        public string name { get; set; }
+        public string bred_for { get; set; }
+        public string breed_group { get; set; }
+        public string life_span { get; set; }
+        public string temperament { get; set; }
+        public string origin { get; set; }
+        public string country_code { get; set; }
+    }
+
+    public class Weight
+    {
+        public string imperial { get; set; }
+        public string metric { get; set; }
+    }
+
+    public class Height
+    {
+        public string imperial { get; set; }
+        public string metric { get; set; }
+    }
+
+}

CollectionViewChallenge/CollectionViewChallenge/Services/DogApiService.cs

@@ -0,0 +1,36 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using System.Net.Http;
+using System.Threading.Tasks;
+using Newtonsoft.Json;
+using System.Net.Http.Headers;
+using CollectionViewChallenge.Models;
+
+namespace CollectionViewChallenge.Services
+{
+    public static class DogApiService
+    {
+        private static HttpClient CreateHttpClient()
+        {
+            var httpClient = new HttpClient();
+            httpClient.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
+            return httpClient;
+        }
+
+        private static readonly HttpClient client = CreateHttpClient();
+
+        public static async Task<List<Dog>> GetDogs()
+        {
+            var response = await client.GetAsync("https://api.thedogapi.com/v1/images/search?limit=50&page=1&api_key=5cb9aa6b-d6ec-4b05-95d2-5c6434b5e2b8");
+
+            if (response.IsSuccessStatusCode)
+            {
+                var json = await response.Content.ReadAsStringAsync();
+                return JsonConvert.DeserializeObject<List<Dog>>(json);
+            }
+
+            return null;
+        }
+    }
+}

CollectionViewChallenge/CollectionViewChallenge/ViewModels/DogViewModel.cs

@@ -0,0 +1,49 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using System.Collections.ObjectModel;
+using System.ComponentModel;
+using System.Threading.Tasks;
+using CollectionViewChallenge.Models;
+using CollectionViewChallenge.Services;
+using System.Runtime.CompilerServices;
+
+namespace CollectionViewChallenge.ViewModels
+{
+    public class DogViewModel : INotifyPropertyChanged
+    {
+        public event PropertyChangedEventHandler PropertyChanged;
+
+        void OnPropertyChanged([CallerMemberName] string propertyName = null)
+        {
+            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
+        }
+
+        private List<Dog> dogList;
+
+        private ObservableCollection<Dog> dogCollection;
+
+        public ObservableCollection<Dog> DogCollection
+        {
+            get { return dogCollection; }
+            set { dogCollection = value; OnPropertyChanged(); }
+        }
+
+        private bool isBusy;
+
+        public bool IsBusy
+        {
+            get { return isBusy; }
+            set { isBusy = value; OnPropertyChanged(); }
+        }
+
+        public async Task LoadData()
+        {
+            IsBusy = true;
+            dogList = await DogApiService.GetDogs();
+            DogCollection = new ObservableCollection<Dog>(dogList);
+            IsBusy = false;
+
+        }
+    }
+}

CollectionViewChallenge/CollectionViewChallenge/Views/CollectionViewChallengePage.xaml

@@ -3,27 +3,46 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              xmlns:d="http://xamarin.com/schemas/2014/forms/design"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin"
              mc:Ignorable="d"
              x:Class="CollectionViewChallenge.Views.CollectionViewChallengePage">
     <ContentPage.Content>
-        <StackLayout>
-            <!-- Use your own layout and functionality here! -->
-            <CollectionView>
-                <CollectionView.ItemsSource>
-                    <x:Array Type="{x:Type x:String}">
-                        <x:String>This is a CollectionView!</x:String>
-                        <x:String>Your feedback on the experience of converting a ListView to a CollectionView is incredibly appreciated.</x:String>
-                        <x:String>Here are three general questions:</x:String>
-                        <x:String>1. How was the experience of converting your existing ListView to a CollectionView?</x:String>
-                        <x:String>2. How is the performance compared to the ListView?</x:String>
-                        <x:String>3. Is there a specific piece of functionality that you'd like to see?</x:String>
-                    </x:Array>
-                </CollectionView.ItemsSource>
+        <StackLayout Margin="5">
+            <ActivityIndicator Color="Brown" IsVisible="{Binding IsBusy}" IsRunning="{Binding IsBusy}" IsEnabled="{Binding IsBusy}"/>
+
+            <CollectionView ItemsSource="{Binding DogCollection}" SelectionMode="Single">
+                <CollectionView.ItemsLayout>
+                    <GridItemsLayout Orientation="Vertical" Span="2"/>
+                </CollectionView.ItemsLayout>
+
                 <CollectionView.ItemTemplate>
                     <DataTemplate>
-                        <StackLayout Padding="5">
-                            <Label Text="{Binding .}" d:Text="Design Time Data" FontSize="10"/>
-                        </StackLayout>
+                        <Frame Margin="1" Padding="3" OutlineColor="Blue" HasShadow="True">
+                            <Grid Margin="1" BackgroundColor="#D0D0D0">
+                                <Grid.RowDefinitions>
+                                    <RowDefinition Height="55"/>
+                                    <RowDefinition Height="40"/>
+                                </Grid.RowDefinitions>
+                                <Grid.ColumnDefinitions>
+                                    <ColumnDefinition Width="55"/>
+                                    <ColumnDefinition Width="125"/>
+                                </Grid.ColumnDefinitions>
+
+                                <controls:CircleImage Source="{Binding url}" Aspect="AspectFill"
+                                                      WidthRequest="55" HeightRequest="55"/>
+
+                                <Label Grid.Column="1" Text="{Binding breed}"
+                                       TextColor="SaddleBrown" FontSize="13"
+                                       FontAttributes="Bold" VerticalTextAlignment="Center"
+                                       LineBreakMode="WordWrap"/>
+
+                                <Label Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" 
+                                       Text="{Binding temperament}"
+                                       TextColor="Green" FontSize="9"
+                                       FontAttributes="Italic" Margin="3"
+                                       LineBreakMode="WordWrap"/>
+                            </Grid>
+                        </Frame>
                     </DataTemplate>
                 </CollectionView.ItemTemplate>
             </CollectionView>

CollectionViewChallenge/CollectionViewChallenge/Views/CollectionViewChallengePage.xaml.cs

@@ -7,14 +7,27 @@
 using Xamarin.Forms;
 using Xamarin.Forms.Xaml;
 
+using CollectionViewChallenge.ViewModels;
+
 namespace CollectionViewChallenge.Views
 {
     [XamlCompilation(XamlCompilationOptions.Compile)]
     public partial class CollectionViewChallengePage : ContentPage
     {
+        DogViewModel vm;
+
         public CollectionViewChallengePage()
         {
             InitializeComponent();
+
+            vm = new DogViewModel();
+            BindingContext = vm;
+        }
+
+        protected async override void OnAppearing()
+        {
+            base.OnAppearing();
+            await vm.LoadData();
         }
     }
 }