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

More work on todo list support

Browse Source
This commit is contained in:
jude 2024-04-07 20:20:16 +01:00
parent 9989ab3b35
commit e128b9848f
20 changed files with 317 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,4 @@
import axios from "axios";
import { DateTime } from "luxon";
type UserInfo = {
name: string;

46
reminder-dashboard/src/components/App/index.tsx
View File

@ -20,28 +20,30 @@ export function App() {
<div class="columns is-gapless dashboard-frame">
<Sidebar />
<div class="column is-main-content">
<Switch>
<Route path={"/@me/reminders"} component={User}></Route>
<Route
path={"/:guild/reminders"}
component={() => (
<Guild>
<GuildReminders />
</Guild>
)}
></Route>
<Route
path={"/:guild/todos"}
component={
<Guild>
<GuildTodos />
</Guild>
}
></Route>
<Route>
<Welcome />
</Route>
</Switch>
<div style={{ margin: "0 12px 12px 12px" }}>
<Switch>
<Route path={"/@me/reminders"} component={User}></Route>
<Route
path={"/:guild/reminders"}
component={() => (
<Guild>
<GuildReminders />
</Guild>
)}
></Route>
<Route
path={"/:guild/todos"}
component={() => (
<Guild>
<GuildTodos />
</Guild>
)}
></Route>
<Route>
<Welcome />
</Route>
</Switch>
</div>
</div>
</div>
</Router>

186
reminder-dashboard/src/components/Guild/GuildReminders.tsx
View File

@ -37,111 +37,107 @@ export const GuildReminders = () => {
return (
<>
{!isFetched && <Loader />}
<div style={{ margin: "0 12px 12px 12px" }}>
<strong>Create Reminder</strong>
<div id={"reminderCreator"}>
<CreateReminder />
</div>
<br></br>
<div class={"field"}>
<div class={"columns is-mobile"}>
<div class={"column"}>
<strong>Reminders</strong>
</div>
<div class={"column is-narrow"}>
<div class="control has-icons-left">
<div class="select is-small">
<select
id="orderBy"
onInput={(ev) => {
setSort(ev.currentTarget.value as Sort);
}}
>
<option value={Sort.Time} selected={sort == Sort.Time}>
Time
</option>
<option value={Sort.Name} selected={sort == Sort.Name}>
Name
</option>
<option
value={Sort.Channel}
selected={sort == Sort.Channel}
>
Channel
</option>
</select>
</div>
<div class="icon is-small is-left">
<i class="fas fa-sort-amount-down"></i>
</div>
<strong>Create Reminder</strong>
<div id={"reminderCreator"}>
<CreateReminder />
</div>
<br />
<div class={"field"}>
<div class={"columns is-mobile"}>
<div class={"column"}>
<strong>Reminders</strong>
</div>
<div class={"column is-narrow"}>
<div class="control has-icons-left">
<div class="select is-small">
<select
id="orderBy"
onInput={(ev) => {
setSort(ev.currentTarget.value as Sort);
}}
>
<option value={Sort.Time} selected={sort == Sort.Time}>
Time
</option>
<option value={Sort.Name} selected={sort == Sort.Name}>
Name
</option>
<option value={Sort.Channel} selected={sort == Sort.Channel}>
Channel
</option>
</select>
</div>
<div class="icon is-small is-left">
<i class="fas fa-sort-amount-down"></i>
</div>
</div>
<div class={"column is-narrow"}>
<div class="control has-icons-left">
<div class="select is-small">
<select
id="expandAll"
onInput={(ev) => {
if (ev.currentTarget.value === "expand") {
setCollapsed(false);
} else if (ev.currentTarget.value === "collapse") {
setCollapsed(true);
}
}}
>
<option value="" selected></option>
<option value="expand">Expand All</option>
<option value="collapse">Collapse All</option>
</select>
</div>
<div class="icon is-small is-left">
<i class="fas fa-expand-arrows"></i>
</div>
</div>
<div class={"column is-narrow"}>
<div class="control has-icons-left">
<div class="select is-small">
<select
id="expandAll"
onInput={(ev) => {
if (ev.currentTarget.value === "expand") {
setCollapsed(false);
} else if (ev.currentTarget.value === "collapse") {
setCollapsed(true);
}
}}
>
<option value="" selected></option>
<option value="expand">Expand All</option>
<option value="collapse">Collapse All</option>
</select>
</div>
<div class="icon is-small is-left">
<i class="fas fa-expand-arrows"></i>
</div>
</div>
</div>
</div>
</div>
<div id={"guildReminders"} className={isFetching ? "loading" : ""}>
{isSuccess &&
guildReminders
.sort((r1, r2) => {
if (sort === Sort.Time) {
return r1.utc_time > r2.utc_time ? 1 : -1;
} else if (sort === Sort.Name) {
return r1.name > r2.name ? 1 : -1;
} else {
return r1.channel > r2.channel ? 1 : -1;
}
})
.map((reminder) => {
let breaker = <></>;
if (sort === Sort.Channel && channels) {
if (
prevReminder === null ||
prevReminder.channel !== reminder.channel
) {
const channel = channels.find(
(ch) => ch.id === reminder.channel,
);
breaker = <div class={"channel-tag"}>#{channel.name}</div>;
}
<div id={"guildReminders"} className={isFetching ? "loading" : ""}>
{isSuccess &&
guildReminders
.sort((r1, r2) => {
if (sort === Sort.Time) {
return r1.utc_time > r2.utc_time ? 1 : -1;
} else if (sort === Sort.Name) {
return r1.name > r2.name ? 1 : -1;
} else {
return r1.channel > r2.channel ? 1 : -1;
}
})
.map((reminder) => {
let breaker = <></>;
if (sort === Sort.Channel && channels) {
if (
prevReminder === null ||
prevReminder.channel !== reminder.channel
) {
const channel = channels.find(
(ch) => ch.id === reminder.channel,
);
breaker = <div class={"channel-tag"}>#{channel.name}</div>;
}
}
prevReminder = reminder;
prevReminder = reminder;
return (
<>
{breaker}
<EditReminder
key={reminder.uid}
reminder={reminder}
globalCollapse={collapsed}
/>
</>
);
})}
</div>
return (
<>
{breaker}
<EditReminder
key={reminder.uid}
reminder={reminder}
globalCollapse={collapsed}
/>
</>
);
})}
</div>
</>
);

53
reminder-dashboard/src/components/Guild/GuildTodos.tsx
View File

@ -1,21 +1,52 @@
import { useQuery, useQueryClient } from "react-query";
import { useQuery } from "react-query";
import { fetchGuildChannels, fetchGuildTodos } from "../../api";
import { useState } from "preact/hooks";
import { useGuild } from "../App/useGuild";
import { Todo } from "../Todo";
import { Loader } from "../Loader";
import { CreateTodo } from "../Todo/CreateTodo";
export const GuildTodos = () => {
const guild = useGuild();
const {
isSuccess,
isFetching,
isFetched,
data: guildReminders,
} = useQuery(fetchGuildTodos(guild));
const { isFetched, data: guildTodos } = useQuery(fetchGuildTodos(guild));
const { data: channels } = useQuery(fetchGuildChannels(guild));
const [collapsed, setCollapsed] = useState(false);
const queryClient = useQueryClient();
if (!isFetched || !channels) {
return <Loader />;
}
return <></>;
const sortedTodos = guildTodos.sort((a, b) => (a.channel_id < b.channel_id ? 0 : 1));
let prevChannel;
return (
<>
<strong>Create Todo</strong>
<CreateTodo />
<br />
<strong>Todo list</strong>
{sortedTodos.map((todo) => {
if (prevChannel !== todo.channel_id) {
prevChannel = todo.channel_id;
if (todo.channel_id === null) {
return (
<>
<h2>Server Todos</h2>
<Todo todo={todo} key={todo.id} />
</>
);
} else {
const channel = channels.find((ch) => ch.id === todo.channel_id);
return (
<>
<h2>#{channel.name} Todos</h2>
<Todo todo={todo} key={todo.id} />
</>
);
}
}
return <Todo todo={todo} key={todo.id} />;
})}
</>
);
};

5
reminder-dashboard/src/components/Guild/index.scss Normal file
View File

@ -0,0 +1,5 @@
.page-links {
> * {
margin: 2px;
}
}

20
reminder-dashboard/src/components/Guild/index.tsx
View File

@ -4,6 +4,9 @@ import { GuildError } from "./GuildError";
import { createPortal, PropsWithChildren } from "preact/compat";
import { Import } from "../Import";
import { useGuild } from "../App/useGuild";
import { Link } from "wouter";
import "./index.scss";
export const Guild = ({ children }: PropsWithChildren) => {
const guild = useGuild();
@ -19,6 +22,23 @@ export const Guild = ({ children }: PropsWithChildren) => {
return (
<>
{importModal}
<div class="page-links">
<Link
class="button is-outlined is-success is-small"
href={`/${guild}/reminders`}
>
<span>Reminders</span>
<span class="icon">
<i class="fa fa-chevron-right"></i>
</span>
</Link>
<Link class="button is-outlined is-success is-small" href={`/${guild}/todos`}>
<span>Todo lists</span>
<span class="icon">
<i class="fa fa-chevron-right"></i>
</span>
</Link>
</div>
{children}
</>
);

4
reminder-dashboard/src/components/Reminder/ChannelSelector.tsx
View File

@ -1,9 +1,9 @@
import { useQuery } from "react-query";
import { useParams } from "wouter";
import { fetchGuildChannels } from "../../api";
import { useGuild } from "../App/useGuild";
export const ChannelSelector = ({ channel, setChannel }) => {
const { guild } = useParams();
const guild = useGuild();
const { isSuccess, data } = useQuery(fetchGuildChannels(guild));
return (

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

@ -61,6 +61,7 @@ export const CreateReminder = () => {
<ReminderContext.Provider value={[reminder, setReminder]}>
<div class={collapsed ? "reminderContent is-collapsed" : "reminderContent"}>
<TopBar
isCreating={true}
toggleCollapsed={() => {
setCollapsed(!collapsed);
}}

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

@ -34,6 +34,7 @@ export const EditReminder = ({ reminder: initialReminder, globalCollapse }: Prop
id={`reminder-${reminder.uid.slice(0, 12)}`}
>
<TopBar
isCreating={false}
toggleCollapsed={() => {
setCollapsed(!collapsed);
}}

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

@ -6,7 +6,7 @@ import { useCallback } from "preact/hooks";
import { DateTime } from "luxon";
import { Name } from "../Name";
export const Guild = ({ toggleCollapsed }) => {
export const Guild = ({ toggleCollapsed, isCreating }) => {
const guild = useGuild();
const [reminder] = useReminder();
@ -55,7 +55,7 @@ export const Guild = ({ toggleCollapsed }) => {
<div class="columns is-mobile column reminder-topbar">
{isSuccess && <div class="invert-collapses channel-bar">#{channelName(reminder)}</div>}
<Name />
<div class="time-bar">in {string}</div>
{!isCreating && <div class="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>

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

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

3
reminder-dashboard/src/components/Sidebar/GuildEntry.tsx
View File

@ -17,9 +17,6 @@ export const GuildEntry = ({ guild }: Props) => {
? "is-active switch-pane"
: "switch-pane"
}
data-pane="guild"
data-guild={guild.id}
data-name={guild.name}
href={`/${guild.id}/reminders`}
>
<>

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

@ -29,7 +29,6 @@ const SidebarContent = ({ guilds }: ContentProps) => {
<li>
<Link
class={loc.startsWith("/@me") ? "is-active switch-pane" : "switch-pane"}
data-pane="guild"
href={"/@me/reminders"}
>
<>

31
reminder-dashboard/src/components/Todo/CreateTodo.tsx Normal file
View File

@ -0,0 +1,31 @@
import { useQuery } from "react-query";
import { fetchGuildChannels } from "../../api";
import { useGuild } from "../App/useGuild";
export const CreateTodo = () => {
const guild = useGuild();
const { isSuccess, data: channels } = useQuery(fetchGuildChannels(guild));
return (
<div class="todo">
<textarea class="input todo-input" onInput={() => null} />
<div class="control has-icons-left">
<div class="select">
<select name="channel" class="channel-selector" onInput={() => {}}>
<option value="">(None)</option>
{isSuccess && channels.map((c) => <option value={c.id}>{c.name}</option>)}
</select>
</div>
<div class="icon is-small is-left">
<i class="fas fa-hashtag"></i>
</div>
</div>
<button onClick={() => null} class="button is-success save-btn">
<span class="icon">
<i class="fa fa-sparkles"></i>
</span>
</button>
</div>
);
};

10
reminder-dashboard/src/components/Todo/index.scss Normal file
View File

@ -0,0 +1,10 @@
.todo {
display: flex;
flex-direction: row;
align-items: center;
margin: 6px 0;
> * {
margin: 0 3px;
}
}

10
reminder-dashboard/src/components/Todo/index.tsx
View File

@ -1,19 +1,21 @@
import { Todo as TodoT } from "../../api";
import "./index.scss";
type Props = {
todo: TodoT;
};
export const Todo = ({ todo }: Props) => {
return (
<div>
<textarea value={todo.value} onInput={() => null} />
<button onClick={() => null} class="btn save-btn">
<div class="todo">
<textarea class="input todo-input" value={todo.value} onInput={() => null} />
<button onClick={() => null} class="button is-success save-btn">
<span class="icon">
<i class="fa fa-save"></i>
</span>
</button>
<button onClick={() => null} class="btn delete-btn">
<button onClick={() => null} class="button is-danger">
<span class="icon">
<i class="fa fa-trash"></i>
</span>

1
src/web/consts.rs
View File

@ -45,4 +45,5 @@ lazy_static! {
.map(|inner| inner.parse::<u32>().ok())
.flatten()
.unwrap_or(600);
pub static ref SALT: String = env::var("SALT").unwrap();
}

40
src/web/mod.rs
View File

@ -5,6 +5,46 @@ mod catchers;
mod guards;
mod metrics;
mod routes;
pub mod string {
use std::{fmt::Display, str::FromStr};
use serde::{de, Deserialize, Deserializer, Serializer};
pub fn serialize<T, S>(value: &T, serializer: S) -> Result<S::Ok, S::Error>
where
T: Display,
S: Serializer,
{
serializer.collect_str(value)
}
pub fn deserialize<'de, T, D>(deserializer: D) -> Result<T, D::Error>
where
T: FromStr,
T::Err: Display,
D: Deserializer<'de>,
{
String::deserialize(deserializer)?.parse().map_err(de::Error::custom)
}
}
pub mod string_opt {
use std::fmt::Display;
use serde::{Deserializer, Serializer};
pub fn serialize<T, S>(value: &Option<T>, serializer: S) -> Result<S::Ok, S::Error>
where
T: Display,
S: Serializer,
{
if let Some(v) = value {
serializer.collect_str(v)
} else {
serializer.serialize_none()
}
}
}
use std::{env, path::Path};

42
src/web/routes/dashboard/api/guild/todos.rs
View File

@ -1,3 +1,4 @@
use log::warn;
use rocket::{
delete, get,
http::CookieJar,
@ -5,13 +6,23 @@ use rocket::{
serde::json::{json, Json},
State,
};
use serde::Deserialize;
use serde::{Deserialize, Serialize};
use serenity::prelude::Context;
use crate::web::{check_authorization, guards::transaction::Transaction, routes::JsonResult};
use crate::web::{
check_authorization, guards::transaction::Transaction, routes::JsonResult, string_opt,
};
#[derive(Deserialize)]
struct CreateTodo {
pub struct CreateTodo {
channel_id: Option<u64>,
value: String,
}
#[derive(Serialize)]
struct GetTodo {
id: u32,
#[serde(with = "string_opt")]
channel_id: Option<u64>,
value: String,
}
@ -38,7 +49,30 @@ pub async fn get_todo(
) -> JsonResult {
check_authorization(cookies, ctx.inner(), id).await?;
Ok(json!([]))
let todos = sqlx::query_as!(
GetTodo,
"
SELECT
todos.id,
channels.channel AS channel_id,
value
FROM todos
INNER JOIN guilds
ON guilds.id = todos.guild_id
LEFT JOIN channels
ON channels.id = todos.channel_id
WHERE guilds.guild = ?
",
id
)
.fetch_all(transaction.executor())
.await
.map_err(|e| {
warn!("Error fetching todos: {:?}", e);
json!({ "errors": vec!["Unknown error"] })
})?;
Ok(json!(todos))
}
#[patch("/api/guild/<id>/todos")]

26
src/web/routes/dashboard/mod.rs
View File

@ -29,7 +29,7 @@ use crate::web::{
},
guards::transaction::Transaction,
routes::JsonResult,
Error,
string, Error,
};
pub mod api;
@ -348,30 +348,6 @@ where
Ok(Some(Option::deserialize(deserializer)?))
}
// https://github.com/serde-rs/json/issues/329#issuecomment-305608405
mod string {
use std::{fmt::Display, str::FromStr};
use serde::{de, Deserialize, Deserializer, Serializer};
pub fn serialize<T, S>(value: &T, serializer: S) -> Result<S::Ok, S::Error>
where
T: Display,
S: Serializer,
{
serializer.collect_str(value)
}
pub fn deserialize<'de, T, D>(deserializer: D) -> Result<T, D::Error>
where
T: FromStr,
T::Err: Display,
D: Deserializer<'de>,
{
String::deserialize(deserializer)?.parse().map_err(de::Error::custom)
}
}
#[derive(Deserialize)]
pub struct DeleteReminder {
uid: String,