Forem: Nguyễn Hữu Hiếu

Java Spring Multiple Thread Check

Nguyễn Hữu Hiếu — Thu, 17 Apr 2025 14:16:02 +0000

Scenario

How to know which stream is used in the application?

Solution

Use Thread.sleep


import lombok.extern.slf4j.Slf4j;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

@Slf4j
@RestController
@SpringBootApplication
public class CheckThreadApplication {

    public static void main(String[] args) {
        SpringApplication.run(CheckThreadApplication.class);
    }

    @GetMapping("/trigger")
    public String trigger(
            @RequestParam("sleep") int sleep
    ) throws InterruptedException {
        log.info("THREAD START");
        Thread.sleep(sleep);
        log.info("THREAD END");
        return "SUCCESS";
    }
}

Test

Get API: GET http://localhost:8080/trigger?sleep=10000


#2025-04-17T23:10:18.536+09:00  INFO 41471 --- [springboot101] [io-8080-exec-15] o.h.s.A.CheckThreadApplication           : THREAD END
#2025-04-17T23:10:18.701+09:00  INFO 41471 --- [springboot101] [io-8080-exec-16] o.h.s.A.CheckThreadApplication           : THREAD END
#2025-04-17T23:10:18.888+09:00  INFO 41471 --- [springboot101] [io-8080-exec-17] o.h.s.A.CheckThreadApplication           : THREAD END
#2025-04-17T23:10:19.071+09:00  INFO 41471 --- [springboot101] [io-8080-exec-18] o.h.s.A.CheckThreadApplication           : THREAD END
#2025-04-17T23:10:19.247+09:00  INFO 41471 --- [springboot101] [io-8080-exec-19] o.h.s.A.CheckThreadApplication           : THREAD END
#2025-04-17T23:12:30.070+09:00  INFO 41471 --- [springboot101] [io-8080-exec-11] o.h.s.A.CheckThreadApplication           : THREAD START
#2025-04-17T23:12:30.549+09:00  INFO 41471 --- [springboot101] [io-8080-exec-12] o.h.s.A.CheckThreadApplication           : THREAD START
#2025-04-17T23:12:30.717+09:00  INFO 41471 --- [springboot101] [io-8080-exec-13] o.h.s.A.CheckThreadApplication           : THREAD START
#2025-04-17T23:12:30.890+09:00  INFO 41471 --- [springboot101] [io-8080-exec-14] o.h.s.A.CheckThreadApplication           : THREAD START
#2025-04-17T23:12:31.052+09:00  INFO 41471 --- [springboot101] [io-8080-exec-15] o.h.s.A.CheckThreadApplication           : THREAD START
#2025-04-17T23:12:31.214+09:00  INFO 41471 --- [springboot101] [io-8080-exec-16] o.h.s.A.CheckThreadApplication           : THREAD START
#2025-04-17T23:12:31.372+09:00  INFO 41471 --- [springboot101] [io-8080-exec-17] o.h.s.A.CheckThreadApplication           : THREAD START
#2025-04-17T23:12:31.521+09:00  INFO 41471 --- [springboot101] [io-8080-exec-18] o.h.s.A.CheckThreadApplication           : THREAD START
#2025-04-17T23:12:31.687+09:00  INFO 41471 --- [springboot101] [io-8080-exec-19] o.h.s.A.CheckThreadApplication           : THREAD START
##2025-04-17T23:12:31.848+09:00  INFO 41471 --- [springboot101] [nio-8080-exec-1] o.h.s.A.CheckThreadApplication           : THREAD START

io-8080-exec-15: This is thread name

Java Blocking Queue

Nguyễn Hữu Hiếu — Thu, 17 Apr 2025 12:32:53 +0000

Scenario

Since the third-party API has a rate limit, I need to send requests one by one, with a delay between each call.

So I create a simple solution to do it!

Solution

// ApiService

import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Service;

import java.util.Map;

@Slf4j
@Service
public class ApiService {

