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

Update schemas and resolve some warnings

Browse Source
This commit is contained in:
jude
2024-07-16 10:42:32 +01:00
parent 54ee3594eb
commit febd04c374
26 changed files with 221 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
reminder-dashboard/index.html
View File

@ -22,7 +22,6 @@
<title>Reminder Bot | Dashboard</title>
<!-- styles -->
<link rel="stylesheet" href="/static/css/bulma.min.css">
<link rel="stylesheet" href="/static/css/fa.css">
<link rel="stylesheet" href="/static/css/font.css">
<link rel="stylesheet" href="/static/css/style.css">

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

@ -1,10 +1,27 @@
import axios from "axios";
enum ColorScheme {
System = "system",
Dark = "dark",
Light = "light",
}
type UserInfo = {
name: string;
patreon: boolean;
timezone: string | null;
reset_inputs_on_create: boolean;
preferences: {
timezone: string | null;
reset_inputs_on_create: boolean;
dashboard_color_scheme: ColorScheme;
use_browser_timezone: boolean;
};
};
type UpdateUserInfo = {
timezone?: string;
reset_inputs_on_create?: boolean;
dashboard_color_scheme?: ColorScheme;
use_browser_timezone?: boolean;
};
export type GuildInfo = {
@ -110,7 +127,7 @@ export const fetchUserInfo = () => ({
});
export const patchUserInfo = () => ({
mutationFn: (timezone: string) => axios.patch(`/dashboard/api/user`, { timezone }),
mutationFn: (userInfo: UpdateUserInfo) => axios.patch(`/dashboard/api/user`, userInfo),
});
export const fetchUserGuilds = () => ({

14
reminder-dashboard/src/components/App/TimezoneProvider.tsx
View File

@ -1,15 +1,27 @@
import { createContext } from "preact";
import { useContext } from "preact/compat";
import { useState } from "preact/hooks";
import { useEffect, useState } from "preact/hooks";
import { DateTime } from "luxon";
import { fetchUserInfo } from "../../api";
import { useQuery } from "react-query";
type TTimezoneContext = [string, (tz: string) => void];
const TimezoneContext = createContext(["UTC", () => {}] as TTimezoneContext);
export const TimezoneProvider = ({ children }) => {
const { data } = useQuery({ ...fetchUserInfo() });
const [timezone, setTimezone] = useState(DateTime.now().zoneName);
useEffect(() => {
setTimezone(
data === undefined || data.preferences.use_browser_timezone
? DateTime.now().zoneName
: data.preferences.timezone,
);
}, [data]);
return (
<TimezoneContext.Provider value={[timezone, setTimezone]}>
{children}

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

@ -13,14 +13,14 @@ export function App() {
const queryClient = new QueryClient();
let scheme = "light";
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
scheme = "dark";
}
// if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
// scheme = "dark";
// }
return (
<TimezoneProvider>
<FlashProvider>
<QueryClientProvider client={queryClient}>
<QueryClientProvider client={queryClient}>
<TimezoneProvider>
<FlashProvider>
<Router base={"/dashboard"}>
<div class={`columns is-gapless dashboard-frame scheme-${scheme}`}>
<Sidebar />
@ -52,8 +52,8 @@ export function App() {
</div>
</div>
</Router>
</QueryClientProvider>
</FlashProvider>
</TimezoneProvider>
</FlashProvider>
</TimezoneProvider>
</QueryClientProvider>
);
}

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

@ -11,7 +11,7 @@ import { useGuild } from "../App/useGuild";
export const Settings = () => {
const guild = useGuild();
const { isSuccess: userFetched, data: userInfo } = useQuery(fetchUserInfo());
const { isSuccess: userFetched, data: userInfo } = useQuery({ ...fetchUserInfo() });
const [reminder, setReminder] = useReminder();

8
reminder-dashboard/src/components/Reminder/styles.scss
View File

@ -26,3 +26,11 @@
textarea.autoresize {
resize: vertical !important;
}
div.reminderContent {
margin-top: 10px;
margin-bottom: 10px;
padding: 14px;
background-color: #f5f5f5;
border-radius: 8px;
}

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

@ -24,7 +24,7 @@ const SidebarContent = ({ guilds }: ContentProps) => {
<Brand />
</a>
<Wave />
<aside class="menu">
<aside class="menu theme-dark">
<ul class="menu-list">
<li>
<Link
@ -44,7 +44,6 @@ const SidebarContent = ({ guilds }: ContentProps) => {
style={{
position: "sticky",
bottom: "0px",
backgroundColor: "rgb(54, 54, 54)",
}}
>
<p class="menu-label">Options</p>

18
reminder-dashboard/src/components/Sidebar/styles.scss
View File

@ -39,7 +39,7 @@ aside.menu {
}
.dashboard-sidebar {
display: flex;
display: flex !important;
flex-direction: column;
background-color: #363636;
width: 230px !important;
@ -49,3 +49,19 @@ aside.menu {
.aside-footer {
justify-self: end;
}
.menu a {
color: #fff !important;
}
.menu a:hover {
color: #424242 !important;
}
.menu .menu-label {
color: #bbb;
}
.menu {
padding-left: 4px;
}

29
reminder-dashboard/src/components/TimezonePicker/index.tsx
View File

@ -53,10 +53,10 @@ export const TimezonePicker = () => {
const TimezoneModal = ({ setModalOpen }) => {
const browserTimezone = DateTime.now().zoneName;
const [selectedZone] = useTimezone();
const [selectedZone, setTimezone] = useTimezone();
const queryClient = useQueryClient();
const { isLoading, isError, data } = useQuery(fetchUserInfo());
const { isLoading, isError, data } = useQuery({ ...fetchUserInfo() });
const userInfoMutation = useMutation({
...patchUserInfo(),
onSuccess: () => {
@ -79,7 +79,7 @@ const TimezoneModal = ({ setModalOpen }) => {
{isLoading ? (
<i className="fas fa-cog fa-spin"></i>
) : (
<TimezoneDisplay timezone={data.timezone || "UTC"}></TimezoneDisplay>
<TimezoneDisplay timezone={data.preferences.timezone || "UTC"} />
)}
</>
)}
@ -93,10 +93,29 @@ const TimezoneModal = ({ setModalOpen }) => {
margin: "2px",
}}
onClick={() => {
userInfoMutation.mutate(browserTimezone);
userInfoMutation.mutate({ timezone: browserTimezone });
}}
>
Set Bot Timezone
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>

10
reminder-dashboard/src/styles.scss
View File

@ -1,3 +1,5 @@
@import "node_modules/bulma/bulma";
/* override styles for when the div is collapsed */
div.reminderContent.is-collapsed .column.discord-frame {
display: none;
@ -47,3 +49,11 @@ div.reminderContent.is-collapsed .hide-box {
div.reminderContent.is-collapsed .hide-box i {
transform: rotate(90deg);
}
.button.is-success:not(.is-outlined) {
color: white;
}
.button.is-outlined.is-success:not(.is-focused, :hover, :focus) {
background-color: white;
}

13
reminder-dashboard/src/vars.scss Normal file
View File

@ -0,0 +1,13 @@
$primary-background-light: #ffffff;
$secondary-background-light: #f5f5f5;
$contrast-background-light: #363636;
$primary-text-light: #4a4a4a;
$secondary-text-light: #4a4a4a;
$contrast-text-light: #ffffff;
$primary-background-dark: #363636;
$secondary-background-dark: #424242;
$contrast-background-dark: #242424;
$primary-text-dark: #ffffff;
$secondary-text-dark: #ffffff;
$contrast-text-dark: #ffffff;