From 8c8634f3c3a7757adcec7f4c9c35fb3843746e22 Mon Sep 17 00:00:00 2001
From: Gordon Pedersen <death.au@death.id.au>
Date: Thu, 13 Jun 2024 20:02:51 +1000
Subject: [PATCH] Fixes and editing statuses

---
 Components/EditStatusDialog.razor        | 88 ++++++++++++++++++++++++
 Components/Pages/Person.razor            | 17 ++++-
 Components/PicCard.razor                 |  2 +-
 Components/PicCardEditableTemplate.razor | 30 --------
 Components/PicCardTemplate.razor         | 23 -------
 Components/StatusCard.razor              | 33 ++++++---
 Components/StatusList.razor              |  8 ++-
 Models/PatchStatus.cs                    | 13 ++++
 Models/PatchStatusResponseData.cs        | 13 ++++
 RestService.cs                           | 23 +++++++
 wwwroot/css/style.css                    | 11 ++-
 11 files changed, 193 insertions(+), 68 deletions(-)
 create mode 100644 Components/EditStatusDialog.razor
 delete mode 100644 Components/PicCardEditableTemplate.razor
 delete mode 100644 Components/PicCardTemplate.razor
 create mode 100644 Models/PatchStatus.cs
 create mode 100644 Models/PatchStatusResponseData.cs

diff --git a/Components/EditStatusDialog.razor b/Components/EditStatusDialog.razor
new file mode 100644
index 0000000..5f1d270
--- /dev/null
+++ b/Components/EditStatusDialog.razor
@@ -0,0 +1,88 @@
+@inject IJSRuntime JS
+@inject State State
+
+<div class="overlay" data-ui="#@id"></div>
+<dialog id="@id">
+  <div class="row">
+    <div class="min square extra">
+      <button class="transparent square extra no-margin">
+        <object id="status-emoji" class="large emoji @(Emoji == null ? "animated" : string.Empty)" data-emoji="@(Emoji ?? "🫥")">@(Emoji ?? "🫥")</object>
+        <menu class="no-wrap">
+          <script type="module" src="https://cdn.jsdelivr.net/npm/emoji-picker-element@@^1/index.js"></script>
+          <emoji-picker emoji-version="15.1"></emoji-picker>
+          <script>
+            document.querySelector('emoji-picker')
+              .addEventListener('emoji-click', event => {
+                document.getElementById('status-emoji').setAttribute('data-emoji', event.detail.unicode)
+                const input = document.getElementById('status-emoji-input')
+                input.value = event.detail.unicode
+                var event = new Event('change');
+                input.dispatchEvent(event);
+              })
+          </script>
+        </menu>
+      </button>
+    </div>
+    <div class="field textarea label border max">
+      <InputTextArea @bind-Value="Content"></InputTextArea>
+      <label>Status</label>
+    </div>
+  </div>
+  <nav class="right-align no-space">
+    <InputText id="status-emoji-input" class="invisible" @bind-Value="Emoji"></InputText>
+    <button class="transparent link" data-ui="#@id" disabled="@loading">Cancel</button>
+    <button @onclick="PatchStatus" disabled="@loading">
+      @if (loading) {
+        <span>Saving...</span>
+      }
+      else {
+        <i class="fa-solid fa-floppy-disk"></i> <span>Save</span>
+      }
+    </button>
+  </nav>
+</dialog>
+
+@code {
+  private Status? _status;
+
+  public Status? Status {
+    get => _status;
+    set {
+      _status = value;
+      Content = _status?.Content;
+      Emoji = _status?.Emoji;
+      InvokeAsync(StateHasChanged);
+    }
+  }
+  public string? Content { get; set; }
+  public string? Emoji { get; set; }
+  private bool loading = false;
+  [Parameter]
+  public string id { get; set; }
+
+  protected override async Task OnInitializedAsync() {
+    Content = Status?.Content;
+    Emoji = Status?.Emoji;
+  }
+
+  public async Task PatchStatus() {
+    loading = true;
+    await InvokeAsync(StateHasChanged);
+
+    RestService api = new RestService();
+    if (!string.IsNullOrEmpty(Status?.Id)) {
+      await api.PatchStatus(State.SelectedAddressName, Status.Id, Content, Emoji);
+      await State.RefreshStatuses();
+      await InvokeAsync(StateHasChanged);
+    }
+
+    await JS.InvokeVoidAsync("ui", "#" + id);
+    // clear input
+    Content = string.Empty;
+    Emoji = string.Empty;
+    Status = null;
+    loading = false;
+    await InvokeAsync(StateHasChanged);
+
+  }
+}
diff --git a/Components/Pages/Person.razor b/Components/Pages/Person.razor
index 64e2d90..988da5c 100644
--- a/Components/Pages/Person.razor
+++ b/Components/Pages/Person.razor
@@ -51,11 +51,11 @@
         }
       </article>
     </div>
