score:0

a few things, avoid doing stuff like this when using react

  let element = document.createelement("div");
  element.setattribute("id", "happimodal");
  element.classlist.add("happicontainer");

also you can't use const [apires, setapires] = usestate({}); outside a component

also you can't use reactdom.render inside a component

here's some code that kind of does what you want, but i took out a few node modules

import react, { usestate, useeffect } from "react";
import reactdom from "react-dom";
import { motion } from "framer-motion";
import axios from "axios";
import objectpath from "object-path";

// definimos la animacion entrante y saliente
const happianim = {
  show: {
    y: 0
  },
  hide: {
    y: 200
  }
};

// componente de react
function compo(props) {
  const [loaded, setloaded] = usestate(false); // variable inicial
  const [show, setshow] = usestate(false); // mostrar u ocultar componente
  const [data, setdata] = usestate({ name: "hola" }); // data inicial

  const [load, setload] = usestate(false);

  const [apistatus, setapistatus] = usestate("loading"); // status de la llamada

  // cargamos la data inicial
  useeffect(() => {
    if (!loaded) {
      if (props.config) {
        setdata(props.config);
      }
      setloaded(true);
      setshow(true);

      // minimo de tiempo de carga para animacion de loading definida aqui
      settimeout(() => {
        setload(true);
      }, 700);

      // mostramos data cargada

      const config = {
        headers: {
          "content-type": "application/json"
        }
      };

      if (props.method === "post") {
        axios
          .post(props.url, props.data, config)
          .then((res) => {
            setdata({
              status: res.status,
              message: objectpath.get(res, props.rselector),
              response: res
            });
            ocultarmodal(objectpath.get(res, props.rselector), res.status);
            props.storage(res);
          })
          .catch((err) => {
            setdata({
              status: err.status,
              message: err.message,
              response: err
            });
          });
      } else {
        axios
          .get(props.url)
          .then((res) => {
            setdata({
              status: res.status,
              message: objectpath.get(res, props.rselector),
              response: res
            });
            ocultarmodal(objectpath.get(res, props.rselector), res.status);
            props.storage(res);
          })
          .catch((err) => {
            setdata({
              status: err.status,
              message: err.message,
              response: err
            });
          });
      }

      const ocultarmodal = (message, status) => {
        setapistatus(status);

        // medimos el string para calcular el tiempo de muestra del modal
        let len = message.length;

        // ocultamos
        settimeout(() => {
          setshow(false);
        }, len * 50);

        // ocultamos
        settimeout(() => {
          document.getelementbyid("happimodal").remove();
        }, len * 51);
      };
    }
  });

  return (
    <motion.div
      variants={happianim}
      initial="hide"
      animate={loaded && show ? "show" : "hide"}
      classname="happimodal"
    >
      <div classname="happimodal__iconcontainer">
        {apistatus !== "loading" && load ? (
          data.message
        ) : (
          <p>there would be a clip loader here </p>
        )}
      </div>
    </motion.div>
  );
}

// funcion inicial
const happi = (
  url,
  responseselector = "data",
  storage,
  data = {},
  method = "get"
) => {
  return (
    <div id="happimodal" classname="happicontainer">
      <compo
        url={url}
        data={data}
        method={method}
        rselector={responseselector}
        storage={storage}
      />
    </div>
  );
};

const rootelement = document.getelementbyid("root");
reactdom.render(<happi />, rootelement);

you can see the code on codesandbox, start a new sandbox to see a hello world react program with reactdom in the right place. i put it all in one file in this example to match your code more closely


Related Query

More Query from same tag