    public void executeApi(BlockingQueueService.Request request) throws InterruptedException {
//        log.info("[jobId-{}] API_SERVICE > START", request.getId());
        Thread.sleep(request.getRunTime());
//        log.info("[jobId-{}] API_SERVICE > STOP", request.getId());
    }
}

// BlockingQueueService
import lombok.Data;
import lombok.ToString;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.concurrent.*;

@Slf4j
@Service
public class BlockingQueueService {
    @Autowired
    private ApiService apiService;
    private final int POOL_SIZE = 1;
    private final BlockingQueue<Request> queue = new LinkedBlockingQueue<>();
    private final ScheduledExecutorService executor = Executors.newScheduledThreadPool(POOL_SIZE);

    public BlockingQueueService() {
        log.info("INIT BLOCKING QUEUE SERVICE");
        for (int i = 0; i < POOL_SIZE; i++) {
            int workerId = i + 1;
            executor.scheduleAtFixedRate(() -> processQueue(workerId), 0, 2, TimeUnit.SECONDS);
        }
//        executor.scheduleAtFixedRate(this::processQueue, 0, 1, TimeUnit.SECONDS);
    }

    public void enqueue(Request request) {
        log.info("QUEUE > ADD: {}", request);
        queue.offer(request);
    }

    private void processQueue(int workerId) {
        Request request = queue.poll();
        log.info("[worker-{}] QUEUE > CHECK", workerId);
        if (request == null) {
            return;
        }

        log.info("[worker-{}__jobId-{}] QUEUE > PROCESS START", workerId, request.getId());
        try {
            this.apiService.executeApi(request);
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            log.info("[worker-{}__jobId-{}] QUEUE > PROCESS END", workerId, request.getId());
        }

    }

    @Data
    @ToString
    public static class Request {
        int id;
        int runTime;
    }
}

// Queue101Application
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import java.util.HashMap;
import java.util.Map;
import java.util.concurrent.ThreadLocalRandom;

@RestController
@SpringBootApplication
public class Queue101Application {

    @Autowired
    BlockingQueueService blockingQueueService;

    private int count = 0;

    public static void main(String[] args) {
        SpringApplication.run(Queue101Application.class, args);
    }

    @GetMapping("/trigger")
    public String trigger() {
        for (int i = 0; i < 100; i++) {
            BlockingQueueService.Request request = new BlockingQueueService.Request();
            int randomNumber = ThreadLocalRandom.current().nextInt(1,2);
            request.setId(count);
            request.setRunTime(randomNumber*1000);
            count++;
            blockingQueueService.enqueue(request);
        }


        return "SUCCESS";
    }
}

Test

Trigger queue: http://localhost:8080/trigger
Log

...
2025-04-17T21:22:44.409+09:00  INFO 88153 --- [queue101] [nio-8080-exec-1] o.h.queue101.BlockingQueueService        : QUEUE > ADD: BlockingQueueService.Request(id=99, runTime=1000)
2025-04-17T21:22:45.799+09:00  INFO 88153 --- [queue101] [pool-2-thread-1] o.h.queue101.BlockingQueueService        : [worker-1] QUEUE > CHECK
2025-04-17T21:22:45.799+09:00  INFO 88153 --- [queue101] [pool-2-thread-1] o.h.queue101.BlockingQueueService        : [worker-1__jobId-0] QUEUE > PROCESS START
2025-04-17T21:22:46.799+09:00  INFO 88153 --- [queue101] [pool-2-thread-1] o.h.queue101.BlockingQueueService        : [worker-1__jobId-0] QUEUE > PROCESS END
2025-04-17T21:22:47.800+09:00  INFO 88153 --- [queue101] [pool-2-thread-1] o.h.queue101.BlockingQueueService        : [worker-1] QUEUE > CHECK
2025-04-17T21:22:47.801+09:00  INFO 88153 --- [queue101] [pool-2-thread-1] o.h.queue101.BlockingQueueService        : [worker-1__jobId-1] QUEUE > PROCESS START
2025-04-17T21:22:48.806+09:00  INFO 88153 --- [queue101] [pool-2-thread-1] o.h.queue101.BlockingQueueService        : [worker-1__jobId-1] QUEUE > PROCESS END
...

