DEV Community: Vu Anh Duc

Happy Number

Vu Anh Duc — Sun, 12 Apr 2020 19:14:15 +0000

Happy Number

Write an algorithm to determine if a number n is "happy".

A happy number is a number defined by the following process: Starting with any positive integer, replace the number by the sum of the squares of its digits, and repeat the process until the number equals 1 (where it will stay), or it loops endlessly in a cycle which does not include 1. Those numbers for which this process ends in 1 are happy numbers.

Input: 19
Output: true
Explanation:
12 + 92 = 82
82 + 22 = 68
62 + 82 = 100
12 + 02 + 02 = 1

Solution

Ý tưởng ban đầu là:

tách số thành từng chữ số
Tính tổng bình phương của các chữ số
Nếu tổng là 1 thì trả về True và dừng.
Nếu tổng khác 1 thì lặp lại quá trình với tổng vừa tạo ra.

Vấn đề trong bài toán này thực ra lại đến từ điều kiện dừng cho trường hợp không phải là Happy number. Như quá trình được mô tả, thì nếu không phải là Happy number, quá trình sẽ lặp vô hạn.

Một số hướng để xác định điều kiện dừng:

Cách 1

Nếu tổng tạo ra ở bước 2 xuất hiện 2 lần mà không phải là 1 thì chắc chắn đó không phải là 1 Happy Number.

Cách 2

Xuất phát từ 2 nhận xét:

Trong quá trình tính, nếu tổng tạo ra là 1 Happy Number thì số ban đầu cũng là Happy Number.
Trong quá trình tính, với số bước nào đó thì tổng tạo ra sẽ là số dương < 10.

Trong 10 số từ 0 -> 9, có thể thấy chỉ có số 1 và số 7 là Happy Number. Cụ thể:

(0) 0 -> 0 => Not Happy number

(1) 1 -> Happy Number

(2) 2 -> 4 -> 16 -> 37 -> 58 -> 89 -> 145 -> 42 -> 20 -> 4 -> Lặp lại => Not Happy Number

(3) 3 -> 9 -> 81 -> 65 -> 61 -> 37 -> 58 -> Lặp với 58 ở (2) => Not Happy Number

(4) 4 -> Not Happy number

(5) 5 -> 25 -> 29 -> 85 -> 89 -> Lặp lại với 89 ở (2) => Not Happy Number

(6) 6 -> 36 -> 45 -> 41 -> 17 -> 50 -> 25 -> Lặp ở (5) => Not Happy Number

(7) 7 -> 49 -> 97 -> 130 -> 10 -> 1 => Happy Number

(8) 8 -> 64 -> 52 -> 29 -> Lặp ở (5) => Not Happy Number

(9) 9 -> 81 -> 65 -> Lặp ở (3) => Not Happy Number

Nên, nếu trong quá trình tính, mà tổng xuất hiện 1 hoặc 7 thì có thể kết luận là Happy Number. Nếu tổng là 1 chữ số mà khác 1 và 7 thì không thể là Happy Number.

Solution

// extension Int type to calculate sum of square of its digits
extension Int {
  func happySum() -> Int {
    var result = 0
    for c in String(self) {
      let val = Int(c.asciiValue!) - 48
      result += val * val
    }
    return result
  }
}

func isHappyNumberV1(_ num: Int) -> Bool {
  // to store all sum
  var sumStored = [Int: Bool]()
  var sum = num
  var loopCount = 0
  repeat {
    if sum == 1 {
      print("Loop Count: ", loopCount)
      return true
    }
    if sumStored[sum] ?? false {
      print("Loop Count: ", loopCount)
      return sum == 1
    }
    sumStored[sum] = true
    sum = sum.happySum()
    loopCount += 1
  } while true
}

func isHappyNumberV2(_ num: Int) -> Bool {
  var sum = num
  var loopCount = 0
  repeat {
    if sum == 1 || sum == 7 {
      print("Loop Count: ", loopCount)
      return true
    }

    sum = sum.happySum()
    if sum < 10 {
      print("Loop Count: ", loopCount)
      return sum == 1 || sum == 7
    }
    loopCount += 1
  } while true
}

Result

For solution 1

401 / 401 test cases passed.
Status: Accepted
Runtime: 8 ms
Memory Usage: 21.1 MB

For solution 2

401 / 401 test cases passed.
Status: Accepted
Runtime: 4 ms
Memory Usage: 21.8 MB

