react-achievements 1.0.8 → 1.0.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.cjs.js +10 -4
  2. package/dist/index.esm.js +10 -4
  3. package/package.json +1 -1
  4. package/public/badges/icon1.svg +1 -0
  5. package/src/components/BadgesModal.tsx +0 -1
  6. package/src/context/AchievementContext.tsx +12 -4
package/dist/index.cjs.js CHANGED
@@ -68,8 +68,7 @@ const BadgesModal = ({ show, achievements, onClose }) => {
68
68
  React.createElement("h2", { id: "badges-title" }, "Your Achievements"),
69
69
  React.createElement("div", { style: { display: 'flex', flexWrap: 'wrap', justifyContent: 'center' } }, achievements.map(achievement => (React.createElement("div", { key: achievement.id, style: { margin: '10px', textAlign: 'center' } },
70
70
  React.createElement("img", { src: achievement.icon, alt: achievement.title, style: { width: '50px', height: '50px' } }),
71
- React.createElement("h4", null, achievement.title),
72
- React.createElement("p", null, achievement.description))))),
71
+ React.createElement("h4", null, achievement.title))))),
73
72
  React.createElement("button", { onClick: onClose, style: { marginTop: '20px' } }, "Close"))));
74
73
  };
75
74
  var BadgesModal$1 = React.memo(BadgesModal);
@@ -197,12 +196,19 @@ const AchievementProvider = ({ children, config, initialState = {}, storageKey =
197
196
  return acc;
198
197
  }, {});
199
198
  };
199
+ const getAchievements = () => {
200
+ const achievements = Object.values(config).flatMap(conditions => conditions.filter(c => achievedAchievements.includes(c.data.id)).map(c => c.data));
201
+ console.log(achievements);
202
+ return achievements;
203
+ };
200
204
  const [metrics, setMetrics] = React.useState(() => {
201
205
  const savedMetrics = localStorage.getItem(`${storageKey}-metrics`);
202
206
  if (savedMetrics) {
203
207
  return JSON.parse(savedMetrics);
204
208
  }
205
- return extractMetrics(initialState);
209
+ const state = extractMetrics(initialState);
210
+ localStorage.setItem(`${storageKey}-metrics`, JSON.stringify(state));
211
+ return state;
206
212
  });
207
213
  const [achievedAchievements, setAchievedAchievements] = React.useState(() => {
208
214
  const saved = localStorage.getItem(`${storageKey}-achievements`);
@@ -256,7 +262,7 @@ const AchievementProvider = ({ children, config, initialState = {}, storageKey =
256
262
  setNewAchievement(null);
257
263
  setShowConfetti(false);
258
264
  } }),
259
- React.createElement(BadgesModal$1, { show: showBadges, achievements: Object.values(config).flatMap(conditions => conditions.filter(c => achievedAchievements.includes(c.data.id)).map(c => c.data)), onClose: () => setShowBadges(false) }),
265
+ React.createElement(BadgesModal$1, { show: showBadges, achievements: getAchievements(), onClose: () => setShowBadges(false) }),
260
266
  React.createElement(BadgesButton$1, { onClick: showBadgesModal, position: badgesButtonPosition }),
261
267
  React.createElement(ConfettiWrapper, { show: showConfetti })));
262
268
  };
package/dist/index.esm.js CHANGED
@@ -66,8 +66,7 @@ const BadgesModal = ({ show, achievements, onClose }) => {
66
66
  React.createElement("h2", { id: "badges-title" }, "Your Achievements"),
67
67
  React.createElement("div", { style: { display: 'flex', flexWrap: 'wrap', justifyContent: 'center' } }, achievements.map(achievement => (React.createElement("div", { key: achievement.id, style: { margin: '10px', textAlign: 'center' } },
68
68
  React.createElement("img", { src: achievement.icon, alt: achievement.title, style: { width: '50px', height: '50px' } }),
69
- React.createElement("h4", null, achievement.title),
70
- React.createElement("p", null, achievement.description))))),
69
+ React.createElement("h4", null, achievement.title))))),
71
70
  React.createElement("button", { onClick: onClose, style: { marginTop: '20px' } }, "Close"))));
72
71
  };
73
72
  var BadgesModal$1 = React.memo(BadgesModal);
@@ -195,12 +194,19 @@ const AchievementProvider = ({ children, config, initialState = {}, storageKey =
195
194
  return acc;
196
195
  }, {});
197
196
  };
