I have the following in a file called Paginator.ts. For some reason, I get the following error in VSCode for the return line inside the PaginatorProvider function. Your help will be much appreciated.
Error:
Cannot find namespace 'PaginatorContext'.ts(2503)
Code:
import { ReactNode, createContext, useContext } from 'react';
import { useLocalObservable } from 'mobx-react-lite';
import { PaginationConstants } from '../util/PaginationConstants';
type PaginatorStore = {
hasNext: boolean;
hasPrevious: boolean;
label: string;
pageSize: number;
resultCount: number;
start: number;
stop: number;
setPageSize: (pageSize: number) => void;
};
const PaginatorContext = createContext<PaginatorStore | null>(null);
/**
* Creates a mobx store for the paginator component and returns a PaginatorContext.Provider component.
* @returns a PaginatorContext.Provider component with the PaginatorStore as the value.
*/
export function PaginatorProvider({ children }: { children: ReactNode }): JSX.Element {
const store: PaginatorStore = useLocalObservable(() => ({
// Pagination is only shown if there are more results than
// the page size. Therefore, defaulting hasNext to true
// is valid.
hasNext: true,
hasPrevious: false,
label: '',
pageSize: PaginationConstants.DEFAULT_PAGE_SIZE,
start: 0,
stop: PaginationConstants.DEFAULT_PAGE_SIZE,
resultCount: 0,
setPageSize: (pageSize: number) => {
console.log('Paginator setPageSize', pageSize);
store.pageSize = pageSize;
},
}));
return <PaginatorContext.Provider value={store}>{children}</PaginatorContext.Provider>;
}