react use-zustand demo

Nguyễn Hữu Hiếu — Sun, 13 Oct 2024 22:04:06 +0000

import { Input } from "@/components/ui/input";
import { create } from "zustand";

interface UserFormState {
  username?: string;
  mobile?: string;
  gmail?: string;
}

const initState: UserFormState = {
  username: "",
  mobile: "",
  gmail: "",
};

const useUserForm = create<UserFormState>(() => ({
  ...initState,
}));

const setUsername = (setUsername: string) =>
  useUserForm.setState({ username: setUsername });

const setMobile = (setMobile: string) =>
  useUserForm.setState({ mobile: setMobile });

const setGmail = (setGmail: string) =>
  useUserForm.setState({ gmail: setGmail });

const UsernameInput = () => {
  const username = useUserForm((state) => state.username);
  return (
    <div>
      <label>UsernameInput</label>
      <Input
        type="text"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
    </div>
  );
};

const MobileInput = () => {
  const mobile = useUserForm((state) => state.mobile);
  return (
    <div>
      <label>MobileInput</label>
      <Input
        type="text"
        value={mobile}
        onChange={(e) => setMobile(e.target.value)}
      />
    </div>
  );
};

const GmailInput = () => {
  const gmail = useUserForm((state) => state.gmail);
  return (
    <div>
      <label>GmailInput</label>
      <Input
        type="text"
        value={gmail}
        onChange={(e) => setGmail(e.target.value)}
      />
    </div>
  );
};

export const Demo001Zustand = () => {
  return (
    <>
      <h2>Demo001Zustand.tsx</h2>
      <UsernameInput />
      <MobileInput />
      <GmailInput />
    </>
  );
};

react-hook-form demo

Nguyễn Hữu Hiếu — Sun, 13 Oct 2024 21:57:22 +0000

import { Input } from "@/components/ui/input";
import { Controller, useForm } from "react-hook-form";

const UsernameInput: React.FC<{
  value?: string;
  onChange?: (e?: any) => void;
}> = ({ value, onChange }) => {
  console.log("re-render UsernameInput");
  return (
    <div>
      <label>UsernameInput</label>
      <Input type="text" value={value} onChange={onChange} />
    </div>
  );
};

const MobileInput: React.FC<{
  value?: string;
  onChange?: (e?: any) => void;
}> = ({ value, onChange }) => {
  console.log("re-render MobileInput");
  return (
    <div>
      <label>MobileInput</label>
      <Input type="text" value={value} onChange={onChange} />
    </div>
  );
};

const GmailInput: React.FC<{
  value?: string;
  onChange?: (e?: any) => void;
}> = ({ value, onChange }) => {
  console.log("re-render GmailInput");
  return (
    <div>
      <label>GmailInput</label>
      <Input type="text" value={value} onChange={onChange} />
    </div>
  );
};

export const Demo003HookForm = () => {
  const form = useForm({
    defaultValues: {
      username: "",
      mobile: "",
      gmail: "",
    },
  });

  return (
    <div>
      <h2>Demo003HookForm.tsx</h2>
      <Controller
        name="username"
        control={form.control}
        rules={{ required: true }}
        render={({ field }) => (
          <UsernameInput value={field.value} onChange={field.onChange} />
        )}
      />

      <Controller
        name="mobile"
        control={form.control}
        rules={{ required: true }}
        render={({ field }) => (
          <MobileInput value={field.value} onChange={field.onChange} />
        )}
      />

      <Controller
        name="gmail"
        control={form.control}
        rules={{ required: true }}
        render={({ field }) => (
          <GmailInput value={field.value} onChange={field.onChange} />
        )}
      />
    </div>
  );
};

React Native + Stream Data: How to handle stream data like ChatGPT?

Nguyễn Hữu Hiếu — Fri, 23 Feb 2024 12:44:08 +0000

