ljaviertovar

import { useEffect, useState } from "react";

import { Country } from "../ts/interfaces/Country.interface";

const useAutocomplete = (
  data: Country[],
  inputSearchRef: HTMLInputElement | null
) => {
  const [searchedValue, setSearchedValue] = useState("");
  const [suggestions, setSuggestions] = useState < Country[] > [];

ljaviertovar

import { useEffect, useRef } from "react";
import { Card, Col, Input, Row, Text, User } from "@nextui-org/react";

import { Country } from "../../ts/interfaces/Country.interface";

import useAutocomplete from "../../hooks/useAutocomplete";

import classes from "./ui.module.css";

interface Props {

ljaviertovar

import { Card, Col, Input, Row, Text, User } from "@nextui-org/react"
import { useEffect, useRef, useState } from "react"

import { Country } from "../../ts/interfaces/Country.interface"

import classes from "./ui.module.css"

interface Props {
  data: Country[];
}

ljaviertovar

import {
  ModalConfigDummy,
  ModalPositionX,
  ModalPositionY,
} from "./ts/interfaces/modal.interface";

export const INITIAL_CONFIG: ModalConfigDummy = {
  modal1: {
    title: "Modal Header 1",
    showHeader: true,

ljaviertovar

import { useState, useLayoutEffect } from "react";
import { createPortal } from "react-dom";

interface Props {
  children: JSX.Element;
  wrapperId: string;
}

const PortalModal = ({ children, wrapperId }: Props) => {
  const [portalElement, setPortalElement] =

ljaviertovar

import { FC, useState } from "react";
import Header from "./components/layout/Header";
import { Buttons, Modal } from "./components/modals";

import { ThemeProvider } from "styled-components";
import { lightTheme, darkTheme, GlobalStyles } from "./styles/theme";

import * as S from "./components/modals/styles";
import { INITIAL_CONFIG } from "./config-dummy";

ljaviertovar

import { useCallback, useEffect, useRef } from "react"
import PortalModal from "./PortalModal"

import useOnClickOutside from "../../hooks/useOnClickOutside"

import { ModalConfig } from "../../ts/interfaces/modal.interface"

import * as S from "./styles"
import "../../styles/modal.css"

ljaviertovar

useEffect(() => {
  const ws = new WebSocket(url, protocols)
  // do what you want with the socket
  ws.onmessage = (event) => {
    setValue(JSON.parse(event.data));
  };
  
  // cleanup the web socket when component unmout
  return () => ws.close()
}, [])

ljaviertovar

useEffect(() => {
    let intervalId = setInterval(() => {
      // do something like update the state
    }, 1000);

    // cleanup the timer when component unmout
    return () => clearInterval(interval);
  }, []);

ljaviertovar

useEffect(() => {
    let timerId = setTimeout(() => {
      // do something     
      timerId = null;
    }, 3000);
  
  // cleanup the timmer when component unmout
    return () => clearTimeout(timerId);
  }, []);