DEV Community: timeturnback

How to encrypt and decrypt text in javascript client side with AES CFB 256

timeturnback — Mon, 31 Jul 2023 16:53:20 +0000

AES CFB 256 encrypt and decrypt text using crypto-js

// aes.js
import CryptoJS from 'crypto-js';

export function encryptText(keyStr, text) {
  const private_key = CryptoJS.SHA256(keyStr).toString(CryptoJS.enc.Latin1);
  const rem = text.length % 16;
  const padded = CryptoJS.enc.Latin1.parse(text.padEnd(text.length + (16 - rem), '\0'));
  const iv = CryptoJS.lib.WordArray.random(16);
  const cipher = CryptoJS.AES.encrypt(padded, CryptoJS.enc.Latin1.parse(private_key), {
    iv: iv,
    mode: CryptoJS.mode.CFB,
    padding: CryptoJS.pad.NoPadding,
    segmentSize: 128,
  });
  const ciphertext = iv.concat(cipher.ciphertext);
  return ciphertext.toString(CryptoJS.enc.Base64);
}

export const decryptText = (keyStr, text) => {
  const private_key = CryptoJS.SHA256(keyStr).toString(CryptoJS.enc.Latin1);
  const encrypted = CryptoJS.enc.Base64.parse(text);
  const iv = encrypted.clone().words.slice(0, 4);
  const ciphertext = encrypted.clone().words.slice(4);
  const cipherParams = {
    ciphertext: CryptoJS.lib.WordArray.create(ciphertext),
  };
  const decrypted = CryptoJS.AES.decrypt(cipherParams, CryptoJS.enc.Latin1.parse(private_key), {
    iv: CryptoJS.lib.WordArray.create(iv),
    mode: CryptoJS.mode.CFB,
    padding: CryptoJS.pad.ZeroPadding,
    segmentSize: 128,
  });
  const decryptedText = CryptoJS.enc.Utf8.stringify(decrypted);
  return decryptedText;
};

How to use reselect with zustand

timeturnback — Mon, 03 Jul 2023 08:34:28 +0000

Sometime , you may want to use a selector to pick up some comlicated calculation from the zustand store, in react , we have reselect to help us . But we can use reselect in zustand too.

First , let create a zustand store

import { create } from "zustand";

// Type
type BearData = {
  name: string;
  attitude: string;
  fishNeed: number;
};

type CatData = { name: string; attitude: string; fishNeed: number };

interface BearStoreState {
  fishes: number;
  bearsList: BearData[];
  catList: CatData[];
  addRandomBear: () => void;
  addRandomCat: () => void;
  addFish: () => void;
}

// Create the store with fish , cat and bears
const useBearStore = create<BearStoreState>((set) => ({
  fishes: 0,
  bearsList: [
    {
      name: "bear1",
      attitude: "angry",
      fishNeed: 2,
    },
  ],
  catList: [
    {
      name: "cat1",
      attitude: "angry",
      fishNeed: 2,
    },
  ],
  addRandomBear: () =>
    set((state) => ({
      bearsList: [
        ...state.bearsList,
        {
          name: `bear${state.bearsList.length + 1}`,
          attitude: Math.round(Math.random() * 100) % 2 === 0 ? "angry" : "happy",
          fishNeed: Math.round(Math.random() * 10),
        },
      ],
    })),

  addRandomCat: () =>
    set((state) => ({
      catList: [
        ...state.catList,
        {
          name: `cat${state.catList.length + 1}`,
          attitude: Math.round(Math.random() * 100) % 2 === 0 ? "angry" : "happy",
          fishNeed: Math.round(Math.random() * 10),
        },
      ],
    })),
  addFish: () => set((state) => ({ fishes: state.fishes + 5 })),
}));

We will have a simple App to run this example

I will separate the component into 4 parts for you to observe the renders of the component when the store change
You can watch the render with react dev tool

