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>
  );
}