Fix color picker not working

reminder-dashboard/package-lock.json

@@ -13,6 +13,7 @@
 				"react-colorful": "^5.6.1",
 				"react-query": "^3.39.3",
 				"tributejs": "^5.1.3",
+				"use-debounce": "^10.0.0",
 				"wouter": "^3.0"
 			},
 			"devDependencies": {
@@ -5206,6 +5207,17 @@
 				"punycode": "^2.1.0"
 			}
 		},
+		"node_modules/use-debounce": {
+			"version": "10.0.0",
+			"resolved": "https://registry.npmjs.org/use-debounce/-/use-debounce-10.0.0.tgz",
+			"integrity": "sha512-XRjvlvCB46bah9IBXVnq/ACP2lxqXyZj0D9hj4K5OzNroMDpTEBg8Anuh1/UfRTRs7pLhQ+RiNxxwZu9+MVl1A==",
+			"engines": {
+				"node": ">= 16.0.0"
+			},
+			"peerDependencies": {
+				"react": ">=16.8.0"
+			}
+		},
 		"node_modules/use-sync-external-store": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",

reminder-dashboard/package.json

@@ -16,6 +16,7 @@
 		"react-colorful": "^5.6.1",
 		"react-query": "^3.39.3",
 		"tributejs": "^5.1.3",
+		"use-debounce": "^10.0.0",
 		"wouter": "^3.0"
 	},
 	"devDependencies": {

reminder-dashboard/src/components/Modal/index.tsx

@@ -1,5 +1,5 @@
-import { JSX } from "preact";
+import {JSX} from "preact";
-import { createPortal } from "preact/compat";
+import {createPortal} from "preact/compat";
 
 type Props = {
     setModalOpen: (open: boolean) => never;
@@ -9,7 +9,7 @@ type Props = {
     children: string | JSX.Element | JSX.Element[] | (() => JSX.Element);
 };
 
-export const Modal = ({ setModalOpen, title, onSubmit, onSubmitText, children }: Props) => {
+export const Modal = ({setModalOpen, title, onSubmit, onSubmitText, children}: Props) => {
     const body = document.querySelector("body");
 
     return createPortal(
@@ -34,7 +34,7 @@ export const Modal = ({ setModalOpen, title, onSubmit, onSubmitText, children }:
                 <section class="modal-card-body">{children}</section>
                 {onSubmit && (
                     <footer class="modal-card-foot">
-                        <button class="button is-success" onInput={onSubmit}>
+                        <button class="button is-success" onClick={onSubmit}>
                             {onSubmitText || "Save"}
                         </button>
                         <button

reminder-dashboard/src/components/Reminder/Embed/Author.tsx

@@ -16,7 +16,7 @@ export const Author = ({ name, icon, setReminder }: Props) => {
                         class="is-rounded embed_author_url"
                         url={icon}
                         alt="Image for embed author"
-                        setImage={(url) => {
+                        setImage={(url: string) => {
                             setReminder((reminder) => ({
                                 ...reminder,
                                 embed_author_url: url,

reminder-dashboard/src/components/Reminder/Embed/Color.tsx

@@ -1,7 +1,8 @@
-import { useState } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 import { HexColorPicker } from "react-colorful";
 import { Modal } from "../../Modal";
 import { Reminder } from "../../../api";
+import { useDebouncedCallback } from "use-debounce";
 
 type Props = {
     color: string;
@@ -38,16 +39,20 @@ export const Color = ({ color, setReminder }: Props) => {
 };
 
 const ColorModal = ({ setModalOpen, color, setReminder }) => {
+    const setDebounced = useDebouncedCallback((color) => {
+        setReminder((reminder: Reminder) => ({
+            ...reminder,
+            embed_color: colorToInt(color),
+        }));
+    }, 100);
+
     return (
         <Modal setModalOpen={setModalOpen} title={"Select Color"}>
             <div class="colorpicker-container">
                 <HexColorPicker
                     color={color}
-                    onInput={(color) => {
+                    onChange={(color: string) => {
-                        setReminder((reminder) => ({
+                        setDebounced(color);
-                            ...reminder,
-                            embed_color: colorToInt(color),
-                        }));
                     }}
                 ></HexColorPicker>
             </div>
@@ -57,10 +62,7 @@ const ColorModal = ({ setModalOpen, color, setReminder }) => {
                 id="colorInput"
                 value={color}
                 onInput={(ev) => {
-                    setReminder((reminder) => ({
+                    setDebounced(ev.currentTarget.value);
-                        ...reminder,
-                        embed_color: colorToInt(ev.currentTarget.value),
-                    }));
                 }}
             ></input>
         </Modal>

reminder-dashboard/src/components/Reminder/Embed/index.tsx

@@ -65,7 +65,12 @@ export const Embed = () => {
                             class="embed_thumbnail_url"
                             url={reminder.embed_thumbnail_url}
                             alt="Square thumbnail embedded image"
-                            setImage={() => {}}
+                            setImage={(url: string) =>
+                                setReminder((reminder: Reminder) => ({
+                                    ...reminder,
+                                    embed_thumbnail_url: url || null,
+                                }))
+                            }
                         />
                     </p>
                 </div>
@@ -76,7 +81,12 @@ export const Embed = () => {
                     class="embed_image_url"
                     url={reminder.embed_image_url}
                     alt="Large embedded image"
-                    setImage={() => {}}
+                    setImage={(url: string) =>
+                        setReminder((reminder: Reminder) => ({
+                            ...reminder,
+                            embed_image_url: url || null,
+                        }))
+                    }
                 />
             </p>
 

reminder-dashboard/src/components/Reminder/ImagePicker.tsx

@@ -33,6 +33,7 @@ const ImagePickerModal = ({ setModalOpen, setImage }) => {
             title={"Enter Image URL"}
             onSubmit={() => {
                 setImage(value);
+                setModalOpen(false);
             }}
             onSubmitText={"Save"}
         >