FancyDatePicker with Input

[chiaberry]

I’ve added the React-Day-Picker input form to have the calendar appear to pick a day. Currently all days are options to be picked, but that can be changed.

http://react-day-picker.js.org/Input.html

I don’t understand why my “set to today” button isn’t working.

[nsfmc]

in retrospect i sort of misled you about how to name props, you can name them whatever and it doesn't matter, but the convention is that components that wrap an input should just ape the input's props so that you don't have to think about it much later on (i.e. FancyInput should have an onClick prop instead of a handleSubmit prop.

BUT the idea is that if you have some component and it has a single click handler, that class method should be called handleClick.

In our case though, we have a bunch of highly specific handlers for all sorts of things, but it's still handy to call them things like handleDayChange and so forth because that's what they are responsible for and it's a nice enough convention. This doesn't mean we need to rename all the fancy props (although we could) but it's just how people handle things in the world.

[nsfmc]

yes, sorry, this got lost. it does go there!

this is partly why typing the props is useful, like

type FancyDatePickerProps: { value: string, handleDayChange: () => void, brewDate: string, name: string, }

at the boundary of the FancyDatePicker these values are the only thing you need to customize the behavior (because you will supply hardcoded props to the actual DayPickerInput)

and all the point of this component is to hide to anyone that you use DayPickerInput. So a bunch of those props values pass through into that specific component but only because it just so happens that you share the same interface (at least, in react the Props are the interface to every component)

lemme know what you think.

On Wed, Jul 26, 2017 at 3:53 PM, Chia Berry notifications@github.com wrote:

@chiaberry commented on this pull request.

In src/components/brew-input.js https://github.com/studiosnack/brews-clues/pull/29#discussion_r129716407 :

@@ -16,18 +16,18 @@ const FirstPanel = (props) => { <FancyDropdown label="Brew Method " name="brewMethod" handleChange={props.handleChange} options={testEquip} />

• <FancyInput label="Brew Date" name="brewDate" handleChange={props.handleChange}
• value={props.brewDate} />
• <FancyButton name="dateButton"
• handleSubmit={props.setDateToday}
• //handleSubmit={()=>console.log("date")}
• buttonText="Set Date to Today"/>
• <FancyDayPickerInput
• label="Brew Date"
• name="brewDate"
• placeholder={props.brewDate}
• onDayChange={props.handleDayChange}
• />

Hi, long time no see. But I'm wondering where do I put in value={props.value}?

[image: screen shot 2017-07-26 at 5 44 45 pm] https://user-images.githubusercontent.com/12474808/28647198-3e612820-722b-11e7-94f6-21b44b8f7c54.png

Not in DayPickerInput right? but outside of it?

— You are receiving this because your review was requested. Reply to this email directly, view it on GitHub https://github.com/studiosnack/brews-clues/pull/29#discussion_r129716407, or mute the thread https://github.com/notifications/unsubscribe-auth/AANN_LRT51wvUq1p3aQZ09xQzpSTnlZHks5sR8N3gaJpZM4N0tBJ .