124 lines
4.0 KiB
TypeScript
124 lines
4.0 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, setTimezone] = 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.preferences.timezone || "UTC"} />
|
|
)}
|
|
</>
|
|
)}
|
|
</p>
|
|
<br></br>
|
|
<div class="has-text-centered">
|
|
<button
|
|
class="button is-success is-outlined"
|
|
id="update-bot-timezone"
|
|
style={{
|
|
margin: "2px",
|
|
}}
|
|
onClick={() => {
|
|
userInfoMutation.mutate({ timezone: browserTimezone });
|
|
}}
|
|
>
|
|
Set bot timezone
|
|
</button>
|
|
<button
|
|
class="button is-success is-outlined"
|
|
id="update-bot-timezone"
|
|
style={{
|
|
margin: "2px",
|
|
}}
|
|
onClick={() => {
|
|
userInfoMutation.mutate({
|
|
use_browser_timezone: !data.preferences.use_browser_timezone,
|
|
});
|
|
setTimezone(
|
|
data.preferences.use_browser_timezone
|
|
? data.preferences.timezone
|
|
: DateTime.now().zoneName,
|
|
);
|
|
}}
|
|
>
|
|
Use {data.preferences.use_browser_timezone ? "bot" : "browser"} timezone
|
|
</button>
|
|
</div>
|
|
</Modal>
|
|
);
|
|
};
|