diff --git a/README.md b/README.md index 74a34df..79289a8 100644 --- a/README.md +++ b/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. + diff --git a/package.json b/package.json index 7323b2b..f572c1d 100644 --- a/package.json +++ b/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", diff --git a/src/contexts/comment-context.tsx b/src/contexts/comment-context.tsx index 8bdcb44..a439e54 100644 --- a/src/contexts/comment-context.tsx +++ b/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 () => { diff --git a/src/types/action.types.ts b/src/types/action.types.ts index 371c1d9..7e45817 100644 --- a/src/types/action.types.ts +++ b/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; diff --git a/src/types/overlay.types.ts b/src/types/overlay.types.ts index 31c3528..2e6b9a0 100644 --- a/src/types/overlay.types.ts +++ b/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; /** * 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 { + subscribe(onUpdate: (data: T) => void): void; + unsubscribe(): void; +} export type Config = { /**