61 lines
1.9 KiB
TypeScript
61 lines
1.9 KiB
TypeScript
import Title from "@/components/Title";
|
|
import styles from "./styles.module.css";
|
|
import { useCallback, useState } from "react";
|
|
import { Assistants, useApi, useApiCall } from "@/api";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import { selectors } from "@/store";
|
|
import { IAssistant } from "@/api/resources/Assistants";
|
|
import AssistantCard from "./components/AssistantCard";
|
|
import Loader, { LoaderColor } from "@/components/Loader";
|
|
import { useNavigate } from "react-router-dom";
|
|
import routes from "@/routes";
|
|
|
|
function Advisors() {
|
|
const api = useApi();
|
|
const dispatch = useDispatch();
|
|
const token = useSelector(selectors.selectToken);
|
|
const navigate = useNavigate();
|
|
const [assistants, setAssistants] = useState<IAssistant[]>([]);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
|
|
const loadData = useCallback(async () => {
|
|
const { ai_assistants } = await api.assistants({
|
|
token,
|
|
});
|
|
setAssistants(ai_assistants);
|
|
setIsLoading(false);
|
|
return { ai_assistants };
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [api, dispatch, token]);
|
|
|
|
useApiCall<Assistants.Response>(loadData);
|
|
|
|
const handleAdvisorClick = (assistant: IAssistant) => {
|
|
navigate(routes.client.advisorChat(assistant.id));
|
|
};
|
|
|
|
return (
|
|
<div className={`${styles.page} page`}>
|
|
<Title variant="h1" className={styles.title}>
|
|
Advisors
|
|
</Title>
|
|
{!!assistants?.length && !isLoading && (
|
|
<div className={styles["advisors-container"]}>
|
|
{assistants.map((assistant, index) => (
|
|
<AssistantCard
|
|
key={index}
|
|
{...assistant}
|
|
onClickCard={() => handleAdvisorClick(assistant)}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
{isLoading && (
|
|
<Loader color={LoaderColor.Red} className={styles.loader} />
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Advisors;
|