✨ implement linked tabs

Author: damien-schneider

docs/components/linked-tabs.tsx

@@ -0,0 +1,31 @@
+import { Tabs } from 'nextra/components';
+import React, { ReactNode } from 'react';
+import { useTabContext } from './tab-context';
+
+interface LinkedTabsProps {
+  id: string;
+  items: string[];
+  children: ReactNode;
+}
+
+export const LinkedTabs: React.FC<LinkedTabsProps> = ({
+  id,
+  items,
+  children,
+}) => {
+  const { selectedTabs, setSelectedTab } = useTabContext();
+  const selectedTab = selectedTabs[id] || items[0];
+
+  const index = items.indexOf(selectedTab);
+  const selectedIndex = index !== -1 ? index : 0;
+
+  return (
+    <Tabs
+      items={items}
+      selectedIndex={selectedIndex}
+      onChange={(index: number) => setSelectedTab(id, items[index])}
+    >
+      {children}
+    </Tabs>
+  );
+};

docs/components/tab-context.tsx

@@ -0,0 +1,67 @@
+import {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  ReactNode,
+} from 'react';
+
+interface TabContextType {
+  selectedTabs: { [key: string]: string };
+  setSelectedTab: (id: string, tab: string) => void;
+}
+
+const TabContext = createContext<TabContextType>({
+  selectedTabs: {},
+  setSelectedTab: () => {},
+});
+
+export const useTabContext = () => useContext(TabContext);
+
+interface TabProviderProps {
+  children: ReactNode;
+}
+
+export const TabProvider: React.FC<TabProviderProps> = ({ children }) => {
+  const [selectedTabs, setSelectedTabs] = useState<{ [key: string]: string }>(
+    {},
+  );
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const storedTabs = localStorage.getItem('selectedTabs');
+      if (storedTabs) {
+        try {
+          const parsedTabs = JSON.parse(storedTabs) as {
+            [key: string]: string;
+          };
+          setSelectedTabs(parsedTabs);
+        } catch (error) {
+          console.error(
+            'Failed to parse selectedTabs from localStorage',
+            error,
+          );
+        }
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      localStorage.setItem('selectedTabs', JSON.stringify(selectedTabs));
+    }
+  }, [selectedTabs]);
+
+  const setSelectedTab = (id: string, tab: string) => {
+    setSelectedTabs((prev) => ({
+      ...prev,
+      [id]: tab,
+    }));
+  };
+
+  return (
+    <TabContext.Provider value={{ selectedTabs, setSelectedTab }}>
+      {children}
+    </TabContext.Provider>
+  );
+};

docs/pages/_app.tsx

@@ -1,12 +1,13 @@
+import { TabProvider } from '@/components/tab-context';
 import { Analytics } from '@vercel/analytics/react';
 import type { AppProps } from 'next/app';
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
-    <>
+    <TabProvider>
       <Component {...pageProps} />
       <Analytics />
-    </>
+    </TabProvider>
   );
 }
 

docs/pages/postgrest/custom-cache-updates.mdx

@@ -1,4 +1,5 @@
 import { Callout, Tabs } from 'nextra/components';
+import { LinkedTabs } from '@/components/linked-tabs';
 
 # Custom Cache Updates
 
@@ -8,7 +9,7 @@ Sometimes, you will find yourself writing custom cache updates. The library expo
 
 Delete a postgrest entity from the cache. Note that you have to pass a value for all primary keys in the input.
 
-<Tabs items={['SWR', 'React Query']}>
+<LinkedTabs items={['SWR', 'React Query']} id="data-fetcher">
   <Tabs.Tab>
     ```tsx
     import { useDeleteItem } from "@supabase-cache-helpers/postgrest-swr";
@@ -43,13 +44,13 @@ Delete a postgrest entity from the cache. Note that you have to pass a value for
     ```
 
   </Tabs.Tab>
-</Tabs>
+</LinkedTabs>
 
 ## `useUpsertItem`
 
 Upsert a postgrest entity into the cache. Note that you have to pass a value for all primary keys in the input.
 
-<Tabs items={['SWR', 'React Query']}>
+<LinkedTabs items={['SWR', 'React Query']} id="data-fetcher">
   <Tabs.Tab>
     ```tsx
     import { useUpsertItem } from "@supabase-cache-helpers/postgrest-swr";
@@ -84,4 +85,4 @@ Upsert a postgrest entity into the cache. Note that you have to pass a value for
     ```
 
   </Tabs.Tab>
-</Tabs>
+</LinkedTabs>

docs/pages/postgrest/getting-started.mdx

@@ -1,4 +1,5 @@
 import { Callout, Tabs } from 'nextra/components';
+import { LinkedTabs } from '@/components/linked-tabs';
 
 # Getting Started
 
@@ -12,16 +13,16 @@ pnpm add @supabase-cache-helpers/postgrest-swr
 
 If your package manager does not install peer dependencies automatically, you will need to install them, too.
 
-<Tabs items={["SWR", "React Query"]}>
+<LinkedTabs items={['SWR', 'React Query']} id="data-fetcher">
   <Tabs.Tab>`pnpm add swr react @supabase/postgrest-js`</Tabs.Tab>
   <Tabs.Tab>`pnpm add @tanstack/react-query react @supabase/postgrest-js`</Tabs.Tab>
