Added chatting

Otakians/App.razor

@@ -11,11 +11,22 @@
     </NotFound>
 </Router>
 
+@*<MudThemeProvider @bind-IsDarkMode="@_isDarkMode" Theme="MyCustomTheme" />*@
 <MudThemeProvider @bind-IsDarkMode="@_isDarkMode" />
 <MudDialogProvider />
 <MudSnackbarProvider />
 
 @code {
-    private MudTheme _theme = new();
+    //public static MudTheme MyCustomTheme = new MudTheme()
+    //    {
+    //        PaletteDark = new PaletteDark()
+    //        {
+    //            Dark = Colors.Pink.Lighten3,
+    //            Background = Colors.Pink.Lighten1,
+    //            AppbarBackground = Colors.Pink.Darken4,
+    //            DrawerBackground = Colors.Pink.Darken4,
+    //            Surface = Colors.Pink.Lighten2,
+    //        }
+    //};
     private bool _isDarkMode = true;
 }

Otakians/MainLayout.razor

@@ -8,7 +8,7 @@
 
 <MudLayout Class="overflow-hidden">
     <MudAppBar Elevation="1">
-        <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="RegisterAccount">Clear cookies</MudButton>
+        <MudButton Variant="Variant.Filled" Color="Color.Primary" Disabled=true>Debug button</MudButton>
         <MudSpacer />
         @if (!isLoggedIn)
         {
@@ -28,7 +28,6 @@
         <MudNavMenu>
             <MudNavLink Match="NavLinkMatch.All" Href="/Posts" Icon="@Icons.Material.Filled.Image">Posts</MudNavLink>
             <MudNavLink Match="NavLinkMatch.All" Href="/Chatting" Icon="@Icons.Material.Filled.Chat">Chat</MudNavLink>
-            <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Group">Community</MudNavLink>
         </MudNavMenu>
     </MudDrawer>
 
@@ -37,7 +36,7 @@
         {
             <MudPaper Class="ma-2">
                 <MudStack Spacing="0" Class="justify-center">
-                    <MudButton Class="ma-4" Variant="Variant.Outlined" Color="Color.Error" OnClick="Logout">Logout</MudButton>
+                    <MudButton Class="ma-4" Variant="Variant.Filled" Color="Color.Error" OnClick="Logout">Logout</MudButton>
                 </MudStack>
             </MudPaper>
         }
@@ -45,8 +44,8 @@
         {
             <MudPaper Class="ma-2">
                 <MudStack Spacing="0" Class="justify-center">
-                    <MudButton Class="ma-4" Variant="Variant.Outlined" Color="Color.Primary" OnClick="ShowLogIn">Sign-in</MudButton>
+                    <MudButton Class="ma-4" Variant="Variant.Filled" Color="Color.Primary" OnClick="ShowLogIn">Sign-in</MudButton>
-                    <MudButton Class="ma-4" Variant="Variant.Outlined" Color="Color.Success" OnClick="ShowSignUp">Sign-up</MudButton>
+                    <MudButton Class="ma-4" Variant="Variant.Filled" Color="Color.Success" OnClick="ShowSignUp">Sign-up</MudButton>
                 </MudStack>
             </MudPaper>
         }
@@ -245,6 +244,7 @@
 
     protected override async Task OnInitializedAsync()
     {
+        StateHasChanged();
         CheckLoggedin();
     }
 
@@ -253,10 +253,9 @@
         string? name = await localStorage.GetItemAsStringAsync("User");
         if (name == null) return;
 
-        Snackbar.Add("Successfully logged in!", Severity.Success);
-
         Program.LoggedInName = name;
         isLoggedIn = true;
+        Snackbar.Add($"Successfully logged in as: {Program.LoggedInName}.", Severity.Success);
         StateHasChanged();
     }
 

Otakians/Pages/Chatting.razor

