Make functional: SearchForm

1 files changed, 66 insertions, 84 deletions

diff --git a/src/components/SearchForm.js b/src/components/SearchForm.js
index 6f626c2..1e56fc7 100644
--- a/src/components/SearchForm.js
+++ b/src/components/SearchForm.js
@@ -1,102 +1,84 @@
-import React from "react";
+import React, { useState } from "react";
 import PropTypes from "prop-types";
 
 import Button from "@mui/material/Button";
 import ClearIcon from "@mui/icons-material/Clear";
-import FormControl from "@mui/material/FormControl";
-import IconButton from "@mui/material/IconButton";
 import InputAdornment from "@mui/material/InputAdornment";
 import MenuItem from "@mui/material/MenuItem";
 import Select from "@mui/material/Select";
 import TextField from "@mui/material/TextField";
 
-class SearchForm extends React.Component {
-    static propTypes = {
-        filter: PropTypes.func.isRequired
-    };
+function SearchForm(props) {
+    // NOTE: This state is for UI only, ListView's "filter" is used for requests.
+    let [searchField, setSearchField] = useState("port");
+    let [searchValue, setSearchValue] = useState("");
 
-    constructor(props) {
-        super(props);
-        // NOTE: This state is for UI only, List state's "filter" is used for requests.
-        this.state = {
-            searchField: "port",
-            searchValue: ""
-        };
-
-        this.clearSearch = this.clearSearch.bind(this);
-        this.submitSearch = this.submitSearch.bind(this);
-    }
-
-    clearSearch(_) {
-        this.setState({ searchValue: "" });
-        this.props.filter(null, null);
+    function clearSearch(_) {
+        setSearchValue("");
+        props.filter(null, null);
     }
 
-    submitSearch() {
+    function submitSearch() {
         // e.preventDefault();
-        if (this.state.searchValue === "") this.clearSearch();
-        else this.props.filter(this.state.searchField, this.state.searchValue);
+        if (searchValue === "") clearSearch();
+        else props.filter(searchField, searchValue);
     }
 
-    render() {
-        return (
-            <div id="search">
-                <TextField
-                    fullWidth
-                    size="small"
-                    sx={{ width: 400 }}
-                    value={this.state.searchValue}
-                    placeholder="Search..."
-                    onChange={event => {
-                        this.setState({
-                            searchValue: event.target.value
-                        });
-                    }}
-                    onKeyDown={event => {
-                        if (event.key === "Enter") this.submitSearch();
-                        if (event.key === "Escape") this.clearSearch();
-                    }}
-                    InputProps={{
-                        endAdornment: (
-                            <InputAdornment position="end">
-                                {this.state.searchValue !== "" && (
-                                    <ClearIcon
-                                        variant="clickable"
-                                        onClick={this.clearSearch}
-                                    />
-                                )}
-                            </InputAdornment>
-                        )
-                    }}
-                />
-                <Select
-                    size="small"
-                    sx={{ width: 200, marginLeft: "1em" }}
-                    value={this.state.searchField}
-                    onChange={event => {
-                        this.setState({
-                            searchField: event.target.value
-                        });
-                    }}
-                >
-                    <MenuItem value="port">Port</MenuItem>
-                    <MenuItem value="domain">Domain</MenuItem>
-                    <MenuItem value="ip">IP</MenuItem>
-                    <MenuItem value="asn">ASN</MenuItem>
-                    <MenuItem value="asn_country_code">
-                        ASN Country Code
-                    </MenuItem>
-                </Select>
-                <Button
-                    variant="contained"
-                    sx={{ marginLeft: "1em" }}
-                    onClick={this.submitSearch}
-                >
-                    Search
-                </Button>
-            </div>
-        );
-    }
+    return (
+        <div id="search">
+            <TextField
+                fullWidth
+                size="small"
+                sx={{ width: 400 }}
+                value={searchValue}
+                placeholder="Search..."
+                onChange={event => {
+                    setSearchValue(event.target.value);
+                }}
+                onKeyDown={event => {
+                    if (event.key === "Enter") submitSearch();
+                    if (event.key === "Escape") clearSearch();
+                }}
+                InputProps={{
+                    endAdornment: (
+                        <InputAdornment position="end">
+                            {searchValue !== "" && (
+                                <ClearIcon
+                                    variant="clickable"
+                                    onClick={clearSearch}
+                                />
+                            )}
+                        </InputAdornment>
+                    )
+                }}
+            />
+            <Select
+                size="small"
+                sx={{ width: 200, marginLeft: "1em" }}
+                value={searchField}
+                onChange={event => {
+                    setSearchField(event.target.value);
+                }}
+            >
+                <MenuItem value="port">Port</MenuItem>
+                <MenuItem value="domain">Domain</MenuItem>
+                <MenuItem value="ip">IP</MenuItem>
+                <MenuItem value="asn">ASN</MenuItem>
+                <MenuItem value="asn_country_code">ASN Country Code</MenuItem>
+            </Select>
+            <Button
+                variant="contained"
+                sx={{ marginLeft: "1em" }}
+                onClick={submitSearch}
+            >
+                Search
+            </Button>
+        </div>
+    );
 }
 
+SearchForm.propTypes = {
+    filter: PropTypes.func.isRequired
+};
+
 export default SearchForm;