react Archives - blog.icod.de

Nach langer Zeit, in der ich meine Mutter pflegen musste und kaum dazu kam mich um mich selber zu kümmern, bin ich endlich wieder am arbeiten.
Um es so wage wie möglich auszudrücken, ich erstelle etwas, mit dem Verkäufer und Käufer zusammen kommen. 😉
Es macht echt unglaublich Spaß zu sehen wie etwas wächst und vorankommt, wenn man Hindernisse überwindet und es dann letztendlich funktioniert, auch wenn es nur 1 kleiner Aspekt von vielen ist.
Ich liebe das und ich arbeite gern daran.

Bei diversen Anstellungsverhältnissen könnte ich das nicht so, denn ich hätte nicht die Wahl des Tech Stacks.
Arbeiten mit Go und React und Relay/GraphQL macht einfach Spaß, kein Bullshit, einfach nur konkret an die Problemlösung.

Sollte es irgendwo einen Job geben, bei dem ich dafür gerechnet bezahlt würde und idealerweise remote arbeiten kann, bitte melden 🙂

#go #React #job #arbeit #spass

Playing with Flowbite React and their Datepicker component, I had data coming from the backend in this or similar form:

{
	"data": {
		"posts": {
			"edges": [
				{
					"node": {
						"id": "c57e4ea8-072e-4057-974f-bfb369504a57",
						"createdAt": "2024-10-24T12:21:20Z",
						"updatedAt": "2024-10-24T14:03:16Z",
						"title": "Jobangebot mit jemand ohne Namen",
						"body": "Dies ist ein Jobangebot von jemandem ohne Namen",
						"expires": true,
						"expireTime": "2024-10-31T23:00:00Z",
						"category": {
							"id": "df84950d-742b-4d07-9f11-04b8964bcb36",
							"title": "Jobangebote"
						},
						"profile": {
							"id": "0ce6ee59-4ebf-42cf-9c3a-69cf5e826b0b",
							"sub": "288686157058342913",
							"name": ""
						}
					}
				}
			]
		}
	}
}

{

"data": {

"posts": {

"edges": [

{

"node": {

"id": "c57e4ea8-072e-4057-974f-bfb369504a57",

"createdAt": "2024-10-24T12:21:20Z",

"updatedAt": "2024-10-24T14:03:16Z",

"title": "Jobangebot mit jemand ohne Namen",

"body": "Dies ist ein Jobangebot von jemandem ohne Namen",

"expires": true,

"expireTime": "2024-10-31T23:00:00Z",

"category": {

"id": "df84950d-742b-4d07-9f11-04b8964bcb36",

"title": "Jobangebote"

"profile": {

"id": "0ce6ee59-4ebf-42cf-9c3a-69cf5e826b0b",

"sub": "288686157058342913",

"name": ""

}

]

}

aka

"expireTime": "2024-10-31T23:00:00Z",

1	"expireTime": "2024-10-31T23:00:00Z",

React is a bit of a cringy special child. Angular, no problemo. Vue, no problemo.
Anyhow.

I have to set defaultValues in a React-hook-form form, because React is special with controlled and uncontrolled components.
aka

type AdminPostEditFormValues = {
    title: string,
    body: string,
    expires: boolean,
    expireTime: Date,
}
    const {control, handleSubmit, watch, formState: {errors}} = useForm<AdminPostEditFormValues>({
        defaultValues: {
            title: data?.posts?.edges[0]?.node?.title,
            body: data?.posts?.edges[0]?.node?.body,
            expires: data?.posts?.edges[0]?.node?.expires,
            expireTime: dayjs(data?.posts?.edges[0]?.node?.expireTime).toDate() || dayjs().toDate(),
        }
    })

type AdminPostEditFormValues = {

title: string,

body: string,

expires: boolean,

expireTime: Date,

}

const {control, handleSubmit, watch, formState: {errors}} = useForm<AdminPostEditFormValues>({

defaultValues: {

title: data?.posts?.edges[0]?.node?.title,

body: data?.posts?.edges[0]?.node?.body,

expires: data?.posts?.edges[0]?.node?.expires,

expireTime: dayjs(data?.posts?.edges[0]?.node?.expireTime).toDate() || dayjs().toDate(),

}

})

So, I’m using dayjs for my date/time stuff, and this line essentially means, parse the Date before assigning it to a form value (or create a new Date(), because React and controlled/uncontrolled forms is not a happy story).

            expireTime: dayjs(data?.posts?.edges[0]?.node?.expireTime).toDate() || dayjs().toDate(),

1	expireTime: dayjs(data?.posts?.edges[0]?.node?.expireTime).toDate() \|\| dayjs().toDate(),

TL;DR: Parse the date value coming from the backend into a Date object. e.g.

Date.parse("2024-10-31T23:00:00Z")

1	Date.parse("2024-10-31T23:00:00Z")

Tag: react

Nach langer Zeit wieder arbeiten

Kleinanzeigen Kreis Göppingen

Uncaught RangeError: date value is not finite in DateTimeFormat.format()