pocketbase-react 0.1.0 → 0.1.2

package/src/context/content.tsx

@@ -0,0 +1,88 @@
+import * as store from '../store/store';
+import * as React from 'react';
+import { createContext, useEffect } from 'react';
+import { useClientContext } from '../hooks/useClientContext';
+import { Record } from '../interfaces/Record';
+import { recordsAction } from '../store/actions';
+
+interface ContentActions {
+  subscribe: (collectionName: string) => Promise<void>;
+  unsubscribe: (collectionName?: string) => void;
+  fetch: (collectionName: string) => Promise<void>;
+  create: (collectionName: string, record: {}) => Promise<void>;
+  update: (collectionName: string, recordId: string, record: {}) => Promise<void>;
+  delete: (collectionName: string, recordId: string) => Promise<void>;
+}
+
+export const ContentContext = createContext<ContentActions | null>(null);
+
+export type ContentProviderProps = {
+  children: React.ReactNode;
+  collections?: string[];
+};
+
+interface MessageData {
+    action: string;
+    record: Record;
+}
+
+export const ContentProvider = (props: ContentProviderProps) => {
+  const client = useClientContext();
+  const dispatch = store.useAppDispatch;
+  const [collections, _] = React.useState<string[]>(props.collections || []);
+
+  const actions: ContentActions = {
+    subscribe: async (collectionName: string) => {
+      // save local that collectionName should be subscribed
+      await client?.realtime.subscribe(collectionName, (event: MessageData) => {
+        switch (event.action) {
+          case 'create':
+            dispatch(recordsAction.addRecord(collectionName, event.record));
+            break;
+          case 'update':
+            dispatch(recordsAction.updateRecord(collectionName, event.record));
+            break;
+          case 'delete':
+            dispatch(recordsAction.deleteRecord(collectionName, event.record));
+            break;
+          default:
+            break;
+        }
+      });
+    },
+    unsubscribe: (collectionName?: string) => {
+      if (collectionName) {
+        client?.realtime.unsubscribe(collectionName);
+      } else {
+        client?.realtime.unsubscribe();
+      }
+    },
+    fetch: async (collectionName: string) => {
+      const records = await client?.records.getFullList(collectionName, 200);
+      dispatch(recordsAction.setRecords(collectionName, records as Record[]));
+    },
+    create: async (collectionName: string, record: {}) => {
+      await client?.records.create(collectionName, record);
+    },
+    update: async (collectionName: string, recordId: string, record: {}) => {
+      await client?.records.update(collectionName, recordId, record);
+    },
+    delete: async (collectionName: string, recordId: string) => {
+      await client?.records.delete(collectionName, recordId);
+    },
+  };
+
+  useEffect(() => {
+    if (collections) {
+      collections.forEach((collectionName) => {
+        actions.fetch(collectionName);
+        actions.subscribe(collectionName);
+      });
+    }
+    return () => actions.unsubscribe();
+  }, [collections]);
+
+  return (
+    <ContentContext.Provider value={actions}>{props.children}</ContentContext.Provider>
+  );
+};

package/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './useAppContent';
+export * from './useClientContext';

package/src/hooks/useAppContent.ts

@@ -0,0 +1,28 @@
+import { useContext, useEffect } from 'react';
+import * as store from '../store';
+import { ContentContext } from '../context';
+import { Record } from '../interfaces/Record';
+
+export function useAppContent<T extends Record>(
+  collectionName: string,
+  initialFetch: boolean = false
+) {
+  const records = (store.useAppSelector((state) => state.reducer.records[collectionName]) ?? []) as T[];
+  const context = useContext(ContentContext);
+
+  useEffect(() => {
+    if (initialFetch) {
+      context?.fetch(collectionName);
+    }
+  }, [collectionName, initialFetch]);
+
+  const actions = {
+    subscribe: async () => await context?.subscribe(collectionName),
+    unsubscribe: () => context?.unsubscribe(collectionName),
+    refetch: async () => await context?.fetch(collectionName),
+    create: async (record: {}) => await context?.create(collectionName, record),
+    update: async (id: string, record: {}) => await context?.update(collectionName, id, record),
+    delete: async (id: string) => await context?.delete(collectionName, id),
+  };
+  return { records, actions };
+}

package/src/hooks/useClientContext.ts

