pocketbase-react 0.1.1 → 0.1.3

package/lib/store/index.js

@@ -0,0 +1,47 @@
+"use strict";
+
+exports.__esModule = true;
+var _actions = require("./actions");
+Object.keys(_actions).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _actions[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _actions[key];
+    }
+  });
+});
+var _reducers = require("./reducers");
+Object.keys(_reducers).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _reducers[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _reducers[key];
+    }
+  });
+});
+var _types = require("./types");
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _types[key];
+    }
+  });
+});
+var _store = require("./store");
+Object.keys(_store).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _store[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _store[key];
+    }
+  });
+});

package/lib/store/reducers/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+exports.__esModule = true;
+exports.appReducer = void 0;
+var _redux = require("redux");
+var _records = require("./records");
+const appReducer = (0, _redux.combineReducers)({
+  records: _records.records
+});
+exports.appReducer = appReducer;

package/lib/store/reducers/records.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.records = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var ReduxType = _interopRequireWildcard(require("../types"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function appendRecord(record, records) {
+  return [...records, record];
+}
+function appendRecords(recordsToAppend, records) {
+  return [...records, ...recordsToAppend];
+}
+function updateRecord(record, records) {
+  return records.map(r => {
+    if (r.id === record.id) {
+      return record;
+    }
+    return r;
+  });
+}
+function deleteRecord(record, records) {
+  return records.filter(r => r.id !== record.id);
+}
+function deleteRecords(recordsToDelete, records) {
+  return records.filter(r => !recordsToDelete.includes(r));
+}
+const records = (state = {}, action) => {
+  var _state$action$key;
+  const list = (_state$action$key = state[action.key]) != null ? _state$action$key : [];
+  switch (action.type) {
+    case ReduxType.SET_RECORDS:
+      if (Array.isArray(action.payload)) {
+        return (0, _extends2.default)({}, state, {
+          [action.key]: action.payload
+        });
+      }
+    case ReduxType.ADD_RECORD:
+      return (0, _extends2.default)({}, state, {
+        [action.key]: appendRecord(action.payload, list)
+      });
+    case ReduxType.ADD_RECORDS:
+      return (0, _extends2.default)({}, state, {
+        [action.key]: appendRecords(action.payload, list)
+      });
+    case ReduxType.DELETE_RECORD:
+      return (0, _extends2.default)({}, state, {
+        [action.key]: deleteRecord(action.payload, list)
+      });
+    case ReduxType.DELETE_RECORDS:
+      return (0, _extends2.default)({}, state, {
+        [action.key]: deleteRecords(action.payload, list)
+      });
+    case ReduxType.UPDATE_RECORD:
+      return (0, _extends2.default)({}, state, {
+        [action.key]: updateRecord(action.payload, list)
+      });
+    default:
+      return state;
+  }
+};
+exports.records = records;

package/lib/store/store.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.useAppSelector = exports.useAppDispatch = exports.store = exports.persistor = exports.persistConfig = void 0;
+var _toolkit = require("@reduxjs/toolkit");
+var _reduxPersist = require("redux-persist");
+var _reactRedux = require("react-redux");
+var _reducers = require("./reducers");
+var _reduxThunk = _interopRequireDefault(require("redux-thunk"));
+var _asyncStorage = _interopRequireDefault(require("@react-native-async-storage/async-storage"));
+const CustomStorage = {
+  getItem: async (_key, ..._args) => {
+    if (typeof document !== 'undefined') {
+      return localStorage.getItem(_key);
+    } else if (typeof navigator !== 'undefined' && navigator.product === 'ReactNative') {
+      return await _asyncStorage.default.getItem(_key);
+    }
+  },
+  setItem: async (_key, _value, ..._args) => {
+    if (typeof document !== 'undefined') {
+      return localStorage.setItem(_key, _value);
+    } else if (typeof navigator !== 'undefined' && navigator.product === 'ReactNative') {
+      return await _asyncStorage.default.setItem(_key, _value);
+    }
+  },
+  removeItem: async (_key, ..._args) => {
+    if (typeof document !== 'undefined') {
+      return localStorage.removeItem(_key);
+    } else if (typeof navigator !== 'undefined' && navigator.product === 'ReactNative') {
+      return await _asyncStorage.default.removeItem(_key);
+    }
+  }
+};
+const persistConfig = {
+  key: 'root',
+  storage: CustomStorage
+};
+exports.persistConfig = persistConfig;
+const reducer = (0, _toolkit.combineReducers)({
+  reducer: (0, _reduxPersist.persistReducer)(persistConfig, _reducers.appReducer)
+});
+const store = (0, _toolkit.configureStore)({
+  reducer,
+  middleware: [_reduxThunk.default]
+});
+exports.store = store;
+const useAppDispatch = store.dispatch;
+exports.useAppDispatch = useAppDispatch;
+const useAppSelector = _reactRedux.useSelector;
+exports.useAppSelector = useAppSelector;
+const persistor = (0, _reduxPersist.persistStore)(store);
+exports.persistor = persistor;

package/lib/store/types/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+exports.__esModule = true;
+exports.UPDATE_RECORD = exports.SET_RECORDS = exports.DELETE_RECORDS = exports.DELETE_RECORD = exports.ADD_RECORDS = exports.ADD_RECORD = void 0;
+const SET_RECORDS = 'SET_RECORDS';
+exports.SET_RECORDS = SET_RECORDS;
+const ADD_RECORD = 'ADD_RECORD';
+exports.ADD_RECORD = ADD_RECORD;
+const ADD_RECORDS = 'ADD_RECORDS';
+exports.ADD_RECORDS = ADD_RECORDS;
+const UPDATE_RECORD = 'UPDATE_RECORD';
+exports.UPDATE_RECORD = UPDATE_RECORD;
+const DELETE_RECORD = 'DELETE_RECORD';
+exports.DELETE_RECORD = DELETE_RECORD;
+const DELETE_RECORDS = 'DELETE_RECORDS';
+exports.DELETE_RECORDS = DELETE_RECORDS;

package/package.json

@@ -1,19 +1,7 @@
 {
   "name": "pocketbase-react",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Unofficial React SDK (React, React Native, Expo) for interacting with the PocketBase JS SDK",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "files": [
-    "dist"
-  ],
-  "types": "dist/index.d.ts",
-  "scripts": {
-    "build": "rm -rf dist && rollup -c",
-    "dev": "rollup -c -w",
-    "rollup": "rollup -c",
-    "prepublishOnly": "npm run build"
-  },
   "keywords": [
     "pocketbase",
     "react",
@@ -24,38 +12,109 @@
     "typescript",
     "javascript-sdk"
   ],
+  "license": "MIT",
+  "author": "Tobias Krainhöfner",
+  "homepage": "https://github.com/tobicrain/pocketbase-react#readme",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tobicrain/pocketbase-react.git"
   },
+  "bugs": {
+    "url": "https://github.com/tobicrain/pocketbase-react/issues"
+  },
+  "main": "lib/index.js",
+  "types": "es/index.d.ts",
+  "unpkg": "dist/pocketbase-react.js",
+  "module": "es/index.js",
+  "files": [
+    "dist",
+    "lib",
+    "src",
+    "es"
+  ],
+  "scripts": {
+    "build:commonjs": "cross-env BABEL_ENV=commonjs babel src --extensions \".js,.ts,.tsx\" --out-dir lib",
+    "build:es": "babel src --extensions \".js,.ts,.tsx\" --out-dir es",
+    "build:umd": "cross-env NODE_ENV=development rollup -c -o dist/pocketbase-react.js",
+    "build:umd:min": "cross-env NODE_ENV=production rollup -c -o dist/pocketbase-react.min.js",
+    "build:types": "tsc",
+    "build": "yarn build:types && yarn build:commonjs && yarn build:es && yarn build:umd && yarn build:umd:min",
+    "clean": "rimraf lib dist es coverage",
+    "dev": "rollup -c -w",
+    "rollup": "rollup -c",
+    "prepublishOnly": "npm run build"
+  },
   "devDependencies": {
-    "@babel/core": "^7.19.3",
+    "@babel/cli": "^7.12.1",
+    "@babel/core": "^7.12.3",
+    "@babel/plugin-proposal-decorators": "^7.12.1",
+    "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
+    "@babel/plugin-transform-react-display-name": "^7.12.1",
+    "@babel/plugin-transform-react-jsx": "^7.12.1",
+    "@babel/plugin-transform-runtime": "^7.12.1",
+    "@babel/preset-env": "^7.12.1",
+    "@babel/preset-typescript": "^7.14.5",
+    "@microsoft/api-extractor": "^7.18.1",
+    "@rollup/plugin-babel": "^5.2.1",
+    "@rollup/plugin-commonjs": "^15.1.0",
+    "@rollup/plugin-node-resolve": "^9.0.0",
+    "@rollup/plugin-replace": "^2.3.3",
+    "@testing-library/jest-dom": "^5.11.5",
+    "@testing-library/jest-native": "^3.4.3",
+    "@testing-library/react": "13.0.0",
+    "@testing-library/react-12": "npm:@testing-library/react@^12",
+    "@testing-library/react-hooks": "^3.4.2",
+    "@testing-library/react-native": "^7.1.0",
+    "@types/object-assign": "^4.0.30",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "@types/react-is": "^17",
+    "@types/react-native": "^0.67.4",
+    "@typescript-eslint/eslint-plugin": "^4.28.0",
+    "@typescript-eslint/parser": "^4.28.0",
+    "babel-eslint": "^10.1.0",
+    "babel-jest": "^26.6.1",
+    "codecov": "^3.8.0",
+    "eslint": "^7.12.0",
+    "eslint-config-prettier": "^6.14.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-react": "^7.21.5",
+    "glob": "^7.1.6",
+    "jest": "^26.6.1",
+    "prettier": "^2.1.2",
+    "react": "18.0.0",
+    "react-17": "npm:react@^17",
+    "react-dom": "18.0.0",
+    "react-dom-17": "npm:react-dom@^17",
+    "react-native": "^0.64.1",
+    "react-test-renderer": "18.0.0",
+    "react-test-renderer-17": "npm:react-test-renderer@^17",
+    "cross-env": "^7.0.3",
+    "rollup": "^2.32.1",
+    "rollup-plugin-terser": "^7.0.2",
+    "rimraf": "^3.0.2",
+    "ts-jest": "26.5.6",
+    "typescript": "^4.3.4"
+  },
+  "peerDependencies": {
+    "pocketbase": "^0.7.1",
+    "react": "^16.12.0",
     "@react-native-async-storage/async-storage": "^1.17.10",
     "@reduxjs/toolkit": "^1.8.5",
-    "@rollup/plugin-babel": "^5.3.1",
-    "@rollup/plugin-commonjs": "^22.0.2",
-    "@rollup/plugin-node-resolve": "^14.1.0",
-    "@rollup/plugin-typescript": "^8.5.0",
     "node-localstorage": "^2.2.1",
     "react-redux": "^8.0.4",
     "redux": "^4.2.0",
-    "redux-persist": "^6.0.0",
-    "rollup": "^2.79.1",
-    "rollup-plugin-dts": "^4.2.2",
-    "tslib": "^2.4.0",
-    "typescript": "^4.8.4"
-  },
-  "peerDependencies": {
-    "pocketbase": "^0.7.1",
-    "react": "^16.12.0"
+    "redux-persist": "^6.0.0"
   },
   "dependencies": {
-    "pocketbase": "^0.7.1"
-  },
-  "author": "Tobias Krainhöfner",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/tobicrain/pocketbase-react/issues"
-  },
-  "homepage": "https://github.com/tobicrain/pocketbase-react#readme"
+    "@babel/runtime": "^7.12.1",
+    "pocketbase": "^0.7.1",
+    "@react-native-async-storage/async-storage": "^1.17.10",
+    "@reduxjs/toolkit": "^1.8.5",
+    "node-localstorage": "^2.2.1",
+    "react-redux": "^8.0.4",
+    "redux": "^4.2.0",
+    "redux-persist": "^6.0.0"
+  }
 }

