Proyectos de Subversion LeadersLinked - SPA

import React, { useMemo, useState } from "react";

import { Tab, Tabs, styled } from "@mui/material";

import { useFetch } from "@hooks";

import { REACTIONS } from "@constants/feed";

import Modal from "@components/UI/modal/Modal";

import Spinner from "@components/UI/Spinner";

import UsersList from "@components/UI/UsersList";

const ReactionTab = styled(Tab)(() => ({

  minWidth: "auto",

  minHeight: "auto",

  padding: "0.5rem 1rem",

}));

export default function ReactionsModal({

  reactionsUsersUrl = "",

  reactions = [],

  show = false,

  onClose,

}) {

  const { data: users, loading } = useFetch(show ? reactionsUsersUrl : "", []);

  const [reaction, setReaction] = useState("");

  const availableReactions = useMemo(

    () =>

      REACTIONS.filter(({ type }) =>

        reactions.some(({ reaction }) => type === reaction)

      ),

    [reactions]

  );

  const filteredUsers = useMemo(

    () => (reaction ? users.filter((u) => u.reaction === reaction) : users),

    [reaction, users]

  );

  return (

    <Modal

      show={show}

      title="Personas que reaccionaron"

      onClose={onClose}

      showFooter={false}

    >

      <Tabs

        value={reaction}

        onChange={(e, newValue) => setReaction(newValue)}

        sx={{

          width: "100%",

          minHeight: "auto",

          "& .MuiTabs-indicator": {

            backgroundColor: "var(--font-color)",

          },

        }}

      >

        <ReactionTab value="" label="Todas" disableRipple />

        {availableReactions.map(({ name, icon: Icon, type, color }) => (

          <ReactionTab

            key={type}

            value={type}

            label={name}

            icon={<Icon style={{ color }} />}

            disableRipple

          />

        ))}

      </Tabs>

      {loading ? <Spinner /> : <UsersList users={filteredUsers} />}

    </Modal>

  );

}