-</Tabs>
+</LinkedTabs>
 
 ## Quick Start
 
 Import [`useQuery`](./queries#usequery) and define a simple query. The cache key is automatically created from the query. You can pass the SWR- and React Query-native options as a second argument. For pagination and infinite scroll queries, use [`useInfiniteOffsetPaginationQuery`](./queries#useinfiniteoffsetpaginationquery), [`useOffsetInfiniteScrollQuery`](./queries#useoffsetinfinitescrollquery) and [`useCursorInfiniteScrollQuery`](./queries#usecursorinfinitescrollquery).
 
-<Tabs items={['SWR', 'React Query']}>
+<LinkedTabs items={['SWR', 'React Query']} id="data-fetcher">
   <Tabs.Tab>
     ```tsx
     import { useQuery } from "@supabase-cache-helpers/postgrest-swr";
@@ -75,11 +76,11 @@ Import [`useQuery`](./queries#usequery) and define a simple query. The cache key
     ```
 
   </Tabs.Tab>
-</Tabs>
+</LinkedTabs>
 
 Somewhere in your app, import [`useInsertMutation`](./mutations#useinsertmutation) and define a mutation. For the automatic cache population to work, you need to pass the primary key(s) of the relation as a second argument. To return data from the mutation, pass a `.select('...')` string as the third argument. Pass `null` to skip. The fourth argument is the SWR- and React Query-native `options` object. The mutation will automatically update the query cache of the contact query defined above. Other operations are supported with [`useUpsertMutation`](./mutations#useupsertmutation), [`useUpdateMutation`](./mutations#useupdatemutation) and [`useDeleteMutation`](./mutations#usedeletemutation).
 
-<Tabs items={['SWR', 'React Query']}>
+<LinkedTabs items={['SWR', 'React Query']} id="data-fetcher">
   <Tabs.Tab>
     ```tsx
     import { useInsertMutation } from "@supabase-cache-helpers/postgrest-swr";
@@ -126,13 +127,13 @@ Somewhere in your app, import [`useInsertMutation`](./mutations#useinsertmutatio
     ```
 
   </Tabs.Tab>
-</Tabs>
+</LinkedTabs>
 
 To subscribe to changes, import [`useSubscription`](./subscriptions#usesubscription) and define a subscription. Use any channel name, and define the subscription as you know it from the Supabase client. For the automatic cache population to work, you need to pass the primary key(s) of the relation. You can pass the SWR and React Query-native mutation options.
 
 The query cache will automatically be updated when new data comes in. If you use [computed / virtual columns](https://postgrest.org/en/stable/api.html?highlight=computed%20columns#computed-virtual-columns) or relations, you can use [`useSubscriptionQuery`](./subscriptions#usesubscriptionquery) to fetch the entity from `PostgREST` before populating the cache with it.
 
-<Tabs items={['SWR', 'React Query']}>
+<LinkedTabs items={['SWR', 'React Query']} id="data-fetcher">
   <Tabs.Tab>
     ```tsx
     import { useSubscription } from "@supabase-cache-helpers/postgrest-swr";
@@ -185,4 +186,4 @@ The query cache will automatically be updated when new data comes in. If you use
     ```
 
   </Tabs.Tab>
-</Tabs>
+</LinkedTabs>

docs/pages/postgrest/mutations.mdx

@@ -1,4 +1,5 @@
 import { Callout, Tabs } from 'nextra/components';
+import { LinkedTabs } from '@/components/linked-tabs';
 
 # Mutations
 
@@ -66,7 +67,9 @@ declare type PostgrestMutatorOpts<Type> = {
 
 Insert entities. Will also update the count if applicable. Note that hook requires the user to define the primary keys of the relation, because the items are upserted to the cache to prevent duplicates, e.g. if a subscription is used in parallel.
 
-<Tabs items={['SWR', 'React Query']}>
+<LinkedTabs items={['SWR', 'React Query']}
+  id="data-fetcher"
+    >
   <Tabs.Tab>
     ```tsx
     import { useInsertMutation } from '@supabase-cache-helpers/postgrest-swr'
@@ -115,13 +118,15 @@ Insert entities. Will also update the count if applicable. Note that hook requir
     ```
 
   </Tabs.Tab>
-</Tabs>
+</LinkedTabs>
 
 ## `useUpdateMutation`
 
 Update an entity. Requires the primary keys to be defined explicitly.
 
-<Tabs items={['SWR', 'React Query']}>
+<LinkedTabs items={['SWR', 'React Query']}
+  id="data-fetcher"
+    >
   <Tabs.Tab>
     ```tsx
     import { useUpdateMutation } from '@supabase-cache-helpers/postgrest-swr'
@@ -170,13 +175,15 @@ Update an entity. Requires the primary keys to be defined explicitly.
     ```
 
   </Tabs.Tab>
-</Tabs>
+</LinkedTabs>
 
 ## `useUpsertMutation`
 
 Upsert entities. Requires the primary keys to be defined explicitly. Will also increment the count if an item is inserted.
 
-<Tabs items={['SWR', 'React Query']}>
+<LinkedTabs items={['SWR', 'React Query']}
+id="data-fetcher"
+    >
   <Tabs.Tab>
     ```tsx
     import { useUpsertMutation } from '@supabase-cache-helpers/postgrest-swr'
@@ -225,13 +232,15 @@ Upsert entities. Requires the primary keys to be defined explicitly. Will also i
     ```
 
   </Tabs.Tab>
-</Tabs>
+</LinkedTabs>
 
 ## `useDeleteMutation`
 
 Delete an item by primary key(s). Requires the primary keys to be defined explicitly. Will also update the count of the queries.
 
-<Tabs items={['SWR', 'React Query']}>
+<LinkedTabs items={['SWR', 'React Query']}
+id="data-fetcher"
+    >
   <Tabs.Tab>
     ```tsx
     import { useDeleteMutation } from '@supabase-cache-helpers/postgrest-swr'
@@ -280,4 +289,4 @@ Delete an item by primary key(s). Requires the primary keys to be defined explic
     ```
 
   </Tabs.Tab>
-</Tabs>
+</LinkedTabs>