React Native Snippets for Quest

Extension cung cấp các code snippets cho React Native, Redux Toolkit, và Expo Router.

Cài đặt

1. Mở VS Code
2. Nhấn Ctrl+Shift+X để mở Extensions
3. Tìm kiếm "react-native-snippets-for-quest"
4. Nhấn Install

Danh sách Snippets

Core

quest_core_store

Tạo Redux Toolkit store với typed hooks cho Workout slice.

Bao gồm:

• Slice configuration với reducers (add, remove, update, setAll)
• Store setup với configureStore
• Typed hooks (useAppSelector, useAppDispatch)

Sử dụng: Gõ quest_core_store và nhấn Tab

quest_core_types

Định nghĩa type Workout với các trường id, name, duration, category, và completed.

Sử dụng: Gõ quest_core_types và nhấn Tab

quest_core_fetch

Custom hook useFetch với các method GET, POST, PUT, DELETE.

Bao gồm:

• State management cho loading và error
• Generic request handler
• HTTP methods: GET, POST, PUT, DEL

Sử dụng: Gõ quest_core_fetch và nhấn Tab

Components

quest_components_workoutCard

Component WorkoutCard để hiển thị workout card với actions update và delete.

Bao gồm:

• React Native Paper Card
• Toggle completed status
• Update và Delete buttons
• Navigation to form page

Sử dụng: Gõ quest_components_workoutCard và nhấn Tab

App Routes

quest_app_index

Root index page redirect đến (auth) route.

Sử dụng: Gõ quest_app_index và nhấn Tab

quest_app_layout

Root layout với Redux Provider và SafeAreaView wrapper.

Bao gồm:

• Redux Provider setup
• SafeAreaProvider và SafeAreaView
• Global CSS import
• App title header

Sử dụng: Gõ quest_app_layout và nhấn Tab

quest_app_auth_index

Auth page với login form.

Bao gồm:

• TextInput cho họ tên, lớp, mã số
• Login button với navigation

Sử dụng: Gõ quest_app_auth_index và nhấn Tab

quest_app_home_layout

Home layout với tabs navigation (index, form, sync).

Bao gồm:

• Expo Router Tabs
• Tab icons từ react-native-paper
• Custom tab bar styling

Sử dụng: Gõ quest_app_home_layout và nhấn Tab

quest_app_home_index

Home page với search và filter cho workouts.

Bao gồm:

• Search by name
• Filter by category (All, Cardio, Strength, Yoga)
• FlatList hiển thị WorkoutCard
• Segmented buttons cho filter

Sử dụng: Gõ quest_app_home_index và nhấn Tab

quest_app_home_form

Form page để tạo và update workouts.

Bao gồm:

• Form inputs: name, duration
• Radio buttons cho category selection
• useFocusEffect để load existing workout khi edit
• Form submit với add/update logic

Sử dụng: Gõ quest_app_home_form và nhấn Tab

quest_app_home_sync

Sync page để push và pull workout data.

Bao gồm:

• URL input field
• Push button (xóa data cũ và đẩy data mới)
• Get button (lấy data từ server)
• Loading states

Sử dụng: Gõ quest_app_home_sync và nhấn Tab

Workflow Gợi Ý

1. Setup Core Files

core/
├── types.ts          → quest_core_types
├── store.ts          → quest_core_store
└── useFetch.ts       → quest_core_fetch

2. Setup Components

components/
└── WorkoutCard.tsx   → quest_components_workoutCard

3. Setup App Routes

app/
├── index.tsx         → quest_app_index
├── _layout.tsx       → quest_app_layout
├── (auth)/
│   └── index.tsx     → quest_app_auth_index
└── (home)/
    ├── _layout.tsx   → quest_app_home_layout
    ├── index.tsx     → quest_app_home_index
    ├── form.tsx      → quest_app_home_form
    └── sync.tsx      → quest_app_home_sync

Dependencies Required

{
  "@reduxjs/toolkit": "^2.x.x",
  "react-redux": "^9.x.x",
  "react-native-paper": "^5.x.x",
  "expo-router": "^3.x.x",
  "react-native-safe-area-context": "^4.x.x"
}

Lưu Ý

• Tất cả snippets sử dụng TypeScript
• Import paths sử dụng @/ alias (cần config trong tsconfig.json)
• Sử dụng NativeWind/Tailwind CSS (className props)
• Redux store setup cho Workout management

Support

Nếu có vấn đề hoặc đề xuất, vui lòng tạo issue trên GitHub repository.

License

MIT