//form.js file to send a request to back end

import React, { Component } from 'react';
import axios from 'axios';

export default class Form extends Component {
    constructor(props) {
        super(props);

        this.onChangeParameter = this.onChangeParameter.bind(this);
        this.onChangeParamValue = this.onChangeParamValue.bind(this);
        this.onSubmit = this.onSubmit.bind(this);

        this.state = {
            parameter: '',
            paramValue: ''
        }
    }

    onChangeParameter(e) {
        this.setState({parameter: e.target.value});
    }

    onChangeParamValue(e) {
        this.setState({paramValue: e.target.value});
    }

    onSubmit(e) {
        e.preventDefault();
        const params = {
            parameter: this.state.parameter,
            paramValue: this.state.paramValue
        }
        axios.get('http://localhost:3000/src/server.js/sample', params).then((response) => {
            console.log(response);
        })
        .catch((error) => {
            console.log(error);
        });
    }

    render() {
        return(
            <form className="container text-center" onSubmit={this.onSubmit}>
                <h3 className="text-warning">Search for Characters to Manage</h3>
                <div className="form-group">
                    <select className="form-control btn btn-lg" name="parameter" value={this.state.value} onChange={this.onChangeParameter}>
                        <option>SELECT</option>
                        <option value="1">Charid</option>
                        <option value="2">Character Name</option>
                        <option value="3">Username</option>
                        <option value="4">Forum Account</option>
                    </select>
                </div>
                <div className="form-group">
                <label>-Enter parameter to search by-</label>
                    <input
                        type="text" 
                        className="form-control text-center"
                        name="paramValue"
                        placeholder="12345"
                        value={this.state.value}
                        onChange={this.onChangeParamValue}
                        required
                    />
                </div>
                <button className="btn btn-lg btn-primary" type="submit" name="submitBtn">Search</button>
            </form>
        );
    }
}

---------------------------------
//server.js file to receive request and do something with it

const express = require('express');
const app = express();

const PORT = process.env.PORT || 3000;

app.use(express.static('public'));
app.get('/sample:parameter/sample:paramValue', (req, res) => {
    let list = ["item1", "item2", "item3"];
    res.json(list);
    console.log('Sent list of items');
});

app.listen(PORT, () => {
    console.log(`Listening on port ${PORT}`);
});