Show received friend request count in sidebar

pull/4317/head
Kamran Ahmed 1 year ago
parent 1d716a9438
commit 3a09982ff6
  1. 16
      src/components/AccountSidebar.astro
  2. 6
      src/components/Friends/EmptyFriends.tsx
  3. 4
      src/components/Friends/FriendsPage.tsx
  4. 46
      src/components/Friends/SidebarFriendsCounter.tsx

@ -1,6 +1,7 @@
--- ---
import AstroIcon from './AstroIcon.astro'; import AstroIcon from './AstroIcon.astro';
import { TeamDropdown } from './TeamDropdown/TeamDropdown'; import { TeamDropdown } from './TeamDropdown/TeamDropdown';
import { SidebarFriendsCounter } from './Friends/SidebarFriendsCounter';
export interface Props { export interface Props {
activePageId: string; activePageId: string;
@ -142,12 +143,18 @@ const sidebarLinks = [
{sidebarLink.title} {sidebarLink.title}
</span> </span>
{sidebarLink.isNew && !isActive && ( {sidebarLink.isNew &&
sidebarLink.id !== 'friends' &&
!isActive && (
<span class='relative mr-1 flex items-center'> <span class='relative mr-1 flex items-center'>
<span class='relative rounded-full bg-gray-200 p-1 text-xs' /> <span class='relative rounded-full bg-gray-200 p-1 text-xs' />
<span class='absolute bottom-0 left-0 right-0 top-0 animate-ping rounded-full bg-gray-400 p-1 text-xs' /> <span class='absolute bottom-0 left-0 right-0 top-0 animate-ping rounded-full bg-gray-400 p-1 text-xs' />
</span> </span>
)} )}
{sidebarLink.id === 'friends' && (
<SidebarFriendsCounter client:load />
)}
</a> </a>
</li> </li>
); );
@ -159,7 +166,12 @@ const sidebarLinks = [
} }
<!-- /End Desktop Sidebar --> <!-- /End Desktop Sidebar -->
<div class:list={['grow px-0 py-0 md:py-10', { 'md:px-10': hasDesktopSidebar, 'md:px-5': !hasDesktopSidebar }]}> <div
class:list={[
'grow px-0 py-0 md:py-10',
{ 'md:px-10': hasDesktopSidebar, 'md:px-5': !hasDesktopSidebar },
]}
>
<slot /> <slot />
</div> </div>
</div> </div>

@ -19,8 +19,8 @@ export function EmptyFriends(props: EmptyFriendsProps) {
class="mb-2 h-[60px] w-[60px] opacity-10 sm:h-[120px] sm:w-[120px]" 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> <h2 class="text-lg font-bold sm:text-xl">Invite your Friends</h2>
<p className="mb-4 mt-1 max-w-[400px] text-sm leading-loose text-gray-500"> <p className="mb-4 mt-1 max-w-[400px] text-sm leading-relaxed text-gray-500">
Invite your friends to join you on your learning journey. Share the unique link below with your friends to track their skills and progress.
</p> </p>
<div class="flex w-full max-w-[352px] items-center justify-center gap-2 rounded-lg border-2 p-1 text-sm"> <div class="flex w-full max-w-[352px] items-center justify-center gap-2 rounded-lg border-2 p-1 text-sm">
@ -35,7 +35,7 @@ export function EmptyFriends(props: EmptyFriendsProps) {
readonly readonly
/> />
<button <button
class={`flex items-center justify-center gap-1 rounded-md border-0 p-2 px-3 text-sm text-black ${ class={`flex items-center justify-center gap-1 rounded-md border-0 p-2 px-4 text-sm text-black ${
isCopied isCopied
? 'bg-green-300 hover:bg-green-300' ? 'bg-green-300 hover:bg-green-300'
: 'bg-gray-200 hover:bg-gray-300' : 'bg-gray-200 hover:bg-gray-300'

@ -85,10 +85,6 @@ export function FriendsPage() {
: 'https://roadmap.sh'; : 'https://roadmap.sh';
const befriendUrl = `${baseUrl}/befriend?u=${user?.id}`; const befriendUrl = `${baseUrl}/befriend?u=${user?.id}`;
if (friends.length === 0) {
return <EmptyFriends befriendUrl={befriendUrl} />;
}
const selectedGroupingType = groupingTypes.find( const selectedGroupingType = groupingTypes.find(
(grouping) => grouping.value === selectedGrouping (grouping) => grouping.value === selectedGrouping
); );

@ -0,0 +1,46 @@
import { httpGet } from '../../lib/http';
import type { TeamListResponse } from '../TeamDropdown/TeamDropdown';
import { useEffect, useState } from 'preact/hooks';
type GetFriendCountsResponse = {
sentCount: number;
acceptedCount: number;
receivedCount: number;
rejectedCount: number;
gotRejectedCount: number;
};
export function SidebarFriendsCounter() {
const [friendCounts, setFriendCounts] = useState<GetFriendCountsResponse>();
async function getFriendCounts() {
const { response, error } = await httpGet<GetFriendCountsResponse>(
`${import.meta.env.PUBLIC_API_URL}/v1-get-friend-counts`
);
if (error || !response) {
return;
}
setFriendCounts(response);
}
useEffect(() => {
getFriendCounts().finally(() => null);
}, []);
const pendingCount = friendCounts?.receivedCount || 0;
if (!pendingCount) {
return (
<span class="relative mr-1 flex items-center">
<span class="relative rounded-full bg-gray-200 p-1 text-xs" />
<span class="absolute bottom-0 left-0 right-0 top-0 animate-ping rounded-full bg-gray-400 p-1 text-xs" />
</span>
);
}
return (
<span class="flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-xs font-medium text-white">
{pendingCount}
</span>
);
}
Loading…
Cancel
Save