From 9ed60d836afe1920c3208daed18a62944fa1ed8c Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Fri, 4 Aug 2023 18:23:43 +0100
Subject: [PATCH] Add friends invite page

---
 src/components/AccountSidebar.astro           | 10 ++++
 src/components/Authenticator/authenticator.ts |  3 +-
 src/components/Friends/EmptyFriends.tsx       | 48 +++++++++++++++++++
 src/components/Friends/FriendsPage.tsx        | 34 +++++++++++++
 src/icons/user-plus.svg                       |  1 +
 src/pages/account/friends.astro               | 15 ++++++
 6 files changed, 110 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Friends/EmptyFriends.tsx
 create mode 100644 src/components/Friends/FriendsPage.tsx
 create mode 100644 src/icons/user-plus.svg
 create mode 100644 src/pages/account/friends.astro

diff --git a/src/components/AccountSidebar.astro b/src/components/AccountSidebar.astro
index ca3c72acb..440283fdf 100644
--- a/src/components/AccountSidebar.astro
+++ b/src/components/AccountSidebar.astro
@@ -31,6 +31,16 @@ const sidebarLinks = [
       classes: 'h-4 w-4',
     },
   },
+  // {
+  //   href: '/account/friends',
+  //   title: 'Friends',
+  //   id: 'friends',
+  //   isNew: true,
+  //   icon: {
+  //     glyph: 'users',
+  //     classes: 'h-4 w-4',
+  //   },
+  // },
   {
     href: '/account/update-profile',
     title: 'Profile',
diff --git a/src/components/Authenticator/authenticator.ts b/src/components/Authenticator/authenticator.ts
index 91860b30e..9ec312c58 100644
--- a/src/components/Authenticator/authenticator.ts
+++ b/src/components/Authenticator/authenticator.ts
@@ -37,13 +37,14 @@ function handleGuest() {
     '/account/update-password',
     '/account/settings',
     '/account/road-card',
+    '/account/friends',
     '/account',
     '/team',
     '/team/progress',
     '/team/roadmaps',
     '/team/new',
     '/team/members',
-    '/team/settings'
+    '/team/settings',
   ];
 
   showHideAuthElements('hide');
diff --git a/src/components/Friends/EmptyFriends.tsx b/src/components/Friends/EmptyFriends.tsx
new file mode 100644
index 000000000..1c9fdc0f0
--- /dev/null
+++ b/src/components/Friends/EmptyFriends.tsx
@@ -0,0 +1,48 @@
+import UserPlusIcon from '../../icons/user-plus.svg';
+import CopyIcon from '../../icons/copy.svg';
+import { useAuth } from '../../hooks/use-auth';
+import { useCopyText } from '../../hooks/use-copy-text';
+
+export function EmptyFriends() {
+  const user = useAuth();
+  const { isCopied, copyText } = useCopyText();
+  const befriendUrl = `https://roadmap.sh/befriend?u=${user?.id}`;
+
+  return (
+    <div class="rounded-md">
+      <div class="flex flex-col items-center p-7 text-center max-w-[450px] mx-auto">
+        <img
+          alt="no friends"
+          src={UserPlusIcon}
+          class="mb-2 h-[60px] w-[60px] opacity-10 sm:h-[120px] sm:w-[120px]"
+        />
+        <h2 class="text-lg font-bold sm:text-xl">Invite your Friends</h2>
+        <p className="mb-4 mt-1 max-w-[400px] text-sm text-gray-500">
+          Share the link below with your friends to invite them
+        </p>
+
+        <div class="flex w-full items-center justify-center gap-2 rounded-lg border-2 p-1 text-sm">
+          <input
+            onClick={(e) => {
+              e.currentTarget.select();
+              copyText(befriendUrl);
+            }}
+            type="text"
+            value={befriendUrl}
+            class="w-full border-none bg-transparent px-1.5 outline-none"
+            readonly
+          />
+          <button
+            class={`flex items-center justify-center gap-1 rounded-md border-0 p-2 px-3 text-sm text-black ${isCopied ? 'bg-green-300 hover:bg-green-300' : 'bg-gray-200 hover:bg-gray-300'}`}
+            onClick={() => {
+              copyText(befriendUrl);
+            }}
+          >
+            <img src={CopyIcon} className="h-4 w-4" alt="Invite Friends" />
+            {isCopied ? 'Copied' : 'Copy'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Friends/FriendsPage.tsx b/src/components/Friends/FriendsPage.tsx
new file mode 100644
index 000000000..36237aad9
--- /dev/null
+++ b/src/components/Friends/FriendsPage.tsx
@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'preact/hooks';
+import CopyIcon from '../../icons/copy.svg';
+import UserPlus from '../../icons/user-plus.svg';
+import { pageProgressMessage } from '../../stores/page';
+import { useAuth } from '../../hooks/use-auth';
+import {EmptyFriends} from "./EmptyFriends";
+
+export function FriendsPage() {
+  const user = useAuth();
+
+  useEffect(() => {
+    pageProgressMessage.set('');
+  }, []);
+
+  const baseUrl = import.meta.env.DEV
+    ? 'http://localhost:3000'
+    : 'https://roadmap.sh';
+  const befriendUrl = `${baseUrl}/befriend?u=${user?.id}`;
+
+  return <EmptyFriends />
+  return (
+    <div>
+      <div className="mb-4 flex items-center justify-between">
+        <span className={'text-sm text-gray-400'}>
+          You have 4 friends on Roadmap.sh
+        </span>
+        <button class="flex items-center justify-center gap-2 rounded-md border border-gray-400 bg-gray-50 p-1 px-2 text-sm hover:border-gray-500 hover:bg-gray-100">
+          <img src={UserPlus} className="h-4 w-4" alt="Invite Friends" />
+          Invite Friends
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/icons/user-plus.svg b/src/icons/user-plus.svg
new file mode 100644
index 000000000..e2893d04a
--- /dev/null
+++ b/src/icons/user-plus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user-plus-2"><path d="M14 19a6 6 0 0 0-12 0"/><circle cx="8" cy="9" r="4"/><line x1="19" x2="19" y1="8" y2="14"/><line x1="22" x2="16" y1="11" y2="11"/></svg>
\ No newline at end of file
diff --git a/src/pages/account/friends.astro b/src/pages/account/friends.astro
new file mode 100644
index 000000000..8a7fed1e1
--- /dev/null
+++ b/src/pages/account/friends.astro
@@ -0,0 +1,15 @@
+---
+import AccountSidebar from '../../components/AccountSidebar.astro';
+import AccountLayout from '../../layouts/AccountLayout.astro';
+import { FriendsPage } from '../../components/Friends/FriendsPage';
+---
+
+<AccountLayout
+  title='Friends'
+  noIndex={true}
+  initialLoadingMessage='Loading friends'
+>
+  <AccountSidebar activePageId='friends' activePageTitle='Friends'>
+    <FriendsPage client:load />
+  </AccountSidebar>
+</AccountLayout>