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

Add mentioning for channels

Browse Source
This commit is contained in:
jude
2024-03-04 20:36:37 +00:00
parent 85a114e55c
commit dbe8e8e358
13 changed files with 251 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
reminder-dashboard/src/components/Reminder/Content.tsx
View File

@ -1,15 +1,16 @@
import { useReminder } from "./ReminderContext";
import { useRef } from "preact/hooks";
import { useMentions } from "../App/useMentions";
import { Mentions } from "../App/Mentions";
import { useGuild } from "../App/useGuild";
export const Content = () => {
const guild = useGuild();
const [reminder, setReminder] = useReminder();
const input = useRef(null);
useMentions(input);
return (
<>
{guild && <Mentions input={input} />}
<label class="is-sr-only">Content</label>
<textarea
class="message-input autoresize discord-content"

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

@ -1,7 +1,8 @@
import { ImagePicker } from "../ImagePicker";
import { Reminder } from "../../../api";
import { useMentions } from "../../App/useMentions";
import { Mentions } from "../../App/Mentions";
import { useRef } from "preact/hooks";
import { useGuild } from "../../App/useGuild";
type Props = {
name: string;
@ -10,8 +11,8 @@ type Props = {
};
export const Author = ({ name, icon, setReminder }: Props) => {
const guild = useGuild();
const input = useRef(null);
useMentions(input);
return (
<div class="embed-author-box">
@ -32,6 +33,7 @@ export const Author = ({ name, icon, setReminder }: Props) => {
</div>
<div class="b">
{guild && <Mentions input={input} />}
<label class="is-sr-only" for="embedAuthor">
Embed Author
</label>

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

@ -1,12 +1,14 @@
import { useMentions } from "../../App/useMentions";
import { Mentions } from "../../App/Mentions";
import { useRef } from "preact/hooks";
import { useGuild } from "../../App/useGuild";
export const Description = ({ description, onInput }) => {
const guild = useGuild();
const input = useRef(null);
useMentions(input);
return (
<>
{guild && <Mentions input={input} />}
<label class="is-sr-only" for="embedDescription">
Embed Description
</label>

6
reminder-dashboard/src/components/Reminder/Embed/Fields/Field.tsx
View File

@ -1,9 +1,10 @@
import { useRef } from "preact/hooks";
import { useMentions } from "../../../App/useMentions";
import { Mentions } from "../../../App/Mentions";
import { useGuild } from "../../../App/useGuild";
export const Field = ({ title, value, inline, index, onUpdate }) => {
const guild = useGuild();
const input = useRef(null);
useMentions(input);
return (
<div data-inlined={inline ? "1" : "0"} class="embed-field-box" key={index}>
@ -41,6 +42,7 @@ export const Field = ({ title, value, inline, index, onUpdate }) => {
)}
</div>
{guild && <Mentions input={input} />}
<label class="is-sr-only" for="embedFieldValue">
Field Value
</label>

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

@ -1,7 +1,8 @@
import { Reminder } from "../../../api";
import { ImagePicker } from "../ImagePicker";
import { useMentions } from "../../App/useMentions";
import { Mentions } from "../../App/Mentions";
import { useRef } from "preact/hooks";
import { useGuild } from "../../App/useGuild";
type Props = {
footer: string;
@ -10,8 +11,8 @@ type Props = {
};
export const Footer = ({ footer, icon, setReminder }: Props) => {
const guild = useGuild();
const input = useRef(null);
useMentions(input);
return (
<div class="embed-footer-box">
@ -31,6 +32,7 @@ export const Footer = ({ footer, icon, setReminder }: Props) => {
<label class="is-sr-only" for="embedFooter">
Embed Footer text
</label>
{guild && <Mentions input={input} />}
<textarea
class="discord-embed-footer message-input autoresize "
placeholder="Embed Footer..."

7
reminder-dashboard/src/components/Reminder/Embed/Title.tsx
View File

@ -1,13 +1,14 @@
import { useParams } from "wouter";
import { useRef } from "preact/hooks";
import { useMentions } from "../../App/useMentions";
import { useGuild } from "../../App/useGuild";
import { Mentions } from "../../App/Mentions";
export const Title = ({ title, onInput }) => {
const guild = useGuild();
const input = useRef(null);
useMentions(input);
return (
<>
{guild && <Mentions input={input} />}
<label class="is-sr-only" for="embedTitle">
Embed Title
</label>

25
reminder-dashboard/src/components/Reminder/TopBar.tsx → reminder-dashboard/src/components/Reminder/TopBar/Guild.tsx
View File

@ -1,23 +1,26 @@
import { useReminder } from "./ReminderContext";
import { Name } from "./Name";
import { fetchGuildChannels, Reminder } from "../../api";
import { useGuild } from "../../App/useGuild";
import { useReminder } from "../ReminderContext";
import { useQuery } from "react-query";
import { useParams } from "wouter";
import { fetchGuildChannels, Reminder } from "../../../api";
import { useCallback } from "preact/hooks";
import { DateTime } from "luxon";
import { Name } from "../Name";
export const TopBar = ({ toggleCollapsed }) => {
const { guild } = useParams();
export const Guild = ({ toggleCollapsed }) => {
const guild = useGuild();
const [reminder] = useReminder();
const { isSuccess, data: guildChannels } = useQuery(fetchGuildChannels(guild));
const channelName = (reminder: Reminder) => {
const channel = guildChannels.find((c) => c.id === reminder.channel);
return channel === undefined ? "" : channel.name;
};
const channelName = useCallback(
(reminder: Reminder) => {
const channel = guildChannels.find((c) => c.id === reminder.channel);
return channel === undefined ? "" : channel.name;
},
[guildChannels],
);
let days, hours, minutes, seconds;
seconds = Math.floor(
DateTime.fromISO(reminder.utc_time, { zone: "UTC" }).diffNow("seconds").seconds,
);

51
reminder-dashboard/src/components/Reminder/TopBar/User.tsx Normal file
View File

@ -0,0 +1,51 @@
import { Name } from "../Name";
import { DateTime } from "luxon";
import { useReminder } from "../ReminderContext";
export const User = ({ toggleCollapsed }) => {
const [reminder] = useReminder();
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">
<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>
<i class="fas fa-chevron-down"></i>
</button>
</div>
</div>
);
};

13
reminder-dashboard/src/components/Reminder/TopBar/index.tsx Normal file
View File

@ -0,0 +1,13 @@
import { useGuild } from "../../App/useGuild";
import { Guild } from "./Guild";
import { User } from "./User";
export const TopBar = ({ toggleCollapsed }) => {
const guild = useGuild();
if (guild) {
return <Guild toggleCollapsed={toggleCollapsed} />;
} else {
return <User toggleCollapsed={toggleCollapsed} />;
}
};