Show time until on collapsed reminders

This commit is contained in:
jude 2024-03-03 20:30:39 +00:00
parent 382c2a5a1e
commit 66135ecd08
9 changed files with 54 additions and 8 deletions

View File

@ -8,6 +8,7 @@
"dependencies": { "dependencies": {
"axios": "^1.5.1", "axios": "^1.5.1",
"bulma": "^0.9.4", "bulma": "^0.9.4",
"humanize-duration": "^3.31.0",
"luxon": "^3.4.3", "luxon": "^3.4.3",
"preact": "^10.13.1", "preact": "^10.13.1",
"react-colorful": "^5.6.1", "react-colorful": "^5.6.1",
@ -3321,6 +3322,11 @@
"he": "bin/he" "he": "bin/he"
} }
}, },
"node_modules/humanize-duration": {
"version": "3.31.0",
"resolved": "https://registry.npmjs.org/humanize-duration/-/humanize-duration-3.31.0.tgz",
"integrity": "sha512-fRrehgBG26NNZysRlTq1S+HPtDpp3u+Jzdc/d5A4cEzOD86YLAkDaJyJg8krSdCi7CJ+s7ht3fwRj8Dl+Btd0w=="
},
"node_modules/ignore": { "node_modules/ignore": {
"version": "5.3.1", "version": "5.3.1",
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",

View File

@ -37,7 +37,7 @@ export type Reminder = {
embed_title: string; embed_title: string;
embed_fields: EmbedField[] | null; embed_fields: EmbedField[] | null;
enabled: boolean; enabled: boolean;
expires: DateTime | null; expires: string | null;
interval_seconds: number | null; interval_seconds: number | null;
interval_days: number | null; interval_days: number | null;
interval_months: number | null; interval_months: number | null;
@ -46,7 +46,7 @@ export type Reminder = {
tts: boolean; tts: boolean;
uid: string; uid: string;
username: string; username: string;
utc_time: DateTime; utc_time: string;
}; };
export type ChannelInfo = { export type ChannelInfo = {

View File

@ -8,6 +8,7 @@ import { Settings } from "./Settings";
import { ReminderContext } from "./ReminderContext"; import { ReminderContext } from "./ReminderContext";
import { useQuery } from "react-query"; import { useQuery } from "react-query";
import { useParams } from "wouter"; import { useParams } from "wouter";
import "./styles.scss";
function defaultReminder(): Reminder { function defaultReminder(): Reminder {
return { return {
@ -36,7 +37,7 @@ function defaultReminder(): Reminder {
tts: false, tts: false,
uid: "", uid: "",
username: "", username: "",
utc_time: DateTime.now(), utc_time: DateTime.now().toFormat("yyyy-LL-dd'T'HH:mm:ss"),
}; };
} }

View File

@ -5,6 +5,7 @@ import { Message } from "./Message";
import { Settings } from "./Settings"; import { Settings } from "./Settings";
import { ReminderContext } from "./ReminderContext"; import { ReminderContext } from "./ReminderContext";
import { TopBar } from "./TopBar"; import { TopBar } from "./TopBar";
import "./styles.scss";
type Props = { type Props = {
reminder: Reminder; reminder: Reminder;

View File

@ -7,13 +7,11 @@ import { useReminder } from "./ReminderContext";
import { Attachment } from "./Attachment"; import { Attachment } from "./Attachment";
import { TTS } from "./TTS"; import { TTS } from "./TTS";
import { TimeInput } from "./TimeInput"; import { TimeInput } from "./TimeInput";
import { useTimezone } from "../App/TimezoneProvider";
export const Settings = () => { export const Settings = () => {
const { isSuccess: userFetched, data: userInfo } = useQuery(fetchUserInfo()); const { isSuccess: userFetched, data: userInfo } = useQuery(fetchUserInfo());
const [reminder, setReminder] = useReminder(); const [reminder, setReminder] = useReminder();
const [timezone] = useTimezone();
if (!userFetched) { if (!userFetched) {
return <></>; return <></>;
@ -44,7 +42,7 @@ export const Settings = () => {
Time* Time*
<TimeInput <TimeInput
defaultValue={reminder.utc_time} defaultValue={reminder.utc_time}
onInput={(time: DateTime) => { onInput={(time: string) => {
setReminder((reminder) => ({ setReminder((reminder) => ({
...reminder, ...reminder,
utc_time: time, utc_time: time,
@ -99,7 +97,7 @@ export const Settings = () => {
Expiration Expiration
<TimeInput <TimeInput
defaultValue={reminder.expires} defaultValue={reminder.expires}
onInput={(time: DateTime) => { onInput={(time: string) => {
setReminder((reminder) => ({ setReminder((reminder) => ({
...reminder, ...reminder,
expires: time, expires: time,

View File

@ -3,6 +3,7 @@ import { Name } from "./Name";
import { fetchGuildChannels, Reminder } from "../../api"; import { fetchGuildChannels, Reminder } from "../../api";
import { useQuery } from "react-query"; import { useQuery } from "react-query";
import { useParams } from "wouter"; import { useParams } from "wouter";
import { DateTime } from "luxon";
export const TopBar = ({ toggleCollapsed }) => { export const TopBar = ({ toggleCollapsed }) => {
const { guild } = useParams(); const { guild } = useParams();
@ -15,10 +16,43 @@ export const TopBar = ({ toggleCollapsed }) => {
return channel === undefined ? "" : channel.name; return channel === undefined ? "" : channel.name;
}; };
let days, hours, minutes, seconds;
seconds = Math.floor(
DateTime.fromISO(reminder.utc_time, { zone: "UTC" }).diffNow("seconds").seconds,
);
[days, seconds] = [Math.floor(seconds / 86400), seconds % 86400];
[hours, seconds] = [Math.floor(seconds / 3600), seconds % 3600];
[minutes, seconds] = [Math.floor(seconds / 60), seconds % 60];
let string;
if (days !== 0) {
if (hours !== 0) {
string = `${days} days, ${hours} hours`;
} else {
string = `${days} days`;
}
} else if (hours !== 0) {
if (minutes !== 0) {
string = `${hours} hours, ${minutes} minutes`;
} else {
string = `${hours} hours`;
}
} else if (minutes !== 0) {
if (seconds !== 0) {
string = `${minutes} minutes, ${seconds} seconds`;
} else {
string = `${minutes} minutes`;
}
} else {
string = `${seconds} seconds`;
}
return ( return (
<div class="columns is-mobile column reminder-topbar"> <div class="columns is-mobile column reminder-topbar">
{isSuccess && <div class="invert-collapses channel-bar">#{channelName(reminder)}</div>} {isSuccess && <div class="invert-collapses channel-bar">#{channelName(reminder)}</div>}
<Name /> <Name />
<div class="invert-collapses time-bar">in {string}</div>
<div class="hide-button-bar"> <div class="hide-button-bar">
<button class="button hide-box" onClick={toggleCollapsed}> <button class="button hide-box" onClick={toggleCollapsed}>
<span class="is-sr-only">Hide reminder</span> <span class="is-sr-only">Hide reminder</span>

View File

@ -0,0 +1,6 @@
.time-bar {
display: flex;
justify-content: center;
flex-direction: column;
font-style: italic;
}

View File

@ -6,7 +6,7 @@ import { Wave } from "./Wave";
import { GuildEntry } from "./GuildEntry"; import { GuildEntry } from "./GuildEntry";
import { fetchUserGuilds, GuildInfo } from "../../api"; import { fetchUserGuilds, GuildInfo } from "../../api";
import { TimezonePicker } from "../TimezonePicker"; import { TimezonePicker } from "../TimezonePicker";
import "./style.scss"; import "./styles.scss";
type ContentProps = { type ContentProps = {
guilds: GuildInfo[]; guilds: GuildInfo[];