From e4d2c29d9e762e5b85b92c3cc9f37d2bc46d1729 Mon Sep 17 00:00:00 2001
From: Romas Bitinas <93491714+pupixipup@users.noreply.github.com>
Date: Sat, 17 Feb 2024 00:28:11 +0100
Subject: [PATCH] wip: add list of friends
---
.../[username]/profile/ui/card.module.scss | 1 +
.../[username]/profile/ui/friends.module.scss | 24 ++++++
.../(main)/[username]/profile/ui/friends.tsx | 74 ++++++++++++++++++-
client/src/app/(main)/layout.module.scss | 3 +
4 files changed, 101 insertions(+), 1 deletion(-)
create mode 100644 client/src/app/(main)/[username]/profile/ui/friends.module.scss
diff --git a/client/src/app/(main)/[username]/profile/ui/card.module.scss b/client/src/app/(main)/[username]/profile/ui/card.module.scss
index 6fc7e5fc..01dfef8a 100644
--- a/client/src/app/(main)/[username]/profile/ui/card.module.scss
+++ b/client/src/app/(main)/[username]/profile/ui/card.module.scss
@@ -1,5 +1,6 @@
.card {
background: rgba(26, 28, 34, 1);
border-radius: 15px;
+ overflow: hidden;
padding: 32px;
}
diff --git a/client/src/app/(main)/[username]/profile/ui/friends.module.scss b/client/src/app/(main)/[username]/profile/ui/friends.module.scss
new file mode 100644
index 00000000..539f9c23
--- /dev/null
+++ b/client/src/app/(main)/[username]/profile/ui/friends.module.scss
@@ -0,0 +1,24 @@
+.avatar {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ border: 2px solid rgba(26, 28, 34, 1);
+}
+
+.friend {
+ margin-left: -10px;
+ &:first-of-type {
+ margin-left: 0;
+ }
+}
+
+.friends_container {
+ max-width: 100%;
+ width: 100%;
+ height: 40px;
+ overflow: hidden;
+}
+
+.friends_label {
+ margin-left: 3px;
+}
\ No newline at end of file
diff --git a/client/src/app/(main)/[username]/profile/ui/friends.tsx b/client/src/app/(main)/[username]/profile/ui/friends.tsx
index 818711b5..2477c45c 100644
--- a/client/src/app/(main)/[username]/profile/ui/friends.tsx
+++ b/client/src/app/(main)/[username]/profile/ui/friends.tsx
@@ -1,5 +1,77 @@
+import { useGetFriends } from '@/entities/session';
import { Card } from './card';
+import { useParams } from 'next/navigation';
+import { useGetUserByName } from '../lib/useGetUserByName';
+import { CardSkeleton, Flex, ImageLoader, Typography } from '@/shared/ui';
+import styles from './friends.module.scss';
+import { ArrowRightIcon } from '@/shared/assets';
export const Friends = () => {
- return Friends here;
+ const { username } = useParams();
+ const { data: user } = useGetUserByName(username as string);
+ const { data: friends } = useGetFriends(user!.id);
+ const friendshipList = friends?.data;
+
+ if (!friends || !friendshipList) {
+ return ;
+ }
+
+ let friendsContainer = (
+
+ List is empty.
+
+ );
+ if (friendshipList.length) {
+ const noun = friendshipList.length === 1 ? 'friend' : 'friends';
+ const friendsList = friendshipList.map(friendship => {
+ const { receiver, creator } = friendship;
+ if (receiver.id !== user?.id) return receiver;
+ return creator;
+ });
+ friendsContainer = (
+
+
+
+ {friendshipList.length}
+ {noun}
+
+
+
+
+ {friendsList.slice(0, 8).map(friend => (
+
+
+
+ ))}
+
+
+ );
+ }
+ return (
+
+
+
+ Friends
+
+ {friendsContainer}
+
+
+ );
};
diff --git a/client/src/app/(main)/layout.module.scss b/client/src/app/(main)/layout.module.scss
index d56a3890..13379f66 100644
--- a/client/src/app/(main)/layout.module.scss
+++ b/client/src/app/(main)/layout.module.scss
@@ -24,4 +24,7 @@
.placeholder {
width: 93px;
flex-shrink: 0;
+ @media (max-width: 768px) {
+ display: none;
+ }
}
\ No newline at end of file