Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: migrate type of targetDate from DateValue to Date #18

Merged
merged 1 commit into from
Feb 17, 2024
Merged

refactor: migrate type of targetDate from DateValue to Date #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 11 additions & 5 deletions src/routes/pyroxene-calculator/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,23 @@
<script lang="ts">
import Calendar from '$lib/components/Calendar.svelte';
import Typography from '$lib/components/Typography.svelte';
import { fromDate } from '@internationalized/date';

import { pyroxene, resetPyroxene } from '$store/pyroxene';
import { TW_TIMEZONE } from '$lib/contants';

import { Input } from '$lib/components/ui/input';
import { Label } from '$lib/components/ui/label';
import { Slider } from '$lib/components/ui/slider';
import { Button } from '$lib/components/ui/button';
import Calendar from '$lib/components/Calendar.svelte';
import Typography from '$lib/components/Typography.svelte';
import RaidRankSelect from '$lib/components/RaidRankSelect.svelte';
import MonthlyCardSelect from '$lib/components/MonthlyCardSelect.svelte';
import ArenaRankSelect from '$lib/components/ArenaRankSelect.svelte';
import PyroxeneResult from '$lib/views/PyroxeneResult.svelte';
import EventTable from '$lib/views/EventTable.svelte';

import { pyroxene, resetPyroxene } from '$store/pyroxene';
import { Button } from '$lib/components/ui/button';
let calendarDate = fromDate(new Date($pyroxene.targetDate), TW_TIMEZONE);
$: $pyroxene.targetDate = calendarDate.toDate();
</script>

<div class="px-4 w-full md:w-4/5 lg:w-2/3 mx-auto">
Expand All @@ -37,7 +43,7 @@
</div>
<div class="input-container">
<Label for="daysValue">要存到的日期</Label>
<Calendar bind:value={$pyroxene.targetDate}></Calendar>
<Calendar bind:value={calendarDate} />
</div>
<div class="input-container">
<Label>競技場每日青輝石</Label>
Expand Down
31 changes: 7 additions & 24 deletions src/store/pyroxene.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,36 +5,19 @@ import {
pyroxeneToRolls
} from '$lib/utils';
import { derived, writable } from 'svelte/store';
import { fromDate, type DateValue } from '@internationalized/date';
import { addDays, differenceInCalendarDays, isBefore, isAfter } from 'date-fns/fp';

import { browser } from '$app/environment';
import { events } from '$lib/data/event';
import { MonthlyCard, RaidRank } from '$lib/types';
import { TW_TIMEZONE } from '$lib/contants';

const getToday = () => new Date();

/**
* 其實有關 `targetDate` 的部分會這麼複雜是因為
* calendar 的部分是跟 `internationalized` 高度耦合
* 且不知道為什麼直接將 internationalized 的 `DateValue` 物件存進 localStorage
* 會出現錯誤
* 所以目前變成存去 localStorage 的時候，將 `DateValue` 物件轉成 `Date`
* 但是這樣的話，每次從 localStorage 拿出來的時候，就要再轉回 `DateValue` 物件
*
* 另外就是 internationalized 本身 API 沒多好用，所以我都會再轉成 Date 再使用 date-fns 的 API進行處理。
* 但這部分的確寫的很醜，之後有空再重構吧。
*/

const storedPyroxene = browser
? localStorage.getItem('pyroxene')
? {
...JSON.parse(localStorage.getItem('pyroxene') as string),
targetDate: fromDate(
new Date(JSON.parse(localStorage.getItem('pyroxene') as string).targetDate),
TW_TIMEZONE
)
targetDate: new Date(JSON.parse(localStorage.getItem('pyroxene') as string).targetDate)
}
: null
: null;
Expand All @@ -43,7 +26,7 @@ interface PyroxeneStore {
initPyroxene: string;
dailyPyroxeneOfArena: string;
ticket: number;
targetDate: DateValue;
targetDate: Date;
raidRank: RaidRank;
monthlyCard: MonthlyCard;
questCompletedRate: number;
Expand All @@ -54,7 +37,7 @@ const getInitPyroxeneStore = (): PyroxeneStore => ({
initPyroxene: '24000',
dailyPyroxeneOfArena: '45',
ticket: 0,
targetDate: fromDate(addDays(30)(getToday()), TW_TIMEZONE),
targetDate: addDays(30)(getToday()),
raidRank: RaidRank.Rank_1,
monthlyCard: MonthlyCard.Both,
questCompletedRate: 100,
Expand All @@ -69,7 +52,7 @@ pyroxene.subscribe((value) => {
if (browser) {
const draftData = {
...value,
targetDate: value.targetDate?.toDate(TW_TIMEZONE)
targetDate: value.targetDate
};

localStorage.setItem('pyroxene', JSON.stringify(draftData));
Expand All @@ -81,7 +64,7 @@ export const resetPyroxene = () => {
};

export const daysOfCalculation = derived<typeof pyroxene, number>(pyroxene, ($pyroxene) => {
return differenceInCalendarDays(getToday())($pyroxene.targetDate?.toDate(TW_TIMEZONE));
return differenceInCalendarDays(getToday())($pyroxene.targetDate);
});

export const pyroxeneOfArena = derived(
Expand All @@ -103,12 +86,12 @@ export const systemPyroxene = derived(daysOfCalculation, ($daysOfCalculation) =>

export const pyroxeneOfEvents = derived(pyroxene, ($pyroxene) => {
const includedEvents = events.filter((event) => {
if (!$pyroxene.targetDate?.toDate(TW_TIMEZONE)) {
if (!$pyroxene.targetDate) {
return false;
}
const date = new Date(event.date);

return isBefore($pyroxene.targetDate.toDate(TW_TIMEZONE), date) && isAfter(getToday(), date);
return isBefore($pyroxene.targetDate, date) && isAfter(getToday(), date);
});
const rate = $pyroxene.questCompletedRate / 100;

Expand Down