Home.tsx

function shortDate<T extends ResponseData[]>(arr: T) {
  const res = [...arr].sort((a, b) => Date.parse(a.created_at.split(' ')[0]) - Date.parse(b.created_at.split(' ')[0]));
  return res;
}
  
function shortByName<T extends ResponseData[]>(arr: T) {
  const res = [...arr].sort((a, b) => {
    const name1 = a.beneficiary_name.toUpperCase();
    const name2 = b.beneficiary_name.toUpperCase();
    if (name1 < name2) {
      return -1;
    } else if (name1 > name2) {
      return 1;
    } else {
      return 0;
    }
  });
  return res;
}

// Dalam Component
const [data, setData] = useState<ResponseData[]>([]);
const [dataFilter, setDataFilter] = useState<ResponseData[]>([]);
  
// ini hanya berjalan sekali
  const onChageOrder = useCallback((val: RadioData) => {
    // cek value.key dan sorting menurut key <number>
    if (val.key === 0) {
      setDataFilter([...data]);
    } else if (val.key === 1) {
      setDataFilter(shortByName(data]));
    } else if (val.key === 2) {
      setDataFilter(shortByName(data).reverse());
    } else if (val.key === 3) {
      setDataFilter(shortDate(data));
    } else if (val.key === 4) {
      setDataFilter(shortDate(data).reverse());
    }
  }, []);

// ini berjalan dengan normal
  const onChageOrder = useCallback((val: RadioData) => {
    // cek value.key dan sorting menurut key <number>
    if (val.key === 0) {
      setDataFilter((curent) => curent);
    } else if (val.key === 1) {
      setDataFilter((curent) => shortByName(curent));
    } else if (val.key === 2) {
      setDataFilter((curent) => shortByName(curent).reverse());
    } else if (val.key === 3) {
      setDataFilter((curent) => shortDate(curent)!);
    } else if (val.key === 4) {
      setDataFilter((curent) => shortDate(curent)?.reverse()!);
    }
  }, []);
  
  // Search Component
  // onChangeSelected di triger dari radio button
  <SearchBar onChange={SearchFilter} onChangeSelected={onChageOrder} />
  
  // onChangeSelected <SearchBar/>
  const onChangeSelect = useCallback(
    (val: string, info) => {
      onChangeSelected?.(info); // props callback
    },
    [onChangeSelected, visivble]
  );