Question: I want to create a chat UI that receives token by token like ChatGPT (stream data). But React Native does not support stream response. How to do it?

Ideal: we use react-native-webview to invoke API that can receive stream data
Thanks to the author of the react-native-chatgpt library

Step by step

Create API that simulates stream data
Test API with your browser
Create react-native app that receives stream data like ChatGPT

Step 1. Create API that simulates stream data




"""
# filename: main.py
# To install
pip install fastapi
pip install "uvicorn[standard]"


# To run
uvicorn main:app --reload
"""
import asyncio
from fastapi import FastAPI
from starlette.responses import StreamingResponse
from time import time

app = FastAPI()


@app.get("/")
def read_root():
    return "Test stream"


async def generate_data():
    for i in range(5):
        yield f"message {i}\n"
        await asyncio.sleep(1)


@app.get("/stream")
def stream():
    return StreamingResponse(generate_data())

Step 2. Test API with your browser

Open your browser
Access link http://127.0.0.1:8000
Open console and run code below



(async()=>{
    const response = await fetch('http://127.0.0.1:8000/stream', {
        method: 'GET',
        responseType: 'stream',
    });

    async function *streamAsyncIterable(stream) {
        const reader = stream.getReader()
        try {
            while (true) {
                const {done, value} = await reader.read()
                if (done) {
                    return
                }
                yield value
            }
        } finally {
            reader.releaseLock()
        }
    }

    for await(const chunk of streamAsyncIterable(response?.body)) {
        const str = new TextDecoder().decode(chunk);
        console.log(new Date().toISOString(), str)
    }

})()

Step 3. Create react-native app that receives stream data like ChatGPT

Install libs



npm i react-native-webview

App.js



import React, { useRef, useState } from "react";
import { StatusBar } from "expo-status-bar";
import { Button, StyleSheet, Text, View } from "react-native";
import { WebView } from "react-native-webview";

export default function App() {
  const [message, setMessage] = useState("");
  const webviewRef = useRef();
  const getStreamData = () => {
    setMessage("");

    const injectScript = `
    (async()=>{
      const postMessage = window.ReactNativeWebView.postMessage;
      const response = await fetch('http://127.0.0.1:8000/stream', {
          method: 'GET',
          responseType: 'stream',
      });

      async function *streamAsyncIterable(stream) {
          const reader = stream.getReader()
          try {
              while (true) {
                  const {done, value} = await reader.read()
                  if (done) {
                      return
                  }
                  yield value
              }
          } finally {
              reader.releaseLock()
          }
      }

      for await(const chunk of streamAsyncIterable(response?.body)) {
          const str = new TextDecoder().decode(chunk);
          postMessage(new Date().toLocaleTimeString() + " " + str);
      }

    })()
    `;
    webviewRef?.current?.injectJavaScript(injectScript);
  };
  return (
    <View
      style={{
        flex: 1,
        backgroundColor: "#d2d2d2",
        textAlign: "center",
        paddingVertical: 120,
      }}
    >
      <WebView
        ref={webviewRef}
        style={{
          height: 80,
          width: "100%",
        }}
        source={{ uri: "http://127.0.0.1:8000/" }}
        onMessage={(event) => {
          const data = event.nativeEvent.data;
          setMessage((prev) => prev + data);
        }}
      />

      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Text>{message}</Text>
        <Button title="Press me" onPress={getStreamData}></Button>
      </View>
    </View>
  );
}

Java Spring Boot: batch insert data

Nguyễn Hữu Hiếu — Sun, 03 Sep 2023 16:34:52 +0000

Problem

Inserting one is very boring => Want to insert many at once. This is for you

Solution

Step 1. Please follow this guide to improve your sql log first. Because normal log is not enough in this case
https://dev.to/hieunh1801/java-spring-boot-log-sql-query-more-efficiently-ji2
Step 2. Using SequenceGenerator

// ... your package

import lombok.Builder;
import lombok.Data;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import javax.persistence.SequenceGenerator;

