diff --git a/src/Components/Facility/DoctorVideoSlideover.tsx b/src/Components/Facility/DoctorVideoSlideover.tsx index 998528217f2..a8732f959eb 100644 --- a/src/Components/Facility/DoctorVideoSlideover.tsx +++ b/src/Components/Facility/DoctorVideoSlideover.tsx @@ -1,7 +1,5 @@ import React, { useEffect, useState } from "react"; -import { useDispatch } from "react-redux"; import SlideOver from "../../CAREUI/interactive/SlideOver"; -import { getFacilityUsers } from "../../Redux/actions"; import { UserAssignedModel } from "../Users/models"; import { SkillObjectModel } from "../Users/models"; import CareIcon, { IconName } from "../../CAREUI/icons/CareIcon"; @@ -9,6 +7,19 @@ import { relativeTime } from "../../Utils/utils"; import useAuthUser from "../../Common/hooks/useAuthUser"; import { triggerGoal } from "../../Integrations/Plausible"; import { Warn } from "../../Utils/Notifications"; +import Switch from "../../CAREUI/interactive/Switch"; +import useQuery from "../../Utils/request/useQuery"; +import routes from "../../Redux/api"; + +enum FilterTypes { + ALL = "All", + DOCTOR = "Doctor", + NURSE = "Nurse", + TELEICU = "TeleICU Hub", +} + +const isHomeUser = (user: UserAssignedModel, facilityId: string) => + user.home_facility_object?.id === facilityId; export default function DoctorVideoSlideover(props: { show: boolean; @@ -16,90 +27,84 @@ export default function DoctorVideoSlideover(props: { setShow: (show: boolean) => void; }) { const { show, facilityId, setShow } = props; - const [doctors, setDoctors] = useState([]); + const [filteredDoctors, setFilteredDoctors] = useState( + [] + ); + const [filter, setFilter] = useState(FilterTypes.ALL); + + const { data: users, loading } = useQuery(routes.getFacilityUsers, { + prefetch: show, + pathParams: { facility_id: facilityId }, + query: { limit: 50 }, + }); - const dispatchAction: any = useDispatch(); useEffect(() => { - const fetchUsers = async () => { - if (facilityId) { - const res = await dispatchAction( - getFacilityUsers(facilityId, { limit: 50 }) - ); - if (res?.data) { - setDoctors( - res.data.results - .filter( - (user: any) => user.alt_phone_number || user.video_connect_link - ) - .sort((a: any, b: any) => { - return Number(a.last_login) - Number(b.last_login); - }) - ); - } - } else { - setDoctors([]); - } + const filterDoctors = (users: UserAssignedModel[]) => { + return users.filter( + (user: UserAssignedModel) => + (user.alt_phone_number || user.video_connect_link) && + (user.user_type === "Doctor" || user.user_type === "Nurse") && + (filter === FilterTypes.ALL || + (filter === FilterTypes.DOCTOR && + isHomeUser(user, facilityId) && + user.user_type === "Doctor") || + (filter === FilterTypes.NURSE && + isHomeUser(user, facilityId) && + user.user_type === "Nurse") || + (filter === FilterTypes.TELEICU && !isHomeUser(user, facilityId))) + ); }; - if (show) { - fetchUsers(); + if (users?.results && !loading) { + setFilteredDoctors( + filterDoctors(users.results).sort( + (a: UserAssignedModel, b: UserAssignedModel) => { + const aIsHomeUser = isHomeUser(a, facilityId); + const bIsHomeUser = isHomeUser(b, facilityId); + return aIsHomeUser === bIsHomeUser ? 0 : aIsHomeUser ? -1 : 1; + } + ) + ); } - }, [show, facilityId]); + }, [facilityId, filter, loading, users?.results]); return ( {/* Title and close button */}

Select a doctor to connect via video

- {[ - { - title: "Doctors", - user_type: "Doctor", - home: true, - }, - { - title: "Nurse", - user_type: "Nurse", - home: true, - }, - { - title: "TeleICU Hub", - user_type: "Doctor", - home: false, - }, - ].map((type, i) => ( +
+ ({ ...acc, [type]: type }), + {} + ) as Record + } + selected={filter} + onChange={(tab) => setFilter(tab)} + size="md" + /> +
+ {filteredDoctors.map((doctor, i) => (
-
- {type.title} -
- -
    - {doctors - .filter((doc) => { - const isHomeUser = - (doc.home_facility_object?.id || "") === facilityId; - return ( - doc.user_type === type.user_type && isHomeUser === type.home - ); - }) - .map((doctor) => { - return ; - })} +
      +
))} @@ -107,11 +112,11 @@ export default function DoctorVideoSlideover(props: { ); } -function UserListItem(props: { user: UserAssignedModel }) { +function UserListItem(props: { user: UserAssignedModel; facilityId: string }) { const user = props.user; + const facilityId = props.facilityId; const icon: IconName = user.user_type === "Doctor" ? "l-user-md" : "l-user-nurse"; - const authUser = useAuthUser(); function connectOnWhatsApp(e: React.MouseEvent) { e.stopPropagation(); @@ -172,99 +177,63 @@ function UserListItem(props: { user: UserAssignedModel }) { } return ( -
  • -
  • - -
    - { - // Show online icon based on last_login - user.last_login && - Number(new Date()) - Number(new Date(user.last_login)) < 60000 ? ( - - ) : ( - - ) - } -
    -
    -

    - - {user.first_name} {user.last_name} +

  • + +
    + { + // Show online icon based on last_login + user.last_login && + Number(new Date()) - Number(new Date(user.last_login)) < 60000 ? ( + + ) : ( + + ) + } +
    +
    +
    + + {user.first_name} {user.last_name} + + ( + {isHomeUser(user, facilityId) + ? user.user_type + : `TeleICU Hub ${user.user_type}`} + ) - + {!!user.skills.length && ( + + )} +
    +
    -
    + Copy Phone number -
    +     {user.alt_phone_number} +
    +
    {user.last_login && {relativeTime(user.last_login)}} -

    +
    - -
    • + + ); } + +function DoctorConnectButtons(props: { + user: UserAssignedModel; + connectOnWhatsApp: (e: React.MouseEvent) => void; +}) { + const user = props.user; + const authUser = useAuthUser(); + return ( + + ); +} diff --git a/src/Redux/api.tsx b/src/Redux/api.tsx index 33b6a69e057..4f19d0cb696 100644 --- a/src/Redux/api.tsx +++ b/src/Redux/api.tsx @@ -86,6 +86,7 @@ import { SkillModel, SkillObjectModel, UpdatePasswordForm, + UserAssignedModel, UserModel, } from "../Components/Users/models"; import { PaginatedResponse } from "../Utils/request/types"; @@ -354,7 +355,7 @@ const routes = { getFacilityUsers: { path: "/api/v1/facility/{facility_id}/get_users/", - TRes: Type>(), + TRes: Type>(), }, listFacilityAssetLocation: {