Friends and notification pages

1 year ago · b47f712dec
parent 2f07d5edf0
commit b47f712dec
5 changed files with 82 additions and 49 deletions
--- a/src/components/Friends/FriendsPage.tsx
+++ b/src/components/Friends/FriendsPage.tsx
@ -7,10 +7,10 @@ import type { FriendshipStatus } from '../Befriend';
 import { useToast } from '../../hooks/use-toast';
 import { EmptyFriends } from './EmptyFriends';
 import { FriendProgressItem } from './FriendProgressItem';
-import UserIcon from '../../icons/user.svg';
 import { UserProgressModal } from '../UserProgress/UserProgressModal';
 import { InviteFriendPopup } from './InviteFriendPopup';
 import { UserCustomProgressModal } from '../UserProgress/UserCustomProgressModal';
+import { UserIcon } from '../ReactIcons/UserIcon.tsx';

 type FriendResourceProgress = {
  updatedAt: string;
@ -64,7 +64,7 @@ export function FriendsPage() {

  async function loadFriends() {
    const { response, error } = await httpGet<ListFriendsResponse>(
-      `${import.meta.env.PUBLIC_API_URL}/v1-list-friends`
+      `${import.meta.env.PUBLIC_API_URL}/v1-list-friends`,
    );

    if (error || !response) {
@ -89,15 +89,15 @@ export function FriendsPage() {
  const befriendUrl = `${baseUrl}/befriend?u=${user?.id}`;

  const selectedGroupingType = groupingTypes.find(
-    (grouping) => grouping.value === selectedGrouping
+    (grouping) => grouping.value === selectedGrouping,
  );

-  const filteredFriends = friends.filter((friend) =>
-    selectedGroupingType?.statuses.includes(friend.status)
+  const filteredFriends = friends.filter(
+    (friend) => selectedGroupingType?.statuses.includes(friend.status),
  );

  const receivedRequests = friends.filter(
-    (friend) => friend.status === 'received'
+    (friend) => friend.status === 'received',
  );

  if (isLoading) {
@ -203,11 +203,8 @@ export function FriendsPage() {

      {filteredFriends.length === 0 && (
        <div className="flex flex-col items-center justify-center py-12">
-          <img
-            src={UserIcon.src}
-            alt="Empty Friends"
-            className="mb-3 w-12 opacity-20"
-          />
+          <UserIcon className="mb-3 w-12 opacity-20" />
+
          <h2 className="text-lg font-semibold">
            {selectedGrouping === 'active' && 'No friends yet'}
            {selectedGrouping === 'sent' && 'No requests sent'}
--- a/src/components/Friends/InviteFriendPopup.tsx
+++ b/src/components/Friends/InviteFriendPopup.tsx
@ -2,7 +2,7 @@ import type { MouseEvent } from 'react';
 import { useRef } from 'react';
 import { useOutsideClick } from '../../hooks/use-outside-click';
 import { useCopyText } from '../../hooks/use-copy-text';
-import { Copy } from 'lucide-react';
+import { CopyIcon } from 'lucide-react';

 type InviteFriendPopupProps = {
  befriendUrl: string;
@ -54,7 +54,7 @@ export function InviteFriendPopup(props: InviteFriendPopupProps) {
                copyText(befriendUrl);
              }}
            >
-              <Copy className="h-4 w-4" />
+              <CopyIcon className="mr-1 h-4 w-4" />
              {isCopied ? 'Copied' : 'Copy URL'}
            </button>
          </div>
--- a/src/components/Notification/NotificationPage.tsx
+++ b/src/components/Notification/NotificationPage.tsx
@ -1,10 +1,10 @@
 import { useEffect, useState } from 'react';
-import { httpGet, httpPatch, httpPost } from '../../lib/http';
+import { httpGet, httpPatch } from '../../lib/http';
 import { pageProgressMessage } from '../../stores/page';
 import type { TeamMemberDocument } from '../TeamMembers/TeamMembersPage';
 import XIcon from '../../icons/close-dark.svg';
-import AcceptIcon from '../../icons/accept.svg';
 import { useToast } from '../../hooks/use-toast';
+import { AcceptIcon } from '../ReactIcons/AcceptIcon.tsx';

 interface NotificationList extends TeamMemberDocument {
  name: string;
@ -18,7 +18,7 @@ export function NotificationPage() {

  const lostNotifications = async () => {
    const { error, response } = await httpGet<NotificationList[]>(
-      `${import.meta.env.PUBLIC_API_URL}/v1-get-invitation-list`
+      `${import.meta.env.PUBLIC_API_URL}/v1-get-invitation-list`,
    );
    if (error || !response) {
      toast.error(error?.message || 'Something went wrong');
@ -28,28 +28,37 @@ export function NotificationPage() {
    setNotifications(response);
  };

-  async function respondInvitation(status: 'accept' | 'reject', inviteId: string) {
+  async function respondInvitation(
+    status: 'accept' | 'reject',
+    inviteId: string,
+  ) {
    setIsLoading(true);
    setError('');
    const { response, error } = await httpPatch<{ teamId: string }>(
-      `${import.meta.env.PUBLIC_API_URL}/v1-respond-invite/${inviteId}`, {
-      status
-    });
+      `${import.meta.env.PUBLIC_API_URL}/v1-respond-invite/${inviteId}`,
+      {
+        status,
+      },
+    );
    if (error || !response) {
-      setError(error?.message || 'Something went wrong')
-      setIsLoading(false)
+      setError(error?.message || 'Something went wrong');
+      setIsLoading(false);
      return;
    }

    if (status === 'accept') {
      window.location.href = `/team/progress?t=${response.teamId}`;
    } else {
-      window.dispatchEvent(new CustomEvent('refresh-notification', {
-        detail: {
-          count: notifications.length - 1
-        }
-      }));
-      setNotifications(notifications.filter((notification) => notification._id !== inviteId));
+      window.dispatchEvent(
+        new CustomEvent('refresh-notification', {
+          detail: {
+            count: notifications.length - 1,
+          },
+        }),
+      );
+      setNotifications(
+        notifications.filter((notification) => notification._id !== inviteId),
+      );
      setIsLoading(false);
    }
  }
@ -66,15 +75,20 @@ export function NotificationPage() {
        <h2 className="text-3xl font-bold sm:text-4xl">Notification</h2>
        <p className="mt-2 text-gray-400">Manage your notifications</p>
      </div>
-      {
-        notifications.length === 0 && (
-          <div className="flex items-center justify-center mt-6">
-            <p className="text-gray-400">
-              No notifications, you can <a href="/team/new" className="text-blue-500 underline hover:no-underline">create a team</a> and invite your friends to join.
-            </p>
-          </div>
-        )
-      }
+      {notifications.length === 0 && (
+        <div className="mt-6 flex items-center justify-center">
+          <p className="text-gray-400">
+            No notifications, you can{' '}
+            <a
+              href="/team/new"
+              className="text-blue-500 underline hover:no-underline"
+            >
+              create a team
+            </a>{' '}
+            and invite your friends to join.
+          </p>
+        </div>
+      )}
      <div className="space-y-4">
        {notifications.map((notification) => (
          <div className="flex items-center justify-between rounded-md border p-2">
@ -86,16 +100,18 @@ export function NotificationPage() {
              </div>
            </div>
            <div className="flex items-center space-x-2">
-              <button type="button"
+              <button
+                type="button"
                disabled={isLoading}
-                className="inline-flex border p-1 rounded hover:bg-gray-50 disabled:opacity-75"
+                className="inline-flex rounded border p-1 hover:bg-gray-50 disabled:opacity-75"
                onClick={() => respondInvitation('accept', notification?._id!)}
              >
-                <img src={AcceptIcon.src} className="h-4 w-4" />
+                <AcceptIcon className="h-4 w-4" />
              </button>
-              <button type="button"
+              <button
+                type="button"
                disabled={isLoading}
-                className="inline-flex border p-1 rounded hover:bg-gray-50 disabled:opacity-75"
+                className="inline-flex rounded border p-1 hover:bg-gray-50 disabled:opacity-75"
                onClick={() => respondInvitation('reject', notification?._id!)}
              >
                <img alt={'Close'} src={XIcon.src} className="h-4 w-4" />
--- a/src/components/ReactIcons/AcceptIcon.tsx
+++ b/src/components/ReactIcons/AcceptIcon.tsx
@ -0,0 +1,24 @@
+type AcceptIconProps = {
+  className?: string;
+};
+
+export function AcceptIcon(props: AcceptIconProps) {
+  const { className } = props;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth="2"
+      stroke="#000"
+      className={className}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M4.5 12.75l6 6 9-13.5"
+      />
+    </svg>
+  );
+}
--- a/src/components/TeamProgress/GroupRoadmapItem.tsx
+++ b/src/components/TeamProgress/GroupRoadmapItem.tsx
@ -1,8 +1,8 @@
 import { useState } from 'react';
 import type { GroupByRoadmap, TeamMember } from './TeamProgressPage';
 import { getUrlParams } from '../../lib/browser';
-import ExternalLinkIcon from '../../icons/external-link.svg';
 import { useAuth } from '../../hooks/use-auth';
+import { LucideExternalLink } from 'lucide-react';

 type GroupRoadmapItemProps = {
  roadmap: GroupByRoadmap;
@ -33,11 +33,7 @@ export function GroupRoadmapItem(props: GroupRoadmapItemProps) {
              className="group mb-0.5 flex shrink-0 items-center justify-between text-base font-medium leading-none text-black"
              target={'_blank'}
            >
-              <img
-                alt={'link'}
-                src={ExternalLinkIcon.src}
-                className="ml-2 h-4 w-4 opacity-20 transition-opacity group-hover:opacity-100"
-              />
+              <LucideExternalLink className="h-4 w-4 opacity-20 transition-opacity group-hover:opacity-100" />
            </a>
          </div>
        </div>
@ -58,7 +54,7 @@ export function GroupRoadmapItem(props: GroupRoadmapItemProps) {
                onClick={() => {
                  onShowResourceProgress(
                    member.member,
-                    member.progress?.resourceId!
+                    member.progress?.resourceId!,
                  );
                }}
              >