package/src/context/Pocketbase.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { createContext, useEffect } from 'react';
+import PocketBase from 'pocketbase';
+import { Provider } from 'react-redux';
+import { PersistGate } from 'redux-persist/integration/react';
+import * as store from '../store/store';
+import { ClientProvider } from './client';
+import { ContentProvider } from './content';
+
+export const PocketbaseContext = createContext<PocketBase | null>(null);
+
+export type PocketbaseProviderProps = {
+  children: React.ReactNode;
+  serverURL: string;
+  credentials: {
+    username: string;
+    password: string;
+  };
+  initialCollections?: string[];
+};
+
+export const Pocketbase = (props: PocketbaseProviderProps) => {
+  const [client, setClient] = React.useState<PocketBase | null>(null);
+  useEffect(() => {
+    const client = new PocketBase(props.serverURL);
+    client.admins.authViaEmail(props.credentials.username, props.credentials.password).then(() => {
+      setClient(client);
+    });
+  }, [props.serverURL]);
+
+  return client ? (
+    <ClientProvider client={client}>
+      <Provider store={store.store}>
+        <PersistGate persistor={store.persistor}>
+          <ContentProvider collections={props.initialCollections}>
+            {props.children}
+          </ContentProvider>
+        </PersistGate>
+      </Provider>
+    </ClientProvider>
+  ): null;  
+};

package/src/context/client.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { createContext } from 'react';
+import PocketBase from 'pocketbase';
+
+export const ClientContext = createContext<PocketBase | null>(null);
+
+export type ClientProviderProps = {
+  children: React.ReactNode;
+  client: PocketBase;
+};
+
+export const ClientProvider = (props: ClientProviderProps) => {
+  return <ClientContext.Provider value={props.client}>{props.children}</ClientContext.Provider>;
+};

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;