@Data
@Entity(name = "student")
@Builder
public class StudentEntity {
    @Id
    @GeneratedValue(generator="student_sequence")
    @SequenceGenerator(name="student_sequence",
            sequenceName="student_sequence"
    )
    private long id;

    @Column
    private String name;

    @Column
    private String email;
}

Step 3. (optional) If you don't use spring.jpa.hibernate.ddl-auto=create => need to make student_sequence by hand

-- demo.student_sequence definition
create table student_sequence (next_val bigint) engine=InnoDB

insert into student_sequence values ( 1 )

Step 4. Enable batch_size

# apllication.properties
spring.jpa.hibernate.ddl-auto=update # auto update/create column, table ...
spring.jpa.properties.hibernate.jdbc.batch_size=5 # insert 5 entity at once

Step 5. Run Test with 5000 entity

// ... your package


import com.hieunh1801.demo.entity.StudentEntity;
import com.hieunh1801.demo.repository.StudentRepository;
import lombok.extern.slf4j.Slf4j;
import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.util.StopWatch;

import java.util.ArrayList;
import java.util.List;

@Slf4j
@SpringBootTest
class DemoApplicationTests {
    @Autowired
    private StudentRepository studentRepository;
    @Test
    void insertStudentSeparately() {
        log.info("insert 5000 students separately");
        StopWatch watch = new StopWatch();
        watch.start();
        for (int i = 0; i < 5000; i++) {
            StudentEntity studentEntity = this.createStudent(i);
            this.studentRepository.save(studentEntity);
        }
        watch.stop();
        log.info("end insert students separately in {} ms", watch.getTotalTimeMillis()); // 16372 ms
    }

    @Test
    void insertStudentsByBatch() {
        log.info("insert 5000 students by batch");
        StopWatch watch = new StopWatch();
        watch.start();
        List<StudentEntity> students = new ArrayList<>();
        for (int i = 0; i < 5000; i++) {
            students.add(this.createStudent(i));
        }

        this.studentRepository.saveAll(students);
        watch.stop();
        log.info("end insert students by batch in {} ms", watch.getTotalTimeMillis()); //  2880 ms
    }


    private StudentEntity createStudent(Integer index) {
        return StudentEntity.builder()
                .name("Student Name" + index)
                .email("Student Email" + index)
                .build();
    }
}

Step 6. OutOfMemory: if you save 100,000 entities at once then JPA will save it in persistent context meaning save to RAM => of course out of memory. You need to flush it!!!

for (int i = 0; i < 5000; i++) {
    students.add(this.createStudent(i));
    if (i%100 == 0) { // save and flush every 100 entity
        this.studentRepository.saveAllAndFlush(students);
    students.clear();
    }
}
this.studentRepository.saveAllAndFlush(students);

Java Spring Boot: log sql query more efficiently

Nguyễn Hữu Hiếu — Sun, 03 Sep 2023 16:03:31 +0000

Problem

Default SQL Log

spring.jpa.show-sql=true

But sometimes we need logs with more information such as params, batch batch,... like this one.

Solution

Step 1. Add lib

<dependency>
    <groupId>net.ttddyy</groupId>
    <artifactId>datasource-proxy</artifactId>
    <version>1.4.1</version>
</dependency>

Step 2. Add this class

// ...your package name

import java.lang.reflect.Method;

import javax.sql.DataSource;

import org.aopalliance.intercept.MethodInterceptor;
import org.aopalliance.intercept.MethodInvocation;
import org.springframework.aop.framework.ProxyFactory;
import org.springframework.beans.BeansException;
import org.springframework.beans.factory.config.BeanPostProcessor;
import org.springframework.stereotype.Component;
import org.springframework.util.ReflectionUtils;

import net.ttddyy.dsproxy.listener.logging.SLF4JLogLevel;
import net.ttddyy.dsproxy.support.ProxyDataSourceBuilder;

@Component
public class DatasourceProxyBeanPostProcessor implements BeanPostProcessor {

