security – Would there be any actual secure, server side way to lock away react routes?

So I don’t know what I am asking is even possible but is there any way, like you can do with static HTML and CSS websites to only let a person see the “/test” route for example if they are verified?

I know this is possible with react-router-dom but as a perfectionist, I want to do it server side with preferably express and my own middleware (using JWT and MongoDB) to check user identities ETC.

Thanks a lot!

react – Can you integrate a SPFX sample into a already working project?

What I’m trying to accomplish, is to intergrate one working sample (a whole webpart) from pnp
/
sp-dev-fx-webparts

Now the issues I am having is that I am new to SPFX, Node.js and React. Is there a way to integrate two WebParts and their manifests so that they work fine? One of the samples from git is exactly what im looking for and I dont know how to proceed further with it.

I have seen a solution that allows you to combine them using yeomen But it does not seem to work for me, might be an issue that the two versions of the projects run different versions of certain packages.

react native – Manejo de estado normalizado en redux, ¿Debo traer todas las entidades en una sola llamada a una api?

Tengo varias dudas del manejo de estado con redux.

Mi base de datos está en gestionada por mysql y en total tengo 8 entidades:
budget,
customers,
expenses,
payments,
presents,
products,
sales,
users.

Ahora quiero obtener toda esa información a través de una api para después en el front end manejarla con redux pero tengo muchas dudas sobre como traer esa información de la api, por ejemplo, esta es una option:

traer todas las entidades en un solo end-point

api = "data/api/data";

//result


{
 budget: (...)
 customers: (...)
 expenses: (...)
 payments: (...)
 presents: (...)
 products: (...)
 sales: (...)
 users: (...)
}



Segunda Opción:
traer cada entidad con su propio end-point

api="data/api/budget"
{
 budget: (...)
}

api="data/api/customers"
{
 customers: (...)
}

api="data/api/expenses"
{
 expenses: (...)
}

etc etc...

Tercera Opción: Traer todos los datos desnormalizados

èjemplo

{
 customers: {
   id: 1
   name: '',
   lastname: '',
   payments: (...),
   purchase: (...)
 },
 sales: {
  id: 1,
  date: '...',
  customer: {...}
  product: {...}
 }
 
//y así con las demás entidades (tablas) y sus relaciones

}

Estas tablas cuentan con triggers y procedimientos almacenados y transacciones los cuales se ejecutan con con los inserts y updates y demás. Ahora, una vez que haya elegido un método para el manejo de estado, cuando tenga que actualizar información desde el front end, necesito traer de nuevo el estado desde la api y actualizar de nuevo TODO el estado de redux? lo menciono porque al hacer una una inserción o una actualización a las tablas se modifican varias, no sólo una.

muchas gracias por su ayuda, Soy nuevo en redux y en general en esto de la programación.

reactjs – Which is the correct way to handle Form submission in React?

In the React documentation and a bunch of examples in various projects, form submission is handled in this manner:

const FormComponent = () => {
  const (val, setVal) = useState('');

  const onChange = (e) => {
    setVal(e.target.value);
  }

  const onSubmit = (e) => {
    e.preventDefault();

    console.log(val);
    // handle submit logic using "val"
  }

  return (
    <form onSubmit={onSubmit}>
      <input type="text" value={val} onChange={onChange} />
      <input type="submit" value="Submit" />
    </form>
  )
}

While in other places I’ve seen code like this

const FormComponent = () => {
  const (val, setVal) = useState('');

  const onChange = (e) => {
    setVal(e.target.value);
  }

  const onSubmit = () => {
    console.log(val)
    // handle submit logic using "val"
  }

  return (
    <div>
      <input type="text" value={val} onChange={onChange} />
      <button onClick={onSubmit}>Submit</button>
    </div>
  )
}

They both seem to achieve exactly the same thing. Which is the better way of doing it?

css – React component to display emojis from different sources

I’m looking forward for any feedback to help improve in any way this React component that will render an emoji from GitHub, Twitter or OpenEmoji:

import React from "react";

const placeholder = "{unicode}";
const sources = {
  GitHub: {
    src: `https://github.githubassets.com/images/icons/emoji/unicode/${placeholder}.png?v8`,
    upperCase: false,
  },
  Twitter: {
    src: `https://twemoji.maxcdn.com/v/latest/svg/${placeholder}.svg`,
    upperCase: false,
  },
  OpenMoji: {
    src: `https://www.openmoji.org/data/color/svg/${placeholder}.svg`,
    upperCase: true,
  },
};

export type SemojiProps = {
  className?: string;
  emoji: string;
  height?: string;
  source: keyof typeof sources;
};
export function Semoji({
  className = "",
  emoji,
  height = "1em",
  source,
}: SemojiProps): JSX.Element | null {
  const unicode = emoji.codePointAt(0)?.toString(16);

  if (!unicode) {
    return null;
  }

  const { src, upperCase } = sources(source);

  return (
    <span style={{ lineHeight: 0 }}>
      <img
        alt={emoji}
        className={className}
        src={src.replace(
          placeholder,
          upperCase ? unicode.toUpperCase() : unicode
        )}
        style={{ display: "inline-block", height }}
      />
    </span>
  );
}

export default Semoji;

The code is straightforward, but any insights to improve it are very appreciated. I’m specifically concern about a11y, semantic markup, and styling issues.

CodeSandbox example: https://codesandbox.io/s/sleepy-sun-cz47o

React native mobile app won’t play Msft-hosted videos using Azure app authentication

We’re having issues getting videos hosted in Sharepoint Online or Stream to render in our React Native mobile app. We’re using Azure AD for authentication with AllSites.Write permissions and standard REST apis and can surface the video urls and wrap them in video tags fine in the app but they just won’t play. Since correctly formatted urls from a host like Kaltura do play in the app, I assumed this was an issue with authentication, but AllSites.Write should cover videos hosted in Sharepoint, even if not in Stream.
Does anyone have any experience with this?

