Modify the SearchForm component so that it stores input in the local state

griffobeid commented 6 years ago

Thank you for your help ❤️

What is this project?

DAV (Decentralized Autonomous Vehicles) is a new non-profit foundation working to build an open-source infrastructure for autonomous vehicles (cars, drones, trucks, robots, and all the service providers around them) to communicate and transact with each other over blockchain.

As an organization that believes in building a large community of open-source contributors, we often create issues like this one to help people take their first few steps into the world of open source.

Xplore

The DAV project you are looking at is Xplore. Xplore is a blockchain explorer you can run on your machine to explore local Ethereum nodes on your machine. It is used by developers working with DAV's libraries to ease development and see how the blockchain is affected by their work.

How you can help

The Issue

Currently, the search form at the top of the page is not functional. When attempting to type something in no text appears. To fix this issue modify the Field attribute in SearchForm.jsx so that it can accept input and the input is stored in the local state of the component.

Contributing to Xplore

[ ] Make sure this issue is labeled up-for-grabs and not labeled claimed, to verify no one else is working on it.
[ ] Comment in this issue that you would like to do it.
[ ] Open the Xplore GitHub page and click the ★ Star and then ⑂ Fork buttons.
[ ] Clone a copy to your local machine with $ git clone git@github.com:YOUR-GITHUB-USER-NAME/xplore.git
[ ] Visit the contributing guidelines for help getting started.
[ ] Code, code, code...
[ ] Once you've made sure all your changes work correctly and committed all your changes, push your local changes back to github with $ git push -u origin master
[ ] Visit your fork on GitHub.com (https://github.com/YOUR-USER-NAME/xplore) and create a pull request for your changes.
[ ] Make sure your pull request describes exactly what you changed and references this issue (include the issue number in the title like this: #5)
[ ] Please do not fix more than one issue at a time. Your pull request should only fix what is described in this issue.

Asking for help

We appreciate your effort in taking the time to work on this issue and help out the open source community and the foundation. If you need any help, feel free to ask below or in our gitter channel. We are always happy to help 😄

ghost commented 6 years ago

Hi, I'd like to work on this (:

griffobeid commented 6 years ago

For sure, @adiconstante. Thanks!

ghost commented 6 years ago

Here's what I have for this fix but there are two issues.

The value of the field won't change
Field loses focus after the first onChange so state only stores the last letter entered

constructor(props){ super(props); this.state = {value: ''}; this.handleChange = this.handleChange.bind(this); } handleChange(event){ this.setState({value: event.target.value}); return; }

TalAter commented 6 years ago

@adiconstante Did you set the value of the form field to what is in the state? Check this link out for help: https://reactjs.org/docs/forms.html

ghost commented 6 years ago

I did. I have it like so <Field name="search" placeholder="Search by Tx Hash / Block # / Address" component="input" type="text" onChange={this.handleChange} value={this.state.value} />

TalAter commented 6 years ago

@adiconstante it is a bit hard to help you solve this without seeing the entire code. Can you either place the entire code you added in a gist, or send a pull request (being very clear in the description that it isn't ready to be merged yet) @griffobeid Any other suggestions?

griffobeid commented 6 years ago

Looking into this now

griffobeid commented 6 years ago

Are we set on using redux-form here, @TalAter? I fixed the problem by changing it to a basic input like so: <input name="search" type="text" placeholder="Search by Tx Hash / Block # / Address" onChange={this.handleChange} value={this.state.value} />

TalAter commented 6 years ago

@griffobeid I'm ok with getting rid of redux-form completely (including in package.json)

ghost commented 6 years ago

Created PR with a partial fix. still needs to be changed to and redux-form needs to be removed completely if you guys will still proceed with that (: @TalAter @griffobeid

griffobeid commented 6 years ago

@adiconstante I think it would be better to remove the dependency and switch to a basic input.

TalAter commented 6 years ago

Sounds good. Please send a PR with both changes

DAVFoundation / xplore