Working package

package.json

@@ -1,8 +1,8 @@
 {
-  "name": "nostrgg-react",
+  "name": "@nostrgg/react",
   "version": "0.1.0",
   "license": "MIT",
-  "author": "Tristan Edwards",
+  "author": "t4t5",
   "main": "dist/index.js",
   "module": "dist/nostrgg-react.esm.js",
   "typings": "dist/index.d.ts",
@@ -48,5 +48,23 @@
       "path": "dist/nostrgg-react.esm.js",
       "limit": "10 KB"
     }
-  ]
+  ],
+  "devDependencies": {
+    "@size-limit/preset-small-lib": "^8.1.0",
+    "@tsconfig/create-react-app": "^1.0.3",
+    "@tsconfig/recommended": "^1.0.1",
+    "@types/lodash.uniqby": "^4.7.7",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
+    "dts-cli": "^1.6.0",
+    "husky": "^8.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "size-limit": "^8.1.0",
+    "tslib": "^2.4.1",
+    "typescript": "^4.9.4"
+  },
+  "dependencies": {
+    "lodash.uniqby": "^4.7.0"
+  }
 }

src/index.tsx

@@ -1,6 +1,120 @@
-import * as React from 'react';
+import {
+  createContext,
+  ReactNode,
+  useContext,
+  useEffect,
+  useState,
+  useRef,
+} from 'react';
 
-// Delete me
-export const Thing = () => {
-  return <div>Welcome to your first test package.</div>;
-};
+import { uniqBy } from 'lodash';
+
+import {
+  OnConnectFunc,
+  initNostr,
+  OnEventFunc,
+  SendEventFunc,
+  Filter,
+  NostrEvent,
+  SendMsgType,
+  SendEvent,
+} from '@nostrgg/client';
+
+interface NostrContextType {
+  isLoading: boolean;
+  onConnect: (_onConnectCallback?: OnConnectFunc) => void;
+  onEvent: (_onEventCallback?: OnEventFunc) => void;
+  sendEvent?: (event: SendEvent) => void;
+}
+
+const NostrContext = createContext<NostrContextType>({
+  isLoading: true,
+  onConnect: () => null,
+  onEvent: () => null,
+});
+
+export function NostrProvider({
+  children,
+  relayUrls,
+}: {
+  children: ReactNode;
+  relayUrls: string[];
+}) {
+  const [isLoading, setIsLoading] = useState(true);
+
+  let onConnectCallback: null | OnConnectFunc = null;
+  let onEventCallback: null | OnEventFunc = null;
+
+  const sendEventRef = useRef<SendEventFunc>();
+
+  useEffect(() => {
+    const { sendEvent: _sendEvent } = initNostr({
+      relayUrls,
+      onConnect: (url: string, sendEvent) => {
+        setIsLoading(false);
+
+        if (onConnectCallback) {
+          onConnectCallback(url, sendEvent);
+        }
+      },
+      // onEvent: (_relayUrl, event) => setLastEvent(event),
+      onEvent: (relayUrl, event) => {
+        if (onEventCallback) {
+          onEventCallback(relayUrl, event);
+        }
+      },
+      debug: true,
+    });
+
+    sendEventRef.current = _sendEvent;
+  }, [onConnectCallback, onEventCallback, relayUrls]);
+
+  const value: NostrContextType = {
+    isLoading,
+    sendEvent: sendEventRef.current,
+    onConnect: (_onConnectCallback?: OnConnectFunc) => {
+      if (_onConnectCallback) {
+        onConnectCallback = _onConnectCallback;
+      }
+    },
+    onEvent: (_onEventCallback?: OnEventFunc) => {
+      if (_onEventCallback) {
+        onEventCallback = _onEventCallback;
+      }
+    },
+  };
+
+  return (
+    <NostrContext.Provider value={value}>{children}</NostrContext.Provider>
+  );
+}
+
+export function useNostr() {
+  return useContext(NostrContext);
+}
+
+export function useNostrEvents({ filter }: { filter: Filter }) {
+  const { isLoading, sendEvent, onConnect, onEvent } = useNostr();
+  const [events, setEvents] = useState<NostrEvent[]>([]);
+
+  onConnect((url, _sendEvent) => {
+    _sendEvent([SendMsgType.REQ, filter], url);
+  });
+
+  onEvent((_relayUrl, event) => {
+    setEvents(_events => {
+      return [event, ..._events];
+    });
+  });
+
+  const uniqEvents = events.length > 0 ? uniqBy(events, 'id') : [];
+  const sortedEvents = uniqEvents.sort((a, b) => b.created_at - a.created_at);
+
+  return {
+    isLoading,
+    events: sortedEvents,
+    onConnect,
+    onEvent,
+    sendEvent,
+  };
+}

test/index.test.tsx

@@ -1,11 +0,0 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import { Thing } from '../src/index';
-
-describe('Thing', () => {
-  it('renders without crashing', () => {
-    const div = document.createElement('div');
-    ReactDOM.render(<Thing />, div);
-    ReactDOM.unmountComponentAtNode(div);
-  });
-});

tsconfig.json

@@ -1,5 +1,11 @@
 {
   // see https://www.typescriptlang.org/tsconfig to better understand tsconfigs
   "extends": "@tsconfig/create-react-app/tsconfig.json",
-  "include": ["src", "types"],
+  "include": [
+    "src",
+    "types"
+  ],
+  "compilerOptions": {
+    "jsx": "react-jsx"
+  },
 }