feat(admin-ui): added possibility to add draws, minor text color chan… #100
Conversation
| @@ -19,7 +19,7 @@ const Welcome = () => { | |||
| <h1 className="text-3xl font-bold tracking-tighter md:text-5xl"> | |||
| Velkommen til Tjørhomfjellet | |||
| </h1> | |||
| <p className="max-w-[600px] text-gray-500 dark:text-gray-400 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed"> | |||
| <p className="max-w-[600px] text-gray-100 dark:text-gray-100 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed"> | |||
There was a problem hiding this comment.
There is no need to list it twice if it is the same color in light and dark mode.
| <label className="w-32 rounded bg-[#354A71] p-1 text-center"> | ||
| Deadline from | ||
| </label> | ||
| <input | ||
| className="w-56 rounded bg-white p-1 text-justify text-black" | ||
| type="date" | ||
| value={draw?.deadlineStart} | ||
| name="deadlineStart" | ||
| id="deadlineStart" | ||
| onChange={handleChangePeriod} | ||
| /> |
There was a problem hiding this comment.
Consider removing the deadline from field from the UI. Set it to the current day.
At least, let's give it a name that fits better, like open for booking or something.
| [e.target.name]: e.target.value, | ||
| isSpecial, |
There was a problem hiding this comment.
Potentially setting isSpecial twice?
| <label className="w-full rounded bg-[#354A71] p-1 text-center"> | ||
| <hr /> | ||
| </label> | ||
| {draw?.drawPeriods?.map((date, key) => { |
There was a problem hiding this comment.
Use the name index instead of key.
| const addToDrawPeriods = (e, key) => { | ||
| const { name, value } = e.target; | ||
| const addTextToPeriodDraw = draw?.drawPeriods?.map((date, index) => { | ||
| if (index === key) { | ||
| return { | ||
| ...date, | ||
| [name]: value, | ||
| }; | ||
| } | ||
| return date; | ||
| }, []); | ||
| setDraw({ | ||
| ...draw, | ||
| drawPeriods: addTextToPeriodDraw, | ||
| }); | ||
| }; | ||
|
|
||
| const addTitleToDrawPeriods = (value: string, key: number) => { | ||
| const addTextToPeriodDraw = draw?.drawPeriods?.map((date, index) => { | ||
| if (index === key) { | ||
| return { | ||
| ...date, | ||
| title: value, | ||
| }; | ||
| } | ||
| return date; | ||
| }, []); | ||
| setDraw({ | ||
| ...draw, | ||
| drawPeriods: addTextToPeriodDraw, | ||
| }); | ||
| }; | ||
|
|
||
| const addDrawPeriods = () => { | ||
| setDraw({ | ||
| ...draw, | ||
| drawPeriods: [...draw.drawPeriods, { start: "", end: "", title: "" }], | ||
| }); | ||
| }; |
There was a problem hiding this comment.
I think we could simplify the state-getting and setting logic. But we can refactor it later.
| import { useState } from "react"; | ||
| import { DrawService } from "../../api/services/DrawService"; | ||
|
|
||
| const NewPeriodView = () => { |
There was a problem hiding this comment.
Consider showing this as its own page.
Also, think about combining creating and editing of a draw as one page. - the logic should be quite similar for both operations
i did stuff