@@ -3,6 +3,8 @@
 @inject NavigationManager NavManager
 @inject HttpClient Http
 @inject IJSRuntime JSRuntime
+@inject ISnackbar Snackbar
+@inject MessageService messageService
 
 <style>
     .bottom-start {
@@ -23,7 +25,7 @@
                 {
                     Message message = messages[i];
 
-                    if ("dumb zhen" == message.Name)
+                    if (Program.LoggedInName != null && Program.LoggedInName == message.Name)
                     {
                         <MudStack Class="px-4 py-2 d-flex" Justify="Justify.FlexEnd" Row="true" AlignItems="AlignItems.End">
                             <MudStack>
@@ -31,7 +33,7 @@
                                     <MudText Typo="Typo.body1" Class="px-2 pt-2" Style="max-width: 320px;">@message.Content</MudText>
                                     <MudText Class="pa-1 pr-2" Align="Align.End" Style="font-size: 10px;">@("@" + message.Name)</MudText>
                                 </MudPaper>
-                                <MudText Class="mt-n3" Align="Align.End" Style="font-size: 10px;">@(DateTime.Now.ToString("dd/MM/yyyy HH:mm", danishCulture))</MudText>
+                                    <MudText Class="mt-n3" Align="Align.End" Style="font-size: 10px;">@(DateTimeOffset.FromUnixTimeSeconds(message.DatePosted).ToString("dd/MM HH:mm", danishCulture))</MudText>
                             </MudStack>
                         </MudStack>
                     }
@@ -43,7 +45,7 @@
                                     <MudText Typo="Typo.body1" Class="px-2 pt-2" Style="max-width: 320px;">@message.Content</MudText>
                                     <MudText Class="pa-1" Style="font-size: 10px;">@("@" + message.Name)</MudText>
                                 </MudPaper>
-                                <MudText Class="mt-n3 pl-1" Style="font-size: 10px;">@(DateTime.Now.ToString("dd/MM HH:mm", danishCulture))</MudText>
+                                    <MudText Class="mt-n3 pl-1" Style="font-size: 10px;">@(DateTimeOffset.FromUnixTimeSeconds(message.DatePosted).ToString("dd/MM HH:mm", danishCulture))</MudText>
                             </MudStack>
                         </MudStack>
                     }
@@ -51,16 +53,16 @@
             }
 
         </MudPaper>
-        <MudContainer Class="d-flex pa-0">
+        <MudContainer Class="d-flex pa-0 mb-n1">
-            <MudTextField Class="my-1" @bind-Value="TextValue" Label="Filled" Variant="Variant.Filled" Margin="Margin.Dense"></MudTextField>
+            <MudTextField Class="my-1" HelperText="Messages cannot be deleted!" HelperTextOnFocus=true Counter="25" @bind-Value="TextValue" MaxLength="32" Immediate="true" Validation="@(new Func<string, IEnumerable<string>>(MaxCharacters))" Disabled="@(Program.LoggedInName == null)" Label="@((Program.LoggedInName == null) ? "Sign-in to send messages" : "Message")" Variant="Variant.Filled" AdornmentColor="@Color.Primary" Margin="Margin.Dense"></MudTextField>
-            <MudButton Class="my-1" Variant="Variant.Filled" Color="Color.Primary" Disabled="isSending" OnClick="SendMessage">
+            <MudButton Class="mt-1 mb-7" Variant="Variant.Filled" Color="Color.Primary" Disabled="@(Program.LoggedInName == null || isSending)" OnClick="SendMessage">
                 @if (isSending)
                 {
                     <MudProgressCircular Class="ms-n1 mr-2" Size="Size.Small" Indeterminate="true" />
                 }
                 else
                 {
-                    <MudIcon Icon="@Icons.Material.Rounded.Send" Class="mr-1"/>
+                    <MudIcon Icon="@Icons.Material.Rounded.Send" Class="mr-1" />
                 }
                 Send
             </MudButton>
