Added blazor example

This commit is contained in:
Jonas Dellinger 2020-05-22 13:53:58 +02:00
parent 2d1c1d2e00
commit 020b60bec2
6 changed files with 63 additions and 85 deletions

View File

@ -4,4 +4,8 @@
<TargetFramework>netcoreapp3.1</TargetFramework>
</PropertyGroup>
<ItemGroup>
<ProjectReference Include="..\..\SpotifyAPI.Web\SpotifyAPI.Web.csproj" />
</ItemGroup>
</Project>

View File

@ -1,16 +0,0 @@
@page "/counter"
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
}

View File

@ -1,46 +0,0 @@
@page "/fetchdata"
@using Example.ASPBlazor.Data
@inject WeatherForecastService ForecastService
<h1>Weather forecast</h1>
<p>This component demonstrates fetching data from a service.</p>
@if (forecasts == null)
{
<p><em>Loading...</em></p>
}
else
{
<table class="table">
<thead>
<tr>
<th>Date</th>
<th>Temp. (C)</th>
<th>Temp. (F)</th>
<th>Summary</th>
</tr>
</thead>
<tbody>
@foreach (var forecast in forecasts)
{
<tr>
<td>@forecast.Date.ToShortDateString()</td>
<td>@forecast.TemperatureC</td>
<td>@forecast.TemperatureF</td>
<td>@forecast.Summary</td>
</tr>
}
</tbody>
</table>
}
@code {
private WeatherForecast[] forecasts;
protected override async Task OnInitializedAsync()
{
forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
}
}

View File

@ -1,7 +1,61 @@
@page "/"
@page "/"
@inject NavigationManager navManager
@using SpotifyAPI.Web
<h1>Hello, world!</h1>
Welcome to your new app.
@if (_isAuthed && _me != null)
{
<h2>Welcome @_me.DisplayName!</h2>
<p>
You have a grant toal of @_totalPlaylistCount playlists!
</p>
}
else
{
<span>To get started:</span>
<a href="@_authUri">
Login via Spotify
</a>
}
<SurveyPrompt Title="How is Blazor working for you?" />
@code {
private Uri _authUri;
private bool _isAuthed;
private PrivateUser _me;
private int _totalPlaylistCount;
protected override void OnInitialized()
{
var clientId = Environment.GetEnvironmentVariable("SPOTIFY_CLIENT_ID");
var baseUri = navManager.ToAbsoluteUri(navManager.BaseUri);
var loginRequest = new LoginRequest(baseUri, clientId, LoginRequest.ResponseType.Token)
{
Scope = new[] { Scopes.PlaylistReadPrivate, Scopes.PlaylistReadCollaborative }
};
_authUri = loginRequest.ToUri();
}
protected override async Task OnInitializedAsync()
{
var uri = new Uri(navManager.Uri);
var maxLen = Math.Min(1, uri.Fragment.Length);
Dictionary<string, string> fragmentParams = uri.Fragment.Substring(maxLen)
?.Split("&", StringSplitOptions.RemoveEmptyEntries)
?.Select(param => param.Split("=", StringSplitOptions.RemoveEmptyEntries))
?.ToDictionary(param => param[0], param => param[1]) ?? new Dictionary<string, string>();
_isAuthed = fragmentParams.ContainsKey("access_token");
if (_isAuthed)
{
var spotify = new SpotifyClient(fragmentParams["access_token"]);
_me = await spotify.UserProfile.Current();
_totalPlaylistCount = (await spotify.Playlists.CurrentUsers()).Total;
}
}
}

View File

@ -1,17 +1,9 @@
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.Hosting;
using Microsoft.Extensions.Logging;
namespace Example.ASPBlazor
{
public class Program
public class Program
{
public static void Main(string[] args)
{

View File

@ -1,4 +1,4 @@
<div class="top-row pl-4 navbar navbar-dark">
<div class="top-row pl-4 navbar navbar-dark">
<a class="navbar-brand" href="">Example.ASPBlazor</a>
<button class="navbar-toggler" @onclick="ToggleNavMenu">
<span class="navbar-toggler-icon"></span>
@ -12,16 +12,6 @@
<span class="oi oi-home" aria-hidden="true"></span> Home
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="counter">
<span class="oi oi-plus" aria-hidden="true"></span> Counter
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="fetchdata">
<span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
</NavLink>
</li>
</ul>
</div>