const App = () => {
  return (
    <div>
      <FishInfo />
      <BearInfo />
      <CatInfo />
      <AngryAnimalsInfo />
    </div>
  );
};

FishInfo

const FishInfo = () => {
  const addFish = useBearStore((state) => state.addFish);
  const fishes = useBearStore((state) => state.fishes);

  return (
    <div>
      <div>Total fished : {fishes}</div>
      <button onClick={addFish}>Add fish</button>
    </div>
  );
};

BearInfo

const BearInfo = () => {
  const addRandomBear = useBearStore((state) => state.addRandomBear);

  const angryBear = useBearStore(angryBearsSelect);

  return (
    <div>
      <button onClick={addRandomBear}>Add Bear</button>
      <h1>Angry bear</h1>
      {angryBear.map((item) => (
        <div key={item.name}>
          {item.name} - Need : {item.fishNeed}
        </div>
      ))}
    </div>
  );
};

CatInfo

const CatInfo = () => {
  const addRandomCat = useBearStore((state) => state.addRandomCat);
  const angryCat = useBearStore(angryCatReselect);

  return (
    <div>
      <button onClick={addRandomCat}>Add Cat</button>

      <h1>Angry cat</h1>
      {angryCat.map((item) => (
        <div key={item.name}>
          {item.name} - Need : {item.fishNeed}
        </div>
      ))}
    </div>
  );
};

AngryAnimalsInfo

const AngryAnimalsInfo = () => {
  const angryAnimals = useBearStore(angryAnimalsReselect);

  return (
    <div>
      <h1>Angry animals</h1>
      {angryAnimals.map((item) => (
        <div key={item.name}>
          {item.name} - Need : {item.fishNeed}
        </div>
      ))}
    </div>
  );
};

Finally . The selector .

I put the console.log here for you to observe how much time the selector run when the store change

const angryCatReselect = createSelector(
  (state: BearStoreState) => state.catList,
  (catList) => {
    console.log("angryCatReselect");
    return catList.filter((cat) => cat.attitude === "angry");
  }
);

const angryAnimalsReselect = createSelector(
  (state: BearStoreState) => state.bearsList,
  (state: BearStoreState) => state.catList,
  (bearsList, catList) => {
    console.log("angryAnimalsReselect");
    return [...bearsList, ...catList].filter((animal) => animal.attitude === "angry");
  }
);

const angryBearsSelect = (state: BearStoreState) => {
  console.log("angryBearsSelect");
  return state.bearsList.filter((bear) => bear.attitude === "angry");
};

Without reselect . The selector will run every time the store change . But with reselect . The selector will run only when the state that it depend on change

As you can see here , with angryBearsSelect , it will re-render everytime when you addFish, addRandomBear , addRandomCat . But with angryCatReselect , it will only re-render when you addRandomCat.

I put angryAnimalsReselect here as a example for multiple state selector . It will re-render when you addRandomBear , addRandomCat , not addFish

Put it all together

import { createSelector } from "reselect";
import { create } from "zustand";

type BearData = {
  name: string;
  attitude: string;
  fishNeed: number;
};
type CatData = { name: string; attitude: string; fishNeed: number };
interface BearStoreState {
  fishes: number;
  bearsList: BearData[];
  catList: CatData[];
  addRandomBear: () => void;
  addRandomCat: () => void;
  addFish: () => void;
}
const useBearStore = create<BearStoreState>((set) => ({
  fishes: 0,
  bearsList: [
    {
      name: "bear1",
      attitude: "angry",
      fishNeed: 2,
    },
  ],
  catList: [
    {
      name: "cat1",
      attitude: "angry",
      fishNeed: 2,
    },
  ],
  addRandomBear: () =>
    set((state) => ({
      bearsList: [
        ...state.bearsList,
        {
          name: `bear${state.bearsList.length + 1}`,
          attitude: Math.round(Math.random() * 100) % 2 === 0 ? "angry" : "happy",
          fishNeed: Math.round(Math.random() * 10),
        },
      ],
    })),

  addRandomCat: () =>
    set((state) => ({
      catList: [
        ...state.catList,
        {
          name: `cat${state.catList.length + 1}`,
          attitude: Math.round(Math.random() * 100) % 2 === 0 ? "angry" : "happy",
          fishNeed: Math.round(Math.random() * 10),
        },
      ],
    })),
  addFish: () => set((state) => ({ fishes: state.fishes + 5 })),
}));

