jude/reminder-bot
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 3 Wiki Activity

Show time until on collapsed reminders

Browse Source
This commit is contained in:
jude 2024-03-03 20:30:39 +00:00
parent 382c2a5a1e
commit 9d8794d396
10 changed files with 56 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
reminder-dashboard/package-lock.json generated
View File

@ -8,6 +8,7 @@
"dependencies": {
"axios": "^1.5.1",
"bulma": "^0.9.4",
"humanize-duration": "^3.31.0",
"luxon": "^3.4.3",
"preact": "^10.13.1",
"react-colorful": "^5.6.1",
@ -3321,6 +3322,11 @@
"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": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",

1
reminder-dashboard/package.json
View File

@ -11,6 +11,7 @@
"dependencies": {
"axios": "^1.5.1",
"bulma": "^0.9.4",
"humanize-duration": "^3.31.0",
"luxon": "^3.4.3",
"preact": "^10.13.1",
"react-colorful": "^5.6.1",

4
reminder-dashboard/src/api.ts
View File

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

3
reminder-dashboard/src/components/Reminder/CreateReminder.tsx
View File

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

1
reminder-dashboard/src/components/Reminder/EditReminder.tsx
View File

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

6
reminder-dashboard/src/components/Reminder/Settings.tsx
View File

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

35
reminder-dashboard/src/components/Reminder/TopBar.tsx
View File

@ -3,6 +3,8 @@ import { Name } from "./Name";
import { fetchGuildChannels, Reminder } from "../../api";
import { useQuery } from "react-query";
import { useParams } from "wouter";
import { DateTime } from "luxon";
import humanizeDuration from "humanize-duration";
export const TopBar = ({ toggleCollapsed }) => {
const { guild } = useParams();
@ -15,10 +17,43 @@ export const TopBar = ({ toggleCollapsed }) => {
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 (
<div class="columns is-mobile column reminder-topbar">
{isSuccess && <div class="invert-collapses channel-bar">#{channelName(reminder)}</div>}
<Name />
<div class="invert-collapses time-bar">in {string}</div>
<div class="hide-button-bar">
<button class="button hide-box" onClick={toggleCollapsed}>
<span class="is-sr-only">Hide reminder</span>

6
reminder-dashboard/src/components/Reminder/styles.scss Normal file
View File

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

2
reminder-dashboard/src/components/Sidebar/index.tsx
View File

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

0
reminder-dashboard/src/components/Sidebar/style.scss → reminder-dashboard/src/components/Sidebar/styles.scss
View File