    @Override
    public Object postProcessBeforeInitialization(final Object bean, final String beanName) throws BeansException {
        return bean;
    }

    @Override
    public Object postProcessAfterInitialization(final Object bean, final String beanName) throws BeansException {
        if (bean instanceof DataSource) {
            ProxyFactory factory = new ProxyFactory(bean);
            factory.setProxyTargetClass(true);
            factory.addAdvice(new ProxyDataSourceInterceptor((DataSource) bean));
            return factory.getProxy();
        }
        return bean;
    }

    private static class ProxyDataSourceInterceptor implements MethodInterceptor {
        private final DataSource dataSource;

        public ProxyDataSourceInterceptor(final DataSource dataSource) {
            super();
            this.dataSource = ProxyDataSourceBuilder
                    .create(dataSource)
                    .countQuery()
                    .logQueryBySlf4j(SLF4JLogLevel.INFO)
                    .build();
        }

        @Override
        public Object invoke(final MethodInvocation invocation) throws Throwable {
            Method proxyMethod = ReflectionUtils.findMethod(dataSource.getClass(), invocation.getMethod().getName());
            if (proxyMethod != null) {
                return proxyMethod.invoke(dataSource, invocation.getArguments());
            }
            return invocation.proceed();
        }
    }
}

Refs

This code is copied from the source https://github.com/galovics/datasource-proxy-spring-boot

react-native issues: DevSettings can't change global variables.

Nguyễn Hữu Hiếu — Mon, 26 Jun 2023 05:14:00 +0000

iOS - Dev mode - OK
iOS - Production Mode - Crash app

let isLog: boolean = false;
DevSettings.addMenuItem('Toggle Log - logger.middleware.tsx', () => {
  isLog = !isLog;
});

flutter getx - deal with rest api (get, post, put, delete)

Nguyễn Hữu Hiếu — Fri, 26 May 2023 13:38:09 +0000

Overview

Step 1: Make server
Step 2: Make request to server

Prerequisites

NodeJS
Baseknowledge about Flutter and Getx

Step 1: Make server

1.1. Install json-server

Ref: https://github.com/typicode/json-server



npm install -g json-server

1.2. Make data



// data.json

{

  "students": [

    {

      "id": "1",

      "name": "John Doe",

      "email": "johndoe@gmail.com"

    },

  ]

}

1.3. Run rest server with this file



json-server --watch data.json

## result

  {^_^}/ hi!

Loading data.json

  Done

Resources

  http://localhost:3000/students

Home

  http://localhost:3000

Type s + enter at any time to create a snapshot of the database

  Watching...

1.4. Verify that everything working correct



curl http://localhost:3000/students

# result

[

    {

      "id": "1",

      "name": "John Doe",

      "email": "johndoe@gmail.com"

    },

]

Step 2: Make request to server using Getx

Ref: https://pub.dev/packages/get

2.1. Make file main.dart



// main.dart

import 'package:flutter/material.dart';

import 'package:get/get.dart';

Future<void> main() async {

  Get.put(StudentProvider());

runApp(GetMaterialApp(home: Home()));

}

class Home extends StatelessWidget {

  final StudentController studentController = Get.put(StudentController());

  Home({super.key});

@override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: const Text("Rest API"),

      ),

      body: Center(

        child: Column(

          mainAxisAlignment: MainAxisAlignment.center,

          children: [

            ElevatedButton(

              onPressed: () {

                studentController.getAllStudent();

              },

              child: const Text("GetAllStudent"),

            ),

            ElevatedButton(

              onPressed: () {

                studentController.getStudentById("1");

              },

              child: const Text("GetStudentById"),

            ),

            ElevatedButton(

              onPressed: () {

                var uniqueId =

                    new DateTime.now().millisecondsSinceEpoch.toString();

                studentController.createStudent(

                  Student(

                    id: uniqueId,

                    name: "John Doe $uniqueId",

                    email: "test$uniqueId@gmail.com",

                  ),

                );

              },

              child: const Text("CreateStudent"),

            ),

            ElevatedButton(

              onPressed: () {},

              child: const Text("UpdateStudent"),

            ),

            ElevatedButton(

              onPressed: () {},

              child: const Text("RemoveStudent"),

            ),

          ],

        ),

      ),

    );

  }

}

