Initial commit

.babelrc

@@ -0,0 +1,27 @@
+{
+  "env": {
+    "test": {
+      "presets": [
+        [
+          "@babel/preset-env"
+        ],
+        "@babel/preset-react"
+      ]
+    }
+  },
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": false
+      }
+    ],
+    "@babel/preset-react"
+  ],
+  "ignore": [
+    "node_modules/**"
+  ],
+  "plugins": [
+    "@babel/plugin-transform-runtime"
+  ]
+}

.github/workflows/action.yml

@@ -0,0 +1,22 @@
+name: Build and Deploy
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  publish-gpr:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+          registry-url: https://registry.npmjs.org/
+          scope: '@tobicrain'
+      - run: npm install
+      - run: npm run build
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -0,0 +1,10 @@
+node_modules
+dist
+
+.DS_Store
+
+# Although npm recommends adding it to the source, this really should be
+# done only for top-level packages (aka. applications, not libraries).
+#
+# @see https://github.com/npm/npm/issues/20603
+package-lock.json

CHANGELOG.md

@@ -0,0 +1,14 @@
+# Changelog
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+## [0.1.0] - 2022-10-03
+### Added
+- Initial commit
+
+### Changed
+- Readme Instructions and so on

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Tobias Krainhöfner
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,127 @@
+PocketBase React SDK
+======================================================================
+Unofficial React SDK (React, React Native, Expo) for interacting with the [PocketBase JS SDK](https://github.com/pocketbase/js-sdk).
+
+
+- [Installation](#installation)
+- [Usage](#usage)
+- [Caveats](#caveats)
+
+
+## Installation
+
+### React Native or Expo
+
+
+```sh
+# Using npm
+npm install pocketbase-react  --save
+
+#Using yarn
+yarn add pocketbase-react
+```
+```tsx
+import { Pocketbase } from 'pocketbase-react';
+```
+
+---
+> 🔧 React Native doesn't have native `EventSource` implementation, so in order to use the realtime service you'll need to load a `EventSource` polyfill.
+> I recommend [EventSource/eventsource](https://github.com/EventSource/eventsource)
+> ```sh
+> # Using npm
+> npm install eventsource --save
+>
+> # Using yarn
+> yarn add eventsource
+> ```
+> ```js 
+> // EventSource.ts
+> var Source = require('event-source');
+> global.EventSource = Source;
+> ```
+
+## Usage
+
+```tsx
+// App.tsx
+import { Pocketbase } from 'pocketbase-react';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+const storage = AsyncStorage
+const serverURL = "YOUR_SERVER_URL"
+const collections = ['COLLECTION_NAME_01', 'COLLECTION_NAME_02']
+const credentials = {
+    username: 'YOUR_EMAIL',
+    password: 'YOUR_PASSWORD'
+}
+
+<Pocketbase
+    storage={storage}
+    serverURL={serverURL}
+    initialCollections={collections}
+    credentials={credentials}>
+    <APP />
+</Pocketbase>
+```
+
+## Caveats
+```tsx
+import { useAppContent } = "pocketbase-react";
+```
+### Records
+Reading the records value directly accesses the Redux Store.
+
+The value will be changed automatically by the following actions:
+- [Initial Fetch](#initialfetch)
+- [Initial Collections](#usage)
+- [Subscribe](#subscribe)
+- [Refetch](#refetch)
+
+**Without** Initial Fetch
+```tsx
+// Corresponds to the stored Redux value, simply reads without making further PocketBase requests
+const { records } = useAppContent("COLLECTION_NAME_01")
+```
+**With** Initial Fetch <a name="initialfetch"></a>
+```tsx
+// When initializing, the desired table is queried once and updated in Redux, records corresponds to the stored Redux value
+const { records } = useAppContent("COLLECTION_NAME_01", true)
+```
+
+### Actions
+```tsx
+const { actions } = useAppContent("COLLECTION_NAME_01")
+```
+
+> *All following actions are performed on the desired table, in this case -> COLLECTION_NAME_01*
+>
+> ⚠️ **All actions will not return anything, they will just modify the Redux value according to their intention**
+
+Subscribe <a name="subscribe"></a>
+```tsx
+actions.subscribe();
+```
+Unsubscribe
+```tsx
+actions.unsubscribe();
+```
+Refetch <a name="refetch"></a>
+```tsx
+actions.refetch();
+```
+Create
+```tsx
+const object = {};
+actions.create(object);
+```
+Update
+```tsx
+const id = "SOME_ID";
+const object = {};
+actions.update(id, object);
+```
+DELETE
+```tsx
+const id = "SOME_ID";
+actions.delete(id);
+```

package.json

@@ -0,0 +1,61 @@
+{
+  "name": "pocketbase-react",
+  "version": "0.1.0",
+  "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",
+    "react-native",
+    "expo",
+    "sdk",
+    "javascript",
+    "typescript",
+    "javascript-sdk"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tobicrain/pocketbase-react.git"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.19.3",
+    "@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"
+  },
+  "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"
+}

rollup.config.js

@@ -0,0 +1,35 @@
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import typescript from "@rollup/plugin-typescript";
+import dts from "rollup-plugin-dts";
+const packageJson = require("./package.json");
+
+export default [
+  {
+    input: "src/index.ts",
+    external: ["react"],
+    output: [
+      {
+        file: packageJson.main,
+        format: "cjs",
+        sourcemap: true,
+      },
+      {
+        file: packageJson.module,
+        format: "esm",
+        sourcemap: true,
+      },
+    ],
+    plugins: [
+      resolve(),
+      commonjs(),
+      typescript({ tsconfig: "./tsconfig.json" }),
+    ],
+  },
+  {
+    input: "dist/esm/index.d.ts",
+    external: ["react"],
+    output: [{ file: "dist/index.d.ts", format: "esm" }],
+    plugins: [dts()],
+  },
+];

src/EventSource.ts

@@ -0,0 +1,2 @@
+var Source = require('event-source');
+global.EventSource = Source;

src/context/Pocketbase.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { createContext, useEffect } from 'react';
+import PocketBase from 'pocketbase/dist/pocketbase.cjs';
+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';
+import { combineReducers } from '@reduxjs/toolkit';
+import appReducer from '../store/reducers';
+import { persistReducer } from 'redux-persist';
+import { AsyncStorageStatic } from '@react-native-async-storage/async-storage';
+
+export const PocketbaseContext = createContext<PocketBase | null>(null);
+
+export type PocketbaseProviderProps = {
+  children: React.ReactNode;
+  serverURL: string;
+  credentials: {
+    username: string;
+    password: string;
+  };
+  initialCollections?: string[];
+  storage: AsyncStorageStatic;
+};
+
+export const Pocketbase = (props: PocketbaseProviderProps) => {
+  const [client, setClient] = React.useState<PocketBase | null>(null);
+  useEffect(() => {
+    const reducer = combineReducers({
+      reducer: persistReducer({
+        ...store.persistConfig,
+        storage: props.storage,
+      }, appReducer),
+    });
+    store.store.replaceReducer(reducer);
+
+    const client = new PocketBase(props.serverURL);
+    client.admins.authViaEmail(props.credentials.username, props.credentials.password).then(() => {
+      setClient(client);
+      console.log('Pocketbase client initialized');
+    });
+  }, [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;  
+};