react-achievements 1.2.0 → 1.3.0

package/dist/context/AchievementContext.d.ts

@@ -3,7 +3,7 @@ import { Metrics, AchievementConfig, MetricValue } from '../types';
 interface AchievementContextProps {
     metrics: Metrics;
     setMetrics: (metrics: Metrics | ((prevMetrics: Metrics) => Metrics)) => void;
-    achievedAchievements: string[];
+    unlockedAchievements: string[];
     checkAchievements: () => void;
     showBadgesModal: () => void;
 }

package/dist/index.cjs.js

@@ -203,8 +203,12 @@ const AchievementProvider = ({ children, config, initialState = {}, storageKey =
         }
         return extractMetrics(initialState);
     });
-    const [achievedAchievements, setAchievedAchievements] = React.useState(() => {
-        const saved = localStorage.getItem(`${storageKey}-achievements`);
+    const [unlockedAchievements, setUnlockedAchievements] = React.useState(() => {
+        const saved = localStorage.getItem(`${storageKey}-unlocked-achievements`);
+        return saved ? JSON.parse(saved) : [];
+    });
+    const [newlyUnlockedAchievements, setNewlyUnlockedAchievements] = React.useState(() => {
+        const saved = localStorage.getItem(`${storageKey}-newly-unlocked-achievements`);
         return saved ? JSON.parse(saved) : [];
     });
     const [achievementQueue, setAchievementQueue] = React.useState([]);
@@ -216,28 +220,36 @@ const AchievementProvider = ({ children, config, initialState = {}, storageKey =
         Object.entries(config).forEach(([metricKey, conditions]) => {
             const metricValue = metrics[metricKey];
             conditions.forEach(condition => {
-                if (condition.check(metricValue) && !achievedAchievements.includes(condition.data.id)) {
+                if (condition.check(metricValue) && !unlockedAchievements.includes(condition.data.id)) {
                     newAchievements.push(condition.data);
                 }
             });
         });
         if (newAchievements.length > 0) {
-            const updatedAchievements = [...achievedAchievements, ...newAchievements.map(a => a.id)];
-            setAchievedAchievements(updatedAchievements);
-            localStorage.setItem(`${storageKey}-achievements`, JSON.stringify(updatedAchievements));
+            const newlyUnlockedIds = newAchievements.map(a => a.id);
+            setUnlockedAchievements(prev => [...prev, ...newlyUnlockedIds]);
+            setNewlyUnlockedAchievements(prev => [...prev, ...newlyUnlockedIds]);
+            localStorage.setItem(`${storageKey}-unlocked-achievements`, JSON.stringify([...unlockedAchievements, ...newlyUnlockedIds]));
+            localStorage.setItem(`${storageKey}-newly-unlocked-achievements`, JSON.stringify([...newlyUnlockedAchievements, ...newlyUnlockedIds]));
             setAchievementQueue(prevQueue => [...prevQueue, ...newAchievements]);
             setShowConfetti(true);
         }
-    }, [config, metrics, achievedAchievements, storageKey]);
+    }, [config, metrics, unlockedAchievements, newlyUnlockedAchievements, storageKey]);
     React.useEffect(() => {
         checkAchievements();
     }, [metrics, checkAchievements]);
     React.useEffect(() => {
         if (achievementQueue.length > 0 && !currentAchievement) {
-            setCurrentAchievement(achievementQueue[0]);
+            const nextAchievement = achievementQueue[0];
+            setCurrentAchievement(nextAchievement);
             setAchievementQueue(prevQueue => prevQueue.slice(1));
+            setNewlyUnlockedAchievements(prev => {
+                const updated = prev.filter(id => id !== nextAchievement.id);
+                localStorage.setItem(`${storageKey}-newly-unlocked-achievements`, JSON.stringify(updated));
+                return updated;
+            });
         }
-    }, [achievementQueue, currentAchievement]);
+    }, [achievementQueue, currentAchievement, storageKey]);
     const showBadgesModal = () => {
         setShowBadges(true);
     };
@@ -253,19 +265,26 @@ const AchievementProvider = ({ children, config, initialState = {}, storageKey =
                 return updatedMetrics;
             });
         },
