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> { 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( 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 { PROFILE_PICTURES_GET_ERROR_ALERT } from "../../../../../../../../../constants/alerts_constants";
import { getProfilePictures } from "../../../../../../../../../controllers/API"; import { getProfilePictures } from "../../../../../../../../../controllers/API";
@ -11,6 +12,7 @@ const useGetProfilePictures = (setErrorData) => {
title: PROFILE_PICTURES_GET_ERROR_ALERT, title: PROFILE_PICTURES_GET_ERROR_ALERT,
list: [(error as any)?.response?.data?.detail], 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, BACKEND_URL,
BASE_URL_API, BASE_URL_API,
} from "../../../../../../../../constants/constants"; } 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 }) { export default function ProfilePictureChooserComponent({ value, onChange }) {
const setErrorData = useAlertStore((state) => state.setErrorData); const setErrorData = useAlertStore((state) => state.setErrorData);
const getProfilePictures = useGetProfilePictures({ setErrorData }); const getProfilePictures = useGetProfilePictures({ setErrorData });
const [profilePictures, setProfilePictures] = useState<string[][]>([]); const [profilePictures, setProfilePictures] = useState<string[][]>([]);
const [loading, setLoading] = useState(true);
useEffect(() => { useEffect(() => {
getProfilePictures().then((data) => { getProfilePictures()
if (data) { .then((data) => {
data.forEach((profile_picture) => { if (data) {
const [folder, path] = profile_picture.split("/"); data.forEach((profile_picture) => {
setProfilePictures((prev) => { const [folder, path] = profile_picture.split("/");
if (prev[folder]) { setProfilePictures((prev) => {
prev[folder].push(path); if (prev[folder]) {
} else { prev[folder].push(path);
prev[folder] = [path]; } else {
} prev[folder] = [path];
return prev; }
return prev;
});
setLoading(false);
}); });
}); }
} })
}); .catch(() => {
setLoading(false);
});
}); });
return ( return (
<div className="flex flex-wrap items-center justify-start gap-2"> <div className="flex flex-col justify-center gap-2">
{profilePictures.map((folder, idx) => ( {loading ? (
<Label> <Loading />
<div className="edit-flow-arrangement"> ) : (
<span className="font-medium">{folder}</span> profilePictures.map((folder, idx) => (
</div> <Label>
<div className="flex flex-wrap items-center justify-start gap-2"> <div className="edit-flow-arrangement">
{folder.map((path, idx) => ( <span className="font-medium">{folder}</span>
<img </div>
key={idx} <HorizontalScrollFadeComponent>
src={`${BACKEND_URL.slice( {folder.map((path, idx) => (
0, <img
BACKEND_URL.length - 1, key={idx}
)}${BASE_URL_API}files/images/${folder + "/" + path}`} src={`${BACKEND_URL.slice(
className="h-12 w-12 rounded-full" 0,
onClick={() => onChange(folder + "/" + path)} BACKEND_URL.length - 1,
/> )}${BASE_URL_API}files/images/${folder + "/" + path}`}
))} className={
</div> "h-12 w-12 rounded-full" +
</Label> (value === folder + "/" + path
))} ? " border-2 border-white"
: "")
}
onClick={() => onChange(folder + "/" + path)}
/>
))}
</HorizontalScrollFadeComponent>
</Label>
))
)}
</div> </div>
); );
} }