@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import { ClientContext } from '../context';
+
+const useClientContext = () => {
+  const context = useContext(ClientContext);
+
+  return context;
+};
+
+
+export { useClientContext };

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from './hooks';
+export * from './interfaces';
+export * from './context';
+export * from './store';

package/src/interfaces/Record.ts

@@ -0,0 +1,10 @@
+export interface Record {
+  id?: string;
+  created?: string;
+  updated?: string;
+  '@collectionId'?: string;
+  '@collectionName'?: string;
+  '@expand'?: Expand;
+}
+
+export interface Expand {}

package/src/interfaces/index.ts

@@ -0,0 +1 @@
+export * from './Record';

package/src/store/actions/index.tsx

@@ -0,0 +1,3 @@
+import * as recordsAction from './records';
+
+export { recordsAction };

package/src/store/actions/records.tsx

@@ -0,0 +1,54 @@
+import { Record } from '../../interfaces/Record';
+import { RecordAction } from '../reducers/records';
+import * as ReduxType from '../types';
+
+const setRecords = (key: string, payload: Record[]) =>
+  ({
+    type: ReduxType.SET_RECORDS,
+    key,
+    payload,
+  } as RecordAction);
+
+const addRecord = (key: string, payload: Record) =>
+  ({
+    type: ReduxType.ADD_RECORD,
+    key,
+    payload,
+  } as RecordAction);
+
+const addRecords = (key: string, payload: Record[]) =>
+  ({
+    type: ReduxType.ADD_RECORDS,
+    key,
+    payload,
+  } as RecordAction);
+
+const deleteRecord = (key: string, payload: Record) =>
+  ({
+    type: ReduxType.DELETE_RECORD,
+    key,
+    payload,
+  } as RecordAction);
+
+const deleteRecords = (key: string, payload: Record[]) =>
+  ({
+    type: ReduxType.DELETE_RECORDS,
+    key,
+    payload,
+  } as RecordAction);
+
+const updateRecord = (key: string, payload: Record) =>
+  ({
+    type: ReduxType.UPDATE_RECORD,
+    key,
+    payload,
+  } as RecordAction);
+
+export {
+  setRecords,
+  addRecord,
+  addRecords,
+  deleteRecord,
+  deleteRecords,
+  updateRecord,
+};

package/src/store/index.ts

@@ -0,0 +1,4 @@
+export * from './actions';
+export * from './reducers';
+export * from './types';
+export * from './store';

package/src/store/reducers/index.tsx

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

package/src/store/reducers/records.tsx

@@ -0,0 +1,78 @@
+import { Record } from '../../interfaces/Record';
+import * as ReduxType from '../types';
+
+export interface ReduxRecord {
+  [key: string]: Record[];
+}
+
+export type RecordAction = {
+  type: ReduxType.Types;
+  key: string;
+  payload: null | Record | Record[];
+};
+
+function appendRecord(record: Record, records: Record[]): Record[] {
+  return [...records, record];
+}
+
+function appendRecords(recordsToAppend: Record[], records: Record[]): Record[] {
+  return [...records, ...recordsToAppend];
+}
+
+function updateRecord(record: Record, records: Record[]): Record[] {
+  return records.map((r) => {
+    if (r.id === record.id) {
+      return record;
+    }
+    return r;
+  });
+}
+
+function deleteRecord(record: Record, records: Record[]): Record[] {
+  return records.filter((r) => r.id !== record.id);
+}
+
+function deleteRecords(recordsToDelete: Record[], records: Record[]): Record[] {
+  return records.filter((r) => !recordsToDelete.includes(r));
+}
+
+export const records = (state: ReduxRecord = {}, action: RecordAction) => {
+  const list = state[action.key] ?? [];
+
+  switch (action.type) {
+    case ReduxType.SET_RECORDS:
+      if (Array.isArray(action.payload)) {
+        return {
+          ...state,
+          [action.key]: action.payload,
+        };
+      }
+    case ReduxType.ADD_RECORD:
+      return {
+        ...state,
+        [action.key]: appendRecord(action.payload as Record, list),
+      };
+    case ReduxType.ADD_RECORDS:
+      return {
+        ...state,
+        [action.key]: appendRecords(action.payload as Record[], list),
+      };
+    case ReduxType.DELETE_RECORD:
+      return {
+        ...state,
+        [action.key]: deleteRecord(action.payload as Record, list),
+      };
+    case ReduxType.DELETE_RECORDS:
+      return {
+        ...state,
+        [action.key]: deleteRecords(action.payload as Record[], list),
+      };
+    case ReduxType.UPDATE_RECORD:
+      return {
+        ...state,
+        [action.key]: updateRecord(action.payload as Record, list),
+      };
+    default:
+      return state;
+  }
+};

