Enable edit statuslog bio

Classes/ApiService.cs

@@ -167,10 +167,11 @@ namespace Neighbourhood.omg.lol
     public async Task<List<Status>> Statuslog(string address) =>
       (await Get<StatusResponseData>($"/address/{address}/statuses"))?.Statuses ?? new List<Status>();
 
-    public async Task<MarkupString> StatuslogBio(string address) {
+    public async Task<string> StatuslogBio(string address) =>
-      StatusBioResponseData? responseData = await Get<StatusBioResponseData>($"/address/{address}/statuses/bio");
+      (await Get<StatusBioResponseData>($"/address/{address}/statuses/bio"))?.Bio ?? string.Empty;
-      return Utilities.MdToHtmlMarkup(responseData?.Bio ?? "");
+
-    }
+    public async Task<string> PostStatuslogBio(string address, string bio) =>
+      (await Post<StatusBioResponseData, PostStatusBio>($"/address/{address}/statuses/bio", new PostStatusBio() { Content = bio }))?.Bio ?? string.Empty;
 
     public async Task<AccountResponseData?> AccountInfo() =>
       await Get<AccountResponseData>("/account/application/info");

Classes/State.cs

@@ -224,7 +224,7 @@ namespace Neighbourhood.omg.lol {
     public async Task<MarkupString?> GetBio(string address, bool forceRefresh = false) {
       CachedAddress = address;
       if (forceRefresh || CachedAddressBio == null) {
-        CachedAddressBio = await api.StatuslogBio(address);
+        CachedAddressBio = Utilities.MdToHtmlMarkup(await api.StatuslogBio(address));
       }
       return CachedAddressBio;
     }

Components/EditBioDialog.razor

@@ -0,0 +1,79 @@
+@inject IJSRuntime JS
+@inject State State
+@inject ApiService api
+
+<div class="overlay" data-ui="#@id"></div>
+<dialog id="@id">
+  <h5>Edit your statuslog bio</h5>
+  <div class="row">
+    <div class="max markdown-editor">
+      @if (Bio != null) {
+        <MarkdownEditor @ref="Editor"
+                        @bind-Value="@Bio"
+                        Theme="material-darker"
+                        MaxHeight="100%">
+          <Toolbar>
+            <MarkdownToolbarButton Action="MarkdownAction.Bold" Icon="fa-solid fa-bold" Title="Bold" />
+            <MarkdownToolbarButton Action="MarkdownAction.Italic" Icon="fa-solid fa-italic" Title="Italic" />
+            <MarkdownToolbarButton Action="MarkdownAction.Heading" Icon="fa-solid fa-heading" Title="Heading" />
+            <MarkdownToolbarButton Action="MarkdownAction.Code" Icon="fa-solid fa-code" Title="Code" Separator="true" />
+            <MarkdownToolbarButton Action="MarkdownAction.Quote" Icon="fa-solid fa-quote-left" Title="Quote" />
+            <MarkdownToolbarButton Action="MarkdownAction.UnorderedList" Icon="fa-solid fa-list-ul" Title="Unordered List" />
+            <MarkdownToolbarButton Action="MarkdownAction.OrderedList" Icon="fa-solid fa-list-ol" Title="Ordered List" />
+            <MarkdownToolbarButton Action="MarkdownAction.Link" Icon="fa-solid fa-link" Title="Link" Separator="true" />
+            <MarkdownToolbarButton Action="MarkdownAction.Image" Icon="fa-solid fa-image" Title="Image" />
+            <MarkdownToolbarButton Action="MarkdownAction.HorizontalRule" Icon="fa-solid fa-horizontal-rule" Title="Horizontal Rule" />
+            <MarkdownToolbarButton Action="MarkdownAction.Guide" Icon="fa-solid fa-circle-question" Title="Guide" Separator="true" />
+          </Toolbar>
+        </MarkdownEditor>
+      }
+    </div>
+  </div>
+  <nav class="no-space">
+    <div class="max"></div>
+    <button class="transparent link" data-ui="#@id" disabled="@loading">Cancel</button>
+    <button @onclick="PostBio" disabled="@loading">
+      @if (loading) {
+        <span>Saving...</span>
+      }
+      else {
+        <i class="fa-solid fa-floppy-disk"></i> <span>Save</span>
+      }
+    </button>
+  </nav>
+</dialog>
+
+@code {
+  private MarkdownEditor? Editor;
+  public string? Bio { get; set; }
+  [Parameter]
+  public string? Address { get; set; }
+  private bool loading = true;
+  [Parameter]
+  public string? id { get; set; }
+
+  protected override async Task OnInitializedAsync() {
+    await base.OnInitializedAsync();
+    Bio = await api.StatuslogBio(Address ?? State.SelectedAddressName!);
+    await InvokeAsync(StateHasChanged);
+    await Editor!.SetValueAsync(Bio);
+    loading = false;
+    await InvokeAsync(StateHasChanged);
+  }
+
+  public async Task PostBio() {
+    loading = true;
+    await InvokeAsync(StateHasChanged);
+
+    // Post the bio
+    await api.PostStatuslogBio(Address!, Bio ?? string.Empty);
+    State.CachedAddressBio = Utilities.MdToHtmlMarkup(Bio ?? string.Empty);
+
+    await JS.InvokeVoidAsync("ui", "#" + id);
+    // reset input
+    await OnInitializedAsync();
+    loading = false;
+    await InvokeAsync(StateHasChanged);
+    State.SendRefresh();
+  }
+}

Components/Pages/Person.razor

@@ -79,6 +79,12 @@
         </article>
       </div>
     }
+    @if (IsMe) {
+      <EditBioDialog id="edit-bio" Address="@Address"></EditBioDialog>
+      <div class="row center-align">
+        <button data-ui="#edit-bio"><i class="fa-solid fa-pencil"></i> Edit Bio</button>
+      </div>
+    }
     <StatusList @ref="StatusList" StatusFunc="@(async(refresh) => await State.GetStatuses(Address, refresh))" Editable="@IsMe"></StatusList>
     @if(IsMe) {
       <button class="fab circle extra large-elevate" data-ui="#post-modal">

Models/API/PostStatusBio.cs

@@ -0,0 +1,5 @@
+namespace Neighbourhood.omg.lol.Models {
+  public class PostStatusBio {
+    public string Content { get; set; } = string.Empty;
+  }
+}

wwwroot/css/style.css

@@ -94,6 +94,10 @@ dialog {
   width: 80%
 }
 
+dialog#edit-bio {
+  overflow: scroll;
+}
+
 .invisible {
   max-width: 0;
   max-height: 0;