From 954d42d3552456e2187fb401d8804cc80f24c839 Mon Sep 17 00:00:00 2001
From: Lilian <lilian@blahaj.space>
Date: Wed, 10 Jul 2024 19:19:07 +0200
Subject: [PATCH] [frontend] Add follow button

---
 .../Components/FollowButton.razor             | 111 ++++++++++++++++++
 .../Components/FollowButton.razor.css         |  17 +++
 Iceshrimp.Frontend/Pages/ProfileView.razor    |  27 +++--
 .../Pages/ProfileView.razor.css               |   5 +
 4 files changed, 148 insertions(+), 12 deletions(-)
 create mode 100644 Iceshrimp.Frontend/Components/FollowButton.razor
 create mode 100644 Iceshrimp.Frontend/Components/FollowButton.razor.css

diff --git a/Iceshrimp.Frontend/Components/FollowButton.razor b/Iceshrimp.Frontend/Components/FollowButton.razor
new file mode 100644
index 00000000..e1819412
--- /dev/null
+++ b/Iceshrimp.Frontend/Components/FollowButton.razor
@@ -0,0 +1,111 @@
+@using Iceshrimp.Frontend.Localization
+@using Iceshrimp.Shared.Schemas.Web
+@using Microsoft.Extensions.Localization
+@using Iceshrimp.Assets.PhosphorIcons
+@using Iceshrimp.Frontend.Core.Services
+@inject IStringLocalizer<Localization> Loc;
+@inject ApiService                     Api;
+<span class="follow-button">
+    <button @onclick="Action" class="btn">
+        @switch (_buttonType)
+        {
+            case ButtonType.Follow:
+                <span class="text">@Loc["Follow"]</span>
+                <Icon ExtraClasses="icon" Name="Icons.Plus"/>
+                break;
+            case ButtonType.Unfollow:
+                <span class="text">@Loc["Unfollow"]</span>
+                <Icon ExtraClasses="icon" Name="Icons.Minus"/>
+                break;
+            case ButtonType.FollowBack:
+                <span class="text">@Loc["Follow back"]</span>
+                <Icon ExtraClasses="icon" Name="Icons.Plus"/>
+                break;
+            case ButtonType.CancelRequest:
+                <span class="text">@Loc["Cancel request"]</span>
+                <Icon ExtraClasses="icon" Name="Icons.X"/>
+                break;
+        }
+    </button>
+</span>
+
+@code {
+    [Parameter] [EditorRequired] public required UserResponse        User        { get; set; }
+    [Parameter] [EditorRequired] public required UserProfileResponse UserProfile { get; set; }
+    private                                      ButtonType          _buttonType;
+
+    protected override async Task OnInitializedAsync()
+    {
+        ChooseButton();
+        Console.WriteLine(UserProfile.Relations);
+    }
+
+    private enum ButtonType
+    {
+        Follow,
+        Unfollow,
+        FollowBack,
+        FollowLocked,
+        CancelRequest
+    }
+
+    private void Action()
+    {
+        switch (_buttonType)
+        {
+            case ButtonType.Follow:
+                Follow();
+                break;
+            case ButtonType.FollowBack:
+                Follow();
+                break;
+            case ButtonType.Unfollow or ButtonType.CancelRequest:
+                Unfollow();
+                break;
+        }
+    }
+
+    private async void Unfollow()
+    {
+        Console.WriteLine("Unfollowing");
+        await Api.Users.UnfollowUser(User.Id);
+        UserProfile.Relations -= (int)Relations.Following;
+        ChooseButton();
+        StateHasChanged();
+    }
+
+    private async void Follow()
+    {
+        Console.WriteLine("Following");
+        await Api.Users.FollowUser(User.Id);
+        UserProfile.Relations += (int)Relations.Requested;
+        ChooseButton();
+        StateHasChanged();
+        UserProfile = await Api.Users.GetUserProfile(UserProfile.Id) ?? throw new Exception("How did it stop existing");
+        ChooseButton();
+        StateHasChanged();
+    }
+
+    private void ChooseButton()
+    {
+        if (UserProfile.Relations == Relations.None)
+        {
+            _buttonType = ButtonType.Follow;
+        }
+
+        if (UserProfile.Relations.HasFlag(Relations.FollowedBy))
+        {
+            _buttonType = ButtonType.FollowBack;
+        }
+
+        if (UserProfile.Relations.HasFlag(Relations.Following))
+        {
+            _buttonType = ButtonType.Unfollow;
+        }
+
+        if (UserProfile.Relations.HasFlag(Relations.Requested))
+        {
+            _buttonType = ButtonType.CancelRequest;
+        }
+    }
+}
\ No newline at end of file
diff --git a/Iceshrimp.Frontend/Components/FollowButton.razor.css b/Iceshrimp.Frontend/Components/FollowButton.razor.css
new file mode 100644
index 00000000..d1243371
--- /dev/null
+++ b/Iceshrimp.Frontend/Components/FollowButton.razor.css
@@ -0,0 +1,17 @@
+.btn {
+    border-radius: 1rem;
+    border: var(--notice-color) solid 0.1rem;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+}
+.text {
+    margin-right: 0.5rem;
+}
+
+.follow-button {
+    display: flex;
+    align-items: center;
+}
+::deep {.icon {
+    vertical-align: text-bottom;
+}}
\ No newline at end of file
diff --git a/Iceshrimp.Frontend/Pages/ProfileView.razor b/Iceshrimp.Frontend/Pages/ProfileView.razor
index 7c099ff8..0d8f5c64 100644
--- a/Iceshrimp.Frontend/Pages/ProfileView.razor
+++ b/Iceshrimp.Frontend/Pages/ProfileView.razor
@@ -12,20 +12,23 @@
     <div class="scroller">
         <div class="profile-card">
             <div class="header">
-                <div>
-                    <img class="avatar" src="@UserResponse.AvatarUrl"/>
-                </div>
-                <div class="name-section">
-                    <div class="name">@UserResponse.DisplayName</div>
-                    <div class="identifier">
-                        @@@UserResponse.Username
-                        @if (UserResponse.Host != null)
-                        {
-                            var host = $"@{UserResponse.Host}";
-                            @host
-                        }
+                <div class="subheader">
+                    <div>
+                        <img class="avatar" src="@UserResponse.AvatarUrl"/>
+                    </div>
+                    <div class="name-section">
+                        <div class="name">@UserResponse.DisplayName</div>
+                        <div class="identifier">
+                            @@@UserResponse.Username
+                            @if (UserResponse.Host != null)
+                            {
+                                var host = $"@{UserResponse.Host}";
+                                @host
+                            }
+                        </div>
                     </div>
                 </div>
+                <FollowButton User="UserResponse" UserProfile="Profile"/>
             </div>
             <ProfileInfo UserProfile="Profile"/>
         </div>
diff --git a/Iceshrimp.Frontend/Pages/ProfileView.razor.css b/Iceshrimp.Frontend/Pages/ProfileView.razor.css
index 6fbe1eb8..2f5d5d73 100644
--- a/Iceshrimp.Frontend/Pages/ProfileView.razor.css
+++ b/Iceshrimp.Frontend/Pages/ProfileView.razor.css
@@ -6,6 +6,11 @@
 
 .header {
     display: flex;
+    justify-content: space-between;
+}
+
+.subheader {
+    display: flex;
 }
 
 .name-section {