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 ( + +
    + +
    +

    +
    + +
    +
    + ); +};