Seed Packet UI

[00:00:00]
>> Mike North: Next, let's turn our attention to the UI component that represents the back of the seed packet. And we're gonna open up SeedPacketBack.svelte. And you can see we've got a bunch of stuff here. I've already added expires at here. We could change this to Expires At to something like that.

[00:00:22]
What else is interesting on here? Planting distance. So we could add another little piece of UI here that's like planting distance. Is there already another one? Nope. So good distance. And this is always a number. So let's say it's always feet. And we should be able to go back.

[00:00:52]
We should be able to start our server. Then this should start to appear on the back of the seed packet. By start our server, I mean not just the types package, the actual whole monorepo run NPM run dev. Sorry, it takes a little second to come up. Interesting.

[00:01:24]
What's going on here? Looks like we have a validation failure here. So what we should do is look at those request response shapes and see if this data that we're threading through is in alignment with the API contract between these two types. This is Zod at runtime, keeping us honest.

[00:01:54]
And it's saying metadata plantingDistance. It's an invalid type like expected number, received object. Now the reason for this is if we look in our seed packet router, we've got planting distance here. And look at this. It's a distance object with a unit and a value. And what's expected is a number here, thankfully.

[00:02:24]
Yep, I've got a little helper function already built for us, convertDistanceToFeet. And if we hit save there, I suspect. Interesting, plantingDistance and daysToHarvest undefined. Wait, let's look at these carefully. New requests there. So expected number, received, undefined for days to harvest. Let's see if we can look at that one.

[00:02:54]
Days to harvest. We didn't wire this one through. Let's just set this to 30 or something. That took care of that one. And now expected number, received object for metadata planting distance. At this point, there's the response. Wait, what's going on here? Types of metadata.plantingDistance are incompatible. We've got.

[00:03:40]
All right, so it wants the full value there. Let's keep pulling at this. So that makes the type happy. Maybe it was just the other error that was in our way. Let's see. No. All right, let's track this down. So we are making this list packets response contract.

[00:04:11]
No, we're not making it happy yet. What's it telling us? Distance is not assignable to type number. It wants that to be a distance. Let me bump the TS server just to make sure. I feel like I'm getting conflicting information here. The types of metadata planting distance are incompatible.

[00:04:35]
Distance is not assignable to number. There's the distance. You know what we could do here? Satisfies SeedPacketMetadata, there. This is a great example of where the, satisfies, keyword is really helpful. It doesn't actually change the type like using the ADS keyword, but it does help sort of push this error in quite a bit lower.

[00:05:10]
Expected depth comes from property planning. Distance was declared here. Distance is not assignable to numbers, so it really does want a number. Is packet plantingDistance in the YAML? That's good question. No, I know what I'm doing here. Moving too fast. So all this function does is it. It normalizes the distance to feet.

[00:05:39]
So if we do value right, it still has a unit and a value here. So if we do value, this should make everything happy. Yep. And it does. So all we've done here is we've taken the planting distance, whatever it is, in centimeters or whatever, and we've converted it to an equivalent distance value object that is expressed in feet.

[00:06:04]
Then because our UI can operate purely within the dimension foot, we're just passing this back as a scalar and hopefully now when we turn this around. Yeah, we get two feet. And hard coding feet in there is appropriate now because part of the contract between the back end and the front end is we're always operating in terms of feet.

[00:06:27]
And we'll get into why in the next chapter.