Merge branch 'AykutSarac:main' into main

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

src/containers/Views/GraphView/PremiumView.tsx

@@ -159,7 +159,7 @@ export const PremiumView = () => (
         <JSONCrackLogo fontSize="4rem" />
       </Title>
       <StyledInfo>
-        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!
       </StyledInfo>
 
       <List

src/containers/Views/GraphView/index.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import dynamic from "next/dynamic";
 import styled from "styled-components";
+import debounce from "lodash.debounce";
 import { toast } from "react-hot-toast";
 import { Space } from "react-zoomable-ui";
 import { ElkRoot } from "reaflow/dist/layout/useLayout";
@@ -96,7 +97,6 @@ const GraphCanvas = ({ isWidget }: GraphProps) => {
   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 <PremiumView />;
   }
+  const debouncedOnZoomChangeHandler = debounce(() => {
+    setViewPort(viewPort!);
+  }, 300);
 
   return (
     <>
@@ -205,6 +209,7 @@ export const Graph = ({ isWidget = false }: GraphProps) => {
         {...bindLongPress()}
       >
         <Space
+          onUpdated={() => debouncedOnZoomChangeHandler()}
           onCreate={setViewPort}
           onContextMenu={e => e.preventDefault()}
           treatTwoFingerTrackPadGesturesLikeTouch={gesturesEnabled}

src/store/useUser.ts

@@ -30,14 +30,15 @@ const initialStates: UserStates = {
 const useUser = create<UserStates & UserActions>()(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" });
       }