135 lines
4.2 KiB
TypeScript
135 lines
4.2 KiB
TypeScript
import { DateTime } 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.toString().padStart(2, "0");
|
|
const minute = now.minute.toString().padStart(2, "0");
|
|
|
|
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-success is-outlined"
|
|
id="update-bot-timezone"
|
|
style={{
|
|
margin: "2px",
|
|
}}
|
|
onClick={() => {
|
|
userInfoMutation.mutate(browserTimezone);
|
|
}}
|
|
>
|
|
Set Bot Timezone
|
|
</button>
|
|
</div>
|
|
</Modal>
|
|
);
|
|
};
|