-        achievedAchievements,
+        unlockedAchievements,
         checkAchievements,
         showBadgesModal
     };
+    React.useEffect(() => {
+        if (newlyUnlockedAchievements.length > 0) {
+            const achievementsToShow = getAchievements(newlyUnlockedAchievements);
+            setAchievementQueue(achievementsToShow);
+            setShowConfetti(true);
+        }
+    }, []); // Run this effect only on component mount
     return (React.createElement(AchievementContext.Provider, { value: contextValue },
         children,
         React.createElement(AchievementModal$1, { show: !!currentAchievement, achievement: currentAchievement, onClose: () => {
                 setCurrentAchievement(null);
-                if (achievementQueue.length === 0) {
+                if (achievementQueue.length === 0 && newlyUnlockedAchievements.length === 0) {
                     setShowConfetti(false);
                 }
             } }),
-        React.createElement(BadgesModal$1, { show: showBadges, achievements: getAchievements(achievedAchievements), onClose: () => setShowBadges(false) }),
+        React.createElement(BadgesModal$1, { show: showBadges, achievements: getAchievements(unlockedAchievements), onClose: () => setShowBadges(false) }),
         React.createElement(BadgesButton$1, { onClick: showBadgesModal, position: badgesButtonPosition }),
         React.createElement(ConfettiWrapper, { show: showConfetti || achievementQueue.length > 0 })));
 };

package/dist/index.esm.js

@@ -201,8 +201,12 @@ const AchievementProvider = ({ children, config, initialState = {}, storageKey =
         }
         return extractMetrics(initialState);
     });
-    const [achievedAchievements, setAchievedAchievements] = useState(() => {
-        const saved = localStorage.getItem(`${storageKey}-achievements`);
+    const [unlockedAchievements, setUnlockedAchievements] = useState(() => {
+        const saved = localStorage.getItem(`${storageKey}-unlocked-achievements`);
+        return saved ? JSON.parse(saved) : [];
+    });
+    const [newlyUnlockedAchievements, setNewlyUnlockedAchievements] = useState(() => {
+        const saved = localStorage.getItem(`${storageKey}-newly-unlocked-achievements`);
         return saved ? JSON.parse(saved) : [];
     });
     const [achievementQueue, setAchievementQueue] = useState([]);
@@ -214,28 +218,36 @@ const AchievementProvider = ({ children, config, initialState = {}, storageKey =
         Object.entries(config).forEach(([metricKey, conditions]) => {
             const metricValue = metrics[metricKey];
             conditions.forEach(condition => {
-                if (condition.check(metricValue) && !achievedAchievements.includes(condition.data.id)) {
+                if (condition.check(metricValue) && !unlockedAchievements.includes(condition.data.id)) {
                     newAchievements.push(condition.data);
                 }
             });
         });
         if (newAchievements.length > 0) {
-            const updatedAchievements = [...achievedAchievements, ...newAchievements.map(a => a.id)];
-            setAchievedAchievements(updatedAchievements);
-            localStorage.setItem(`${storageKey}-achievements`, JSON.stringify(updatedAchievements));
+            const newlyUnlockedIds = newAchievements.map(a => a.id);
+            setUnlockedAchievements(prev => [...prev, ...newlyUnlockedIds]);
+            setNewlyUnlockedAchievements(prev => [...prev, ...newlyUnlockedIds]);
+            localStorage.setItem(`${storageKey}-unlocked-achievements`, JSON.stringify([...unlockedAchievements, ...newlyUnlockedIds]));
+            localStorage.setItem(`${storageKey}-newly-unlocked-achievements`, JSON.stringify([...newlyUnlockedAchievements, ...newlyUnlockedIds]));
             setAchievementQueue(prevQueue => [...prevQueue, ...newAchievements]);
             setShowConfetti(true);
         }
-    }, [config, metrics, achievedAchievements, storageKey]);
+    }, [config, metrics, unlockedAchievements, newlyUnlockedAchievements, storageKey]);
     useEffect(() => {
         checkAchievements();
     }, [metrics, checkAchievements]);
     useEffect(() => {
         if (achievementQueue.length > 0 && !currentAchievement) {
-            setCurrentAchievement(achievementQueue[0]);
+            const nextAchievement = achievementQueue[0];
+            setCurrentAchievement(nextAchievement);
             setAchievementQueue(prevQueue => prevQueue.slice(1));
+            setNewlyUnlockedAchievements(prev => {
+                const updated = prev.filter(id => id !== nextAchievement.id);
+                localStorage.setItem(`${storageKey}-newly-unlocked-achievements`, JSON.stringify(updated));
+                return updated;
+            });
         }
-    }, [achievementQueue, currentAchievement]);
+    }, [achievementQueue, currentAchievement, storageKey]);
     const showBadgesModal = () => {
         setShowBadges(true);
     };
