Files
qrcodeapp/frontend/src/store/qrStore.tsx

57 lines
1.5 KiB
TypeScript

import React, { createContext, useContext, useReducer } from 'react';
export type QRState = {
text: string;
size: number;
imageUrl: string | null;
loading: boolean;
error: string | null;
};
type Action =
| { type: 'setText'; payload: string }
| { type: 'setSize'; payload: number }
| { type: 'setImageUrl'; payload: string | null }
| { type: 'setLoading'; payload: boolean }
| { type: 'setError'; payload: string | null };
const initialState: QRState = {
text: '',
size: 300,
imageUrl: null,
loading: false,
error: null,
};
function reducer(state: QRState, action: Action): QRState {
switch (action.type) {
case 'setText':
return { ...state, text: action.payload };
case 'setSize':
return { ...state, size: action.payload };
case 'setImageUrl':
return { ...state, imageUrl: action.payload };
case 'setLoading':
return { ...state, loading: action.payload };
case 'setError':
return { ...state, error: action.payload };
default:
return state;
}
}
const QrContext = createContext<{ state: QRState; dispatch: React.Dispatch<Action> } | undefined>(
undefined
);
export const QrProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const [state, dispatch] = useReducer(reducer, initialState);
return <QrContext.Provider value={{ state, dispatch }}>{children}</QrContext.Provider>;
};
export function useQrStore() {
const ctx = useContext(QrContext);
if (!ctx) throw new Error('useQrStore must be used within QrProvider');
return ctx;
}