javascript – Función para utilizar distintos números de WhatsApp en un mismo botón

Solicito su ayuda para realizar una función que me permita a través de variables de entorno utilizar distintos números de WhatsApp dependiendo de la localidad en la que es utilizada la app la cual es redirigida o determinada por distintos environment. Tengo un total de 10 localidades a las que quiero poder asignarles a cada una su número de localidad personalizado utilizando un único enlace a WhatsApp.
Mi app esta realizada en React.
Desde ya gracias por el crecimiento que día a día me brindan y los conocimientos que comparten. Saludos!

reactjs – Ejecución inversa de useEffects en distintos componentes

Tengo la siguiente estructura en mi proyecto donde el Language provider es un HOC y dentro de AdminRoutes hay mas componentes propios del admin

function App() {
    return (
        <ThemeProvider theme={Theme}>
            <LanguageProvider>
                <AdminRoutes/>
            </LanguageProvider>
        </ThemeProvider>
    );
}

dentro del Language Provider tengo el siguiente useEffect el console.log esta aproposito puesto:

  useEffect(() => {
        let defaultLang = getLocalValue(langKey);
        console.log('A');
        if (!defaultLang) {
            defaultLang = navigatorLang;
        }

        setLang(defaultLang);

        axios.defaults.headers.common('lang') = defaultLang;
    }, ());

y tengo otro componente que es Tournaments que tiene dependecncia de lang, para ir a buscar la informacion al back dependiendo el lenguaje, el useEffect de tournament es:

 useEffect(() => {
        setFetching(true);
        console.log('B');
        const fetchData = async () => {
            const tournaments = await tournamentService.all();
            setData(tournaments.data);
            setPagination({...tournaments.links, ...tournaments.meta});
            setFetching(false);
        };
        fetchData();
    }, (lang));

Esto funciona muy bien, salvo por una cosa, cuando se ingresa a torneos por primera vez o se aprieta f5, ingresa primero el useEffect de torneo y luego al del languaje provider, si vemos el console.log en el chrome

introducir la descripción de la imagen aquí

y al pasar esto me trae el problema que no se setea el axios.defaults.headers.common con el lenguaje que esta guardado, por lo tanto no envía ese header. Necesito que se ejecute primero el useEffect del languajeProvider.

javascript – ¿Es posible cambiar los colores de los bordes de distintos lados mediante un evento disparado por clics?

Por ejemplo tengo un cuadro hecho con un div

`.cuadro {
width: 31px;
height: 31px;
border: 2px solid;
}`

y lo que quiero hacer es tener un evento mediante un click cambiar los colores de los bordes de manera tal que ocurra lo siguiente click en borde derecho ->

`.cuadro {
width: 31px;
height: 31px;
border: 2px solid;
border-right: 2px solid red;
}`

click en borde izquierdo

.cuadro {
width: 31px;
height: 31px;
border: 2px solid;
border-right: 2px solid red;
border-left: 2px solid blue;

}

Buscar en 2 campos distintos de un array de objetos a partir de otro array [TypeScript]

Tengo un array simple:

array = ('campo1','campo2')

Y aquí el otro:

array2 = (
   {'campo1': x},
   {'campo2': x},
   {'campo3': x},
)

En un input he de introducir texto y que lo busque en cualquier campo del array2

Me funciona así:

this.array2.filter((option: any) => 
 (option(this.array(0)).toLowerCase().includes('textoIntroducidoEnUnInput')) ||
 (option(this.array(1)).toLowerCase().includes('textoIntroducidoEnUnInput')));

El problema es que yo no sé cuántos campos son ni como se llaman, ¿cómo haríais la búsqueda en los 2 campos y que lo devuelva todo en un mismo array? Lo he intentado con un for pero sólo devuelve los casos en los que el texto introducido coincida en todos los campos

Unir distintos csv de distinto tamaño de datos en uno solo con python

