From 9478c14f5755934ba300ef4cf7152337667f9674 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 7 Jun 2024 15:34:12 -0300
Subject: [PATCH] Added frontend to show every profile picture from the Profile
 Pictures list

---
 src/frontend/src/controllers/API/index.ts     |  5 ++
 .../hooks/use-get-profile-pictures.ts         |  3 +
 .../profilePictureChooserComponent/index.tsx  | 57 +++++++++++++++----
 src/frontend/src/types/api/index.ts           |  4 ++
 4 files changed, 57 insertions(+), 12 deletions(-)

diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts
index ae73d15c2..23c7b18db 100644
--- a/src/frontend/src/controllers/API/index.ts
+++ b/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,
diff --git a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/hooks/use-get-profile-pictures.ts b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/hooks/use-get-profile-pictures.ts
index fad78c4e1..9878448aa 100644
--- a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/hooks/use-get-profile-pictures.ts
+++ b/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,
diff --git a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/index.tsx
index 562829265..b59521321 100644
--- a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/index.tsx
+++ b/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>
   );
diff --git a/src/frontend/src/types/api/index.ts b/src/frontend/src/types/api/index.ts
index 563b9760d..97716f194 100644
--- a/src/frontend/src/types/api/index.ts
+++ b/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;