DGN Contexts Package

A Redux contexts package for the DGN platform containing all state management logic.

Installation

Since this is a local package, you can install it using npm link or by referencing the local path.

Method 1: Using npm link (Recommended)

1. In the package directory:

cd /path/to/dgn-contexts-package
npm install
npm run build
npm link

2. In your Next.js application:

npm link dgn-contexts

Method 2: Using local path in package.json

Add this to your Next.js app's package.json:

{
  "dependencies": {
    "dgn-contexts": "file:../dgn-contexts-package"
  }
}

Usage

Basic Setup

import { store, useAppDispatch, useAppSelector } from 'dgn-contexts';
import { Provider } from 'react-redux';

// Wrap your app with the Redux provider
function App() {
  return (
    <Provider store={store}>
      <YourAppComponents />
    </Provider>
  );
}

Using in Components

import { useAppSelector, useAppDispatch } from 'dgn-contexts';
import { useAnnotationsActions, useAnnotationsState } from 'dgn-contexts';

function MyComponent() {
  const dispatch = useAppDispatch();
  const userState = useAppSelector(state => state.user);
  const annotationsState = useAnnotationsState();
  const annotationsActions = useAnnotationsActions();
  
  // Use the state and actions as needed
  return (
    <div>
      <p>User: {userState.name}</p>
      <button onClick={() => annotationsActions.loadAnnotations()}>
        Load Annotations
      </button>
    </div>
  );
}

Available Contexts

• user - User state management
• triggers - Triggers state management
• specialEvent - Special events state management
• annotations - Annotations state management
• speak2earn - Speak2Earn state management
• socket - Socket connection state management
• forum - Forum state management
• annotation - Single annotation state management

Available Hooks

• useAppDispatch() - Get the typed dispatch function
• useAppSelector() - Get the typed selector function
• useAnnotationsState() - Get annotations state
• useAnnotationsActions() - Get annotations actions
• And more context-specific hooks...

Development

Building the Package

npm run build

Development Mode

npm run dev

This will watch for changes and rebuild automatically.

Cleaning Build Files

npm run clean

Dependencies

This package requires the following peer dependencies:

• @reduxjs/toolkit ^2.0.0
• react ^18.0.0 || ^19.0.0
• react-redux ^8.0.0 || ^9.0.0
• nexus-react-core ^1.0.0

Make sure these are installed in your main application.