<commit_before>import { h, Component } from 'preact';
import { connect } from 'mobx-preact';

@connect(['stateStore'])
export default class DirectionsTab extends Component {
    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.state = {start: props.address, mode: props.stateStore.waypoints.mode}
    }

    handleChange(event) {
        this.setState({
            [event.target.name]: event.target.value
        });
    }

    handleSubmit(event) {
        this.props.stateStore.updateWaypoints(this.state.start,this.state.stop, this.state.mode);
        event.preventDefault();
    }

    swapAddress() {
        const w = this.state.start;
        this.setState({
            start: this.state.stop,
            stop: w});
    }

    render() {
        return (
            <div>
                <form onSubmit={this.handleSubmit} method="post" className="DirectionsTab">
                    <label className="DirectionsTab__radio-label DirectionsTab__radio-label--driving"><input type="radio" name="mode" value="DRIVING" onChange={this.handleChange} checked={this.state.mode === 'DRIVING'} />car</label>
                    <label className="DirectionsTab__radio-label DirectionsTab__radio-label--transit"><input type="radio" name="mode" value="TRANSIT" onChange={this.handleChange} />transit</label>
                    <label className="DirectionsTab__radio-label DirectionsTab__radio-label--walking"><input type="radio" name="mode" value="WALKING" onChange={this.handleChange} />walk</label>
                     <br />
                    <label className="DirectionsTab__input-label" for="route-start">A</label><input className="DirectionsTab__input-field" id="route-start" name="start" type="text" value={this.state.start} onChange={this.handleChange} required />
                    <label className="DirectionsTab__input-label" for="route-stop">B</label><input className="DirectionsTab__input-field" id="route-stop" name="stop" type="text" value={this.state.stop} onChange={this.handleChange} required />
                    <input className="DirectionsTab__input-submit" type="submit" value="Get Directions" />
                    <button className="DirectionsTab__input-swap" onClick={() => {this.swapAddress()}}>swap</button>
                </form>

            </div>
        );
    }
}

<commit_msg>ip-52 directions tabs divs rearranging<commit_after>import { h, Component } from 'preact';
import { connect } from 'mobx-preact';

@connect(['stateStore'])
export default class DirectionsTab extends Component {
    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.state = {start: props.address, mode: props.stateStore.waypoints.mode}
    }

    handleChange(event) {
        this.setState({
            [event.target.name]: event.target.value
        });
    }

    handleSubmit(event) {
        this.props.stateStore.updateWaypoints(this.state.start,this.state.stop, this.state.mode);
        event.preventDefault();
    }

    swapAddress() {
        const w = this.state.start;
        this.setState({
            start: this.state.stop,
            stop: w});
    }

    checkActive(label) {
        return (this.state.mode === label) ? "DirectionsTab__radio-label--active" : "";
    }

    render() {
        return (
            <div>
                <form onSubmit={this.handleSubmit} method="post" className="DirectionsTab">
                    <label className={this.checkActive("DRIVING") +" DirectionsTab__radio-label DirectionsTab__radio-label--driving"}><input type="radio" name="mode" value="DRIVING" onChange={this.handleChange} checked={this.state.mode === 'DRIVING'} />car</label>
                    <label className={this.checkActive("TRANSIT") +" DirectionsTab__radio-label DirectionsTab__radio-label--transit"}><input type="radio" name="mode" value="TRANSIT" onChange={this.handleChange} />transit</label>
                    <label className={this.checkActive("WALKING") +" DirectionsTab__radio-label DirectionsTab__radio-label--walking"}><input type="radio" name="mode" value="WALKING" onChange={this.handleChange} />walk</label>
                    <div className="DirectionsTab__directions-flexbox">
                        <div className="DirectionsTab__directions-wrapper">
                            <div><label className="DirectionsTab__input-label" for="route-start">A</label><input className="DirectionsTab__input-field" id="route-start" name="start" type="text" value={this.state.start} onChange={this.handleChange} required /></div>
                            <div><label className="DirectionsTab__input-label" for="route-stop">B</label><input className="DirectionsTab__input-field" id="route-stop" name="stop" type="text" value={this.state.stop} onChange={this.handleChange} required /></div>
                        </div>
                        <button className="DirectionsTab__input-button DirectionsTab__input-button--swap" onClick={() => {this.swapAddress()}}>swap</button>
                    </div>
                    <input className="DirectionsTab__input-button DirectionsTab__input-button--submit" type="submit" value="Get Directions" />
                </form>

            </div>
        );
    }
}


{'fraction_non_alphanumeric': 0.1434903047091413, 'fraction_numerical': 0.0003693444136657433, 'mean_word_length': 2.913294797687861, 'pattern_counts': {'":': 0, '<': 56, '<?xml version=': 0, '>': 58, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4887098', 'n_tokens_mistral': 1527, 'n_tokens_neox': 1482, 'n_words': 239}