Add friends page

src/main/web/src/scenes/Friends/UserFriend.css

@@ -0,0 +1,33 @@
+.user-container {
+    font-size: var(--headline-font-size);
+    align-items: center;
+    text-align: center;
+    border-radius: 25px;
+    background-color: var(--grey);
+    justify-content: center;
+    width: 120px;
+    padding: 10px;
+    color: white;
+}
+
+.user-image {
+    width: 100px;
+    height: 100px;
+    border-radius: 50px;
+    object-fit: cover;
+}
+
+.custom-image {
+    width: 100px;
+    height: 100px;
+    border-radius: 50px;
+    object-fit: cover;
+}
+
+.user-button {
+    text-decoration: none;
+    color: inherit;
+}
+.user-name{
+    padding-top: 10px;
+}

src/main/web/src/scenes/Friends/UserFriend.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import './UserFriend.css';
+import {Link} from "react-router-dom";
+import {UserFriendModel} from "./models/UserFriendModel";
+import {getDefaultOrRandomPicture} from "../../atoms/Pictures/PicturesComponent";
+
+export const UserFriend: React.FC<UserFriendModel> = (props: UserFriendModel) => {
+    const {
+        userId,
+        username,
+        image,
+    } = props;
+
+    const truncatedUsername = username.length > 17 ? username.slice(0, 15) + "..." : username;
+
+    return (
+        <div className="user-container">
+            <Link to={`/user/?id=${userId}`} aria-label="To the user" className="user-button">
+                {image ? (
+                    <img className="user-image" alt={username} src={image} loading="lazy"/>
+                ) : (
+                    <img className="custom-image" alt={"random"} src={getDefaultOrRandomPicture(false)}/>
+                )}
+                <div className="user-name">{truncatedUsername}</div>
+            </Link>
+        </div>
+    );
+}

src/main/web/src/scenes/Friends/index.css

@@ -0,0 +1,69 @@
+.friends-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 20px;
+}
+
+.friend-list-container {
+  width: 780px;
+  background-color: var(--component-grey);
+  padding: 20px;
+  border-radius: 10px;
+}
+
+.friends-title {
+  font-size: 24px;
+  margin-bottom: 20px;
+  color: #fff;
+  text-align: left;
+}
+
+.friend-list {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
+  gap: 10px;
+}
+
+.friend-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 10px;
+}
+
+.friend-avatar {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  margin-bottom: 10px;
+}
+
+.friend-name {
+  font-size: 14px;
+  text-align: center;
+}
+
+@media (max-width: 412px) {
+  .friend-list-container {
+    width: auto;
+    margin: 10px;
+  }
+
+  .friend-item {
+    margin: 5px;
+  }
+
+  .search-results {
+    margin-left: 20px;
+    margin-top: -5px;
+  }
+}
+
+.animation {
+  width: 780px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

src/main/web/src/scenes/Friends/index.tsx

@@ -1,25 +1,118 @@
-import React from "react";
+import React, {useMemo, useEffect, useState} from "react";
 import "./index.css";
+import Lottie from "lottie-react";
 import {Header} from "../../organisms/header/Header";
 import {Footer} from "../../organisms/footer/Footer";
 import AdBlockOverlay from "../../organisms/ad-block-overlay/AdBlockOverlay";
+import animationData from "../../assets/loading.json";
+import {UserFriendModel} from "./models/UserFriendModel";
+import {getJWT, getUserId} from "../../services/AuthService";
+import {UserFriend} from "./UserFriend";
+import config from "../../config/config";
 import {useDetectAdBlock} from "adblock-detect-react";
 import {usePreventScrolling} from "../../organisms/ad-block-overlay/preventScrolling";
 import {MobileFooter} from "../../organisms/header/MobileFooter";
 import {useMediaQuery} from "@mui/system";
 
 export const Friends = () => {
-  const adBlockDetected: boolean = useDetectAdBlock();
+  const jwt: string | null = getJWT();
+  const headersWithJwt = useMemo(() => ({
+      ...config.headers,
+      'Authorization': jwt ? `Bearer ${jwt}` : ''
+  }), [jwt]);
+
+  const [friendsResults, setFriendsResults] = useState<any[]>([]);
+  const [notFound, setNotFound] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const adBlockDetected = useDetectAdBlock();
+  const userSelfId = getUserId();
   usePreventScrolling(adBlockDetected);
+
   const isSmartphoneSize: boolean = useMediaQuery('(max-width: 412px)');
 
-  return (
+  useEffect(() => {
+    setFriendsResults([]);
+    setNotFound(false);
+    setLoading(true);
+
+    const fetchResults = async (url: string): Promise<void> => {
+      try {
+        const response: Response = await fetch(url, {
+          headers: headersWithJwt
+        });
+        if (response.ok) {
+          const data = await response.json();
+          if (data.length !== 0) {
+            setFriendsResults(data);
+            setNotFound(false);
+          } else {
+            setNotFound(true);
+          }
+        } else {
+          setNotFound(true);
+        }
+
+        setLoading(false);
+      } catch (error) {
+        console.error("Error when retrieving following data:", error);
+        setNotFound(true);
+        setLoading(false);
+      }
+    };
+
+    fetchResults(config.apiUrl + `friendship/friendlist/${userSelfId}`)
+  }, [userSelfId, headersWithJwt]);
+
+  if (loading) {
+    return (
+       <div className="page">
+          {adBlockDetected && <AdBlockOverlay />}
+          <Header />
+          <div className="animation">
+            <div className="loading-animation">
+              <Lottie animationData={animationData}/>
+            </div>
+          </div>
+          <Footer />
+         {isSmartphoneSize && <MobileFooter />}
+       </div>
+    );
+  }
+
+  if (notFound) {
+    return (
       <div className="page">
-        {adBlockDetected && <AdBlockOverlay/>}
-        <Header/>
-        <h1 className="loading">Work in progress</h1>
-        <Footer/>
-        {isSmartphoneSize && <MobileFooter/>}
+        {adBlockDetected && <AdBlockOverlay />}
+        <Header />
+        <h1 className="empty-page-info">You're not following anyone yet</h1>
+        <Footer />
+        {isSmartphoneSize && <MobileFooter />}
+      </div>
+    );
+  }
+
+  return (
+    <div className="page">
+      {adBlockDetected && <AdBlockOverlay />}
+      <Header />
+      <div className="friends-container">
+        <div className="friend-list-container">
+          <h1 className="friends-title">Following</h1>
+          <div className="friend-list">
+            {friendsResults.map((user: UserFriendModel) => (
+              <UserFriend
+                key={user.friendlistId}
+                friendlistId={user.friendlistId}
+                userId={user.userId}
+                username={user.username}
+                image={user.image}
+              />))
+            }
+          </div>
+        </div>
       </div>
+      <Footer />
+      {isSmartphoneSize && <MobileFooter />}
+    </div>
   );
-};
+};

src/main/web/src/scenes/Friends/models/UserFriendModel.tsx

@@ -0,0 +1,6 @@
+export interface UserFriendModel {
+    friendlistId: number;
+    userId: number;
+    username: string;
+    image?: string;
+}