awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-09-22 13:39:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: resolved infinite rendering issue caused by zustand

Browse Source
This commit is contained in:
=
2024-12-30 19:38:11 +05:30
parent c56f598115
commit 524a97e9a6
1 changed files with 11 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
frontend-v2/src/pages/secret-manager/SecretDashboardPage/SecretMainPage.store.tsx
View File

@@ -1,6 +1,7 @@
import { createContext, ReactNode, useContext, useEffect, useRef } from "react";
import { useRouter } from "@tanstack/react-router";
import { createStore, StateCreator, StoreApi, useStore } from "zustand";
import { useShallow } from "zustand/react/shallow";
import { SecretV3RawSanitized } from "@app/hooks/api/secrets/types";
@@ -60,14 +61,13 @@ const createPopUpStore: StateCreator<PopUpState> = (set) => ({
type CombinedState = SelectedSecretState & PopUpState;
const StoreContext = createContext<StoreApi<CombinedState> | null>(null);
export const StoreProvider = ({ children }: { children: ReactNode }) => {
const storeRef = useRef<StoreApi<CombinedState>>();
const router = useRouter();
if (!storeRef.current) {
storeRef.current = createStore<CombinedState>((...a) => ({
const storeRef = useRef<StoreApi<CombinedState>>(
createStore<CombinedState>((...a) => ({
...createSelectedSecretStore(...a),
...createPopUpStore(...a)
}));
}
}))
);
const router = useRouter();
useEffect(() => {
const onRouteChangeStart = () => {
@@ -91,10 +91,11 @@ const useStoreContext = <T extends object>(selector: (state: CombinedState) => T
};
// selected secret context
export const useSelectedSecrets = () => useStoreContext((state) => state.selectedSecret);
export const useSelectedSecretActions = () => useStoreContext((state) => state.action);
export const useSelectedSecrets = () =>
useStoreContext(useShallow((state) => state.selectedSecret));
export const useSelectedSecretActions = () => useStoreContext(useShallow((state) => state.action));
// popup context
export const usePopUpState = (id: PopUpNames) =>
useStoreContext((state) => state.popUp?.[id] || { isOpen: false });
export const usePopUpAction = () => useStoreContext((state) => state.popUpActions);
useStoreContext(useShallow((state) => state.popUp?.[id] || { isOpen: false }));
export const usePopUpAction = () => useStoreContext(useShallow((state) => state.popUpActions));