src/views/AdminPanelViews/UsersCheckView.tsx - master - SOFG1/hasida

src/views/AdminPanelViews/UsersCheckView.tsx
159 строк6 KB
Eddy
initial commit
22 июл 2024, 17:14
22 июл 2024, 17:14b43c0d0
import React, {useCallback, useEffect, useState} from "react";
import styled from "styled-components";
import {SubTitle} from "../../UI/Title";
import {useTranslation} from "react-i18next";
import {UserCheck} from "../../components/AdminPanelComponents";
import {CandidateView} from "../common";
import {Loader} from "../../UI/Loader";
import InfiniteScroll from "react-infinite-scroll-component";
import {
    homeAppliedFiltersSelector,
    homeFeedDataSelector,
    homeIsFetchingFeedSelector,
    setFeedData,
    setIsFetchingFeed
} from "../../store/home";
import {getProfilesList} from "../../api";
import {setAlert} from "../../store/app";
import {useDispatch, useSelector} from "react-redux";
import {userTokenSelector} from "../../store/user";
import {FiltersView} from "../HomeViews";
import {useAdminProfileQuery} from "../../api/admin";

const StyledWrapper = styled.div<{userCard: number}>`
  max-width: 1110px;
  width: 100%;
  margin: ${({userCard}) => (userCard === -1 ? "54px auto 354px" : "54px auto")};
  @media screen and (max-width: 700px) {
    padding: 0 15px;
  }
`;

const StyledTitle = styled(SubTitle)`
  width: 100%;
  margin-bottom: 30px;
`;

export interface IUserLoader {
    id: number,
    action: string
}

const UsersCheckView = React.memo(() => {
    const {t} = useTranslation();
    const [userCard, setUserCard] = useState<number>(-1);
    const [updatedUserId, setUpdatedUserId] = useState<number>(0);
    const [updatedUserLoader, setUpdatedUserLoader] = useState<IUserLoader>({id: 0, action: ""});
    const token = useSelector(userTokenSelector)
    const feed = useSelector(homeFeedDataSelector)
    const isFetching = useSelector(homeIsFetchingFeedSelector)
    const appliedFilters = useSelector(homeAppliedFiltersSelector);
    const dispatch = useDispatch()
    const {i18n} = useTranslation()
    const {
        data: updatedData,
        refetch: refetchUpdatedData,
    } = useAdminProfileQuery(updatedUserId);

    const handleFetch = useCallback(
        async (offset: number) => {
            try {
                dispatch(setIsFetchingFeed(true))
                const data = await getProfilesList(
                    token as string,
                    {offset: offset, ...appliedFilters},
                    "admin/profiles/")
                dispatch(setIsFetchingFeed(false))
                dispatch(setFeedData(data.data))
            } catch (e) {
                dispatch(setAlert({isError: true, text: 'Error occured !'}))
            }
        },
        [appliedFilters, token, i18n.language]
    );

    const updateDataHandler = useCallback((userId: number, action?: string) => {
        const feedUserData = feed.data.find(fd => fd.id === userId);
        if(feedUserData?.admin_data && !action) return;
        setUpdatedUserLoader({id: userId, action: "block"});
        setUpdatedUserId(userId);
        setTimeout(() => {
            refetchUpdatedData()
                .then((res) => {
                 if (action && action === "call") {
                  window.open(`tel:${res.data?.profile.mobile_phone}`, "_blank");
                  }
                    setUpdatedUserLoader({id: 0, action: ""});
            })
        });
    }, [feed]);

    useEffect(() => {
        if (feed.data.length === 0 && !isFetching) {
            handleFetch(0)
        }
    }, [handleFetch, feed]);

    useEffect(() => {
        if (!updatedData) return;
        const feedUserData = feed.data.find(fd => fd.id === updatedData.profile.id);
        const newData = {
            ...feedUserData,
            age: updatedData.profile.age,
            city: updatedData.profile.city,
            first_name: updatedData.profile.first_name,
            last_name: updatedData.profile.last_name,
            gender: updatedData.profile.gender,
            id: updatedData.profile.id,
            online: updatedData.online ? true : updatedData.last_online,
            photos: updatedData.profile.photos,
            main_photo: updatedData.profile.main_photo,
            second_name: updatedData.profile.second_name,
            user_name: updatedData.profile.user_name,
            admin_data: {
                email: updatedData.email,
                mobile_phone: updatedData.profile.mobile_phone,
                is_active: updatedData.is_active
            }
        };
        const feedDataUpdated = {...feed, isUpdate: true,
            data: feed.data.map(fd => fd.id === updatedData.profile.id ? newData : fd)
        };
        dispatch(setFeedData(feedDataUpdated));
    }, [updatedData]);

    return (
        <StyledWrapper userCard={userCard}>
            <StyledTitle>{t("admin_panel-users_check")}</StyledTitle>
            {userCard < 0 && <FiltersView/>}
            {userCard === -1
                ? <>
                    <InfiniteScroll
                        className="infinite-list-admin"
                        loader={<></>}
                        dataLength={feed?.data.length || 0}
                        next={() => handleFetch(feed?.data.length as number)}
                        hasMore={feed ? feed.data.length < feed.count : false}
                        scrollableTarget={"admin-page"}
                        scrollThreshold={0.97}
                    >
                        {feed?.data.map(d => {
                            return <UserCheck key={d.id}
                                              profileData={d}
                                              setUserCard={setUserCard}
                                              updateDataHandler={updateDataHandler}
                                              updatedUserLoader={updatedUserLoader}
                                              setUpdatedUserLoader={setUpdatedUserLoader}
                            />;
                        })}
                    </InfiniteScroll>
                    {isFetching && <Loader/>}
                </>
                : <CandidateView userID={userCard} setUserID={setUserCard}/>
            }
        </StyledWrapper>
    );

});

export default UsersCheckView;