[Sample] Show using OneDrive Recent Files in GraphPresenter

[michael-hawker]

Describe the problem this feature would solve

Want to have a OneDrive sample for the GraphPresenter.

Currently blocked on Graph SDK bug microsoftgraph/MSGraph-SDK-Code-Generator#266

Describe the solution

Current solution used old NotifyTaskCompletion pattern now replaced by Toolkit MVVM package. We should have a new solution built on that somehow or alternate method.

Original Sample:

<wgt:GraphPresenter RequestBuilder="{x:Bind providers:ProviderManager.Instance.GlobalProvider.Graph.Me.Drive.Recent(), Mode=OneWay}"
                                    ResponseType="graph:DriveItem"
                                    IsCollection="True">
  <wgt:GraphPresenter.ContentTemplate>
                        <DataTemplate>
                            <!-- Return result is a collection of DriveItem's as we used 'IsCollection', so bind that first. -->
                            <ScrollViewer HorizontalScrollMode="Disabled" VerticalScrollBarVisibility="Auto">
                                <ItemsControl ItemsSource="{Binding}">
                                    <ItemsControl.ItemTemplate>
                                        <DataTemplate x:DataType="graph:DriveItem">
                                            <StackPanel>
                                                <controls:ImageEx DataContext="{x:Bind RemoteItem, Converter={StaticResource OneDriveThumbnailConverter}}"
                                                                  PlaceholderSource="/Assets/FileIcon.png"
                                                                  Source="{Binding Result.Medium.Url}" Width="176" Height="176"/>
                                                <TextBlock Text="{Binding Name}"/>
                                                <TextBlock Text="{Binding Size, Converter={StaticResource FileSizeConverter}}"/>
                                            </StackPanel>
                                        </DataTemplate>
                                    </ItemsControl.ItemTemplate>
                                    <ItemsControl.ItemsPanel>
                                        <ItemsPanelTemplate>
                                            <controls:UniformGrid Columns="2" ColumnSpacing="8"/>
                                        </ItemsPanelTemplate>
                                    </ItemsControl.ItemsPanel>
                                </ItemsControl>
                            </ScrollViewer>
                        </DataTemplate>
  </wgt:GraphPresenter.ContentTemplate.
</wgt:GraphPresenter>

Original Converter:

if (value is RemoteItem ri)
            {
                // drives/${file.remoteItem.parentReference.driveId}/items/${file.remoteItem.id}/thumbnails/0/medium
                var provider = ProviderManager.Instance.GlobalProvider;
                if (provider != null && provider.Graph != null)
                {
                    return new NotifyTaskCompletion<ThumbnailSet>(provider.Graph.Drives[ri.ParentReference.DriveId].Items[ri.Id].Thumbnails["0"].Request().GetAsync());
                }
            }

New idea for converter (thanks @Sergio0694):

var command = new AsyncRelayCommand(async () =>
{
    var data = await provider...GetAsync();
    return data.Medium.Url;
});
command.Execute(); // Start loading immediately
return command;

<controls:ImageEx
    DataContext="{x:Bind RemoteItem, Converter={StaticResource OneDriveThumbnailConverter}}"
    Source="{Binding ExecutionTask, Converter={StaticResource TaskResultConverter}}"/>

I think we can also just x:Bind directly to the helper function for the ToFileSizeString too.

[Sergio0694]

Also just for reference, in case you really wanted to keep using the NotifyTaskCompletion<T> syntax for the project (making the type internal, so that'd be fine), this is an example of a simple async box type you can write with the MVVM Toolkit:

internal sealed class AsyncResult<TResult> : ObservableObject
{
    private readonly Task<TResult> task;

    public AsyncResult(Task<TResult> task)
    {
        SetPropertyAndNotifyOnCompletion(ref this.task, () => this.task, task, nameof(ResultOrDefault));
    }

    public TResult ResultOrDefault => this.task.GetResultOrDefault();
}

Then you could do:

// Converter
return new AsyncResult<ThumbnailSet>(provider...GetAsync());

<controls:ImageEx
    DataContext="{x:Bind RemoteItem, Converter={StaticResource OneDriveThumbnailConverter}}"
    Source="{Binding ResultOrDefault.Medium.Url}"/>

Small note: that GetResultOrDefault extension is from the base Microsoft.Toolkit package.

Both approaches should work just fine, so as long as this code is internal you can just pick whatever you prefer! 😊