All files / src/context AchievementProvider.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { createContext, useContext, useState, useEffect, useCallback, ReactNode } from 'react';
import { Metrics, AchievementConfig, AchievementData, MetricValue } from '../types';
import AchievementModal from '../components/AchievementModal';
import BadgesModal from '../components/BadgesModal';
import BadgesButton from '../components/BadgesButton';
import ConfettiWrapper from '../components/ConfettiWrapper';
 
interface AchievementContextProps {
    metrics: Metrics;
    setMetrics: (metrics: Metrics | ((prevMetrics: Metrics) => Metrics)) => void;
    achievedAchievements: string[];
    checkAchievements: () => void;
    showBadgesModal: () => void;
}
 
interface AchievementProviderProps {
    children: ReactNode;
    config: AchievementConfig;
    initialState?: Record<string, MetricValue>;
    storageKey?: string;
    badgesButtonPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
}
 
const AchievementProvider = createContext<AchievementContextProps | undefined>(undefined);
 
export const AchievementProvider: React.FC<AchievementProviderProps> = ({
                                                                            children,
                                                                            config,
                                                                            initialState = {},
                                                                            storageKey = 'react-achievements',
                                                                            badgesButtonPosition = 'top-right'
                                                                        }) => {
    const extractMetrics = (state: Record<string, MetricValue>): Metrics => {
        return Object.keys(config).reduce((acc, key) => {
            if (key in state) {
                acc[key] = state[key];
            } else {
                acc[key] = [];
            }
            return acc;
        }, {} as Metrics);
    };
 
    const getAchievements = () =>{
        return Object.values(config).flatMap(conditions =>
            conditions.filter(c => achievedAchievements.includes(c.data.id)).map(c => c.data)
        )
    }
 
    const [metrics, setMetrics] = useState<Metrics>(() => {
        const savedMetrics = localStorage.getItem(`${storageKey}-metrics`);
        Iif (savedMetrics) {
            return JSON.parse(savedMetrics);
        }
        return extractMetrics(initialState);
    });
 
    const [achievedAchievements, setAchievedAchievements] = useState<string[]>(() => {
        const saved = localStorage.getItem(`${storageKey}-achievements`);
        return saved ? JSON.parse(saved) : [];
    });
 
    const [newAchievement, setNewAchievement] = useState<AchievementData | null>(null);
    const [showBadges, setShowBadges] = useState(false);
    const [showConfetti, setShowConfetti] = useState(false);
 
    useEffect(() => {
        localStorage.setItem(`${storageKey}-metrics`, JSON.stringify(metrics));
    }, [metrics, storageKey]);
 
    const checkAchievements = useCallback(() => {
        const newAchievements: AchievementData[] = [];
 
        Object.entries(config).forEach(([metricKey, conditions]) => {
            const metricValue = metrics[metricKey];
            conditions.forEach(condition => {
                Iif (condition.check(metricValue) && !achievedAchievements.includes(condition.data.id)) {
                    newAchievements.push(condition.data);
                }
            });
        });
 
        Iif (newAchievements.length > 0) {
            const updatedAchievements = [...achievedAchievements, ...newAchievements.map(a => a.id)];
            setAchievedAchievements(updatedAchievements);
            localStorage.setItem(`${storageKey}-achievements`, JSON.stringify(updatedAchievements));
            setNewAchievement(newAchievements[0]);
            setShowConfetti(true);
        }
    }, [config, metrics, achievedAchievements, storageKey]);
 
    useEffect(() => {
        checkAchievements();
    }, [checkAchievements]);
 
    const showBadgesModal = () => {
        setShowBadges(true);
    };
 
    const contextValue: AchievementContextProps = {
        metrics,
        setMetrics: (newMetrics) => {
            setMetrics(prevMetrics => {
                const updatedMetrics = typeof newMetrics === 'function' ? newMetrics(prevMetrics) : newMetrics;
                return updatedMetrics;
            });
        },
        achievedAchievements,
        checkAchievements,
        showBadgesModal
    };
 
    return (
        <AchievementProvider.Provider value={contextValue}>
            {children}
            <AchievementModal
                show={!!newAchievement}
                achievement={newAchievement}
                onClose={() => {
                    setNewAchievement(null);
                    setShowConfetti(false);
                }}
            />
            <BadgesModal
                show={showBadges}
                achievements={getAchievements()}
                onClose={() => setShowBadges(false)}
            />
            <BadgesButton onClick={showBadgesModal} position={badgesButtonPosition} />
            <ConfettiWrapper show={showConfetti} />
        </AchievementProvider.Provider>
    );
};
 
export const useAchievement = () => {
    const context = useContext(AchievementProvider);
    Iif (context === undefined) {
        throw new Error('useAchievement must be used within an AchievementProvider');
    }
    return context;
};