@@ -251,19 +263,26 @@ const AchievementProvider = ({ children, config, initialState = {}, storageKey =
                 return updatedMetrics;
             });
         },
-        achievedAchievements,
+        unlockedAchievements,
         checkAchievements,
         showBadgesModal
     };
+    useEffect(() => {
+        if (newlyUnlockedAchievements.length > 0) {
+            const achievementsToShow = getAchievements(newlyUnlockedAchievements);
+            setAchievementQueue(achievementsToShow);
+            setShowConfetti(true);
+        }
+    }, []); // Run this effect only on component mount
     return (React.createElement(AchievementContext.Provider, { value: contextValue },
         children,
         React.createElement(AchievementModal$1, { show: !!currentAchievement, achievement: currentAchievement, onClose: () => {
                 setCurrentAchievement(null);
-                if (achievementQueue.length === 0) {
+                if (achievementQueue.length === 0 && newlyUnlockedAchievements.length === 0) {
                     setShowConfetti(false);
                 }
             } }),
-        React.createElement(BadgesModal$1, { show: showBadges, achievements: getAchievements(achievedAchievements), onClose: () => setShowBadges(false) }),
+        React.createElement(BadgesModal$1, { show: showBadges, achievements: getAchievements(unlockedAchievements), onClose: () => setShowBadges(false) }),
         React.createElement(BadgesButton$1, { onClick: showBadgesModal, position: badgesButtonPosition }),
         React.createElement(ConfettiWrapper, { show: showConfetti || achievementQueue.length > 0 })));
 };

package/dist/utils/EventEmitter.d.ts

