jude/reminder-dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Replace onChange with onInput

Browse Source
This commit is contained in:
jude
2023-11-04 23:05:44 +00:00
parent 362b836dc6
commit b7d5d7d32c
14 changed files with 268 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Modal/index.tsx
View File

@ -31,7 +31,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" onChange={onSubmit}>
<button class="button is-success" onInput={onSubmit}>
{onSubmitText || "Save"}
</button>
<button

24
src/components/Reminder/ChannelSelector.tsx
View File

@ -1,18 +1,34 @@
import { useQuery } from "react-query";
import { QueryKeys } from "../../consts";
import { useParams } from "wouter";
import { fetchGuildChannels } from "../../api";
import { useReminder } from "./ReminderContext";
export const ChannelSelector = ({ channel }) => {
export const ChannelSelector = () => {
const { guild } = useParams();
const [reminder, setReminder] = useReminder();
const { isSuccess, data } = useQuery(fetchGuildChannels(guild));
return (
<div class="control has-icons-left">
<div class="select">
<select name="channel" class="channel-selector" value={channel}>
{isSuccess && data.map((c) => <option value={c.id}>{c.name}</option>)}
<select
name="channel"
class="channel-selector"
onInput={(ev) => {
setReminder((reminder) => ({
...reminder,
channel: ev.currentTarget.value,
}));
}}
>
{isSuccess &&
data.map((c) => (
<option value={c.id} selected={c.id === reminder.channel}>
{c.name}
</option>
))}
</select>
</div>
<div class="icon is-small is-left">

41
src/components/Reminder/Content.tsx
View File

@ -1,16 +1,25 @@
export const Content = ({ value, onChange }) => (
<>
<label class="is-sr-only">Content</label>
<textarea
class="message-input autoresize discord-content"
placeholder="Content..."
maxlength={2000}
name="content"
rows={1}
value={value}
onChange={(ev) => {
onChange(ev.currentTarget.value);
}}
></textarea>
</>
);
import { useReminder } from "./ReminderContext";
export const Content = () => {
const [reminder, setReminder] = useReminder();
return (
<>
<label class="is-sr-only">Content</label>
<textarea
class="message-input autoresize discord-content"
placeholder="Content..."
maxlength={2000}
name="content"
rows={1}
value={reminder.content}
onInput={(ev) => {
setReminder((reminder) => ({
...reminder,
content: ev.currentTarget.value,
}));
}}
></textarea>
</>
);
};

2
src/components/Reminder/Embed/Author.tsx
View File

@ -37,7 +37,7 @@ export const Author = ({ name, icon, setReminder }: Props) => {
maxlength={256}
name="embed_author"
value={name}
onChange={(ev) => {
onInput={(ev) => {
setReminder((reminder) => ({
...reminder,
embed_author: ev.currentTarget.value,

4
src/components/Reminder/Embed/Color.tsx
View File

@ -43,7 +43,7 @@ const ColorModal = ({ setModalOpen, color, setReminder }) => {
<div class="colorpicker-container">
<HexColorPicker
color={color}
onChange={(color) => {
onInput={(color) => {
setReminder((reminder) => ({
...reminder,
embed_color: colorToInt(color),
@ -56,7 +56,7 @@ const ColorModal = ({ setModalOpen, color, setReminder }) => {
class="input"
id="colorInput"
value={color}
onChange={(ev) => {
onInput={(ev) => {
setReminder((reminder) => ({
...reminder,
embed_color: colorToInt(ev.currentTarget.value),

6
src/components/Reminder/Embed/Description.tsx
View File

@ -1,4 +1,4 @@
export const Description = ({ description, onChange }) => (
export const Description = ({ description, onInput }) => (
<>
<label class="is-sr-only" for="embedDescription">
Embed Description
@ -10,8 +10,8 @@ export const Description = ({ description, onChange }) => (
name="embed_description"
rows={1}
value={description}
onChange={(ev) => {
onChange(ev.currentTarget.value);
onInput={(ev) => {
onInput(ev.currentTarget.value);
}}
></textarea>
</>

2
src/components/Reminder/Embed/Footer.tsx
View File

@ -32,7 +32,7 @@ export const Footer = ({ footer, icon, setReminder }: Props) => (
name="embed_footer"
rows={1}
value={footer}
onChange={(ev) => {
onInput={(ev) => {
setReminder((reminder) => ({
...reminder,
embed_footer: ev.currentTarget.value,

6
src/components/Reminder/Embed/Title.tsx
View File

@ -1,4 +1,4 @@
export const Title = ({ title, onChange }) => (
export const Title = ({ title, onInput }) => (
<>
<label class="is-sr-only" for="embedTitle">
Embed Title
@ -10,8 +10,8 @@ export const Title = ({ title, onChange }) => (
rows={1}
name="embed_title"
value={title}
onChange={(ev) => {
onChange(ev.currentTarget.value);
onInput={(ev) => {
onInput(ev.currentTarget.value);
}}
></textarea>
</>

4
src/components/Reminder/Embed/index.tsx
View File

@ -33,7 +33,7 @@ export const Embed = ({ reminder, setReminder }) => {
></Author>
<Title
title={reminder.embed_title}
onChange={(title: string) =>
onInput={(title: string) =>
setReminder((reminder: Reminder) => ({
...reminder,
embed_title: title,
@ -43,7 +43,7 @@ export const Embed = ({ reminder, setReminder }) => {
<br></br>
<Description
description={reminder.embed_description}
onChange={(description: string) =>
onInput={(description: string) =>
setReminder((reminder: Reminder) => ({
...reminder,
embed_description: description,

2
src/components/Reminder/ImagePicker.tsx
View File

@ -40,7 +40,7 @@ const ImagePickerModal = ({ setModalOpen, setImage }) => {
class="input"
id="urlInput"
placeholder="Image URL..."
onChange={(ev) => {
onInput={(ev) => {
setValue(ev.currentTarget.value);
}}
></input>

12
src/components/Reminder/Message.tsx
View File

@ -29,22 +29,14 @@ export const Message = () => {
<div class="content">
<Username
value={reminder.username}
onChange={(username: string) => {
onInput={(username: string) => {
setReminder((reminder) => ({
...reminder,
username,
}));
}}
></Username>
<Content
value={reminder.content}
onChange={(content: string) => {
setReminder((reminder) => ({
...reminder,
content,
}));
}}
></Content>
<Content />
<Embed reminder={reminder} setReminder={setReminder}></Embed>
</div>
</div>

4
src/components/Reminder/Settings.tsx
View File

@ -22,7 +22,7 @@ export const Settings = () => {
Channel*
</label>
</div>
<ChannelSelector channel={reminder.channel}></ChannelSelector>
<ChannelSelector />
</div>
<div class="field">
@ -35,7 +35,7 @@ export const Settings = () => {
step="1"
name="time"
value={reminder.utc_time.toLocal().toFormat("yyyy-LL-dd'T'HH:mm:ss")}
onChange={(ev) => {
onInput={(ev) => {
setReminder((reminder) => ({
...reminder,
utc_time: DateTime.fromISO(ev.currentTarget.value).toUTC(),

6
src/components/Reminder/Username.tsx
View File

@ -1,4 +1,4 @@
export const Username = ({ value, onChange }) => {
export const Username = ({ value, onInput }) => {
return (
<div class="discord-message-header">
<label class="is-sr-only">Username Override</label>
@ -8,8 +8,8 @@ export const Username = ({ value, onChange }) => {
maxlength={32}
name="username"
value={value}
onChange={(ev) => {
onChange(ev.currentTarget.value);
onInput={(ev) => {
onInput(ev.currentTarget.value);
}}
></input>
</div>