Refactor

gistfile1.txt

const SETORES = [
  { value: "comercio", title: "Comércio" },
  { value: "turismo", title: "Turismo" },
  { value: "servicos", title: "Serviços" },
];
interface PriorizarOuTriar {
  etapa: Etapa;
  atoNormativo: AtosNormativos;
}
interface Classificar {
  etapa: Etapa;
  atoNormativo: AtosNormativos;
}
export const PriorizarOuTriar = ({ etapa, atoNormativo }: PriorizarOuTriar) => {
  const positioningList = [
    "Favorável",
    "Favorável com Ressalva",
    "Neutro",
    "Divergente",
  ];

  const router = useRouter();
  const { pathname } = router;
  const currentDate = new Date();
  const priorityList = ["Alta", "Média", "Baixa"];
  let title = <></>;
  let checkIcon = {};
  let stopIcon = {};
  const isSorted = atoNormativo?.flagTriagem;
  const isPrioritized = atoNormativo?.flagPriorizacao;

  const [prioritized, setPrioritized] = useState<boolean>(isPrioritized);
  const [sortedStatus, setSortedStatus] = useState<boolean>(isSorted);
  const [enableRadioBtn, setEnableRadioBtn] = useState<boolean>(false);

  // VALORES SELECIONADOS PARA O UPDATE
  const valuesForm = {
    flagTriagem: sortedStatus,
    flagPriorizacao: isPrioritized,
    grauPrioridade: "",
    priorrizacaoGrauPrioridade: "",
    priorizacaoPosicaoEntidade: "",
    id: atoNormativo.idOficio,
    isAnalisado: pathname,
  };

  const [form, setForm] = useState<AnaliseAto>(valuesForm);

  const updateForm = async (data: AnaliseAto) => {
    try {
      await updateAtoNormativo(atoNormativo.idOficio as string, data, pathname);
      setForm(valuesForm);
      notification.success({
        message: "Ato atualizado com sucesso!",
      });
      if (data.flagTriagem) {
        return setSortedStatus(true);
      }
      if (data.flagPriorizacao) {
        return setPrioritized(true);
      }
    } catch (error) {
      notification.error({
        message: "Erro ao atualizar o ato!",
      });
    }
  };

  const handleGetRadioInputGrau = (value: string) => {
    setForm({ ...form, priorizacaoGrauPrioridade: value });
  };

  const handleGetRadioInputPriorizacao = (value: string) => {
    setForm({ ...form, priorizacaoPosicaoEntidade: value });
  };

  if (etapa.nomeAtividade === "Priorização") {
    if (etapa.status && prioritized) {
      title = (
        <h3>
          Análise da {etapa?.nomeAtividade} realizada por{" "}
          {atoNormativo.usuarioPriorizacao || "User Teste"} em -{" "}
          {currentDate.toLocaleString()}
        </h3>
      );
      return (
        <div className={styles.steps_content}>
          <Row>
            <Col className={styles.title}>
              <span>{title}</span>
            </Col>
            <Row gutter={[12, 12]} justify="center" style={{ width: "100%" }}>
              <Col style={{ width: "200px", margin: "1rem", display: "flex" }}>
                <Btn
                  type="primary"
                  title="Priorizar novamente"
                  onClick={() => {
                    setPrioritized(false);
                  }}
                />
              </Col>
            </Row>
          </Row>
        </div>
      );
    }
    return (
      <div className={styles.steps_content}>
        <Row>
          <Col className={styles.title}>
            <span>
              <h3>Etapa de {etapa?.nomeAtividade} não realizada.</h3>
            </span>
          </Col>
          <Row gutter={[12, 12]} justify="center" style={{ width: "100%" }}>
            <Col style={{ width: "200px", margin: "1rem", display: "flex" }}>
              <Btn
                type="primary"
                title="Priorizar"
                onClick={() => {
                  setForm({
                    ...form,
                    flagPriorizacao: true,
                    flagTriagem: true,
                    status: "Prioritário",
                  });
                  setEnableRadioBtn(true);
                }}
              />
              <Btn
                type="primary"
                title="Não Priorizar"
                onClick={() => {
                  setForm({ ...form, flagPriorizacao: true });
                  setEnableRadioBtn(false);
                }}
              />
            </Col>
          </Row>
          <Col>
            <span style={{ fontSize: "0.9rem", margin: "1em" }}>
              <b>Posicionamento da entidade: </b>
            </span>
            <RadioBtn
              valueToUpdate={handleGetRadioInputGrau}
              positioning={positioningList}
              disabled={enableRadioBtn ? false : true}
            />
          </Col>
          <Divider />
          <Col>
            <span style={{ fontSize: "0.9rem", margin: "1em" }}>
              <b>Grau de prioridade: </b>
            </span>
            <RadioBtn
              valueToUpdate={handleGetRadioInputPriorizacao}
              positioning={priorityList}
              disabled={enableRadioBtn ? false : true}
            />
          </Col>
          <Divider />
          <Col
            style={{ display: "flex", width: "100%", justifyContent: "center" }}
          >
            <span style={{ width: "15em" }}>
              <Btn
                type="primary"
                title="Salvar Priorização"
                onClick={() => {
                  setPrioritized(true);
                  updateForm(form);
                }}
              />
            </span>
          </Col>
        </Row>
      </div>
    );
  }
  if (etapa.nomeAtividade === "Triagem") {
    if (etapa.status && sortedStatus) {
      title = (
        <h3>
          Análise da {etapa?.nomeAtividade} realizada por{" "}
          {atoNormativo.usuarioFlagTriagem || "User Teste"} em -{" "}
          {currentDate.toLocaleString()}
        </h3>
      );
      return (
        <div className={styles.steps_content}>
          <Row>
            <Col className={styles.title}>
              <span>{title}</span>
            </Col>
            <Row gutter={[12, 12]} justify="center" style={{ width: "100%" }}>
              <Col style={{ width: "200px", margin: "1rem", display: "flex" }}>
                <Btn
                  type="primary"
                  title="Triar novamente"
                  onClick={() => {
                    setSortedStatus(false);
                  }}
                />
              </Col>
            </Row>
          </Row>
        </div>
      );
    }
    return (
      <div className={styles.steps_content}>
        <Row gutter={[12, 12]} justify="center" style={{ width: "100%" }}>
          <Col className={styles.title}>
            <span>{title}</span>
          </Col>
          <Col style={{ width: "200px", marginTop: "1rem" }}>
            <Btn
              type="default"
              title=" De Interesse"
              icon={"fa-check"}
              onClick={() => {
                updateForm({
                  ...form,
                  flagTriagem: true,
                  status: "De Interesse",
                });
                setSortedStatus(true);
              }}
            />
          </Col>
          <Col style={{ width: "20%", marginTop: "1rem" }}>
            <Btn
              onClick={() => {
                updateForm({
                  ...form,
                  flagTriagem: true,
                  status: "De Não Interesse",
                });
                setSortedStatus(true);
              }}
              style={{ font: "0 1rem" }}
              danger
              type="primary"
              title=" De Não Interesse"
              icon={"fa-ban"}
            />
          </Col>
        </Row>
      </div>
    );
  }
  return (
    <div className={styles.steps_content}>
      <Row gutter={[12, 12]} justify="center" style={{ width: "100%" }}>
        <Col className={styles.title}>
          <span>
            <h3>Análise da {etapa.nomeAtividade} já concluida.</h3>
          </span>
        </Col>
        <Col
          style={{
            display: "flex",
            width: "100%",
            justifyContent: "center",
            margin: "2em",
          }}
        >
          <span style={{ width: "15em" }}>
            <Btn
              disabled
              type="default"
              title="De Interesse"
              onClick={() => {
                // updateForm({ flagPriorizacao: true });
              }}
            />
          </span>
        </Col>
      </Row>
    </div>
  );
};