package/src/store/store.tsx

@@ -0,0 +1,67 @@
+import { combineReducers, configureStore } from '@reduxjs/toolkit';
+import { persistStore, persistReducer } from 'redux-persist';
+import { TypedUseSelectorHook, useSelector } from 'react-redux';
+import { appReducer } from './reducers';
+import thunk from 'redux-thunk';
+import { RecordAction } from './reducers/records';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+interface Storage {
+  getItem(key: string, ...args: Array<any>): any;
+  setItem(key: string, value: any, ...args: Array<any>): any;
+  removeItem(key: string, ...args: Array<any>): any;
+}
+
+
+const CustomStorage: Storage = {
+  getItem: async (_key: string, ..._args: Array<any>) => {
+    if (typeof document !== 'undefined') {
+      console.log("I'm on the web!")
+      return localStorage.getItem(_key);
+    }
+    else if (typeof navigator !== 'undefined' && navigator.product === 'ReactNative') {
+      console.log("I'm in react-native")
+      return await AsyncStorage.getItem(_key);
+    }
+  },
+  setItem: async (_key: string, _value: any, ..._args: Array<any>) => {
+    if (typeof document !== 'undefined') {
+      return localStorage.setItem(_key, _value);
+    }
+    else if (typeof navigator !== 'undefined' && navigator.product === 'ReactNative') {
+      return await AsyncStorage.setItem(_key, _value);
+    }
+  },
+  removeItem: async (_key: string, ..._args: Array<any>) => {
+    if (typeof document !== 'undefined') {
+      return localStorage.removeItem(_key);
+    }
+    else if (typeof navigator !== 'undefined' && navigator.product === 'ReactNative') {
+      return await AsyncStorage.removeItem(_key);
+    }
+  },
+};
+
+export const persistConfig = {
+  key: 'root',
+  storage: CustomStorage
+};
+
+const reducer = combineReducers({
+  reducer: persistReducer(persistConfig, appReducer),
+});
+
+const store = configureStore({
+  reducer,
+  middleware: [thunk],
+});
+
+type AppDispatch = typeof store.dispatch<RecordAction>;
+const useAppDispatch = store.dispatch;
+type RootState = ReturnType<typeof store.getState>;
+const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
+
+
+const persistor = persistStore(store);
+
+export { AppDispatch, RootState, useAppDispatch, useAppSelector, store, persistor };

package/src/store/types/index.ts

@@ -0,0 +1,14 @@
+export const SET_RECORDS = 'SET_RECORDS';
+export const ADD_RECORD = 'ADD_RECORD';
+export const ADD_RECORDS = 'ADD_RECORDS';
+export const UPDATE_RECORD = 'UPDATE_RECORD';
+export const DELETE_RECORD = 'DELETE_RECORD';
+export const DELETE_RECORDS = 'DELETE_RECORDS';
+
+export type Types =
+  | typeof SET_RECORDS
+  | typeof ADD_RECORD
+  | typeof ADD_RECORDS
+  | typeof UPDATE_RECORD
+  | typeof DELETE_RECORD
+  | typeof DELETE_RECORDS;

package/dist/cjs/EventSource.d.ts

@@ -1 +0,0 @@
-declare var Source: any;

package/dist/cjs/context/Pocketbase.d.ts

@@ -1,15 +0,0 @@
-import * as React from 'react';
-import PocketBase from 'pocketbase/dist/pocketbase.cjs';
-import { AsyncStorageStatic } from '@react-native-async-storage/async-storage';
-export declare const PocketbaseContext: React.Context<PocketBase | null>;
-export declare type PocketbaseProviderProps = {
-    children: React.ReactNode;
-    serverURL: string;
-    credentials: {
-        username: string;
-        password: string;
-    };
-    initialCollections?: string[];
-    storage: AsyncStorageStatic;
-};
-export declare const Pocketbase: (props: PocketbaseProviderProps) => JSX.Element | null;

package/dist/cjs/hooks/useClientContext.d.ts

@@ -1,2 +0,0 @@
-declare const _default: () => import("pocketbase/dist/pocketbase.cjs").default | null;
-export default _default;