Tengo distintos archivos csv y todos tienen escrito solo la primera columna, pero tienen diferente tamaño. Por ejemplo un archivo puede tener en una columna 100 datos y otro archivo puede tener en esa columna 35. Entonces me gustaría ‘meter’ cada csv en una columna distinta de un mismo archivo. ¿Es posible?

java – Hola, modelo MVC con distintos frames

quiero hacer un proyecto de tratamiento de imágenes con el modelo MVC pero necesito que tome las acciones de distintos botones en distintas ventanas.
Tiene un frame principal donde se aplican todos los filtro, pero varios de ellos necesitan parámetros, para los que necesitaban parámetros decidí, crear frames específicos para recibir los valos con los que trabajaran cada método, pero agregue un botón en cada frame para que al momento de presionarlo mande la información y pueda trabajar el método con ella.

public void actionPerformed(ActionEvent e) {//Aqui se reciben las acciones del frame principal, pero 
//ya no se como mandar los de las demas ventanas 
String but1= e.getActionCommand();

Pero ya no se como recibir los demás frames, para que puedan funcionar los botones.

public class ControladorProti implements ActionListener{
private ModeloProti modelo;
private VistaProti vista;
private VistaUmbral vistaa;
private VistaConvo vistaaa;
private VistaDomi vistaaaa;
File archivoImagen;
String umbralUno;
String umbralDos;

public ControladorProti(ModeloProti modelo, VistaProti vista, VistaUmbral vistau, VistaConvo vistac, VistaDomi vistad){
    this.modelo = modelo;
    this.vista = vista;
    this.vistaa = vistau;
    this.vistaaa = vistac;
    this.vistaaaa = vistad;
    this.vista.jButton1.addActionListener(this);
    //
    this.vistaaa.jButton1.addActionListener(this);
    
}

ControladorProti(VistaProti vistap, ModeloProti modelop, VistaUmbral vistau, VistaConvo vistac, VistaDomi vistad) {
    throw new UnsupportedOperationException("Not supported yet."); //To change body of generated methods, choose Tools | Templates.
}

public void ini(){
    vista.setTitle("Proyecto de Introduccion al Tratamiento de Imagenes");
    vista.setLocationRelativeTo(null);
}

//@Override
public void actionPerformed(ActionEvent e) {//Aqui se reciben las acciones del frame principal, pero 
    //ya no se como mandar los de las demas ventanas 

//Botones
    String but1= e.getActionCommand();
    if(but1.equals("Abrir")){
        JFileChooser jfc = new JFileChooser();
        jfc.showOpenDialog(vista);
        archivoImagen=jfc.getSelectedFile();
        ImageIcon ruta= new ImageIcon(archivoImagen.getAbsolutePath());
        Icon icono = new ImageIcon(ruta.getImage().getScaledInstance(vista.jLabel6.getWidth(),vista.jLabel6.getHeight(), Image.SCALE_DEFAULT));
        vista.jLabel6.setIcon(icono);
        this.vista.repaint();

Como obtener registros distintos o que no sean iguales de dos tablas relacionadas SQL SERVER

Antes que nada, gracias a todos por leerme.
Soy nuevo en esto y estoy atorado en una consulta. Tengo dos tablas que estan unidas por un id en comun. La tabla “Clientes” y la tabla “TiposCliente”, el campo que hace match entre estas dos tablas es IdCliente

SELECT * FROM Clientes as A INNER JOIN TiposCliente AS B ON A.IdCliente=B.IdCliente

Con esta consulta logre sacar los registros que son iguales pero ahora necesito sacar los registros que no son iguales, o sea que no estan relacionados con IdCliente de la Tabla TiposCliente, intente usando un EXCEPT pero no funciona:

SELECT * FROM Clientes
EXCEPT
SELECT * FROM Clientes As A INNER JOIN TiposCliente As B ON A.nIdProveedor42=B.nIdProv42

Esta con sulta me arrojo un error “All queries combined using a UNION, INTERSECT or EXCEPT operator must have an equal number of expressions in their target lists.”

Agradeceria mucho su ayuda.

c – Comunicar n comandos distintos con pipes

tengo un pequeño programa que ejecuta dos comandos conectados por un pipe en este caso ls | wc y me gustaría generalizarlos para n comandos, por ejemplo, ls | cat | wc

Mi programa es el siguiente:

#include <sys/types.h>
#include <stdio.h>
#include <unistd.h>

int main(void){

int fd(2);
pid_t pid;

    if(pipe(fd)<0){
           perror(“Error al crear la tubería”);
           return1;
    }

    pid = fork();
    
    switch(pid){
         case -1:
             perror(“fork”);
             return 1;
    

En el hijo ejecuto el primer comando ls

case 0: 
             close(fd(0));
             close(STDOUT_FILENO);
             dup(fd(1));
             close(fd(1));
             execlp(“ls”, “ls”,NULL);
             perror(“exec”);
             return 1;
             break;
       

Aquí en el padre ejecuto el segundo comando wc

default:
            close(fd(1));
            close(STDIN_FILENO);
            dup(fd(0));
            close(fd(0));
            execlp(“wc”, “wc”,NULL);
            perror(“Error en el exec”);
      return 1;
    }
return 0;
}

¿Qué cambios debería hacer y cuáles?

c# – PictureBox con fondo transparente sobre distintos controles

Estoy intentando que un PictureBox con transparencia que muestre la parte correspondiente de los diferentes controles que pueden ponerse detrás suya.

Básicamente mi aplicación son varios UserControl que en algún momento van a coincidir con mi PictureBox, sobre todo porque va a ser necesario en algún momento que el usuario haga scroll para ver los UserControl que no caben en la pantalla.

introducir la descripción de la imagen aquí

Tal y como muestro en la imagen el PictureBox copia la imagen de fondo que tiene el Form en su zona con transparencia, pero en el momento que uno de los controles se le cruza no lo pinta.

Viendo diferentes soluciones probé a cambiar el parent del PictureBox por el del control que se acaba de cruzar pero por algún motivo desaparece el PictureBox.

private bool ComprobarInterseccion()
{
    Rectangle imgRect = new Rectangle(pictureBox1.Location, new Size(67, 64)); //tamaño del área con transparencia
    Rectangle controlRect;
    for (int i = 0; i < misControles.Count; i++)
    {
        controlRect = new Rectangle(misControles(i).Location, misControles(i).Size);
        if (Rectangle.Intersect(controlRect, imgRect) != Rectangle.Empty)
        {
            pictureBox1.Parent = misControles(i);
            return true;
        }
    }
    return false;
}

Todos los controles de la lista, aunque los he creado por código, los he añadido al Form mediante Controls.Add().

Puede que la solución sea muy sencilla pero no he sido capaz de ver cual es. Creo que puede ser sobrescribir el método Paint del PictureBox, pero con mis conocimientos actuales no sabría que he de poner para que funcionase como yo quiero.

Muchas gracias de antemano.

height – ¿como puedo hacer para que un contenedor o imagen cambie su tamaño con los distintos breakpoints usando flex-layout de Angular?

Estoy comenzando a entender flex-layout de Angular, pero hasta ahora no he visto como pudiera hacer para que un contenedor o una imagen cambie de tamaño dependiendo del tamaño de la pantalla?

Ejemplo:

    <div class="cont1" style="height: 400px; width: 400px">
        <img src="data:image/jpeg;base64,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" style="height: 100%; width: 100%;">
    </div>

y quisiera que al llegar al breakpoint xs, tuviese un height de 200px y width de 200px , en el breakpoint sm tuviese un height de 300px y width de 300px y así sucesivamente. ¿como podría lograr esto?

lo único que se me ha ocurrido es usar media queries en el CSS pero no estoy muy seguro de si es una buena práctica eso, sería buena práctica usar media queires en el CSS cuándo estás usando Flex-Layout?

Gracias a todos de antemano,

Saludos!