@@ -78,17 +80,39 @@
         isSending = true;
         StateHasChanged();
         await Task.Delay(3000);
-        //isSending = false;
+
-        messages = null;
+        if (string.IsNullOrWhiteSpace(TextValue))
+        {
+            Snackbar.Add("Missing input text?", Severity.Error);
+            return;
+        }
+
+        var message = new Message
+        {
+            Content = TextValue,
+            DatePosted = DateTimeOffset.Now.ToUnixTimeSeconds(),
+            Name = Program.LoggedInName
+        };
+
+        await messageService.AddMessage(message);
+        TextValue = string.Empty;
+        messages = await messageService.GetMessages();
+        isSending = false;
         NavManager.NavigateTo("/");
         NavManager.NavigateTo("/Chatting");
     }
 
+    private IEnumerable<string> MaxCharacters(string ch)
+    {
+        if (!string.IsNullOrEmpty(ch) && 32 < ch?.Length)
+            yield return "Max 32 characters";
+    }
+
     Message[]? messages;
 
     protected override async Task OnInitializedAsync()
     {
-        messages = (await Http.GetFromJsonAsync<Message[]>("https://globalchat-4a89f-default-rtdb.europe-west1.firebasedatabase.app/Database/Messages.json"));
+        messages = await messageService.GetMessages();
 
         StartLoop();
     }
@@ -103,9 +127,10 @@
 
         while (isLooping)
         {
-            messages = (await Http.GetFromJsonAsync<Message[]>("https://globalchat-4a89f-default-rtdb.europe-west1.firebasedatabase.app/Database/Messages.json"));
+            messages = await messageService.GetMessages();
+            Console.WriteLine("Chat updated!");
 
-            await Task.Delay(100000); // Delay for 1 second before the next iteration
+            await Task.Delay(10000);
         }
     }
 

Otakians/Program.cs

@@ -24,6 +24,8 @@ internal class Program
         builder.Services.AddBlazoredLocalStorage(config =>
             config.JsonSerializerOptions.WriteIndented = true);  // local storage
 
+        builder.Services.AddScoped<MessageService>();
+
         await builder.Build().RunAsync();
     }
 }

Otakians/Services/MessageService.cs

@@ -0,0 +1,48 @@
+using System;
+using System.Net.Http;
+using System.Net.Http.Json;
+using System.Threading.Tasks;
+using static Otakians.Pages.Chatting;
+
+public class MessageService
+{
+    private readonly HttpClient _httpClient;
+    private const string ApiUrl = "https://globalchat-4a89f-default-rtdb.europe-west1.firebasedatabase.app/Database.json";
+
+    public MessageService(HttpClient httpClient)
+    {
+        _httpClient = httpClient;
+    }
+
+    public async Task<Message[]?> GetMessages()
+    {
+        try
+        {
+            var rawMaybe = await _httpClient.GetFromJsonAsync<Dictionary<string, Message>>(ApiUrl);
+
+            if (rawMaybe == null) return null;
+
+            Message[] messages = rawMaybe.Values.ToArray();
+            Array.Reverse(messages);
+            return messages;
+        }
+        catch (Exception ex)
+        {
+            // Handle exception appropriately (e.g., log, display an error message)
+            throw ex;
+        }
+    }
+
+    public async Task AddMessage(Message message)
+    {
+        try
+        {
+            await _httpClient.PostAsJsonAsync(ApiUrl, message);
+        }
+        catch (Exception ex)
+        {
+            // Handle exception appropriately (e.g., log, display an error message)
+            throw ex;
+        }
+    }
+}

Otakians/wwwroot/index.html

@@ -9,8 +9,6 @@
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
     <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
     <link href="css/MudBlazor.min.css" rel="stylesheet" />
-
-
     <!-- If you add any scoped CSS files, uncomment the following to load them
     <link href="Otakians.styles.css" rel="stylesheet" /> -->
 </head>