Refactor/subscription support

README.md

@@ -1,6 +1,8 @@
 # @kendew-agency/react-feedback-layer
 
-A drop-in React feedback layer for collecting contextual user feedback through interactive comments and annotations. Perfect for design review tools, bug reporting systems, and collaborative annotation platforms.
+A drop-in React feedback layer for collecting contextual user feedback through interactive comments and annotations. Perfect for design review tools, bug reporting systems, and collaborative annotation platforms. 
+
+Have a look at the [changelog](#changelog) when updating the package.
 
 ## Features
 
@@ -1169,3 +1171,12 @@ MIT © [Kendew Agency](https://github.com/Kendew-Agency)
 - [GitHub Repository](https://github.com/Kendew-Agency/react-feedback-layer)
 - [Issue Tracker](https://github.com/Kendew-Agency/react-feedback-layer/issues)
 - [NPM Package](https://www.npmjs.com/package/@kendew-agency/react-feedback-layer)
+
+## Changelog
+
+A list if breaking changes that could impact the way you configured the package
+
+### 0.2.0
+- Reworked the subscription system. The system remains in beta and may change in the future. Configurations made with version 0.1.2 or older will need adjustment after updating.
+- `mode` was defined twice in props. It has been removed as a root prop and is now only part of the config.
+

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@kendew-agency/react-feedback-layer",
-	"version": "0.1.2",
+	"version": "0.2.0",
 	"description": "Drop-in React feedback layer for collecting contextual user feedback",
 	"license": "MIT",
 	"author": "Kendew Agency",

src/contexts/comment-context.tsx

@@ -58,6 +58,11 @@ const commentReducer = (
         comments: action.comments,
       };
     }
+    case "APPEND_COMMENT":
+      return {
+        ...state,
+        comments: [...state.comments, action.comment],
+      };
     case "DELETE":
       return {
         ...state,
@@ -169,8 +174,8 @@ export const CommentContextProvider = ({
   useEffect(() => {
     if (!subscription) return;
 
-    subscription.subscribe((update: CommentType[]) => {
-      dispatch({ type: "UPDATE_COMMENTS", comments: update });
+    subscription.subscribe((data) => {
+      dispatch({ type: "APPEND_COMMENT", comment: data });
     });
 
     return () => {

src/types/action.types.ts

@@ -13,6 +13,10 @@ export type CommentAction =
       type: "UPDATE_COMMENTS";
       comments: CommentType[];
     }
+  | {
+      type: "APPEND_COMMENT";
+      comment: CommentType;
+    }
   | {
       type: "EDIT";
       id: string;

src/types/overlay.types.ts

@@ -84,9 +84,10 @@ export type CommentOverlayProps = {
   initialOverlayState?: CommentOverlayState;
   /**
    * Realtime subscription if supported by you DB
+   * @description You can use this feature with a realtime DB or a websocket
+   * @beta this featue is not yet fully tested and is subject to change
    */
-  subscription?: Suscription;
-  mode?: "onConfirm";
+  subscription?: RealtimeSubscription<CommentType>;
   /**
    * Callback with all newly confirmed comments
    *
@@ -111,10 +112,10 @@ export type CommentOverlayProps = {
   config?: Config;
 };
 
-type Suscription = {
-  subscribe: (update: unknown) => void;
-  unsubscribe: () => void;
-};
+export interface RealtimeSubscription<T> {
+  subscribe(onUpdate: (data: T) => void): void;
+  unsubscribe(): void;
+}
 
 export type Config = {
   /**