135 lines
4.2 KiB
TypeScript
135 lines
4.2 KiB
TypeScript
|
import { DateTime, SystemZone } from "luxon";
|
||
|
import { useMutation, useQuery, useQueryClient } from "react-query";
|
||
|
import { fetchUserInfo, patchUserInfo } from "../../api";
|
||
|
import { Modal } from "../Modal";
|
||
|
import { useState } from "preact/hooks";
|
||
|
import { useTimezone } from "../App/TimezoneProvider";
|
||
|
|
||
|
type DisplayProps = {
|
||
|
timezone: string;
|
||
|
};
|
||
|
|
||
|
const TimezoneDisplay = ({ timezone }: DisplayProps) => {
|
||
|
const now = DateTime.now().setZone(timezone);
|
||
|
|
||
|
const hour = now.hour;
|
||
|
const minute = now.minute;
|
||
|
|
||
|
return (
|
||
|
<>
|
||
|
<strong>
|
||
|
<span class="set-timezone">{timezone}</span>
|
||
|
</strong>{" "}
|
||
|
(
|
||
|
<span class="set-time">
|
||
|
{hour}:{minute}
|
||
|
</span>
|
||
|
)
|
||
|
</>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
export const TimezonePicker = () => {
|
||
|
const [modalOpen, setModalOpen] = useState(false);
|
||
|
|
||
|
return (
|
||
|
<>
|
||
|
<a
|
||
|
class="show-modal"
|
||
|
data-modal="chooseTimezoneModal"
|
||
|
onClick={() => {
|
||
|
setModalOpen(true);
|
||
|
}}
|
||
|
>
|
||
|
<span class="icon">
|
||
|
<i class="fas fa-map-marked"></i>
|
||
|
</span>{" "}
|
||
|
Timezone
|
||
|
</a>
|
||
|
{modalOpen && <TimezoneModal setModalOpen={setModalOpen} />}
|
||
|
</>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
const TimezoneModal = ({ setModalOpen }) => {
|
||
|
const browserTimezone = DateTime.now().zoneName;
|
||
|
const [selectedZone, setSelectedZone] = useTimezone();
|
||
|
|
||
|
const queryClient = useQueryClient();
|
||
|
const { isLoading, isError, data } = useQuery(fetchUserInfo());
|
||
|
const userInfoMutation = useMutation({
|
||
|
...patchUserInfo(),
|
||
|
onSuccess: () => {
|
||
|
queryClient.invalidateQueries(["USER_INFO"]);
|
||
|
},
|
||
|
});
|
||
|
|
||
|
return (
|
||
|
<Modal title={"Timezone"} setModalOpen={setModalOpen}>
|
||
|
<p>
|
||
|
Your configured timezone is:{" "}
|
||
|
<TimezoneDisplay timezone={selectedZone}></TimezoneDisplay>
|
||
|
<br />
|
||
|
Your browser timezone is:{" "}
|
||
|
<TimezoneDisplay timezone={browserTimezone}></TimezoneDisplay>
|
||
|
<br />
|
||
|
{!isError && (
|
||
|
<>
|
||
|
Your bot timezone is:{" "}
|
||
|
{isLoading ? (
|
||
|
<i className="fas fa-cog fa-spin"></i>
|
||
|
) : (
|
||
|
<TimezoneDisplay timezone={data.timezone || "UTC"}></TimezoneDisplay>
|
||
|
)}
|
||
|
</>
|
||
|
)}
|
||
|
</p>
|
||
|
<br></br>
|
||
|
<div class="has-text-centered">
|
||
|
<button
|
||
|
class="button is-success"
|
||
|
style={{
|
||
|
margin: "2px",
|
||
|
}}
|
||
|
id="set-browser-timezone"
|
||
|
onClick={() => {
|
||
|
setSelectedZone(browserTimezone);
|
||
|
}}
|
||
|
>
|
||
|
<span>Use Browser Timezone</span>{" "}
|
||
|
<span class="icon">
|
||
|
<i class="fab fa-firefox-browser"></i>
|
||
|
</span>
|
||
|
</button>
|
||
|
<button
|
||
|
class="button is-success"
|
||
|
id="set-bot-timezone"
|
||
|
style={{
|
||
|
margin: "2px",
|
||
|
}}
|
||
|
onClick={() => {
|
||
|
setSelectedZone(data.timezone);
|
||
|
}}
|
||
|
>
|
||
|
<span>Use Bot Timezone</span>{" "}
|
||
|
<span class="icon">
|
||
|
<i class="fab fa-discord"></i>
|
||
|
</span>
|
||
|
</button>
|
||
|
<button
|
||
|
class="button is-warning"
|
||
|
id="update-bot-timezone"
|
||
|
style={{
|
||
|
margin: "2px",
|
||
|
}}
|
||
|
onClick={() => {
|
||
|
userInfoMutation.mutate(browserTimezone);
|
||
|
}}
|
||
|
>
|
||
|
Set Bot Timezone
|
||
|
</button>
|
||
|
</div>
|
||
|
</Modal>
|
||
|
);
|
||
|
};
|