LearnChineseSimplified/CCharLearn/Pages/Index.razor

@page "/"
@inject NavigationManager navigator
@inject HttpClient httpClient
@inject Blazored.LocalStorage.ILocalStorageService localStorage
@inject SpeechSynthesis SpeechSynthesis

<PageTitle>Index</PageTitle>

<MudContainer Class="align-center justify-center d-flex">
    <MudContainer Style="width: 400px">
        <MudSelect Class="pt-12" @bind-Value=selectedChunk TextChanged="SelectedChunk" select T=int Label="Chunk" Variant="Variant.Filled" AnchorOrigin="Origin.BottomCenter">
            @for (int i = 0; i < numOfChunks; i++)
            {
                <MudSelectItem T="int" Value="@i" />
            }
        </MudSelect>
        <MudContainer Class="justify-center d-flex pb-16 pt-4">
            <MudButton Variant="Variant.Filled" OnClick=StartLearning Color="Color.Primary">Start learning!</MudButton>
        </MudContainer>

        <MudContainer Class="justify-center d-flex">
            @if (Charecters != null)
            {
                <MudPaper Class="overflow-scroll rounded-0" Style="height: 50vh;" Elevation="1">
                    <MudDataGrid FixedHeader=true Items="@Charecters">
                        <Columns>
                            <PropertyColumn Property="x => x.charcter" Title="CChar" />
                            <PropertyColumn Property="x => x.pinyin" Title="Pinyin" />
                        </Columns>
                    </MudDataGrid>
                </MudPaper>
            }
        </MudContainer>

        <MudContainer Class="justify-center d-flex pt-4">
            <MudButton Class="mt-1 mb-7" Variant="Variant.Filled" Color="Color.Secondary" Disabled="@(isLoading || isSavedLocally)" OnClick="LoadAllChunksIntoLocalStorage">
                @if (!isSavedLocally)
                {
                    @if (isLoading)
                    {
                        <MudText>@($"{savedChunks}/{numOfChunks}")</MudText>
                        <MudProgressCircular Class="pl-8 ms-n1 mr-2" Size="Size.Small" Indeterminate="true" />
                    }
                    else
                    {
                        <MudText>Load chunks to local storage</MudText>
                        <MudIcon Icon="@Icons.Material.Rounded.Send" Class="mr-1" />
                    }
                }
                else
                {
                    <MudText>Chunks are saved locally</MudText>
                }
            </MudButton>
        </MudContainer>
        <MudContainer Class="justify-center d-flex pt-4">
            <MudButton OnClick="async ()=>{await localStorage.ClearAsync(); navigator.NavigateTo(string.Empty, true);}" Variant="Variant.Outlined" Color="Color.Tertiary">Delete local storage</MudButton>
        </MudContainer>
    </MudContainer>
</MudContainer>

@code{
    int numOfChunks = 197; //Exclusive index 0
    int selectedChunk = 0;
    int savedChunks = 0;

    bool isLoading = false;
    bool isSavedLocally = false;

    protected async override Task OnInitializedAsync()
    {
        if (await localStorage.ContainKeyAsync("Normalized_chunk_001.json")) 
            isSavedLocally = true;

        SelectedChunk();
        StateHasChanged();
    }

    async void StartLearning()
    {
        await localStorage.SetItemAsync("SelectedChunk", selectedChunk);
        navigator.NavigateTo("/Learn");
    }

    CChar[]? Charecters;
    async void SelectedChunk()
    {
        if (await localStorage.ContainKeyAsync("Normalized_chunk_001.json"))
            isSavedLocally = true;

        if (!isSavedLocally)
            Charecters = await httpClient.GetFromJsonAsync<CChar[]>($"Data/Normalized_chunk_{selectedChunk.ToString("000")}.json");
        else
        {
            string json = await localStorage.GetItemAsync<string>($"Normalized_chunk_{selectedChunk.ToString("000")}.json");
            Charecters = JsonConvert.DeserializeObject<CChar[]>(json);
        }
        StateHasChanged();
    }

    async Task LoadAllChunksIntoLocalStorage()
    {
        isLoading = true;
        string[] jsonChunks = new string[numOfChunks];

        Parallel.For(0, numOfChunks, async (i)=>
        {
            await Task.Delay(10*i);
            try
            {
                jsonChunks[i] = await httpClient.GetStringAsync($"Data/Normalized_chunk_{i.ToString("000")}.json");
            }
            catch (Exception)
            {
                await Task.Delay(100);
                jsonChunks[i] = await httpClient.GetStringAsync($"Data/Normalized_chunk_{i.ToString("000")}.json");
            }

            if (string.IsNullOrEmpty(jsonChunks[i])) throw new Exception("Couldn't load chunk: " + i);

            try
            {
                await localStorage.SetItemAsync($"Normalized_chunk_{i.ToString("000")}.json", jsonChunks[i]);
            }
            catch (Exception)
            {
                await Task.Delay(100);
                await localStorage.SetItemAsync($"Normalized_chunk_{i.ToString("000")}.json", jsonChunks[i]);
            }

            if (!await localStorage.ContainKeyAsync($"Normalized_chunk_{i.ToString("000")}.json")) throw new Exception("Couldn't save chunk: " + i);
        });

        while (jsonChunks.Any(x => x == null))
        {
            await Task.Delay(1);
            savedChunks = jsonChunks.Count(x=>x != null);
            StateHasChanged();
        }

        isLoading = false;
        isSavedLocally = true;
        StateHasChanged();
    }
}