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

Prop drilling

Browse Source
This commit is contained in:
jude
2023-10-30 20:31:07 +00:00
parent 3372933044
commit 0f259824fc
6 changed files with 100 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/EditReminder/Content.tsx
View File

@@ -1,4 +1,4 @@
export const Content = ({ value }) => (
export const Content = ({ value, onChange }) => (
<>
<label class="is-sr-only">Content</label>
<textarea
@@ -8,6 +8,9 @@ export const Content = ({ value }) => (
name="content"
rows={1}
value={value}
onChange={(ev) => {
onChange(ev.currentTarget.value);
}}
></textarea>
</>
);

5
src/components/EditReminder/Embed/Description.tsx
View File

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

5
src/components/EditReminder/Embed/Title.tsx
View File

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

42
src/components/EditReminder/Embed/index.tsx
View File

@@ -3,17 +3,51 @@ import { Title } from "./Title";
import { Description } from "./Description";
import { Footer } from "./Footer";
import { Color } from "./Color";
import { Reminder } from "../../../api";
export const Embed = ({ reminder }) => {
type Props = {
reminder: Reminder;
setReminder: (reminder: Reminder) => {};
};
function colorToInt(hex: string) {
return parseInt(hex.substring(1), 16);
}
export const Embed = ({ reminder, setReminder }) => {
return (
<div class="discord-embed">
<div class="embed-body">
<Color color={reminder.embed_color} onChange={() => {}}></Color>
<Color
color={reminder.embed_color}
onChange={(color: string) => {
setReminder((reminder: Reminder) => ({
...reminder,
embed_color: colorToInt(color),
}));
}}
></Color>
<div class="a">
<Author name={reminder.embed_author} icon={reminder.embed_author_url}></Author>
<Title title={reminder.embed_title}></Title>
<Title
title={reminder.embed_title}
onChange={(title: string) =>
setReminder((reminder: Reminder) => ({
...reminder,
embed_title: title,
}))
}
></Title>
<br></br>
<Description description={reminder.embed_description}></Description>
<Description
description={reminder.embed_description}
onChange={(description: string) =>
setReminder((reminder: Reminder) => ({
...reminder,
embed_description: description,
}))
}
></Description>
<br></br>
<div class="embed-multifield-box">

29
src/components/EditReminder/Username.tsx
View File

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

38
src/components/EditReminder/index.tsx
View File

@@ -9,13 +9,15 @@ import { ChannelSelector } from "./ChannelSelector";
import { useState } from "preact/hooks";
import { IntervalSelector } from "./IntervalSelector";
import { Embed } from "./Embed";
import { DateTime } from "luxon";
type Props = {
reminder: Reminder;
};
export const EditReminder = ({ reminder }: Props) => {
export const EditReminder = ({ reminder: initialReminder }: Props) => {
const { guild } = useParams();
const [reminder, setReminder] = useState(initialReminder);
const [
{ isSuccess: channelsFetched, data: guildChannels },
@@ -75,9 +77,25 @@ export const EditReminder = ({ reminder }: Props) => {
</figure>
<div class="media-content">
<div class="content">
<Username value={reminder.username}></Username>
<Content value={reminder.content}></Content>
<Embed reminder={reminder}></Embed>
<Username
value={reminder.username}
onChange={(username: string) => {
setReminder((reminder) => ({
...reminder,
username,
}));
}}
></Username>
<Content
value={reminder.content}
onChange={(content: string) => {
setReminder((reminder) => ({
...reminder,
content,
}));
}}
></Content>
<Embed reminder={reminder} setReminder={setReminder}></Embed>
</div>
</div>
</article>
@@ -101,7 +119,17 @@ export const EditReminder = ({ reminder }: Props) => {
type="datetime-local"
step="1"
name="time"
value={reminder.utc_time.toFormat("yyyy-LL-dd'T'HH:mm:ss")}
value={reminder.utc_time
.toLocal()
.toFormat("yyyy-LL-dd'T'HH:mm:ss")}
onChange={(ev) => {
setReminder((reminder) => ({
...reminder,
utc_time: DateTime.fromISO(
ev.currentTarget.value,
).toUTC(),
}));
}}
></input>
</label>
</div>