Compare commits

...

2 Commits

Author SHA1 Message Date
jude
bae0551895 Fix color picker not working 2024-02-28 21:16:24 +00:00
jude
cfb498794f Fix images not setting properly 2024-02-28 16:58:44 +00:00
6 changed files with 39 additions and 13 deletions

View File

@ -13,6 +13,7 @@
"react-colorful": "^5.6.1", "react-colorful": "^5.6.1",
"react-query": "^3.39.3", "react-query": "^3.39.3",
"tributejs": "^5.1.3", "tributejs": "^5.1.3",
"use-debounce": "^10.0.0",
"wouter": "^3.0" "wouter": "^3.0"
}, },
"devDependencies": { "devDependencies": {
@ -5206,6 +5207,17 @@
"punycode": "^2.1.0" "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": { "node_modules/use-sync-external-store": {
"version": "1.2.0", "version": "1.2.0",
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",

View File

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

View File

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

View File

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

View File

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

View File

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