class StudentController extends GetxController {

  final studentsLoading = false.obs;

final StudentProvider studentProvider = Get.find();

@override

  Future<void> onInit() async {

    super.onInit();

    await getAllStudent();

  }

Future<void> getAllStudent() async {

    studentsLoading.value = true;

    try {

      var response = await studentProvider.getAll();

      print(response.body);

    } finally {

      studentsLoading.value = false;

    }

  }

Future<void> getStudentById(String id) async {

    studentsLoading.value = true;

    try {

      var response = await studentProvider.getById(id);

      print(response.body);

    } finally {

      studentsLoading.value = false;

    }

  }

Future<void> createStudent(Student student) async {

    studentsLoading.value = true;

    try {

      var response = await studentProvider.create(student);

      print(response.body);

    } finally {

      studentsLoading.value = false;

    }

  }

Future<void> updateStudent(Student student) async {

    studentsLoading.value = true;

    try {

      var response = await studentProvider.update(student);

      print(response.body);

    } finally {

      studentsLoading.value = false;

    }

  }

Future<void> removeStudent(String id) async {

    studentsLoading.value = true;

    try {

      var response = await studentProvider.remove(id);

      print(response.body);

    } finally {

      studentsLoading.value = false;

    }

  }

}

class StudentProvider extends GetConnect {

  @override

  void onInit() {

    httpClient.baseUrl = 'http://localhost:3000';

  }

Future<Response<List<Student>>> getAll() =>

      get('/students', decoder: Student.listFromJson);

  Future<Response<Student>> getById(String id) =>

      get('/students/$id', decoder: Student.fromJson);

  Future<Response<Student>> create(Student student) =>

      post('/students', student.toJson(), decoder: Student.fromJson);

  Future<Response<Student>> update(Student student) =>

      put('/students/${student.id}', student.toJson(),

          decoder: Student.fromJson);

  Future<Response> remove(String id) => delete('/students/$id');

}

class Student {

  final String id;

  final String? name;

  final String? email;

Student({required this.id, this.name, this.email});

// fromJson

  factory Student.fromJson(dynamic json) {

    return Student(

      id: json['id'],

      name: json['name'],

      email: json['email'],

    );

  }

// listFromJson

  static List<Student> listFromJson(dynamic json) {

    return List<Student>.from(json.map((student) => Student.fromJson(student)));

  }

// toJson

  Map<String, dynamic> toJson() {

    return {

      'id': id,

      'name': name,

      'email': email,

    };

  }

// toString

  @override

  String toString() {

    return 'Student{id: $id, name: $name, email: $email}';

  }

}

2.2. Touch the button and see the log

react-native: show more, expandable animation

Nguyễn Hữu Hiếu — Thu, 18 May 2023 06:52:20 +0000

Problem

Need to show more, expandable, calculate view before see it on view

Solution

Step 1: calculate item before animate it
- set position to absolute.
- set opacity to 0.
- set measured=1 and cache it
Step 2: use react-native-animatable to animate item

import * as Animatable from 'react-native-animatable';
import React, {useState} from 'react';
import {Pressable, Text, TextStyle, View, ViewStyle} from 'react-native';

export const ShowMoreDemo = () => {
  return (
    <View>
      <Text>Parent Content 1</Text>
      <ShowMore>
        <Text>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam rem
          ducimus sit ipsa eligendi, beatae tempora ullam obcaecati at ab
          consectetur ea eveniet labore non quod fugiat itaque facilis fuga?
        </Text>
      </ShowMore>
      <Text>Parent Content 2</Text>
    </View>
  );
};