Original Post: My Blog

Single Number problem

Vu Anh Duc — Sun, 12 Apr 2020 19:12:34 +0000

Problem

Given a non-empty array of integers, every element appears twice except for one. Find that single one.

Note:

Your algorithm should have a linear runtime complexity. Could you implement it without using extra memory?

Example 1:

Input: [2,2,1]
Output: 1

Example 2:

Input: [4,1,2,1,2]
Output: 4

Solution

Suy nghĩ đầu tiên là duyệt mảng, và đếm số lần xuất hiện của từng phần tử. Tuy nhiên, chắc chắn độ phức tạp không thể là linear và phải sử dụng thêm bộ nhớ.

Phương pháp được gợi ý là sử dụng phép toán bit XOR với tính chất:

a XOR a = 0
a XOR 0 = a

Với mảng đầu vào có đặc điểm là các phẩn tử xuất hiện tối đa 2 lần, chỉ một phần tử xuất hiện 1 lần.

Lời giải là đơn giản duyệt mảng và áp dụng phép toán bit XOR với từng phần tử, kết quả cuối cùng sẽ là phần tử xuất hiện 1 lần trong mảng.


func singleNumber(_ nums: [Int]) -> Int {
    var res = 0
    for i in 0..<nums.count {
        res = res ^ nums[i]
    }
    return res
}

Result

16 / 16 test cases passed.
Status: Accepted
Runtime: 80 ms
Memory Usage: 21.3 MB

Original Post: My blog

Understanding about animation

Vu Anh Duc — Mon, 10 Feb 2020 08:50:05 +0000

Animation là việc làm cho một đối tượng chuyển động hoặc biến đổi theo một quy tắc nào đó.

Trong giao diện người dùng, animation có thể là:

di chuyển thành phần từ vị trí này sang vị trí khác
thay đổi kích thước của thành phần: phóng to, thu nhỏ
thay đổi thuộc tính của thành phần: chuyển màu, trở lên trong suốt, biến mất,....

Các thành phần cơ bản của animation

duration: thời gian thực hiện sự biến đổi
delay: độ trễ từ khi đối tượng xuất hiện đến khi sự biến đổi bắt đầu
direction: hướng của sự biến đổi, từ 0 => 100 hay từ 100 => 0.
iteration count: số lần lặp lại sự biến đổi
name: tên định danh của sự biến đổi.

Như vậy, Một animation có thể coi giống như 1 đồng hồ đếm thời gian (duration) cho một đối tượng đi từ 0 => 100 hoặc ngược lại (direction), và số vòng lặp mà chiếc đồng hồ này sẽ chạy (interation count).

Tên của animation tham chiếu đến 1 khái niệm khác, gọi là keyframe.

Về cơ bản, keyframe là bộ quy tắc quy định sự biến đổi diễn ra như thế nào: thuộc tính nào bị thay đổi, và thay đổi như nào trong khi sự biến đổi diễn ra.

1 animation được chia ra thành 100 keyframe (từ 0 đến 100), tại mỗi frame, chúng ta có thể chỉ định giá trị của thuộc tính.

React Native: Final Form, react-native-paper and typescript

Vu Anh Duc — Sat, 18 Jan 2020 14:54:38 +0000

use `react-final-form` with `react-native-paper`

Problem:

type TextFieldProps = FieldRenderProps<string, any> & {
  label?: string;

};

const TextField: React.FC<TextFieldProps> = ({
  input,
  meta,
  label,
  ...rest
}: TextFieldProps) => (
  <TextInput label={label} type="text" {...input} {...rest} />
);

Khi sử dụng TextInput của react-native-paper với Field của react-final-form, typescript compiler sẽ thông báo lỗi:


Type '{ name: string; onBlur: (event?: FocusEvent<any> | undefined) => void; onChange: (event: any) => void; onFocus: (event?: FocusEvent<any> | undefined) => void; type: string; value: string; checked?: boolean | undefined; multiple?: boolean | undefined; label: string | undefined; }' is not assignable to type 'Pick<TextInputProps, "error" | "value" | "label" | "ref" | "style" | "allowFontScaling" | "autoCapitalize" | "autoCorrect" | "autoFocus" | "blurOnSubmit" | "caretHidden" | "contextMenuHidden" | ... 97 more ... | "dense">'
  Types of property 'onBlur' are incompatible.
    Type '(event?: FocusEvent<any> | undefined) => void' is not assignable to type '((e: NativeSyntheticEvent<TextInputFocusEventData>) => void) & ((args: any) => void)'.
      Type '(event?: FocusEvent<any> | undefined) => void' is not assignable to type '(e: NativeSyntheticEvent<TextInputFocusEventData>) => void'.
        Types of parameters 'event' and 'e' are incompatible.
          Property 'relatedTarget' is missing in type 'NativeSyntheticEvent<TextInputFocusEventData>' but required in type 'FocusEvent<any>'.