const angryCatReselect = createSelector(
  (state: BearStoreState) => state.catList,
  (catList) => {
    console.log("angryCatReselect");
    return catList.filter((cat) => cat.attitude === "angry");
  }
);

const angryAnimalsReselect = createSelector(
  (state: BearStoreState) => state.bearsList,
  (state: BearStoreState) => state.catList,
  (bearsList, catList) => {
    console.log("angryAnimalsReselect");
    return [...bearsList, ...catList].filter((animal) => animal.attitude === "angry");
  }
);

const angryBearsSelect = (state: BearStoreState) => {
  console.log("angryBearsSelect");
  return state.bearsList.filter((bear) => bear.attitude === "angry");
};

const App = () => {
  return (
    <div>
      <FishInfo />
      <BearInfo />
      <CatInfo />
      <AngryAnimalsInfo />
    </div>
  );
};

const FishInfo = () => {
  const addFish = useBearStore((state) => state.addFish);
  const fishes = useBearStore((state) => state.fishes);

  return (
    <div>
      <div>Total fished : {fishes}</div>
      <button onClick={addFish}>Add fish</button>
    </div>
  );
};

const BearInfo = () => {
  const addRandomBear = useBearStore((state) => state.addRandomBear);

  const angryBear = useBearStore(angryBearsSelect);

  return (
    <div>
      <button onClick={addRandomBear}>Add Bear</button>
      <h1>Angry bear</h1>
      {angryBear.map((item) => (
        <div key={item.name}>
          {item.name} - Need : {item.fishNeed}
        </div>
      ))}
    </div>
  );
};

const CatInfo = () => {
  const addRandomCat = useBearStore((state) => state.addRandomCat);
  const angryCat = useBearStore(angryCatReselect);

  return (
    <div>
      <button onClick={addRandomCat}>Add Cat</button>

      <h1>Angry cat</h1>
      {angryCat.map((item) => (
        <div key={item.name}>
          {item.name} - Need : {item.fishNeed}
        </div>
      ))}
    </div>
  );
};

const AngryAnimalsInfo = () => {
  const angryAnimals = useBearStore(angryAnimalsReselect);

  return (
    <div>
      <h1>Angry animals</h1>
      {angryAnimals.map((item) => (
        <div key={item.name}>
          {item.name} - Need : {item.fishNeed}
        </div>
      ))}
    </div>
  );
};

export default App;

Some observation

When add fish , only FishInfo should re-render . But here . BearInfo re-render too . That is because we use angryBearsSelect to display list of angry bear , angryBearsSelect will trigger everytime state is change .

We actually can eliminate the render of BearInfo by using compare function . But , as you check the log of angryBearsSelect , the calculation will still run . So , it is better to use reselect to eliminate the calculation too .

const angryBear = useBearStore(angryBearsSelect, compare);

const compare = (prev: any, next: any) => {
  if (prev.length !== next.length) return false;
  for (let i = 0; i < prev.length; i += 1) {
    if (!isEqual(prev[i].id, next[i].id)) return false; // isEqual is come from lodash
  }
  return true;
};

CatInfo only be re-render when addRandomCat is called
AngryAnimalsInfo only be re-render when addRandomBear or addRandomCat is called . Of course . And it wont be re-render when you addFish

So that how we use re-render for zustands .

Simplest way to Automatic test your React Native app with Appium

timeturnback — Fri, 18 Jun 2021 09:53:05 +0000

