From 1d716a9438d4dbb5a53fae17e028244dc07beebe Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Tue, 8 Aug 2023 21:30:33 +0100
Subject: [PATCH] Add confirmation on withdraw request

---
 src/components/Friends/FriendProgressItem.tsx | 56 +++++++++++++------
 1 file changed, 40 insertions(+), 16 deletions(-)

diff --git a/src/components/Friends/FriendProgressItem.tsx b/src/components/Friends/FriendProgressItem.tsx
index 6b0445dd5..c821f4e50 100644
--- a/src/components/Friends/FriendProgressItem.tsx
+++ b/src/components/Friends/FriendProgressItem.tsx
@@ -238,22 +238,46 @@ export function FriendProgressItem(props: FriendProgressItemProps) {
                 Request Sent
               </span>
             </div>
-            <span class="flex cursor-default items-center justify-center border-t py-2 text-center text-sm">
-              <button
-                className="ml-2 flex items-center font-medium text-red-700 underline underline-offset-2 hover:text-red-500"
-                onClick={() => {
-                  deleteFriend(
-                    friend.userId,
-                    'Friend request withdrawn'
-                  ).finally(() => {
-                    pageProgressMessage.set('');
-                  });
-                }}
-              >
-                <TrashIcon className="mr-1 h-4 w-4" />
-                Withdraw Request
-              </button>
-            </span>
+            <>
+              {isConfirming !== 'sent' && (
+                <button
+                  className="flex w-full items-center justify-center border-t py-2 text-sm font-medium text-red-700 hover:bg-red-50/50 hover:text-red-500"
+                  onClick={() => {
+                    setIsConfirming('sent');
+                  }}
+                >
+                  <TrashIcon className="mr-1 h-4 w-4" />
+                  Withdraw Request
+                </button>
+              )}
+
+              {isConfirming === 'sent' && (
+                <span className="flex w-full items-center justify-center border-t py-2 text-sm text-red-700">
+                  Are you sure?{' '}
+                  <button
+                    className="ml-2 font-medium text-red-700 underline underline-offset-2 hover:text-red-500"
+                    onClick={() => {
+                      deleteFriend(
+                        friend.userId,
+                        'Friend request withdrawn'
+                      ).finally(() => {
+                        pageProgressMessage.set('');
+                      });
+                    }}
+                  >
+                    Yes
+                  </button>{' '}
+                  <button
+                    className="ml-2 font-medium text-red-700 underline underline-offset-2 hover:text-red-500"
+                    onClick={() => {
+                      setIsConfirming(undefined);
+                    }}
+                  >
+                    No
+                  </button>
+                </span>
+              )}
+            </>
           </>
         )}