const ShowMore: React.FC = ({children}) => {
  // const minHeight = 300;
  const [isShowMore, setIsShowMore] = useState(false);
  const [measured, setMeasured] = useState(false);
  const [contentHeight, setContentHeight] = useState(0);

  const [contentStyle, setContentStyle] = useState<ViewStyle>({
    opacity: 0,
    position: 'absolute',
  });

  console.log('measured', measured, contentHeight);

  return (
    <>
      <View
        style={contentStyle}
        onLayout={e => {
          if (!measured) {
            setContentHeight(e.nativeEvent.layout.height);
            setMeasured(true);
          }
        }}>
        {!measured ? (
          children
        ) : (
          <Animatable.View
            style={
              {
                backgroundColor: 'red',
                height: isShowMore ? contentHeight : 0,
                opacity: isShowMore ? 1 : 0,
              } as ViewStyle
            }
            duration={300}
            transition={['height', 'opacity']}>
            {children}
          </Animatable.View>
        )}
      </View>
      <Pressable
        style={
          {
            height: 48,
            justifyContent: 'center',
            alignItems: 'center',
          } as ViewStyle
        }
        onPress={() => {
          setIsShowMore(!isShowMore);
          setContentStyle({
            opacity: 1,
            position: 'relative',
          });
        }}>
        <Text
          style={
            {
              color: '#000',
              fontSize: 12,
              fontWeight: 'bold',
            } as TextStyle
          }>
          {isShowMore ? 'Show Less' : 'Show More'}
        </Text>
      </Pressable>
    </>
  );
};

react-native issues: module map file not found

Nguyễn Hữu Hiếu — Mon, 24 Apr 2023 02:09:21 +0000

Issue

=> Because of XCode cache our library

Solution

Step 1: Open Xcode

Product > Clean Build Folder
Close Project

Step 2: Remove node_modules and Pods



cd /<project-name> && rm -rf node_modules

cd /ios && rm -rf Pods

Step 3. Remove cache



cd /Users/<computer name>/Library/Developer/Xcode/DerivedData

rm -rf ***-cnjsxtawhwknragbiskdnvolmcxm

Step 4: Re-install node_module && pod



cd /<project-name>
yarn 

cd /ios && pod install

Step 5: Open Xcode

Waiting indexing done (we still got error but after indexing everything will correct)

Step 6: Edit pod file

not use_flipper
exclude architecture arm64 ```Podfile

# Enables Flipper.
#
# Note that if you have use_frameworks! enabled, Flipper will not work and
# you should disable the next line.
# use_flipper!()

post_install do |installer|
react_native_post_install(installer)
__apply_Xcode_12_5_M1_post_install_workaround(installer)
installer.pods_project.build_configurations.each do |config| config.build_settings["EXCLUDED_ARCHS[sdk=iphonesimulator*]"] = "arm64"
end
end

React Native Navigation: useFocus to reload the screen every time back

Nguyễn Hữu Hiếu — Thu, 09 Mar 2023 02:55:01 +0000

Custom focus when using ReactNativeNavigation

import {useNavigation} from '@react-navigation/native';
import {useState, useEffect} from 'react';

export const useFocus = () => {
  const navigation = useNavigation();
  const [isFocused, setIsFocused] = useState(false);
  const [focusCount, setFocusCount] = useState(0);
  const isFirstTime = focusCount === 1;

  useEffect(() => {
    const unsubscribeFocus = navigation.addListener('focus', () => {
      setIsFocused(true);
      setFocusCount(prev => prev + 1);
    });
    const unsubscribeBlur = navigation.addListener('blur', () => {
      setIsFocused(false);
    });

    return () => {
      unsubscribeFocus();
      unsubscribeBlur();
    };
  });

  return {isFocused, isFirstTime, focusCount};
};

How to use

const App = () => {
   const {focusCount, isFocused} = useFocus();

   useEffect(() => {
        if (focusCount === 1 && isFocused) {
            // this is the first time focus => init screen here
        }
   });

   useEffect(() => {
        if (focusCount > 1 && isFocused) {
            // trigger when you navigate back from another screen
            // you can background reload data here ...
        }
   });


}