Aditya Gupta
b0bdfd2ca5
- Add a compact sky-blue rounded navigation group based on the day picker geometry. - Use coral for the selected destination and the separate global add button. - Add a functional global Add Class action that works from every tab. - Cover the global navigation action with Playwright.
36 lines
1.1 KiB
TypeScript
36 lines
1.1 KiB
TypeScript
import { createContext, useContext, useMemo, useState, type ReactNode } from 'react';
|
|
|
|
import { AddClassModal } from '@/components/add-class-modal';
|
|
import { dateKey } from '@/lib/date';
|
|
|
|
type GlobalAddClassValue = {
|
|
openAddClass: () => void;
|
|
revision: number;
|
|
};
|
|
|
|
const GlobalAddClassContext = createContext<GlobalAddClassValue | null>(null);
|
|
|
|
export function GlobalAddClassProvider({ children }: { children: ReactNode }) {
|
|
const [visible, setVisible] = useState(false);
|
|
const [revision, setRevision] = useState(0);
|
|
const value = useMemo(() => ({ openAddClass: () => setVisible(true), revision }), [revision]);
|
|
|
|
return (
|
|
<GlobalAddClassContext.Provider value={value}>
|
|
{children}
|
|
<AddClassModal
|
|
visible={visible}
|
|
date={dateKey(new Date())}
|
|
onClose={() => setVisible(false)}
|
|
onAdded={() => setRevision((current) => current + 1)}
|
|
/>
|
|
</GlobalAddClassContext.Provider>
|
|
);
|
|
}
|
|
|
|
export function useGlobalAddClass() {
|
|
const value = useContext(GlobalAddClassContext);
|
|
if (!value) throw new Error('useGlobalAddClass must be used within GlobalAddClassProvider');
|
|
return value;
|
|
}
|