jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Added a Loading component and added a border to the current image

Browse source
This commit is contained in:
Lucas Oliveira 2024-06-07 15:41:47 -03:00
commit a2485d1797
3 changed files with 56 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/frontend/src/controllers/API/index.ts
View file

@ -366,7 +366,7 @@ export async function uploadFile(
}
export async function getProfilePictures(): Promise<ProfilePicturesTypeAPI> {
return await api.get(`${BASE_URL_API}files/list/profile_pictures`);
return api.get(`${BASE_URL_API}files/list/profile_pictures`);
}
export async function postCustomComponent(

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

@ -1,3 +1,4 @@
import { reject } from "lodash";
import { PROFILE_PICTURES_GET_ERROR_ALERT } from "../../../../../../../../../constants/alerts_constants";
import { getProfilePictures } from "../../../../../../../../../controllers/API";
@ -11,6 +12,7 @@ const useGetProfilePictures = (setErrorData) => {
title: PROFILE_PICTURES_GET_ERROR_ALERT,
list: [(error as any)?.response?.data?.detail],
});
throw error;
}
};

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

@ -7,53 +7,71 @@ import {
BACKEND_URL,
BASE_URL_API,
} from "../../../../../../../../constants/constants";
import HorizontalScrollFadeComponent from "../../../../../../../../components/horizontalScrollFadeComponent";
import LoadingComponent from "../../../../../../../../components/loadingComponent";
import Loading from "../../../../../../../../components/ui/loading";
export default function ProfilePictureChooserComponent({ value, onChange }) {
const setErrorData = useAlertStore((state) => state.setErrorData);
const getProfilePictures = useGetProfilePictures({ setErrorData });
const [profilePictures, setProfilePictures] = useState<string[][]>([]);
const [loading, setLoading] = useState(true);
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;
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;
});
setLoading(false);
});
});
}
});
}
})
.catch(() => {
setLoading(false);
});
});
return (
<div className="flex flex-wrap items-center justify-start gap-2">
{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 className="flex flex-col justify-center gap-2">
{loading ? (
<Loading />
) : (
profilePictures.map((folder, idx) => (
<Label>
<div className="edit-flow-arrangement">
<span className="font-medium">{folder}</span>
</div>
<HorizontalScrollFadeComponent>
{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" +
(value === folder + "/" + path
? " border-2 border-white"
: "")
}
onClick={() => onChange(folder + "/" + path)}
/>
))}
</HorizontalScrollFadeComponent>
</Label>
))
)}
</div>
);
}