Causes

Nguyên nhân là do signature của thuộc tính onBlur của final-form và react-native-paper là khác nhau.

Cũng hợp lý, vì vốn dĩ final-form không nhắm đến react-native.

Fix

Để khắc phục vấn đề này, cần khai báo thêm thuộc tính onBlur và onFocus với signature giống với của react-native-paper.


type TextFieldProps = FieldRenderProps<string, any> & {
  label?: string;
  onBlur: ((e: NativeSyntheticEvent<TextInputFocusEventData>) => void) &
    ((args: any) => void);
  onFocus: ((e: NativeSyntheticEvent<TextInputFocusEventData>) => void) &
    ((args: any) => void);
};

const TextField: React.FC<TextFieldProps> = ({
  input,
  meta,
  label,
  ...rest
}: TextFieldProps) => (
  <TextInput label={label} type="text" {...input} {...rest} />
);

Conclusion

still don't understand.
We learn javascript because of its dynamic types. And now we learn typescript to enable strong-types for javascript.

Stories of Form - Validation

Vu Anh Duc — Fri, 17 Jan 2020 04:02:28 +0000

Introduction

Validation is a compulsory feature for every input form. Basically, the validation of the user's input data should be instant feedback.

Instant feedback means right after the user finishing the input, the system should provide a response about the validity of data, or at least show to the user that the validation process is running. If the data is invalid, the response should provide enough information to help the user rectify the data.

Validation logic could be based on many factors. It depends on the system's requirements, type of data,... For example:

