User stays logged in now

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pocketbase-react",
-  "version": "0.1.20",
+  "version": "0.1.21",
   "description": "Unofficial React SDK (React, React Native, Expo) for interacting with the PocketBase JS SDK",
   "keywords": [
     "pocketbase",

src/context/Pocketbase.tsx

@@ -8,7 +8,6 @@ import { ClientProvider } from './client';
 import { ContentProvider } from './content';
 import { AuthProvider } from './auth';
 import { StorageService } from '../service/Storage';
-import { authAction } from '../store';
 
 export const PocketbaseContext = createContext<PocketBase | null>(null);
 
@@ -22,7 +21,21 @@ export type PocketbaseProviderProps = {
 };
 
 export const Pocketbase = (props: PocketbaseProviderProps) => {
-  const client = new PocketBase(props.serverURL);
+  const [client, setClient] = React.useState<PocketBase | null>(null);
+  const [initialCollections, setInitialCollections] = React.useState<string[]>();
+  useEffect(() => {
+    const client = new PocketBase(props.serverURL);
+    client.authStore.onChange(async () => {
+      await StorageService.set(StorageService.Constants.COOKIE, client.authStore.exportToCookie());
+      setInitialCollections(props.initialCollections);
+    });
+    StorageService.get(StorageService.Constants.COOKIE).then((cookie) => {
+      if (cookie) {
+        client.authStore.loadFromCookie(cookie);
+      }
+      setClient(client);
+    });
+  }, [props.serverURL]);
 
   return client ? (
     <ClientProvider client={client}>
@@ -32,9 +45,7 @@ export const Pocketbase = (props: PocketbaseProviderProps) => {
             webRedirectUrl={props.webRedirectUrl}
             mobileRedirectUrl={props.mobileRedirectUrl}
             openURL={props.openURL}>
-            <ContentProvider collections={props.initialCollections}>
-              {props.children}
-            </ContentProvider>
+            <ContentProvider collections={initialCollections}>{props.children}</ContentProvider>
           </AuthProvider>
         </PersistGate>
       </Provider>

src/context/auth.tsx

@@ -1,10 +1,7 @@
-import AsyncStorage from '@react-native-async-storage/async-storage';
-import { Admin, User } from '@tobicrain/pocketbase';
 import * as React from 'react';
-import { createContext, useEffect } from 'react';
+import { createContext } from 'react';
 import { useClientContext } from '../hooks/useClientContext';
 import { StorageService } from '../service/Storage';
-import { authAction, store, useAppDispatch, useAppSelector } from '../store';
 
 export type AuthProviderInfo = {
   name: string;
@@ -109,32 +106,13 @@ export const AuthProvider = (props: AuthProviderProps) => {
       await client?.users.delete(id);
     },
   };
-  const dispatch = useAppDispatch;
-  const selector = useAppSelector((state) => state.reducer.auth);
 
   React.useEffect(() => {
-    const listener = client?.authStore.onChange(() => {
-      const cookie = client?.authStore.exportToCookie();
-      if (cookie) dispatch(authAction.setCookie(cookie));
-    });
-
     (async () => {
       const methods = await client?.users.listAuthMethods();
       setAuthProviders(methods?.authProviders);
     })();
-
-    return () => {
-      if (listener) listener();
-    };
   }, [props.webRedirectUrl, props.mobileRedirectUrl]);
 
-  React.useEffect(() => {
-    const cookie = selector.cookie;
-    if (cookie) {
-      console.log('cookie', cookie);
-      client?.authStore.loadFromCookie(cookie);
-    }
-  }, [selector.cookie]);
-
   return <AuthContext.Provider value={actions}>{props.children}</AuthContext.Provider>;
 };

src/hooks/useAppContent.ts

@@ -3,6 +3,7 @@ import * as store from '../store';
 import { ContentContext } from '../context';
 import { Record } from '../interfaces/Record';
 import { StorageService } from '../service/Storage';
+import { useAppSelector } from '../store';
 
 export type SubscribeType = () => Promise<void | undefined>;
 export type UnsubscribeType = () => Promise<void | undefined>;
@@ -24,9 +25,8 @@ export function useAppContent<T extends Record>(
   collectionName: string,
   initialFetch: boolean = false
 ): { records: T[]; actions: Actions; isSubscribed: boolean } {
-  const records = (store.useAppSelector((state) => state.reducer.records[collectionName]) ??
-    []) as T[];
-  const subscriptions = store.useAppSelector((state) => state.reducer.subscriptions).subscriptions;
+  const records = useAppSelector((state) => state.reducer.records[collectionName]) as T[];
+  const subscriptions = useAppSelector((state) => state.reducer.subscriptions);
   const context = useContext(ContentContext);
 
   useEffect(() => {

src/store/actions/index.tsx

@@ -1,5 +1,4 @@
 import * as recordsAction from './records';
 import * as subscriptionsAction from './subscriptions';
-import * as authAction from './auth';
 
-export { recordsAction, subscriptionsAction, authAction };
+export { recordsAction, subscriptionsAction };

src/store/reducers/index.tsx

@@ -1,16 +1,10 @@
 import { combineReducers } from 'redux';
 import { records } from './records';
 import { subscriptions } from './subscriptions';
-import { auth } from './auth';
 
 export const appReducer = combineReducers({
-  records: records,
-  subscriptions: subscriptions,
-  auth: auth,
+  records,
+  subscriptions,
 });
 
-interface AppReducer {
-  records: ReturnType<typeof appReducer>;
-}
-
-export type State = AppReducer;
+export type State = ReturnType<typeof appReducer>;

src/store/reducers/subscriptions.tsx

@@ -1,46 +1,29 @@
 import * as ReduxType from '../types';
 
-export interface ReduxSubscriptions {
-  subscriptions: string[];
-}
-
 export type SubscriptionAction = {
   type: ReduxType.SubscriptionsTypes;
   payload: string | string[];
 };
 
 function appendSubscription(subscription: string, subscriptions: string[]): string[] {
-  return [...subscriptions, subscription];
+  return subscriptions.includes(subscription) ? subscriptions : [...subscriptions, subscription];
 }
 
 function deleteSubscription(subscription: string, subscriptions: string[]): string[] {
   return subscriptions.filter((sub) => sub !== subscription);
 }
 
-export const subscriptions = (
-  state: ReduxSubscriptions = {
-    subscriptions: [],
-  },
-  action: SubscriptionAction
-) => {
-  const list = state.subscriptions;
-
+export const subscriptions = (state: string[] = [], action: SubscriptionAction) => {
   switch (action.type) {
     case ReduxType.SET_SUBSCRIPTIONS:
       if (Array.isArray(action.payload)) {
-        return {
-          subscriptions: action.payload,
-        };
+        return action.payload as string[];
       }
     case ReduxType.ADD_SUBSCRIPTION:
-      return {
-        subscriptions: appendSubscription(action.payload as string, list),
-      };
+      return appendSubscription(action.payload as string, state) as string[];
     case ReduxType.DELETE_SUBSCRIPTION:
-      return {
-        subscriptions: deleteSubscription(action.payload as string, list),
-      };
+      return deleteSubscription(action.payload as string, state) as string[];
     default:
-      return state;
+      return state as string[];
   }
 };

src/store/types/index.ts

@@ -21,18 +21,3 @@ export type SubscriptionsTypes =
   | typeof SET_SUBSCRIPTIONS
   | typeof ADD_SUBSCRIPTION
   | typeof DELETE_SUBSCRIPTION;
-
-export const SET_MODEL = 'SET_MODEL';
-export const SET_TOKEN = 'SET_TOKEN';
-export const SET_COOKIE = 'SET_COOKIE';
-export const DELETE_MODEL = 'DELETE_MODEL';
-export const DELETE_TOKEN = 'DELETE_TOKEN';
-export const DELETE_COOKIE = 'DELETE_COOKIE';
-
-export type AuthTypes =
-  | typeof SET_MODEL
-  | typeof SET_TOKEN
-  | typeof DELETE_MODEL
-  | typeof DELETE_TOKEN
-  | typeof SET_COOKIE
-  | typeof DELETE_COOKIE;