197
+ const getAchievements = () => {
198
+ const achievements = Object.values(config).flatMap(conditions => conditions.filter(c => achievedAchievements.includes(c.data.id)).map(c => c.data));
199
+ console.log(achievements);
200
+ return achievements;
201
+ };
198
202
  const [metrics, setMetrics] = useState(() => {
199
203
  const savedMetrics = localStorage.getItem(`${storageKey}-metrics`);
200
204
  if (savedMetrics) {
201
205
  return JSON.parse(savedMetrics);
202
206
  }
203
- return extractMetrics(initialState);
207
+ const state = extractMetrics(initialState);
208
+ localStorage.setItem(`${storageKey}-metrics`, JSON.stringify(state));
209
+ return state;
204
210
  });
205
211
  const [achievedAchievements, setAchievedAchievements] = useState(() => {
206
212
  const saved = localStorage.getItem(`${storageKey}-achievements`);
@@ -254,7 +260,7 @@ const AchievementProvider = ({ children, config, initialState = {}, storageKey =
254
260
  setNewAchievement(null);
255
261
  setShowConfetti(false);
256
262
  } }),
257
- React.createElement(BadgesModal$1, { show: showBadges, achievements: Object.values(config).flatMap(conditions => conditions.filter(c => achievedAchievements.includes(c.data.id)).map(c => c.data)), onClose: () => setShowBadges(false) }),
263
+ React.createElement(BadgesModal$1, { show: showBadges, achievements: getAchievements(), onClose: () => setShowBadges(false) }),
258
264
  React.createElement(BadgesButton$1, { onClick: showBadgesModal, position: badgesButtonPosition }),
259
265
  React.createElement(ConfettiWrapper, { show: showConfetti })));
260
266
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-achievements",
3
- "version": "1.0.8",
3
+ "version": "1.0.10",
4
4
  "description": "This package allows users to transpose a React achievements engine over their React apps",
5
5
  "keywords": [
6
6
  "react",
package/public/badges/icon1.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M560-440q-50 0-85-35t-35-85q0-50 35-85t85-35q50 0 85 35t35 85q0 50-35 85t-85 35ZM280-320q-33 0-56.5-23.5T200-400v-320q0-33 23.5-56.5T280-800h560q33 0 56.5 23.5T920-720v320q0 33-23.5 56.5T840-320H280Zm80-80h400q0-33 23.5-56.5T840-480v-160q-33 0-56.5-23.5T760-720H360q0 33-23.5 56.5T280-640v160q33 0 56.5 23.5T360-400Zm440 240H120q-33 0-56.5-23.5T40-240v-440h80v440h680v80ZM280-400v-320 320Z"/></svg>
package/src/components/BadgesModal.tsx CHANGED
@@ -45,7 +45,6 @@ const BadgesModal: React.FC<BadgesModalProps> = ({ show, achievements, onClose }
45
45
  <div key={achievement.id} style={{ margin: '10px', textAlign: 'center' }}>
46
46
  <img src={achievement.icon} alt={achievement.title} style={{ width: '50px', height: '50px' }} />
47
47
  <h4>{achievement.title}</h4>
48
- <p>{achievement.description}</p>
49
48
  </div>
50
49
  ))}
51
50
  </div>
package/src/context/AchievementContext.tsx CHANGED
@@ -41,12 +41,22 @@ export const AchievementProvider: React.FC<AchievementProviderProps> = ({
41
41
  }, {} as Metrics);
42
42
  };
43
43
 
44
+ const getAchievements = () =>{
45
+ const achievements = Object.values(config).flatMap(conditions =>
46
+ conditions.filter(c => achievedAchievements.includes(c.data.id)).map(c => c.data)
47
+ )
48
+ console.log(achievements);
49
+ return achievements;
50
+ }
51
+
44
52
  const [metrics, setMetrics] = useState<Metrics>(() => {
45
53
  const savedMetrics = localStorage.getItem(`${storageKey}-metrics`);
46
54
  if (savedMetrics) {
47
55
  return JSON.parse(savedMetrics);
48
56
  }
49
- return extractMetrics(initialState);
57
+ const state = extractMetrics(initialState);
58
+ localStorage.setItem(`${storageKey}-metrics`, JSON.stringify(state));
59
+ return state;
50
60
  });
51
61
 
52
62
  const [achievedAchievements, setAchievedAchievements] = useState<string[]>(() => {
@@ -117,9 +127,7 @@ export const AchievementProvider: React.FC<AchievementProviderProps> = ({
117
127
  />
118
128
  <BadgesModal
119
129
  show={showBadges}
120
- achievements={Object.values(config).flatMap(conditions =>
121
- conditions.filter(c => achievedAchievements.includes(c.data.id)).map(c => c.data)
122
- )}
130
+ achievements={getAchievements()}
123
131
  onClose={() => setShowBadges(false)}
124
132
  />
125
133
  <BadgesButton onClick={showBadgesModal} position={badgesButtonPosition} />