Time to trigger the validation: when the user inputting, or when the user finishing the input.
Validation method: synchronous (input's format, comparison,...), or asynchronous (duplication, existent,...)
Validation data: by Field-level, or by Form-level.
Time to feedback: when the user opens the form, or after the user touches a field.

How does `Final-Form` do validation?

Firstly, final-form have 2 validation levels: Field-Level and Form-Level, by using validate attribute of <Field> and <Form> tags.
Especially, we can use both synchronous and asynchronous methods as a validation method. These methods should only care about the return result. At Field-Level, the return result should be a string which is the feedback's content in the invalid case, or undefined for the valid case. At Form-Level, the return result should be an object which has keys are the field's names and values are the feedback of fields. Or we can use a special key FORM_ERROR to set the feedback for whole form.

Tương tự như các thư viện khác, final-form cung cấp thông tin meta bao gồm các cờ thể hiện trạng thái của Field và Form nhằm hỗ trợ quyết định thời điểm thực hiện kiểm tra và thời điểm phản hồi. Các trạng thái thường dùng như:

pristine: còn "trinh". chưa được người dùng truy cập (focus, input,...) tới.
dirty: người dùng đã truy cập
touched: người dùng đã focus vào
active: người dùng đang focus
invalid: đã thực hiện kiểm tra và không hợp lệ
valid: đã kiểm tra và hợp lệ
validating: đang kiểm tra

Demo

Field-Level synchronous validation

Some notes:

We can compose some simple validations. We can use a validation library like yup. Just keep in mind the format of the output.
We can access other fields' value and field state inside the validation
By default, validation is triggered on change

Field-Level asynchronous validation

Some notes:

In async validation function, must use resolve in case of invalid data. reject is reserved for API's errors
Currently, there is an issue related to validating flag which reported here #713

Kiểm tra toàn bộ form

Stories of Form - First story

Vu Anh Duc — Thu, 16 Jan 2020 06:47:51 +0000

Most Simple Form
Various Field Types

Most simple form

A form has 1 main feature is collecting data from users. To achieve that, a form should have at least 2 abilities:

Displaying input fields
Collecting inputted data

The most simple form should be declared like bellow:

import React from "react";
import { Form, Field } from "react-final-form";

export default function SimpleForm() {
  const handleSubmitData = values => {
    console.log("form values", values);
  };
  return (
    <Form onSubmit={handleSubmitData}>
      {formProps => {
        const { handleSubmit } = formProps;
        return (
          <form onSubmit={handleSubmit}>
            <Field name="name" component="input" />
            <button type="submit">Submit</button>
          </form>
        );
      }}
    </Form>
  );
}

Input fields are represented by <Field> component
When users submit the form, all inputted data are collected and passed to the handleSubmitData function in values parameter

Note

At the first look, final-form syntax seems confused because of Form and form, handleSubmit vs onSubmit... but I think we can survive with it.

Various Field Types

The next request for a Form library is the ability of represents various field types: text field, text area, checkbox, select,...

final-form gives you this power by providing 4 ways to render a field.

Rendering with native component

<Field component="input" name="age" />

Rendering with custom React component


const InputField = ({ input, meta, label }) => {
  return (
    <label for={input.name}>
      {label}
      <input type="text" id={input.name} {...input} />
    </label>
  );
};

<Field name="lastName" component={InputField} label="Last Name" />

Rendering with the `render` method

<Field
    name="hometown"
    render={({ input, meta }) => {
    return (
        <div>
        <label for="hometown">Home Town</label>
        <input id="hometown" type="text" {...input} />
        </div>
    );
    }}
/>

Rendering with the `children` element

<Field name="gender">
    {({ input, meta }) => {
    return (
        <select name={input.name} {...input}>
        <option value="F">Female</option>
        <option value="M">Male</option>
        </select>
    );
    }}
</Field>

Next story: Stories of Form - Validation

Setup Saga in Reactjs

Vu Anh Duc — Thu, 19 Dec 2019 09:35:42 +0000

In this post, I will learn how to setup saga

Steps

Create react app
Setup redux
Setup saga

TLTR;
IMO, this approach we have some advantages:

all business logic will be placed in the saga, which can be considered as middleware of redux.
GUIs now just to grab user inputs and dispatch actions (including data) to redux and saga. There is no business logic in GUI.
Redux to get/set data only. no business logic.

Create react app

this is the simplest step, which can be done by using create-react-app util.

yarn create react-app test_saga

then wait a bit.

Setup redux

I'm going to use new redux toolkit to setup the redux.

yarn add react-redux redux @reduxjs/toolkit

then I need to write some code to setup the reducer.

Create a reducer

A reducer contains 2 main elements: State and action.

 // app/reducers/user-reducer.js

import { createAction, createReducer } from "@reduxjs/toolkit";

// declare an action
const addUserAction = createAction("@user/addUser");

// declare intialize state of reducer
const initialState = {
  users: []
};

// action handler
// here we use immer.js, so we don't need to return state.
const handleAddUser = (state, action) => {
  state.users.push(action.payload);
};

// export actions to easier access
export const UserActions = {
  addUserAction
};

// the reducer
export const reducer = createReducer(initialState, {
  [addUserAction.toString()]: handleAddUser
});

At this step, we have some notes:

@reduxjs/toolkit use immer.js for state, so we don't need to return new state in action handler.
by default, action object should be

{
    @type: string
    payload: any
}

why do I have to use toString() of action object in the reducer?

because we declare action object with name is different then the object name. And the reducer will handle aciton by action name, not object name.

Setup store

// app/store/createStore.js

import { configureStore, combineReducers } from "@reduxjs/toolkit";
import { reducer as userReducer } from "../reducers/user-reducer";

export function createStore() {
  const rootReducer = combineReducers({
    user: userReducer
  });
  const store = configureStore({
    reducer: rootReducer
  });

  return store;
}

at this step, we create a store which is our application state. This store will be passed into Application context, so that it can be accessed from everwhere inside the app.

Mount the store to the app

// index.js

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";

import "./styles.css";
import RootApp from "./App";
import { createStore } from "./store";

function App() {
  const store = createStore();
  return (
    <Provider store={store}>
      <RootApp />
    </Provider>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Here we wrap our root app inside the Provider which provide our store.

Write some code to demo how to use reducer in our app

// App.js

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { UserActions } from "./reducers/user-reducer";

function App() {
  const dispatch = useDispatch();
  const users = useSelector(state => state.user.users);
  const handleAddUser = () => {
    dispatch(
      UserActions.addUserAction({
        name: "test user"
      })
    );
  };
  return (
    <div className="App">
      My App
      <div>Number of Users:{users.length} </div>
      <button onClick={handleAddUser}>Add User</button>
    </div>
  );
}
export default App;

At here, when we click "Add user" button, action "addUserAction" will be fired and sent out with the payload is new user's information.

This action will be cauched by store, and pass to the user reducer. In its turn, user reducer call handleAddUser action handler to process the action.

When the state changed, useSelector will trigger re-render.

Setup saga

By using saga, we try go put all our business logic at one place.
The flow will be like that:

the GUI fires action addUserRequest with new user information in the payload
Saga take the action:
- at first, it fires a setLoading action to ask the app showing loading state.
- next, it send data to api and wait the response.
- when get the response, it fires a addUserSuccess action to save new data, then fires another setLoading action to ask the app turn off loading state.

Update the reducer

// app/reducers/user-reducer.js

import { createAction, createReducer } from "@reduxjs/toolkit";

// this action will be handle by the saga
const addUserRequest = createAction("@user/addUserRequest");

// we (this reducer) only take care this action
const addUserSuccess = createAction("@user/addUserSuccess");
const initialState = {
  users: []
};

const handleAddUser = (state, action) => {
  state.users.push(action.payload);
};
export const UserActions = {
  addUserRequest,
  addUserSuccess
};
export const reducer = createReducer(initialState, {
  // we only handle this action.
  [addUserSuccess.toString()]: handleAddUser
});

add a new reducer to handle loading state

// app/reducers/loading-reducer.js
import { createAction, createReducer } from "@reduxjs/toolkit";

const setLoadingAction = createAction("@ui/setLoading");

function handleSetLoading(state, action) {
  state.loading = action.payload;
}
export const LoadingActions = {
  setLoadingAction
};
export const reducer = createReducer(
  {
    loading: false
  },
  {
    [setLoadingAction.toString()]: handleSetLoading
  }
);

Declare the saga

// app/sagas/user-saga.js

import { takeLatest, put, call } from "redux-saga/effects";

import { UserActions } from "../reducers/user-reducer";
import { LoadingActions } from "../reducers/loading-reducer";

// fake api
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
async function fakeApi() {
  await sleep(2000);
}

// this saga contains business logic of creating user
function* addingUserSaga({ payload }) {
  yield put(LoadingActions.setLoadingAction(true));
  console.log(`userinfo: ${payload.name}`);
  yield call(fakeApi);
  yield put(UserActions.addUserSuccess(payload));
  yield put(LoadingActions.setLoadingAction(false));
}

// this is important function, which delcare what we want.
// here we will to register that we will handle `addUserRequest`.
// `takeLatest` says that we only handle that latest one. 
export function setup() {
  return [takeLatest(UserActions.addUserRequest.toString(), addingUserSaga)];
}

and the main saga

// app/sagas/index.js

import { all } from "redux-saga/effects";
import * as userSaga from "./user-saga";

export function* setupSaga() {
  yield all([...userSaga.setup()]);
}

Update the app

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { UserActions } from "./reducers/user-reducer";

function App() {
  const dispatch = useDispatch();
  const users = useSelector(state => state.user.users);
  const loading = useSelector(state => state.loading.loading);
  const handleAddUser = () => {
    dispatch(
      UserActions.addUserRequest({
        name: "test user"
      })
    );
  };
  return (
    <div className="App">
      My App
      <div>Number of Users:{users.length} </div>
      {loading && <span>Loading...</span>}
      <button onClick={handleAddUser}>Add User</button>
    </div>
  );
}
export default App;

DEV Community: Vu Anh Duc

Happy Number

Happy Number

Solution

Cách 1

Cách 2

Solution

Result

For solution 1

For solution 2

Single Number problem

Problem

Solution

Result

Understanding about animation

React Native: Final Form, react-native-paper and typescript

use react-final-form with react-native-paper

Problem:

Causes

Fix

Conclusion

Stories of Form - Validation

Introduction

How does Final-Form do validation?

Demo

Field-Level synchronous validation

Field-Level asynchronous validation

Kiểm tra toàn bộ form

Stories of Form - First story

Table Of Contents

Most simple form

Various Field Types

Rendering with native component

Rendering with custom React component

Rendering with the render method

Rendering with the children element

Setup Saga in Reactjs

Steps

Create react app

Setup redux

Create a reducer

Setup store

Mount the store to the app

Write some code to demo how to use reducer in our app

Setup saga

Update the reducer

Declare the saga

Update the app

use `react-final-form` with `react-native-paper`

How does `Final-Form` do validation?

Rendering with the `render` method

Rendering with the `children` element