You must hear about automation test . The instruction you found with google do not statisfy you . Ok . Here is the shortest one to help you test with the Appium for React Native . Pls notice , this tutorial is for the short test and fastest ways to test , not provide fully document about all kind of test aspect .

Ok lets go .

First . Download Appium

Come here and get yoursefl a desktop version of Appium .

Then . Open it ( Appium )

Open the appium app , run the server. Note the port , here is 4723

Press Start Server.

Write the code .

You will need webdriverio,jest and jasmine install

yarn add -D webdriverio jest jasmine

put this in appium/TestAppium.test.js ( or any directory if you know Jest )

import { remote } from "webdriverio";

// eslint-disable-next-line no-undef
jasmine.DEFAULT_TIMEOUT_INTERVAL = 60000;
let driver;

beforeAll(async () => {
  driver = await remote({
    path: "/wd/hub",
    host: "localhost",
    port: 4723,
    capabilities: {
      platformName: "iOS",
      platformVersion: "14.5", // must correct the stimuator
      deviceName: "iPhone 12 Pro Max", // must correct the stimuator
      appium: { connectHardwareKeyboard: true }
      // automationName: "XCUITest",
      // app: "org.reactjs.native.example.LearnRnE2eTest", // this is for open specify app
      // udid: process.env.IOS_DEVICE_UUID,
      // xcodeOrgId: "xxx",
      // xcodeSigningId: "Apple Development"
    }
    // logLevel: "silent"
  });
});

afterAll(async () => {
  if (driver) {
    await driver.deleteSession();
  }
});
test("Login test", async () => {
  await driver.pause(2000);

  const loginUsernameInput = await driver.$("~LoginInput");
  await loginUsernameInput.clearValue();
  await loginUsernameInput.setValue("TestAccount@test.com");
  await driver.hideKeyboard("pressKey", "next");

  const loginNextButton = await driver.$("~LoginNextButton");
  await loginNextButton.waitForExist();
  loginNextButton.click();
  await driver.pause(3000);

  const loginPasswordInput = await driver.$("~LoginPasswordInput");
  await loginPasswordInput.setValue("Test1234");
  const loginButton = await driver.$("~LoginButton");
  await loginButton.click();
  await driver.pause(3000);
});

Input device setting must correct the emulator

To access the id like LoginButton , you must set it up in React Native

<GreenButton
  testID={"LoginNextButton"}
  title={'Login'}
/>

testID with work on iOS

Run code with Jest

Ok . In conclusion , you will need those things to run

