diff --git a/README.md b/README.md index 195ca58..759d896 100644 --- a/README.md +++ b/README.md @@ -14,4 +14,4 @@ This also allows me to expand my frontend skills, which is relevant to part of m 1. Download the parent repo: https://gitea.jellypro.xyz/jude/reminder-bot 2. Initialise the submodules -3. Run both `npm start` and `cargo run` \ No newline at end of file +3. Run both `npm run dev` and `cargo run` \ No newline at end of file diff --git a/package.json b/package.json index 6ab721b..9c10fd6 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "private": true, "type": "module", "scripts": { - "dev": "vite", + "dev": "vite build --watch --mode development", "build": "vite build", "preview": "vite preview" }, diff --git a/src/api.ts b/src/api.ts index 2e745b1..463600a 100644 --- a/src/api.ts +++ b/src/api.ts @@ -89,7 +89,7 @@ export const fetchUserInfo = () => ({ }); export const patchUserInfo = () => ({ - mutationFn: (user: UserInfo) => axios.patch(`/dashboard/api/user`, user), + mutationFn: (timezone: string) => axios.patch(`/dashboard/api/user`, { timezone }), }); export const fetchUserGuilds = () => ({ diff --git a/src/components/App/TimezoneProvider.tsx b/src/components/App/TimezoneProvider.tsx new file mode 100644 index 0000000..46b696e --- /dev/null +++ b/src/components/App/TimezoneProvider.tsx @@ -0,0 +1,20 @@ +import { createContext } from "preact"; +import { useContext } from "preact/compat"; +import { useState } from "preact/hooks"; +import { SystemZone } from "luxon"; + +type TTimezoneContext = [string, (tz: string) => void]; + +const TimezoneContext = createContext(["UTC", () => {}] as TTimezoneContext); + +export const TimezoneProvider = ({ children }) => { + const [timezone, setTimezone] = useState(SystemZone.name); + + return ( + + {children} + + ); +}; + +export const useTimezone = () => useContext(TimezoneContext); diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx index dbdbb2f..f84c98e 100644 --- a/src/components/App/index.tsx +++ b/src/components/App/index.tsx @@ -4,27 +4,30 @@ import { Route, Router, Switch } from "wouter"; import { Welcome } from "../Welcome"; import { Guild } from "../Guild"; import { FlashProvider } from "./FlashProvider"; +import { TimezoneProvider } from "./TimezoneProvider"; export function App() { const queryClient = new QueryClient(); return ( - - - -
- -
- - - - - - + + + + +
+ +
+ + + + + + +
-
- - - + + + + ); } diff --git a/src/components/Reminder/Embed/Fields/Field.tsx b/src/components/Reminder/Embed/Fields/Field.tsx new file mode 100644 index 0000000..ee9749e --- /dev/null +++ b/src/components/Reminder/Embed/Fields/Field.tsx @@ -0,0 +1,55 @@ +export const Field = ({ title, value, inlined, index, onUpdate }) => { + return ( +
+ +
+ + +
+ + + +
+ ); +}; diff --git a/src/components/Reminder/Embed/Fields/index.tsx b/src/components/Reminder/Embed/Fields/index.tsx new file mode 100644 index 0000000..114612c --- /dev/null +++ b/src/components/Reminder/Embed/Fields/index.tsx @@ -0,0 +1,37 @@ +import { useReminder } from "../../ReminderContext"; +import { Field } from "./Field"; + +export const Fields = () => { + const [{ embed_fields }, setReminder] = useReminder(); + + return ( +
+ {[...embed_fields, { value: "", title: "", inlined: true }].map((field, index) => ( + { + setReminder((reminder) => ({ + ...reminder, + embed_fields: [ + ...reminder.embed_fields, + { value: "", title: "", inlined: true }, + ] + .map((f, i) => { + if (i === index) { + return { + ...f, + ...props, + }; + } else { + return f; + } + }) + .filter((f) => f.value || f.title), + })); + }} + > + ))} +
+ ); +}; diff --git a/src/components/Reminder/Embed/index.tsx b/src/components/Reminder/Embed/index.tsx index 50e82f0..4397995 100644 --- a/src/components/Reminder/Embed/index.tsx +++ b/src/components/Reminder/Embed/index.tsx @@ -3,6 +3,7 @@ import { Title } from "./Title"; import { Description } from "./Description"; import { Footer } from "./Footer"; import { Color } from "./Color"; +import { Fields } from "./Fields"; import { Reminder } from "../../../api"; import { ImagePicker } from "../ImagePicker"; import { useReminder } from "../ReminderContext"; @@ -55,37 +56,7 @@ export const Embed = () => { >

-
-
- -
- - -
- - - -
-
+
diff --git a/src/components/TimezonePicker/index.tsx b/src/components/TimezonePicker/index.tsx index df0398e..ae1ed8f 100644 --- a/src/components/TimezonePicker/index.tsx +++ b/src/components/TimezonePicker/index.tsx @@ -1,8 +1,9 @@ -import { DateTime } from "luxon"; -import { useQuery } from "react-query"; -import { fetchUserInfo } from "../../api"; +import { DateTime, SystemZone } from "luxon"; +import { useMutation, useQuery, useQueryClient } from "react-query"; +import { fetchUserInfo, patchUserInfo } from "../../api"; import { Modal } from "../Modal"; import { useState } from "preact/hooks"; +import { useTimezone } from "../App/TimezoneProvider"; type DisplayProps = { timezone: string; @@ -51,15 +52,23 @@ export const TimezonePicker = () => { }; const TimezoneModal = ({ setModalOpen }) => { - const browserTimezone = DateTime.now().zone.name; + const browserTimezone = SystemZone.name; + const [selectedZone, setSelectedZone] = useTimezone(); + const queryClient = useQueryClient(); const { isLoading, isError, data } = useQuery(fetchUserInfo()); + const userInfoMutation = useMutation({ + ...patchUserInfo(), + onSuccess: () => { + queryClient.invalidateQueries(["USER_INFO"]); + }, + }); return (

Your configured timezone is:{" "} - +



Your browser timezone is:{" "} @@ -78,19 +87,37 @@ const TimezoneModal = ({ setModalOpen }) => {



- - -