-    <StatusList StatusFunc="@(async() => await State.GetStatuses(Address))"></StatusList>
+    <StatusList @ref="StatusList" StatusFunc="@(async() => await State.GetStatuses(Address))" Editable="@Editable"></StatusList>
   </div>
   
   <div id="pics" class="page padding">
-    <PicList PicsFunc="@(async() => await State.GetPics(Address))" Editable="@Editable"></PicList>
+    <PicList @ref="PicList" PicsFunc="@(async() => await State.GetPics(Address))" Editable="@Editable"></PicList>
   </div>
   @if(now != null){
     <div id="now" class="page no-padding">
@@ -66,8 +66,16 @@
 </div>
 
 @code {
+  private string _address;
   [Parameter]
-  public string Address { get; set; }
+  public string Address { 
+    get => _address;
+    set {
+      _address = value;
+      if(StatusList != null) StatusList.StatusFunc = async () => await State.GetStatuses(_address);
+      if(PicList != null) PicList.PicsFunc = async () => await State.GetPics(_address);
+    }
+  }
   public string ProfileUrl {
     get => $"https://{Address}.omg.lol/";
   }
@@ -75,6 +83,9 @@
   public ExternalPageComponent? NowPage { get; set; }
   public ExternalPageComponent? ProfilePage { get; set; }
 
+  private StatusList StatusList { get; set; }
+  private PicList PicList { get; set; }
+
   private bool Editable { 
     get => Address == State.SelectedAddressName;
   }
diff --git a/Components/PicCard.razor b/Components/PicCard.razor
index 2ca63d6..5ff09f7 100644
--- a/Components/PicCard.razor
+++ b/Components/PicCard.razor
@@ -28,7 +28,7 @@
 @code {
   [Parameter]
   public Pic Pic {get; set;}
-    [Parameter]
+  [Parameter]
   public bool Editable { get; set; } = false;
   [Parameter]
   public EditPicDialog? Dialog { get; set; }
diff --git a/Components/PicCardEditableTemplate.razor b/Components/PicCardEditableTemplate.razor
deleted file mode 100644
index ecc8b8f..0000000
--- a/Components/PicCardEditableTemplate.razor
+++ /dev/null
@@ -1,30 +0,0 @@
-<template id="PicCard">
-  <article class="no-padding">
-    <img src="{{Pic.Url}}" loading="lazy">
-    <div class="padding">
-      <nav>
-        <a class="author" href="/person/{{Pic.Address}}#pics">
-          <i class="fa-solid fa-fw fa-at"></i>{{Pic.Address}}
-        </a>
-        <span class="max"></span>
-        <a class="chip transparent-border right">
-          <i class="fa fa-clock"></i> {{Pic.RelativeTime}}
-        </a>
-        <span class="max"></span>
-        <button class="share-button transparent circle">
-          <input type="hidden" name="url" value="{{Pic.Url}}" />
-          <input type="hidden" name="description" value="{{Pic.Description}}" />
-          <i class="fa-solid fa-share-nodes"></i>
-        </button>
-      </nav>
-      <p class="description">{{Pic.Description}}</p>
-      <nav>
-        <div class="max"></div>
-          <button class="edit-button">
-            <input type="hidden" name="id" value="{{Pic.Id}}" />
-            <i class="fa-solid fa-pencil"></i> Edit
-          </button>
-      </nav>
-    </div>
-  </article>
-</template>
\ No newline at end of file
diff --git a/Components/PicCardTemplate.razor b/Components/PicCardTemplate.razor
deleted file mode 100644
index ea1f98e..0000000
--- a/Components/PicCardTemplate.razor
+++ /dev/null
@@ -1,23 +0,0 @@
-<template id="PicCard">
-  <article class="no-padding">
-    <img src="{{Pic.Url}}" loading="lazy">
-    <div class="padding">
-      <nav>
-        <a class="author" href="/person/{{Pic.Address}}#pics">
-          <i class="fa-solid fa-fw fa-at"></i>{{Pic.Address}}
-        </a>
-        <span class="max"></span>
-        <a class="chip transparent-border right">
-          <i class="fa fa-clock"></i> {{Pic.RelativeTime}}
-        </a>
-        <span class="max"></span>
-        <button class="share-button transparent circle">
-          <input type="hidden" name="url" value="{{Pic.Url}}" />
-          <input type="hidden" name="description" value="{{Pic.Description}}" />
-          <i class="fa-solid fa-share-nodes"></i>
-        </button>
-      </nav>
-      <p class="description">{{Pic.DescriptionHtml}}</p>
-    </div>
-  </article>
-</template>
\ No newline at end of file
diff --git a/Components/StatusCard.razor b/Components/StatusCard.razor
index 9379fcb..dc38226 100644
--- a/Components/StatusCard.razor
+++ b/Components/StatusCard.razor
@@ -1,19 +1,24 @@
-<article class="status gray-9-fg" style="background-color:@status.Background">
+@inject IJSRuntime JS
+
+<article class="status gray-9-fg" style="background-color:@Status.Background">
   <div class="row">
-    <div class="emoji" data-emoji="@status.EmojiOrDefault">@status.EmojiOrDefault</div>
+    <div class="emoji" data-emoji="@Status.EmojiOrDefault">@Status.EmojiOrDefault</div>
     <div class="max">
-      <a class="author" href="/person/@status.Address">
-        <i class="fa-solid fa-fw fa-at"></i>@status.Address
+      <a class="author" href="/person/@Status.Address">
+        <i class="fa-solid fa-fw fa-at"></i>@Status.Address
       </a>
-      @status.HtmlContent
+      @Status.HtmlContent
       <nav class="no-margin">
         <a class="chip transparent-border">
-          <i class="fa fa-clock"></i> @status.RelativeTime
+          <i class="fa fa-clock"></i> @Status.RelativeTime
         </a>
-        <a class="chip transparent-border" href="@status.ExternalUrl" target="_blank">
+        <a class="chip transparent-border" href="@Status.ExternalUrl" target="_blank">
           <i class="fa fa-message-dots"></i> Respond
         </a>
         <div class="max"></div>
+        @if (Editable) {
+          <button @onclick="EditStatus"><i class="fa-solid fa-pencil"></i> Edit</button>
+        }
         <button class="transparent circle" @onclick="ShareClick">
           <i class="fa-solid fa-share-nodes"></i>
         </button>
@@ -24,11 +29,21 @@
 
 @code {
   [Parameter]
-  public Status status { get; set; }
+  public Status Status { get; set; }
+  [Parameter]
+  public bool Editable { get; set; } = false;
+  [Parameter]
+  public EditStatusDialog? Dialog { get; set; }
+
+  private async Task EditStatus(EventArgs e) {
+    Dialog.Status = Status;
+    await InvokeAsync(StateHasChanged);
+    await JS.InvokeVoidAsync("ui", "#" + Dialog?.id);
+  }
 
   public async Task ShareClick(EventArgs e){
     await Share.Default.RequestAsync(new ShareTextRequest{
-      Text = $"{status.Content}\n- from [@{status.Address}]({status.Url})",
+      Text = $"{Status.Content}\n- from [@{Status.Address}]({Status.Url})",
       Title = "I saw this on status.lol",
       Subject = "I saw this on status.lol"
     });
diff --git a/Components/StatusList.razor b/Components/StatusList.razor
index a63b2a1..e18035f 100644
--- a/Components/StatusList.razor
+++ b/Components/StatusList.razor
@@ -1,8 +1,12 @@
 @inject IJSRuntime JS
 @inject State State
 
+@if (Editable) {
+  <EditStatusDialog @ref="Dialog" id="EditStatusModal"></EditStatusDialog>
+}
+
 @if(statuses != null) foreach(Status status in statuses) {
-  <StatusCard status="@status"></StatusCard>
+  <StatusCard Status="@status" Editable="Editable" Dialog="Dialog"></StatusCard>
 }
 
 <LoadingCard id="statusLoading" icon="fa-solid fa-message-smile"></LoadingCard>
@@ -12,6 +16,8 @@
   public Func<Task<List<Status>?>> StatusFunc { get; set; }
   [Parameter]
   public bool Editable { get; set; } = false;
+
+  public EditStatusDialog? Dialog { get; set; }
   
   private List<Status>? statuses;
 
diff --git a/Models/PatchStatus.cs b/Models/PatchStatus.cs
new file mode 100644
index 0000000..24b9936
--- /dev/null
+++ b/Models/PatchStatus.cs
@@ -0,0 +1,13 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Neighbourhood.omg.lol.Models {
+  public class PatchStatus {
+    public string Id { get; set; }
+    public string Content { get; set; }
+    public string? Emoji {  get; set; }
+  }
+}
diff --git a/Models/PatchStatusResponseData.cs b/Models/PatchStatusResponseData.cs
new file mode 100644
index 0000000..5766903
--- /dev/null
+++ b/Models/PatchStatusResponseData.cs
@@ -0,0 +1,13 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Neighbourhood.omg.lol.Models {
+  public class PatchStatusResponseData : IOmgLolResponseData {
+    public string Message { get; set; }
+    public string Id { get; set; }
+    public string Url { get; set; }
+  }
+}
diff --git a/RestService.cs b/RestService.cs
index f4bcc93..33deb3a 100644
--- a/RestService.cs
+++ b/RestService.cs
@@ -94,6 +94,25 @@ namespace Neighbourhood.omg.lol {
       return responseData;
     }
 
+    private async Task<TResponse?> Patch<TResponse, TData>(string uri, TData data, CancellationToken cancellationToken = default) where TResponse : IOmgLolResponseData {
+      TResponse? responseData = default(TResponse);
+      try {
+        HttpResponseMessage response = await _client.PatchAsJsonAsync(uri, data, _serializerOptions, cancellationToken: cancellationToken);
+        string str = await response.Content.ReadAsStringAsync();
+        if (response.IsSuccessStatusCode) {
+          OmgLolResponse<TResponse>? responseObj = await response.Content.ReadFromJsonAsync<OmgLolResponse<TResponse>>(_serializerOptions, cancellationToken: cancellationToken);
+          if (responseObj != null && responseObj.Request.Success) {
+            responseData = responseObj.Response;
+          }
+        }
+      }
+      catch (Exception ex) {
+        Debug.WriteLine(@"\tERROR {0}", ex.Message);
+      }
+
+      return responseData;
+    }
+
     public async Task<List<Status>> StatuslogLatest() =>
       (await Get<StatusResponseData>("/statuslog/latest"))?.Statuses ?? new List<Status>();
 
@@ -148,6 +167,10 @@ namespace Neighbourhood.omg.lol {
     public async Task<PutPicResponseData?> PostPicDescription(string address, string id, string description) =>
       (await Post<PutPicResponseData, PostPic>($"/address/{address}/pics/{id}", new PostPic { Description = description }));
 
+    public async Task<PatchStatusResponseData?> PatchStatus(string address, string id, string content, string? emoji) =>
+      (await Patch<PatchStatusResponseData, PatchStatus>($"/address/{address}/statuses/", new PatchStatus { Id = id, Content = content, Emoji = emoji }));
+
+
     public async Task<List<NowData>?> NowGarden() =>
       (await Get<NowResponseData>($"/now/garden"))?.Garden ?? new List<NowData>();
 
diff --git a/wwwroot/css/style.css b/wwwroot/css/style.css
index f37c14c..b9035eb 100644
--- a/wwwroot/css/style.css
+++ b/wwwroot/css/style.css
@@ -82,7 +82,7 @@ img {
   margin: 0 auto;
 }
 
-.status .emoji, #status-emoji {
+.status .emoji {
   margin-bottom: auto;
   inline-size: 5.5rem;
   block-size: 5.5rem;
@@ -91,6 +91,15 @@ img {
   text-indent: -10px;
 }
 
+#status-emoji {
+  margin-bottom: auto;
+  inline-size: 3.5rem;
+  block-size: 3.5rem;
+  font-size: 3.1rem;
+  line-height: 3.5rem;
+  text-indent: -6px;
+}
+
 :is(h1, h2, h3, h4, h5, h6) :is(i.fa-at, i:only-child){
   margin-right: 0;
   inline-size: auto;