react-achievements 2.1.0 → 2.2.0

package/src/redux/achievementSlice.ts

@@ -1,86 +1,109 @@
 // src/redux/achievementSlice.ts
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import {
-    AchievementConfiguration,
     InitialAchievementMetrics,
     AchievementMetrics,
+    AchievementDetails,
+    AchievementMetricValue,
 } from '../types';
 
+// Helper function to serialize dates
+const serializeValue = (value: AchievementMetricValue): string | number | boolean => {
+    if (value instanceof Date) {
+        return value.toISOString();
+    }
+    return value;
+};
+
+// Helper function to process metrics for storage
+const processMetrics = (metrics: AchievementMetrics): Record<string, (string | number | boolean)[]> => {
+    return Object.entries(metrics).reduce((acc, [key, values]) => ({
+        ...acc,
+        [key]: values.map(serializeValue)
+    }), {});
+};
+
 export interface AchievementState {
-    config: AchievementConfiguration;
-    metrics: AchievementMetrics;
+    metrics: Record<string, (string | number | boolean)[]>;
     unlockedAchievements: string[];
-    previouslyAwardedAchievements: string[];
     storageKey: string | null;
+    pendingNotifications: AchievementDetails[];
 }
 
 const initialState: AchievementState = {
-    config: {},
     metrics: {},
     unlockedAchievements: [],
-    previouslyAwardedAchievements: [], // Initialize as empty
     storageKey: null,
+    pendingNotifications: [],
 };
 
 export const achievementSlice = createSlice({
     name: 'achievements',
     initialState,
     reducers: {
-        initialize: (state, action: PayloadAction<{ config: AchievementConfiguration; initialState?: InitialAchievementMetrics & { previouslyAwardedAchievements?: string[] }; storageKey: string }>) => {
-            state.config = action.payload.config;
+        initialize: (state, action: PayloadAction<{ 
+            initialState?: InitialAchievementMetrics & { unlockedAchievements?: string[] }; 
+            storageKey: string 
+        }>) => {
             state.storageKey = action.payload.storageKey;
-            const storedState = action.payload.storageKey ? localStorage.getItem(action.payload.storageKey) : null;
 
-            const initialMetrics = action.payload.initialState ? Object.keys(action.payload.initialState)
-                .filter(key => key !== 'previouslyAwardedAchievements')
-                .reduce((acc, key) => ({ ...acc, [key]: Array.isArray(action.payload.initialState![key]) ? action.payload.initialState![key] : [action.payload.initialState![key]] }), {}) : {};
-
-            const initialAwarded = action.payload.initialState?.previouslyAwardedAchievements || [];
-
-            if (storedState) {
-                try {
-                    const parsedState = JSON.parse(storedState);
-                    state.metrics = parsedState.achievements?.metrics || initialMetrics;
-                    state.unlockedAchievements = parsedState.achievements?.unlockedAchievements || [];
-                    state.previouslyAwardedAchievements = parsedState.achievements?.previouslyAwardedAchievements || initialAwarded; // Prioritize stored, fallback to initial
-                } catch (error) {
-                    console.error('Error parsing stored achievement state:', error);
-                    state.metrics = initialMetrics;
-                    state.unlockedAchievements = [];
-                    state.previouslyAwardedAchievements = initialAwarded;
+            // Load from storage first
+            if (action.payload.storageKey) {
+                const stored = localStorage.getItem(action.payload.storageKey);
+                if (stored) {
+                    try {
+                        const parsed = JSON.parse(stored);
+                        state.metrics = parsed.metrics || {};
+                        state.unlockedAchievements = parsed.unlockedAchievements || [];
+                        return;
+                    } catch (error) {
+                        console.error('Error parsing stored achievements:', error);
+                    }
                 }
-            } else {
-                state.metrics = initialMetrics;
-                state.unlockedAchievements = [];
-                state.previouslyAwardedAchievements = initialAwarded;
+            }
+
+            // If no storage or parse error, use initial state
+            if (action.payload.initialState) {
+                const { unlockedAchievements, ...metrics } = action.payload.initialState;
+                state.metrics = Object.entries(metrics).reduce((acc, [key, value]) => ({
+                    ...acc,
+                    [key]: Array.isArray(value) ? value.map(serializeValue) : [serializeValue(value as AchievementMetricValue)]
+                }), {});
+                state.unlockedAchievements = unlockedAchievements || [];
             }
         },
+
         setMetrics: (state, action: PayloadAction<AchievementMetrics>) => {
-            state.metrics = action.payload;
+            state.metrics = processMetrics(action.payload);
             if (state.storageKey) {
-                localStorage.setItem(state.storageKey, JSON.stringify({ achievements: { metrics: state.metrics, unlockedAchievements: state.unlockedAchievements, previouslyAwardedAchievements: state.previouslyAwardedAchievements } }));
+                localStorage.setItem(state.storageKey, JSON.stringify({
+                    metrics: state.metrics,
+                    unlockedAchievements: state.unlockedAchievements
+                }));
             }
         },
-        unlockAchievement: (state, action: PayloadAction<string>) => {
-            if (!state.unlockedAchievements.includes(action.payload)) {
-                state.unlockedAchievements.push(action.payload);
+
+        unlockAchievement: (state, action: PayloadAction<AchievementDetails>) => {
+            if (!state.unlockedAchievements.includes(action.payload.achievementId)) {
+                state.unlockedAchievements.push(action.payload.achievementId);
+                state.pendingNotifications.push(action.payload);
                 if (state.storageKey) {
-                    localStorage.setItem(state.storageKey, JSON.stringify({ achievements: { metrics: state.metrics, unlockedAchievements: state.unlockedAchievements, previouslyAwardedAchievements: state.previouslyAwardedAchievements } }));
+                    localStorage.setItem(state.storageKey, JSON.stringify({
+                        metrics: state.metrics,
+                        unlockedAchievements: state.unlockedAchievements
+                    }));
                 }
             }
         },
-        markAchievementAsAwarded: (state, action: PayloadAction<string>) => {
-            if (!state.previouslyAwardedAchievements.includes(action.payload)) {
-                state.previouslyAwardedAchievements.push(action.payload);
-                if (state.storageKey) {
-                    localStorage.setItem(state.storageKey, JSON.stringify({ achievements: { metrics: state.metrics, unlockedAchievements: state.unlockedAchievements, previouslyAwardedAchievements: state.previouslyAwardedAchievements } }));
-                }
-            }
+
+        clearNotifications: (state) => {
+            state.pendingNotifications = [];
         },
+
         resetAchievements: (state) => {
             state.metrics = {};
             state.unlockedAchievements = [];
-            state.previouslyAwardedAchievements = [];
+            state.pendingNotifications = [];
             if (state.storageKey) {
                 localStorage.removeItem(state.storageKey);
             }
@@ -88,6 +111,6 @@ export const achievementSlice = createSlice({
     },
 });
 
-export const { initialize, setMetrics, unlockAchievement, resetAchievements, markAchievementAsAwarded } = achievementSlice.actions;
+export const { initialize, setMetrics, resetAchievements, unlockAchievement, clearNotifications } = achievementSlice.actions;
 
 export default achievementSlice.reducer;

package/src/redux/notificationSlice.ts

@@ -1,19 +1,18 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import { AchievementDetails } from '../types';
 
-export interface NotificationState {
-    notifications: AchievementDetails[];
+interface NotificationState {
+    notifications: string[];
 }
 
 const initialState: NotificationState = {
     notifications: [],
 };
 
-const notificationSlice = createSlice({
+export const notificationSlice = createSlice({
     name: 'notifications',
     initialState,
     reducers: {
-        addNotification: (state, action: PayloadAction<AchievementDetails>) => {
+        addNotification: (state, action: PayloadAction<string>) => {
             state.notifications.push(action.payload);
         },
         clearNotifications: (state) => {
@@ -23,4 +22,5 @@ const notificationSlice = createSlice({
 });
 
 export const { addNotification, clearNotifications } = notificationSlice.actions;
+
 export default notificationSlice.reducer;

package/src/redux/store.ts

@@ -1,18 +1,14 @@
 import { configureStore } from '@reduxjs/toolkit';
-import achievementReducer from '../redux/achievementSlice';
-import notificationReducer from '../redux/notificationSlice';
+import achievementReducer from './achievementSlice';
 import { AchievementState } from './achievementSlice';
-import { NotificationState } from './notificationSlice';
 
 export interface RootState {
     achievements: AchievementState;
-    notifications: NotificationState;
 }
 
 const store = configureStore({
     reducer: {
         achievements: achievementReducer,
-        notifications: notificationReducer,
     },
 });
 

package/src/types.ts

@@ -2,6 +2,11 @@ import {Styles} from "./defaultStyles";
 
 export type AchievementMetricValue = number | string | boolean | Date;
 
+export interface AchievementState {
+    metrics: Record<string, AchievementMetricValue[]>;
+    unlockedAchievements: string[];
+}
+
 export interface AchievementDetails {
     achievementId: string;
     achievementTitle: string;
@@ -11,8 +16,13 @@ export interface AchievementDetails {
 
 export type AchievementIconRecord = Record<string, string>;
 
+export interface AchievementUnlockCondition {
+    isConditionMet: (value: AchievementMetricValue, state?: AchievementState) => boolean;
+    achievementDetails: AchievementDetails;
+}
+
 export interface AchievementConfiguration {
-    [metricName: string]: Array<AchievementUnlockCondition<AchievementMetricValue>>;
+    [metricName: string]: AchievementUnlockCondition[];
 }
 
 export type InitialAchievementMetrics = Record<string, AchievementMetricValue | AchievementMetricValue[] | undefined>;
@@ -21,14 +31,9 @@ export type AchievementMetrics = Record<string, AchievementMetricValue[]>;
 export interface AchievementProviderProps {
     children: React.ReactNode;
     config: AchievementConfiguration;
-    initialState?: InitialAchievementMetrics & { previouslyAwardedAchievements?: string[] }; // Add optional previouslyAwardedAchievements
+    initialState?: InitialAchievementMetrics & { previouslyAwardedAchievements?: string[] };
     storageKey?: string;
     badgesButtonPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
     styles?: Partial<Styles>;
     icons?: Record<string, string>;
-}
-
-export interface AchievementUnlockCondition<T extends AchievementMetricValue> {
-    isConditionMet: (value: T) => boolean;
-    achievementDetails: AchievementDetails;
 }

package/tsconfig.json

@@ -107,5 +107,7 @@
   },
   "include": [
     "src",
-    "react-confetti.d.ts"]
+    "stories",
+    "react-confetti.d.ts"
+  ]
 }

package/demo/README.md

@@ -1,8 +0,0 @@
-# React + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

package/demo/eslint.config.js

@@ -1,38 +0,0 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import react from 'eslint-plugin-react'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-
-export default [
-  {
-    files: ['**/*.{js,jsx}'],
-    ignores: ['dist'],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-      parserOptions: {
-        ecmaVersion: 'latest',
-        ecmaFeatures: { jsx: true },
-        sourceType: 'module',
-      },
-    },
-    settings: { react: { version: '18.3' } },
-    plugins: {
-      react,
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
-    },
-    rules: {
-      ...js.configs.recommended.rules,
-      ...react.configs.recommended.rules,
-      ...react.configs['jsx-runtime'].rules,
-      ...reactHooks.configs.recommended.rules,
-      'react/jsx-no-target-blank': 'off',
-      'react-refresh/only-export-components': [
-        'warn',
-        { allowConstantExport: true },
-      ],
-    },
-  },
-]

package/demo/index.html

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
-  </body>
-</html>