React HooksとLocalStorageで「目標連続達成」ロジックを実装

npx create-react-app goal-streak-tutorial
cd goal-streak-tutorial

// src/useGoalStreak.js
import { useState, useEffect }
from 'react';

export const useGoalStreak = (storageKey) => {
    const [streak, setStreak] = useState(0);

    // ここに المزيدのロジックを追加します

    return {
        streak
    };
};

// src/useGoalStreak.js
import {
    useState
} from 'react';

// 2つの日付が同じ日かどうかを確認するヘルパー関数
const isSameDay = (date1, date2) =>
    date1.getFullYear() === date2.getFullYear() &&
    date1.getMonth() === date2.getMonth() &&
    date1.getDate() === date2.getDate();

export const useGoalStreak = (storageKey) => {
    const [streak, setStreak] = useState(() => {
        try {
            const storedData = window.localStorage.getItem(storageKey);
            if (storedData) {
                const data = JSON.parse(storedData);
                const today = new Date();
                const lastCompletion = new Date(data.lastCompletion);

                // 最後の達成が今日の場合、同じ連続記録が続いています
                if (isSameDay(today, lastCompletion)) {
                    return data.streak;
                }

                // 最後の達成が昨日だったかどうかを確認し、連続記録を継続します
                const yesterday = new Date();
                yesterday.setDate(today.getDate() - 1);
                if (isSameDay(yesterday, lastCompletion)) {
                    return data.streak;
                }
            }
        } catch (error) {
            console.error("localStorageからの読み取りエラー", error);
        }
        // 1日以上経過した場合は連続記録をリセット
        return 0;
    });

    // ...
    return {
        streak
    };
};

// src/useGoalStreak.js
import {
    useState
} from 'react';

const isSameDay = (date1, date2) =>
    date1.getFullYear() === date2.getFullYear() &&
    date1.getMonth() === date2.getMonth() &&
    date1.getDate() === date2.getDate();

export const useGoalStreak = (storageKey) => {
    const [streakData, setStreakData] = useState(() => {
        try {
            const storedData = window.localStorage.getItem(storageKey);
            if (storedData) {
                const data = JSON.parse(storedData);
                const today = new Date();
                const lastCompletion = new Date(data.lastCompletion);

                // 最後の達成が昨日だった場合、連続記録は続きます
                const yesterday = new Date();
                yesterday.setDate(today.getDate() - 1);
                if (isSameDay(yesterday, lastCompletion)) {
                    return { ...data, streak: data.streak };
                }

                // 最後の達成が今日の場合、何も変更しません
                if (isSameDay(today, lastCompletion)) {
                    return data;
                }
            }
        } catch (error) {
            console.error(error);
        }
        // デフォルトの状態
        return {
            streak: 0,
            lastCompletion: null
        };
    });


    const markGoalAsCompleted = () => {
        const today = new Date();
        const lastCompletion = streakData.lastCompletion ? new Date(streakData.lastCompletion) : null;

        // すでに今日の目標を達成している場合、何もしません
        if (lastCompletion && isSameDay(today, lastCompletion)) {
            return;
        }

        const yesterday = new Date();
        yesterday.setDate(today.getDate() - 1);

        const newStreak = (lastCompletion && isSameDay(yesterday, lastCompletion)) ?
            streakData.streak + 1 :
            1;

        const newData = {
            streak: newStreak,
            lastCompletion: today.toISOString(),
        };

        setStreakData(newData);
        window.localStorage.setItem(storageKey, JSON.stringify(newData));
    };

    return {
        streak: streakData.streak,
        markGoalAsCompleted
    };
};

// src/App.js
import React from 'react';
import {
    useGoalStreak
} from './useGoalStreak';
import './App.css';

function App() {
    const {
        streak,
        markGoalAsCompleted
    } = useGoalStreak('stepGoal');

    return ( <
        div className = "App" >
        <
        header className = "App-header" >
        <
        h1 > 毎日10,000歩目標トラッカー < /h1> <
        div className = "streak-display" >
        現在の連続記録： <
        span className = "streak-count" > {
            streak
        } < /span> 日 🔥 <
        /div> <
        button onClick = {
            markGoalAsCompleted
        } >
        今日の10,000歩目標を達成しました！
        <
        /button> <
        /header> <
        /div>
    );
}

export default App;

/* src/App.css */
.App {
    text-align: center;
}

.App-header {
    background-color: #282c34;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: calc(10px + 2vmin);
    color: white;
}

.streak-display {
    margin: 20px 0;
}

.streak-count {
    font-size: 1.5em;
    font-weight: bold;
    color: #61dafb;
}

button {
    font-size: calc(8px + 2vmin);
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    background-color: #61dafb;
    cursor: pointer;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #4fa8c5;
}

npm start