export const Classificar = ({ atoNormativo, etapa }: Classificar) => {
  const valueForm = {
    flagClassificacao: atoNormativo?.flagClassificacao,
    classificacaoUnivTematico: [],
    secoes: [],
  };

  interface Tema {
    label: string;
  }

  const isRanked = atoNormativo?.flagClassificacao;
  const { pathname } = router;

  const [temas, setTemas] = useState<Tema[]>();
  const [ranked, setRanked] = useState<boolean>(isRanked);
  const [form, setForm] = useState<AnaliseAto>(valueForm);
  const { SHOW_PARENT } = TreeSelect;

  const currentDate = new Date();

  const {
    data: temasTree,
    isError: errorTemasTree,
    isLoading: loadingTemasTree,
    isSuccess: successTemasTree,
  } = useFindTemasTree();

  const onSubmit = async () => {
    if (!temas?.length) {
      notification.error({
        message: "Selecione ao menos um tema!",
      });
      return;
    }
    try {
      setForm({
        classificacaoUnivTematico: temas?.map((tema) => tema.label),
        flagClassificacao: true,
      });
      await updateAtoNormativo(atoNormativo.idOficio as string, form, pathname);
      console.log("form", form);
      setRanked(true);
      notification.success({
        message: "Classificação realizada com sucesso!",
      });
    } catch (error) {
      notification.error({
        message: "Erro ao realizar classificação!",
      });
    }
  };

  const selectTreeProps = {
    treeData: temasTree,
    treeDataSimpleMode: { pId: "parent_id" },
    value: temas,
    onChange: (value: any) => {
      setTemas(value);
      const label = value.map((item: any) => item.label);
      setForm({ ...form, classificacaoUnivTematico: label });
    },
    treeCheckable: true,
    allowClear: true,
    treeLine: true,
    showCheckedStrategy: SHOW_PARENT,
    placeholder: "Universo Temático",
    style: {
      width: "100%",
    },
    showArrow: true,
    showSearch: true,
  };

  if (etapa.status && ranked) {
    return (
      <div className={styles.steps_content}>
        <Row>
          <Col className={styles.title}>
            <span>
              <h3>
                Classificação realizada por{" "}
                {atoNormativo?.usuarioFlagClassificacao || "User Teste"} em -{" "}
                {currentDate.toLocaleString()}
              </h3>
            </span>
            <Col style={{ width: "200px", marginTop: "1rem" }}>
              <Btn
                type="primary"
                title="Classificar Novamente"
                onClick={() => setRanked(false)}
              />
            </Col>
          </Col>
        </Row>
      </div>
    );
  }
  console.log(temasTree, "temas");
  return (
    <Row className={styles.steps_content}>
      <Col className={styles.title}>
        <span>
          <h3>Etapa de Classificação</h3>
        </span>
      </Col>
      <Col className={styles.options_buttons_container}>
        {/* <CollapseComponent
          items={[
            {
              children: (
                <TransferTemas handleprops={handleTemas} temasKey={[]} />
              ),
              title: "Classificação Temática",
            },
            {
              title: "Classificação Setorial",
              children: (
                <DropList
                  defaultValue=""
                  style={{ width: "55%" }}
                  name="setores"
                  label="Setor"
                  options={SETORES}
                  onChange={(value: string) => {
                    setSetor(value);
                  }}
                />
              ),
            },
          ]}
        /> */}
        {successTemasTree && <TreeSelect {...selectTreeProps} />}
      </Col>

      <Col style={{ width: "200px", marginTop: "1rem" }}>
        <Btn type="primary" title="Classificar" onClick={onSubmit} />
      </Col>
    </Row>
  );
};