aws – how I can confirm SNS subscription from my app in react?

I want to confirm the subscription of my app in react, I’m using aws sdk, there is a method to confirm the subscription but I need a token to do it, I don’t know where to get it.

https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/SNS.html#confirmSubscription-property

var params = {
  Token: 'STRING_VALUE', /* required */
  TopicArn: 'STRING_VALUE', /* required */
  AuthenticateOnUnsubscribe: 'STRING_VALUE'
};
sns.confirmSubscription(params, function(err, data) {
  if (err) console.log(err, err.stack); // an error occurred
  else     console.log(data);           // successful response
});

I have seen that the subscription can be confirmed from the AWS console, but I need the subscription confirmation URL to do it and I don’t know where to get it.

At this moment I have my application in my local environment and I use grok to publish it on the web.

react native – Force launcher icon change when deploying App to Android device

I’m using the following SaaS to generate my AppIcon https://appicon.co/

I then overwrite files in …MyAppandroidappsrcmainres and also copy/rename the files that weren’t generated, so all the files have the same icon/image

When I re-install the app in the device (uninstall first old version), the launcher icon is not modified. No matter if I install the app in device with npx react-native run-android or send the apk to phone after gradlew assembleRelease

Is there any way to force Android to show latest App’s AppIcon set ? In Launcher, App drawer, etc.

Xiaomi RN 7 – Android 9 PKQ1.180904.0001 – MIUI Global 10.3.6
Restarting phone does not solve
Updated icon and roundIcon
Setting -> Apps -> All -> yourApp – > Clear Cache does not solve

react native – Text direcionando para outra tela

Olá, tudo bem?

Estou desenvolvendo um aplicativo em react-native e ele está apresentando um comportamento muito estranho. Eu tenho um componente TEXT que recebe um valor do banco de dados, porém quando toco nesse TEXT ele está chamando outra tela, e o estranho, é que não tem nada programado para isso acontecer. Estou utilizando o @react-navigation.

<Text style={styles.label}>{form.unitMeasurement}</Text>

Estilo aplicado na label:

  label: {
        color: '#322153',
      }

Aí estou sem ideias de como resolver. Isso está ocorrendo somente na versão 8.1 do android em um modelo diferente de coletor de dados.

reactjs – React JS Hooks with useState call same function but with params

Hi I’m finding I’m having to duplicate the same function over again when I could write one function that handles different parameters. I can’t get it to work so I wondered if someone could point me in the right direction? Below shows only 2 functions but in reality I’ve got many that all do the same thing.

import React, {useState} from "react"

const Section = ({ children }) => {
return (

    <>
        <Wrapper children = {children} />
    </>

   );
};
const HandlePages = () => {
    const (showPageFooDialogue, setShowPageFooDialogue) = useState(false);
    const (showPageBarDialogue, setShowPageBarDialogue) = useState(false);

    const (currentDialogue, setCurrentDialogue) = useState(0);


    {showPageFooDialogue && (
        <Section>

            <Headers heading = {"Foo Title"} currentDialogue = {currentDialogue} pages = {fooContents.length} />

            {fooContents(currentDialogue)}

        </Section>
    )}

        )


     {showPageBarDialogue && (
        <Section>

            <Headers heading = {"Bar Title"} currentDialogue = {currentDialogue} pages = {barContents.length} />

            {barContents(currentDialogue)}

        </Section>
    )}

    )
}

const fooContents = (

    //Lots of functionality specific to foo listed as the children of this function
);

const barContents = (

    //Lots of functionality specific to bar listed as the children of this function
);
return (

<button onClick={() => setShowPageFooDialogue(true)}>Click for Page Foo</button>
<button onClick={() => setShowPageBarDialogue(true)}>Click for Page Bar</button>

 )
}
export default HandlePages

Basically where I’ve got

    const (showPageFooDialogue, setShowPageFooDialogue) = useState(false);
    const (showPageBarDialogue, setShowPageBarDialogue) = useState(false);

I need just one function such as this but somehow pass 2 parameters to it:

  const (showPageGenericDialogue, setShowPageGenericDialogue) = useState(false);

and where I’ve got:

{showPageFooDialogue && (
        <Section>

            <Headers heading = {"Foo Title"} currentDialogue = {currentDialogue} pages = {fooContents.length} />

            {fooContents(currentDialogue)}

        </Section>
    )}

        )
{showPageBarDialogue && (
        <Section>

            <Headers heading = {"Bar Title"} currentDialogue = {currentDialogue} pages = {fooContents.length} />

            {barContents(currentDialogue)}

        </Section>
    )}

    )
}

I need just one function with 2 parameters for “Foo or Bar Title” (param1) and fooContents or barContents (param2):

{showPageGenericDialogue && (
        <Section>

            <Headers heading = {param1} currentDialogue = {currentDialogue} pages = {param2.length} />

            {param2(currentDialogue)}

        </Section>
    )}

    )
}

And then finally the buttons:

<button onClick={() => setShowPageFooDialogue(true)}>Click for Page Foo</button>
<button onClick={() => setShowPageBarDialogue(true)}>Click for Page Bar</button>

should just pass the parameters something like:

<button onClick={() => setShowPageGenericDialogue(true, fooParam1, fooParam2)}>Click for Page Foo</button>
<button onClick={() => setShowPageGenericDialogue(true, barParam1, barParam2)}>Click for Page Bar</button>

I’ve looked at various solutions but due to my limitations I cannot apply them to this.

Any ideas?

Thanks.