Jinyang's Blog

import { AnyAction, createSlice } from '@reduxjs/toolkit';

// 1. Define matcher functions to identify action phases
export const isPendingAction = (action: AnyAction) => action.type.endsWith('/pending');
export const isFulfilledAction = (action: AnyAction) => action.type.endsWith('/fulfilled');
export const isRejectedAction = (action: AnyAction) => action.type.endsWith('/rejected');

export const todosSlice = createSlice({
  name: 'todos',
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    // Handle specific success logic first
    builder
      .addCase(getTodoList.fulfilled, (state, action) => { /* success logic */ })
      .addCase(postTodoItem.fulfilled, (state, action) => { /* success logic */ });

    // Use matchers for shared loading states at the end
    builder
      .addMatcher(isPendingAction, (state) => {
        state.loading = true;
      })
      .addMatcher(
        (action) => isFulfilledAction(action) || isRejectedAction(action),
        (state) => {
          state.loading = false;
        }
      );
  },
});

1. Open 'Find My' app on iPhone -> Wait for status to update to 'Location: Now'.
2. Open ToDesk (or similar remote app) -> Connect to the now-online Mac.

import XLSX from 'xlsx';
import { message } from 'antd';

interface XlsxToJsonProps {
  file: File;
  onSuccess: (data: Record<string, string>[]) => void;
}

export function xlsxToJson({ file, onSuccess }: XlsxToJsonProps): void {
  let data: Record<string, string>[] = [];
  const fileReader = new FileReader();
  fileReader.readAsBinaryString(file);

  fileReader.onload = (event: ProgressEvent<FileReader>) => {
    try {
      const result = event.target?.result;
      const workbook = XLSX.read(result, { type: 'binary' });

      for (const sheet in workbook.Sheets) {
        if (Object.prototype.hasOwnProperty.call(workbook.Sheets, sheet)) {
          data = data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
        }
      }
      onSuccess(data);
    } catch (error) {
      message.error(`Import failed: ${error}`);
    }
  };
}

// AVOID THIS (increases bundle size)
import { Icon as LegacyIcon } from '@ant-design/compatible';
<LegacyIcon type="laptop" />

// DO THIS (on-demand import)
import { LaptopOutlined } from '@ant-design/icons';
<LaptopOutlined />

import { message } from 'antd';
import XLSX from 'xlsx';

interface JsonToXlsxProps {
  res: Record<string, any>[]; // API response data
  fileName: string;           // Filename and sheet name
  mapKeyToHeader: [string, string][]; // Mapping of [jsonKey, headerName]
}

export function jsonToXlsx({ res, fileName, mapKeyToHeader }: JsonToXlsxProps): void {
  const headerMap = new Map<string, string>(mapKeyToHeader);

  const exportData = res.map((item) => {
    const dataItem: Record<string, string> = {};
    headerMap.forEach((value, key) => {
      dataItem[value] = item[key];
    });
    return dataItem;
  });

  try {
    const worksheet = XLSX.utils.json_to_sheet(exportData);
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, fileName);
    XLSX.writeFile(workbook, `${fileName}.xlsx`);
  } catch (error) {
    message.error(`Export failed: ${error}`);
  }
}

// Usage Example:
jsonToXlsx({
  res: result,
  fileName: 'EmployeeInfo',
  mapKeyToHeader: [
    ['name', 'Name'],
    ['age', 'Age'],
    ['address', 'Address'],
  ],
});

// Avoid long parameter lists
// function getUserInfo(name, age, sex, Address, phone) { ... }

// Use an object for arguments
function getUserInfo(args) {
  const { name, age, sex, Address, phone } = args;
  // ...
}

getUserInfo({
  phone: '1388888',
  sex: 'male',
  age: 10,
  name: 'John',
});

// Use && instead of if
// if (a > 10) { doSomething(a); }
a > 10 && doSomething(a);

// Use .includes() instead of multiple OR checks
// if (a === undefined || a === 10 || a === 15 || a === null)
if ([undefined, 10, 15, null].includes(a)) {
  // ...
}

# Run directly via npx
npx -p @ant-design/codemod-v4 antd4-codemod src

# OR install globally and run
npm i -g @ant-design/codemod-v4
# or
yarn global add @ant-design/codemod-v4

antd4-codemod src