Added frontend to show every profile picture from the Profile Pictures list

src/frontend/src/controllers/API/index.ts

@@ -8,6 +8,7 @@ import {
   APITemplateType,
   Component,
   LoginType,
+  ProfilePicturesTypeAPI,
   Users,
   VertexBuildTypeAPI,
   VerticesOrderTypeAPI,
@@ -364,6 +365,10 @@ export async function uploadFile(
   return await api.post(`${BASE_URL_API}files/upload/${id}`, formData);
 }
 
+export async function getProfilePictures(): Promise<ProfilePicturesTypeAPI> {
+  return await api.get(`${BASE_URL_API}files/list/profile_pictures`);
+}
+
 export async function postCustomComponent(
   code: string,
   apiClass: APIClassType,

src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/hooks/use-get-profile-pictures.ts

@@ -1,8 +1,11 @@
 import { PROFILE_PICTURES_GET_ERROR_ALERT } from "../../../../../../../../../constants/alerts_constants";
+import { getProfilePictures } from "../../../../../../../../../controllers/API";
 
 const useGetProfilePictures = (setErrorData) => {
   const handleGetProfilePictures = async () => {
     try {
+      const profilePictures = await getProfilePictures();
+      return profilePictures.files;
     } catch (error) {
       setErrorData({
         title: PROFILE_PICTURES_GET_ERROR_ALERT,

src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/index.tsx

@@ -1,25 +1,58 @@
+import { useEffect, useState } from "react";
 import useAlertStore from "../../../../../../../../stores/alertStore";
 import { gradients } from "../../../../../../../../utils/styleUtils";
 import useGetProfilePictures from "./hooks/use-get-profile-pictures";
+import { Label } from "../../../../../../../../components/ui/label";
+import {
+  BACKEND_URL,
+  BASE_URL_API,
+} from "../../../../../../../../constants/constants";
 
 export default function ProfilePictureChooserComponent({ value, onChange }) {
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const getProfilePictures = useGetProfilePictures({ setErrorData });
 
+  const [profilePictures, setProfilePictures] = useState<string[][]>([]);
+
+  useEffect(() => {
+    getProfilePictures().then((data) => {
+      if (data) {
+        data.forEach((profile_picture) => {
+          const [folder, path] = profile_picture.split("/");
+          setProfilePictures((prev) => {
+            if (prev[folder]) {
+              prev[folder].push(path);
+            } else {
+              prev[folder] = [path];
+            }
+            return prev;
+          });
+        });
+      }
+    });
+  });
+
   return (
     <div className="flex flex-wrap items-center justify-start gap-2">
-      {gradients.map((gradient, idx) => (
-        <div
-          onClick={() => {
-            onChange(gradient);
-          }}
-          className={
-            "duration-400 h-12 w-12 cursor-pointer rounded-full transition-all " +
-            gradient +
-            (value === gradient ? " shadow-lg ring-2 ring-primary" : "")
-          }
-          key={idx}
-        ></div>
+      {profilePictures.map((folder, idx) => (
+        <Label>
+          <div className="edit-flow-arrangement">
+            <span className="font-medium">{folder}</span>
+          </div>
+          <div className="flex flex-wrap items-center justify-start gap-2">
+            {folder.map((path, idx) => (
+              <img
+                key={idx}
+                src={`${BACKEND_URL.slice(
+                  0,
+                  BACKEND_URL.length - 1,
+                )}${BASE_URL_API}files/images/${folder + "/" + path}`}
+                className="h-12 w-12 rounded-full"
+                onClick={() => onChange(folder + "/" + path)}
+              />
+            ))}
+          </div>
+        </Label>
       ))}
     </div>
   );

src/frontend/src/types/api/index.ts

@@ -93,6 +93,10 @@ export type UploadFileTypeAPI = {
   flowId: string;
 };
 
+export type ProfilePicturesTypeAPI = {
+  files: string[];
+};
+
 export type LoginType = {
   grant_type?: string;
   username: string;