@@ -0,0 +1,6 @@
+import EventEmitter from 'eventemitter3';
+interface EventTypes {
+    checkAchievements: (payload: Record<string, any>) => void;
+}
+declare const reactAchievementsEventEmitter: EventEmitter<EventTypes, any>;
+export { reactAchievementsEventEmitter };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-achievements",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "This package allows users to transpose a React achievements engine over their React apps",
   "keywords": [
     "react",

package/src/context/AchievementContext.tsx

@@ -8,7 +8,7 @@ import ConfettiWrapper from '../components/ConfettiWrapper';
 interface AchievementContextProps {
     metrics: Metrics;
     setMetrics: (metrics: Metrics | ((prevMetrics: Metrics) => Metrics)) => void;
-    achievedAchievements: string[];
+    unlockedAchievements: string[];
     checkAchievements: () => void;
     showBadgesModal: () => void;
 }
@@ -49,8 +49,13 @@ export const AchievementProvider: React.FC<AchievementProviderProps> = ({
         return extractMetrics(initialState);
     });
 
-    const [achievedAchievements, setAchievedAchievements] = useState<string[]>(() => {
-        const saved = localStorage.getItem(`${storageKey}-achievements`);
+    const [unlockedAchievements, setUnlockedAchievements] = useState<string[]>(() => {
+        const saved = localStorage.getItem(`${storageKey}-unlocked-achievements`);
+        return saved ? JSON.parse(saved) : [];
+    });
+
+    const [newlyUnlockedAchievements, setNewlyUnlockedAchievements] = useState<string[]>(() => {
+        const saved = localStorage.getItem(`${storageKey}-newly-unlocked-achievements`);
         return saved ? JSON.parse(saved) : [];
     });
 
@@ -65,20 +70,24 @@ export const AchievementProvider: React.FC<AchievementProviderProps> = ({
         Object.entries(config).forEach(([metricKey, conditions]) => {
             const metricValue = metrics[metricKey];
             conditions.forEach(condition => {
-                if (condition.check(metricValue) && !achievedAchievements.includes(condition.data.id)) {
+                if (condition.check(metricValue) && !unlockedAchievements.includes(condition.data.id)) {
                     newAchievements.push(condition.data);
                 }
             });
         });
 
         if (newAchievements.length > 0) {
-            const updatedAchievements = [...achievedAchievements, ...newAchievements.map(a => a.id)];
-            setAchievedAchievements(updatedAchievements);
-            localStorage.setItem(`${storageKey}-achievements`, JSON.stringify(updatedAchievements));
+            const newlyUnlockedIds = newAchievements.map(a => a.id);
+            setUnlockedAchievements(prev => [...prev, ...newlyUnlockedIds]);
+            setNewlyUnlockedAchievements(prev => [...prev, ...newlyUnlockedIds]);
+
+            localStorage.setItem(`${storageKey}-unlocked-achievements`, JSON.stringify([...unlockedAchievements, ...newlyUnlockedIds]));
+            localStorage.setItem(`${storageKey}-newly-unlocked-achievements`, JSON.stringify([...newlyUnlockedAchievements, ...newlyUnlockedIds]));
+
             setAchievementQueue(prevQueue => [...prevQueue, ...newAchievements]);
             setShowConfetti(true);
         }
-    }, [config, metrics, achievedAchievements, storageKey]);
+    }, [config, metrics, unlockedAchievements, newlyUnlockedAchievements, storageKey]);
 
     useEffect(() => {
         checkAchievements();
@@ -86,10 +95,17 @@ export const AchievementProvider: React.FC<AchievementProviderProps> = ({
 
     useEffect(() => {
         if (achievementQueue.length > 0 && !currentAchievement) {
-            setCurrentAchievement(achievementQueue[0]);
+            const nextAchievement = achievementQueue[0];
+            setCurrentAchievement(nextAchievement);
             setAchievementQueue(prevQueue => prevQueue.slice(1));
+
+            setNewlyUnlockedAchievements(prev => {
+                const updated = prev.filter(id => id !== nextAchievement.id);
+                localStorage.setItem(`${storageKey}-newly-unlocked-achievements`, JSON.stringify(updated));
+                return updated;
+            });
         }
-    }, [achievementQueue, currentAchievement]);
+    }, [achievementQueue, currentAchievement, storageKey]);
 
     const showBadgesModal = () => {
         setShowBadges(true);
@@ -110,11 +126,19 @@ export const AchievementProvider: React.FC<AchievementProviderProps> = ({
                 return updatedMetrics;
             });
         },
-        achievedAchievements,
+        unlockedAchievements,
         checkAchievements,
         showBadgesModal
     };
 
+    useEffect(() => {
+        if (newlyUnlockedAchievements.length > 0) {
+            const achievementsToShow = getAchievements(newlyUnlockedAchievements);
+            setAchievementQueue(achievementsToShow);
+            setShowConfetti(true);
+        }
+    }, []); // Run this effect only on component mount
+
     return (
         <AchievementContext.Provider value={contextValue}>
             {children}
@@ -123,14 +147,14 @@ export const AchievementProvider: React.FC<AchievementProviderProps> = ({
                 achievement={currentAchievement}
                 onClose={() => {
                     setCurrentAchievement(null);
-                    if (achievementQueue.length === 0) {
+                    if (achievementQueue.length === 0 && newlyUnlockedAchievements.length === 0) {
                         setShowConfetti(false);
                     }
                 }}
             />
             <BadgesModal
                 show={showBadges}
-                achievements={getAchievements(achievedAchievements)}
+                achievements={getAchievements(unlockedAchievements)}
                 onClose={() => setShowBadges(false)}
             />
             <BadgesButton onClick={showBadgesModal} position={badgesButtonPosition} />