Appium started
Your app run on emulator ( through expo , react native metro (dev mode ) , stimulator app run on , ipa install on emulator ... any kind , just run the app , doesn't matter .. )
Jest ready

Then run the test with jest

jest appium

You can run jest only ( without appium , I put appium here beacause I put my test file in appium folder ).

And that is all . If you need more instructions , pls comment below so I can answer or make another tutorial for this .

A good template for expo user , base on Ignite

timeturnback — Thu, 10 Jun 2021 08:30:36 +0000

A well done boiletplate for expo

https://github.com/timeturnback/react-native-rc-expo-boiletplate

App
- Assets
- Components
- Config
- i18n
- Navigation
- ReduxSaga
- Services
- Themes
- Utilities
- index.js
.vscode/settings.json
.eslintignore
.eslintrc.json
.gitignore
.prettierrc.js
babel.config.js
jsconfig.json
package.json

`App`

Application structure . All FE running code will be here . I use index.js to represent the App.js in the expo init.

Assets

Put your font and image here

Components

For global component

Config

App config

i18n

For internation ( translate ) text

Navigation

Navigation setting and route name and style

ReduxSaga

ReduxSaga folder . I place it together for the easy find and work.

Themes
All the global themes should be put here .
Utilities
All the support code , like unit convert and other data function .
index.js

Replacement for App.js by default

`.vscode/settings.json` `babel.config.js` `jsconfig.json`

Setting for using @app static directory

Package

Package	Purpose
@react-native-community/async-storage	For using async-storage , require for redux persist
expo-app-loading	Apploading
expo-status-bar	Status bas
i18n-js	For international
moment	Time formating
react-native-modal	Modal use in app
react-native-size-matters	Size matter for consistent UI android and ios
OPTIONAL
react-native-keyboard-aware-scroll-view	For scrollview not date time picker ( optional )
react-native-picker-select	Picker select date time picker ( optional )
react-native-root-toast	For showing toast ( optional )
@react-native-community/datetimepicker	date time picker ( optional )
NAVIGATION
react-navigation	For navigation
react-navigation-stack	For navigation
react-native-gesture-handler	For navigation
react-native-reanimated	For navigation
@react-native-community/masked-view	For navigation
react-native-screens	For navigation
REDUX
react-redux	React Redux
redux	Redux
redux-persist	Redux persist ( for saving state when app go background or killed)
redux-saga	Redux saga
reduxsauce	Redux sauce
seamless-immutable	For redux state manage

Dev package

Package	Purpose
@babel /core
@babel /runtime
@react-native-community/eslint-config
metro-react-native-babel-preset
ESLINT
babel-eslint
babel-plugin-ignite-ignore-reactotron
eslint
eslint-config-standard
eslint-config-standard-react
eslint-plugin-import
eslint-plugin-node
eslint-plugin-promise
eslint-plugin-react
eslint-plugin-react-native
eslint-plugin-standard
JEST
jest
react-test-renderer
REACTOTRON
reactotron-react-native
reactotron-redux
reactotron-redux-saga

How to setup static directory for React / React Native ( @app )

timeturnback — Thu, 10 Jun 2021 08:20:32 +0000

Sometime you find out that the relative directory stress you up with a thoundsand character of path . this post is for you

import SomeThing from "../../../../../../../../components/Something";

Frist . You will need some package

yarn add -D babel-plugin-module-resolver

Then . The .bablerc ( or babel.config.js )

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [   // this plugins part 
      [
        'module-resolver',
        {
          alias: {
            '@app': '.' // if app files is inside "app/" folder, replace with "./app"
          }
        }
      ]
    ]
  };
};

Tips : maybe , when you copy this file from some template project , it will not replace a current default file and become babel copy.config.js and it will not work . Double check this .

OK , you can make a clean run and this will work .

Ok . It's actually can work now . But . If you need VS Code to help you redirect to the directory of file . you will need those 2 thing .

.vscode/setting.json

{
  "path-autocomplete.pathMappings": {
    "@app": "${workspace}" // alias similar to defined in .babelrc
  }
}

jsconfig.json

{
    "compilerOptions": {
        "allowJs": true,
        "allowSyntheticDefaultImports": true,
        "experimentalDecorators": true,
        "jsx": "react",
        "module": "es6",
        "moduleResolution": "node",
        "baseUrl": ".",
        "paths": {
            "@app/*" : ["./*"] // alias similar to defined in .babelrc
        },
        "sourceMap": true,
        "target": "ES6"
    },
    "exclude": [
        "node_modules"
    ]
}

That should work

One last things . If somehow your metro didn't found the directory . You make need to perform a clean start :

expo start -c // expo 
npx react-native start --reset-cache // react native base

How to hide the yellow box on React Native

timeturnback — Thu, 03 Jun 2021 09:46:29 +0000

Sometime , the yellow box warning is very annoying . The lock part of the UI so somehow we can interact to our app. Ok . Here I will show you a quick way to hide it .

Remember , some yellow box is helpful to show potential error , so you should never hide it all , only hide those happen regularly and you already know about it ( like some happen only on dev mode ... etc )

Ok here is how to hide it

On the App.js ( or actually any js , ts file . but better on the root file )

import { LogBox } from "react-native";
LogBox.ignoreLogs(["Firebase Analytics is not available in the Expo client"]);

Here as you can see . I hide the yellow box for Firebase Analytics only . But you can use this for hide all (not recommended)

 LogBox.ignoreAllLogs();