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
Show Stats 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> <label class="is-sr-only">Content</label>
<textarea <textarea
@ -8,6 +8,9 @@ export const Content = ({ value }) => (
name="content" name="content"
rows={1} rows={1}
value={value} value={value}
onChange={(ev) => {
onChange(ev.currentTarget.value);
}}
></textarea> ></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"> <label class="is-sr-only" for="embedDescription">
Embed Description Embed Description
@ -10,6 +10,9 @@ export const Description = ({ description }) => (
name="embed_description" name="embed_description"
rows={1} rows={1}
value={description} value={description}
onChange={(ev) => {
onChange(ev.currentTarget.value);
}}
></textarea> ></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"> <label class="is-sr-only" for="embedTitle">
Embed Title Embed Title
@ -10,6 +10,9 @@ export const Title = ({ title }) => (
rows={1} rows={1}
name="embed_title" name="embed_title"
value={title} value={title}
onChange={(ev) => {
onChange(ev.currentTarget.value);
}}
></textarea> ></textarea>
</> </>
); );

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

@ -3,17 +3,51 @@ import { Title } from "./Title";
import { Description } from "./Description"; import { Description } from "./Description";
import { Footer } from "./Footer"; import { Footer } from "./Footer";
import { Color } from "./Color"; 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 ( return (
<div class="discord-embed"> <div class="discord-embed">
<div class="embed-body"> <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"> <div class="a">
<Author name={reminder.embed_author} icon={reminder.embed_author_url}></Author> <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> <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> <br></br>
<div class="embed-multifield-box"> <div class="embed-multifield-box">

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

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

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

@ -9,13 +9,15 @@ import { ChannelSelector } from "./ChannelSelector";
import { useState } from "preact/hooks"; import { useState } from "preact/hooks";
import { IntervalSelector } from "./IntervalSelector"; import { IntervalSelector } from "./IntervalSelector";
import { Embed } from "./Embed"; import { Embed } from "./Embed";
import { DateTime } from "luxon";
type Props = { type Props = {
reminder: Reminder; reminder: Reminder;
}; };
export const EditReminder = ({ reminder }: Props) => { export const EditReminder = ({ reminder: initialReminder }: Props) => {
const { guild } = useParams(); const { guild } = useParams();
const [reminder, setReminder] = useState(initialReminder);
const [ const [
{ isSuccess: channelsFetched, data: guildChannels }, { isSuccess: channelsFetched, data: guildChannels },
@ -75,9 +77,25 @@ export const EditReminder = ({ reminder }: Props) => {
</figure> </figure>
<div class="media-content"> <div class="media-content">
<div class="content"> <div class="content">
<Username value={reminder.username}></Username> <Username
<Content value={reminder.content}></Content> value={reminder.username}
<Embed reminder={reminder}></Embed> 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>
</div> </div>
</article> </article>
@ -101,7 +119,17 @@ export const EditReminder = ({ reminder }: Props) => {
type="datetime-local" type="datetime-local"
step="1" step="1"
name="time" 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> ></input>
</label> </label>
</div> </div>