fix: limits syncing issue (#1195)

Exposes `refreshLimits()` to be able to keep the limit in sync when
deleting/creating a document.
This commit is contained in:
emmpaz
2024-07-31 07:57:27 -05:00
committed by GitHub
parent 5582f29bda
commit 1beb434a72
4 changed files with 24 additions and 11 deletions

View File

@ -1,6 +1,6 @@
'use client';
import { createContext, useContext, useEffect, useState } from 'react';
import { createContext, useCallback, useContext, useEffect, useState } from 'react';
import { equals } from 'remeda';
@ -8,7 +8,7 @@ import { getLimits } from '../client';
import { FREE_PLAN_LIMITS } from '../constants';
import type { TLimitsResponseSchema } from '../schema';
export type LimitsContextValue = TLimitsResponseSchema;
export type LimitsContextValue = TLimitsResponseSchema & { refreshLimits: () => Promise<void> };
const LimitsContext = createContext<LimitsContextValue | null>(null);
@ -23,7 +23,7 @@ export const useLimits = () => {
};
export type LimitsProviderProps = {
initialValue?: LimitsContextValue;
initialValue?: TLimitsResponseSchema;
teamId?: number;
children?: React.ReactNode;
};
@ -38,7 +38,7 @@ export const LimitsProvider = ({
}: LimitsProviderProps) => {
const [limits, setLimits] = useState(() => initialValue);
const refreshLimits = async () => {
const refreshLimits = useCallback(async () => {
const newLimits = await getLimits({ teamId });
setLimits((oldLimits) => {
@ -48,11 +48,11 @@ export const LimitsProvider = ({
return newLimits;
});
};
}, [teamId]);
useEffect(() => {
void refreshLimits();
}, []);
}, [refreshLimits]);
useEffect(() => {
const onFocus = () => {
@ -64,7 +64,16 @@ export const LimitsProvider = ({
return () => {
window.removeEventListener('focus', onFocus);
};
}, []);
}, [refreshLimits]);
return <LimitsContext.Provider value={limits}>{children}</LimitsContext.Provider>;
return (
<LimitsContext.Provider
value={{
...limits,
refreshLimits,
}}
>
{children}
</LimitsContext.Provider>
);
};

View File

@ -3,7 +3,6 @@
import { headers } from 'next/headers';
import { getLimits } from '../client';
import type { LimitsContextValue } from './client';
import { LimitsProvider as ClientLimitsProvider } from './client';
export type LimitsProviderProps = {
@ -14,7 +13,7 @@ export type LimitsProviderProps = {
export const LimitsProvider = async ({ children, teamId }: LimitsProviderProps) => {
const requestHeaders = Object.fromEntries(headers().entries());
const limits: LimitsContextValue = await getLimits({ headers: requestHeaders, teamId });
const limits = await getLimits({ headers: requestHeaders, teamId });
return (
<ClientLimitsProvider initialValue={limits} teamId={teamId}>