diff --git a/README.md b/README.md index c72e16575d5..9031dab07da 100644 --- a/README.md +++ b/README.md @@ -101,7 +101,7 @@ Here is what you need to be able to run JSON Crack. 3. Install packages with yarn ```sh - pnpm + pnpm install ``` 4. Run the project diff --git a/src/containers/Views/GraphView/PremiumView.tsx b/src/containers/Views/GraphView/PremiumView.tsx index ecc8fe9266e..367dfd74ca4 100644 --- a/src/containers/Views/GraphView/PremiumView.tsx +++ b/src/containers/Views/GraphView/PremiumView.tsx @@ -159,7 +159,7 @@ export const PremiumView = () => ( - Upgrade JSON Crack to premium and explore full potantial of your data! + Upgrade JSON Crack to premium and explore the full potential of your data! { const direction = useGraph(state => state.direction); const nodes = useGraph(state => state.nodes); const edges = useGraph(state => state.edges); - const [paneWidth, setPaneWidth] = React.useState(2000); const [paneHeight, setPaneHeight] = React.useState(2000); @@ -156,6 +156,7 @@ function getViewType(nodes: NodeData[]) { export const Graph = ({ isWidget = false }: GraphProps) => { const setViewPort = useGraph(state => state.setViewPort); + const viewPort = useGraph(state => state.viewPort); const loading = useGraph(state => state.loading); const isPremium = useUser(state => state.premium); const viewType = useGraph(state => getViewType(state.nodes)); @@ -192,6 +193,9 @@ export const Graph = ({ isWidget = false }: GraphProps) => { if (viewType === "premium" && !isWidget) { if (!isPremium) return ; } + const debouncedOnZoomChangeHandler = debounce(() => { + setViewPort(viewPort!); + }, 300); return ( <> @@ -205,6 +209,7 @@ export const Graph = ({ isWidget = false }: GraphProps) => { {...bindLongPress()} > debouncedOnZoomChangeHandler()} onCreate={setViewPort} onContextMenu={e => e.preventDefault()} treatTwoFingerTrackPadGesturesLikeTouch={gesturesEnabled} diff --git a/src/store/useUser.ts b/src/store/useUser.ts index 6a32eb16fde..4739e2f0ff0 100644 --- a/src/store/useUser.ts +++ b/src/store/useUser.ts @@ -30,14 +30,15 @@ const initialStates: UserStates = { const useUser = create()(set => ({ ...initialStates, setSession: async session => { - supabase.rpc("get_subscription_info").then(({ data }) => { + supabase.rpc("get_subscription_details").then(({ data }) => { if (data) { set({ premium: data.premium, - organization: data.organization, + organization: data.orgPremium, premiumCancelled: !!data.cancelled, - orgAdmin: data.org_admin, + orgAdmin: data.orgAdmin, }); + ReactGA.set({ tier: data.premium ? "premium" : "free" }); }