diff --git a/reminder-dashboard/src/api.ts b/reminder-dashboard/src/api.ts
index 850ba2b..c66ba6f 100644
--- a/reminder-dashboard/src/api.ts
+++ b/reminder-dashboard/src/api.ts
@@ -17,7 +17,7 @@ type UserInfo = {
};
};
-type UpdateUserInfo = {
+export type UpdateUserInfo = {
timezone?: string;
reset_inputs_on_create?: boolean;
dashboard_color_scheme?: ColorScheme;
diff --git a/reminder-dashboard/src/components/Reminder/ButtonRow/CreateButtonRow.tsx b/reminder-dashboard/src/components/Reminder/ButtonRow/CreateButtonRow.tsx
index 31c3da5..74c335a 100644
--- a/reminder-dashboard/src/components/Reminder/ButtonRow/CreateButtonRow.tsx
+++ b/reminder-dashboard/src/components/Reminder/ButtonRow/CreateButtonRow.tsx
@@ -51,7 +51,7 @@ export const CreateButtonRow = () => {
queryKey: ["USER_REMINDERS"],
});
}
- if (userInfo.reset_inputs_on_create) {
+ if (userInfo.preferences.reset_inputs_on_create) {
setReminder(() => defaultReminder());
}
setRecentlyCreated(true);
diff --git a/reminder-dashboard/src/components/Reminder/ButtonRow/EditButtonRow.tsx b/reminder-dashboard/src/components/Reminder/ButtonRow/EditButtonRow.tsx
index 10c639b..c895b26 100644
--- a/reminder-dashboard/src/components/Reminder/ButtonRow/EditButtonRow.tsx
+++ b/reminder-dashboard/src/components/Reminder/ButtonRow/EditButtonRow.tsx
@@ -12,7 +12,6 @@ export const EditButtonRow = () => {
const [reminder, setReminder] = useReminder();
const [recentlySaved, setRecentlySaved] = useState(false);
-
const iconFlashTimeout = useRef(0);
const flash = useFlash();
diff --git a/reminder-dashboard/src/components/Sidebar/index.tsx b/reminder-dashboard/src/components/Sidebar/index.tsx
index 794c610..4b49f6c 100644
--- a/reminder-dashboard/src/components/Sidebar/index.tsx
+++ b/reminder-dashboard/src/components/Sidebar/index.tsx
@@ -8,6 +8,7 @@ import { fetchUserGuilds, fetchUserInfo, GuildInfo } from "../../api";
import { TimezonePicker } from "../TimezonePicker";
import "./styles.scss";
import { Link, useLocation } from "wouter";
+import { UserPreferences } from "../UserPreferences";
type ContentProps = {
guilds: GuildInfo[];
@@ -51,6 +52,7 @@ const SidebarContent = ({ guilds }: ContentProps) => {
+
diff --git a/reminder-dashboard/src/components/Sidebar/styles.scss b/reminder-dashboard/src/components/Sidebar/styles.scss
index e9c0067..e2b625b 100644
--- a/reminder-dashboard/src/components/Sidebar/styles.scss
+++ b/reminder-dashboard/src/components/Sidebar/styles.scss
@@ -54,7 +54,7 @@ aside.menu {
color: #fff !important;
}
-.menu a:hover {
+.menu a:hover:not(.is-active) {
color: #424242 !important;
}
diff --git a/reminder-dashboard/src/components/UserPreferences/index.tsx b/reminder-dashboard/src/components/UserPreferences/index.tsx
new file mode 100644
index 0000000..7b61ec0
--- /dev/null
+++ b/reminder-dashboard/src/components/UserPreferences/index.tsx
@@ -0,0 +1,128 @@
+import { Modal } from "../Modal";
+import { fetchUserInfo, patchUserInfo, UpdateUserInfo } from "../../api";
+import { useMutation, useQuery, useQueryClient } from "react-query";
+import { useRef, useState } from "preact/hooks";
+import { ICON_FLASH_TIME } from "../../consts";
+import { useFlash } from "../App/FlashContext";
+
+export const UserPreferences = () => {
+ const [modalOpen, setModalOpen] = useState(false);
+
+ return (
+ <>
+ {
+ setModalOpen(true);
+ }}
+ >
+
+
+ {" "}
+ Preferences
+
+ {modalOpen && }
+ >
+ );
+};
+
+const PreferencesModal = ({ setModalOpen }) => {
+ const flash = useFlash();
+ const queryClient = useQueryClient();
+ const { isLoading, isSuccess, isError, data } = useQuery({ ...fetchUserInfo() });
+ const userInfoMutation = useMutation({
+ ...patchUserInfo(),
+ onError: (error) => {
+ flash({
+ message: `An error occurred: ${error}`,
+ type: "error",
+ });
+ },
+ onSuccess: () => {
+ if (iconFlashTimeout.current !== null) {
+ clearTimeout(iconFlashTimeout.current);
+ }
+ setRecentlySaved(true);
+ iconFlashTimeout.current = setTimeout(() => {
+ setRecentlySaved(false);
+ }, ICON_FLASH_TIME);
+
+ queryClient.invalidateQueries(["USER_INFO"]).then(() => setUpdatedSettings({}));
+ },
+ });
+
+ const resetInputsRef = useRef(null as HTMLInputElement | null);
+
+ const [recentlySaved, setRecentlySaved] = useState(false);
+ const iconFlashTimeout = useRef(0);
+
+ const [updatedSettings, setUpdatedSettings] = useState({} as UpdateUserInfo);
+
+ if (isError) {
+ return (
+
+ An error occurred loading user preferences
+
+ );
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+ );
+};