Add Function Components Example

[yoroshikun]

Description

Simple ToDo Web App using function components and hooks

Fixes #2072

Checklist

• I have run cargo make pr-flow
• I have reviewed my own code

TODO Before ready

• Split components into own function components (Input, todo item)
• Split logic into separate file
• Add filtering (use_state and use_effect use case example?)
• Add persistence (gloo_storage)
• Removal of redundant code
• Review use of feather icons
• Final code cleanup

[mc1098]

🙏 I'm sorry; I think the TodoMVC https://todomvc.com/ has a standard style to it - also I do want the todo examples to be 1 to 1 with the only difference being the struct style approach and the function component approach.

I did just start up your version and I do quite like the style, always more of a dark theme person myself :)

[mc1098]

A few changes suggested but its mostly polish and performance tips - the todo application works well 🎉 I like how its been broken up into smaller components and was nice to see the "pure" footer component.

I'm seeing a pattern with cloning the output of hooks here and I just want to touch upon it. So often when we are cloning something like the UseStateHandle we do so because we are sending it to a Callback that must live for some unknown period of time and therefore we want it to be 'static. There are times, like getting the completed count where you can borrow the UseReducerHandle (state variable in this case) for a known and short period of time to build up some separate result and in these cases you don't have to clone the handle - you borrow and use it and then give it back for the following code to use.

Pull request has been modified.

[mc1098]

A few more suggestions some of which are optional or just pointing out certain things :)
So nearly there and sorry it's been taking me a bit longer to review these changes because I'm playing with things and tweaking impls and thinking about whether there are changes yew could make to make this all smoother.

Pull request has been modified.

[mc1098]

Mostly minor touches now.
I want a comment to explain that custom hook, otherwise we are going to have to keep explaining it in Discord for new yew users. The custom hook adds a bit of complexity but IMO is worth it, as it demonstrates implementing a raw custom hook which is not trivial :)

Not sure if you've skimmed over this at all @siku2 but I think this is the final round of review before I give it the green light - do you have anything to add to this review?

[siku2]

@mc1098 yeah I think this is pretty much good to go.
One thing that appears to be missing is the entry in the examples table in examples/README.md.

[siku2]

Funky formatting?

Pull request has been modified.

[mc1098]

Expanding a bit on that comment but thats it.

[mc1098]

We made it 🎉

Sorry for being so picky at points, part of it was some exploring of the hooks and function component API on my part too :)
Any feedback on function components or hooks in general then ofc feel free to either mention it here or create an issue going into what you felt worked and didn't work and what was clumsy. :)

Thank you for all the hard work ❤️