#Hola buenas estoy usando soner para
feral summit
configuracion de mis alertas```jsx
const AlertConfig = ({icon, title, description, onClose}) => {
let bgColor, textColor, iconClass;
switch (icon) {
case 'done':
bgColor = 'bg-gray-900';
textColor = 'text-green-100';
iconClass = <MdDoneOutline className='text-black bg-green-400 rounded-lg' />;
break;
case 'error':
bgColor = 'bg-gray-900';
textColor = 'text-red-100';
iconClass = <MdOutlineErrorOutline className='text-black bg-red-500 rounded-lg' />;
break;
case 'warning':
bgColor = 'bg-gray-900';
textColor = 'text-yellow-100';
iconClass = <IoIosWarning className='text-black bg-orange-400 rounded-lg' />;
break;
case 'info':
bgColor = 'bg-gray-900';
textColor = 'text-blue-100';
iconClass = <BsInfoSquare className='text-black bg-yellow-300 rounded-lg' />;
break;
default:
bgColor = 'bg-gray-900';
textColor = 'text-gray-100';
iconClass = <MdOutlineCircleNotifications className='text-black bg-yellow-300 rounded-lg' />;
break;
}
return (
<div className={relative rounded-lg shadow-lg p-6 ${bgColor} ${textColor} border-2 border-red-500}>
<div className='flex justify-between items-center mb-4'>
<div className='flex items-center'>
<i className={text-4xl}>{iconClass}</i>
<h3 className='text-xl font-semibold ml-3'>{title}</h3>
</div>
<button
type='button'
className='text-xl font-semibold text-red-500 hover:text-red-700 focus:outline-none'
onClick={onClose}
>
<IoMdCloseCircleOutline /> </button>
</div>
<p className='text-lg leading-relaxed'>{description}</p>
</div>
);
};
AlertConfig.propTypes = {
description: PropTypes.string.isRequired,
icon: PropTypes.oneOf(['done', 'error', 'warning', 'info']).isRequired,
onClose: PropTypes.any,
title: PropTypes.string.isRequired,
};
export default AlertConfig;
le quite los import porque no me cabian aqui estan ```jsx
import PropTypes from 'prop-types';
import {MdDoneOutline} from 'react-icons/md';
import {MdOutlineErrorOutline} from 'react-icons/md';
import {IoIosWarning} from 'react-icons/io';
import {BsInfoSquare} from 'react-icons/bs';
import {MdOutlineCircleNotifications} from 'react-icons/md';
import {IoMdCloseCircleOutline} from 'react-icons/io';
esta es la funcion que no se como hacer para llamarla desde un solo sitio sin tener que crearla una y otra vez jsx const newAlert = (type, title, descripción) => { toast(<Alert icon={type} title={title} description={descripción} onClose={() => toast.dismiss()} />, {}); };
feral summit
la cosa es poner la funcion newAlert en un archivo separado
algo asi pero me da error
craggy knot
toast es una funcion
()=>toast(message)
ah perdon no vi el dismiss
donde usas eso?
feral summit
lo uso en un formulario pero creo que ya lo tengo la solucion
/*este comoponente se pone en app.jsx*/
export const AlertToaster = () => (
<Toaster
toastOptions={{
style: { backgroundColor: 'transparent' },
className: 'my-toast',
duration: Infinity,
}}
position="top-center"
/>
);
// y este lo importas solo en aquellos componentes en donde lo necesitas
export const newAlert = (type, title, description) => {
toast(
<AlertConfig
icon={type}
title={title}
description={description}
onClose={() => toast.dismiss()}
/>,
{}
);
};
no no si las alertas ya funcionan y lo de hacer click y todo
pero ta cual lo tenia configurado tenia que crear la funcion newAlert en cada componente
craggy knot
entonces explicate
feral summit
entonces se trata de tener un solo archivo todo he importarlo cuando lo necesites
craggy knot
eso lo entiendo es una funcion que puedes poner en cualquier evento
feral summit
pues eso es lo que estoy haciendo
craggy knot
y como esta en apariencia deeberia funcionar
el toaster debe estar en el layout
pq se necesita para que renderize las notificaciones
feral summit
el toaster debe estar en el layout
si pero para no tener que ponerlo todo el rato se pone en app.jsx no?
craggy knot
depende de que uses yo uso next asi que va en el rootlayout
feral summit
yo uso vite
craggy knot
si es vite pues si
feral summit
ok
y una pregunta
el eslinter la extension de vscode me esta dando esta advertencia Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components.eslint(react-refresh/only-export-components)
craggy knot
te esta diciendo que el refresco del hmr solo se produce al exportar componentes no constantes
perdon creo que dice que cuando exportas componentes y otra cosa
el refresco solo se produce al modificar los componentes
asi que mete constantes y funciones fuera de los ficheros donde hay componentes
creo eh no he visto ese mensaje en mi vida
feral summit
si basicamente es porque tengo que tener un archivo para el toaster y otro para la funcion newAlert
craggy knot
pero yo funciones auxiliares exportadas siempre las pongo fuera
si vas a exportar ambos si
feral summit
ok voy ver si funciona
craggy knot
ok
craggy knot
me alegro y no se pq das las gracias no he dicho nada XDDD
feral summit
me alegro y no se pq das las gracias no he dicho nada XDDD
bueno mejor ser agradecido
craggy knot
pues dates las gracias a ti por el buen trabajo pq lo tenias tu resuelto XDDD
feral summit
xd
craggy knot
eso si no me gusta axios lo veo innecesario hoy en dia
feral summit
yo esque estoy siguiendo un video de fazt y el usa axios
feral summit
si
craggy knot
pero tu ya sabias algo verdad?
feral summit
si
feral summit
se que no es lo mas optimo pero como es para aprender mi idea es terminar el proyecto con estas tecnologias depues arreglar las cosas que esten mal
craggy knot
es que siendo de back te pega mas next pq con vite aprendes medio react y no aprovechas las novedades de sobre todo react 19
feral summit
yo esque no eniendo tanto xd
craggy knot
sabes de back
feral summit
si un poco
feral summit
crear apis y esas cosas pero no muy avanzado
si se que nextjs como que integra el back con el front no?
craggy knot
es mas que crear apis en back
imaginate un layout para una pagina si ese layout no cambia hay alguna razon para usar un componente de cliente?
no es mejor crearlo en el back y listo y las partes que necesitan cliente que sean cliente?
feral summit
pues haber si tiene sentido
craggy knot
esto es lo que tu usas para hacer fetch no? ```js
const DataList = () => {
const [data, setData] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const loadData = async () => {
try {
const result = await fetchData();
setData(result);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
};
loadData();
}, []);
if (loading) return <p>Loading...</p>;
if (error) return <p>Error: {error}</p>;
return (
<ul>
{data.map((item) => (
<li key={item.id}>{item.title}</li>
))}
</ul>
);
};
export default DataList;```
feral summit
asi lo hice yo
craggy knot
const DataList = async () => {
const data=await fetchData()
return (
<ul>
{data.map((item) => (
<li key={item.id}>{item.title}</li>
))}
</ul>
);
};
export default DataList;
function listado(){
return (
<Suspense fallback={<div>loading</div>>
<Datalist />
</Suspense>
)
}
eso se ejecuta en server el js nunca se entrega
cuando creas que mas o menos controlas react prueba next o si estan los server component en react router dom los pruebas ahi
feral summit
la verdad es que me esta crasheandoo la cabeza jajaj
craggy knot
simplifica el codigo, reduce los componentes de cliente y por tanto el js
react ha cambiado muchismo en el ultimo año
feral summit
pero una cosa cuando dices los componentes del cliente a que te refieres
craggy knot
que hay 2 tipos de componentes
servidor y cliente
unos solo se ejecutan en servidor y otros en servidor (SSR) luego se mandan al cliente con su js este se ejecuta para hidratar el componente y si no hay discrepancias react se engancha al dom y pasa a controlarlo
los de servidor nunca se actualizan en cliente
no puedes usar hooks pq usas datos
puedes mutar los datos con un server action y disparar una actualizacion del componente en el cliente
feral summit
y como distingo de un componente de cliente y uno de servidor
craggy knot
es facil por defecto es server si necesitas un cliente usas "use client"
algo que se importa en cliente es cliente logicamente
perro puedes meter server dentro de cliente pasandolo como props
todo esto deberia llegar a vite con react router dom and tanstack start y otros pero por ahora solo esta en nextjs