Switch semantic-ui to material-ui

TODO: Login component

7 files changed, 100 insertions, 80 deletions

diff --git a/src/components/App.js b/src/components/App.js
index 592a062..9ead9c5 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -6,7 +6,6 @@ import {
     Link,
     useParams
 } from "react-router-dom";
-import { Button } from "semantic-ui-react";
 
 import Error from "./Error";
 import Header from "./Header";
diff --git a/src/components/Error.js b/src/components/Error.js
index 56cc09c..4d026bc 100644
--- a/src/components/Error.js
+++ b/src/components/Error.js
@@ -1,6 +1,9 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { Button, Message } from "semantic-ui-react";
+
+import Alert from "@mui/material/Alert";
+import AlertTitle from "@mui/material/AlertTitle";
+import Button from "@mui/material/Button";
 
 class Error extends React.Component {
     static propTypes = {
@@ -12,11 +15,12 @@ class Error extends React.Component {
     render() {
         return (
             <div id="error-container">
-                <Message negative>
-                    <Message.Header>Internal server error</Message.Header>
+                <Alert severity="error">
+                    <AlertTitle>Internal server error</AlertTitle>
                     <p>{this.props.error}</p>
                     <Button
-                        color="red"
+                        variant="contained"
+                        color="error"
                         onClick={() => {
                             this.props.clearToken();
                             this.props.clearError();
@@ -24,7 +28,7 @@ class Error extends React.Component {
                     >
                         Sign out
                     </Button>
-                </Message>
+                </Alert>
             </div>
         );
     }
diff --git a/src/components/List.js b/src/components/List.js
index d5dcab4..69f2a50 100644
--- a/src/components/List.js
+++ b/src/components/List.js
@@ -1,5 +1,6 @@
 import React from "react";
-import { Button, Pagination } from "semantic-ui-react";
+
+import Pagination from "@mui/material/Pagination";
 
 import ObjectComponent from "./ObjectComponent";
 import SearchForm from "./SearchForm";
@@ -92,8 +93,9 @@ class List extends React.Component {
         );
     }
 
-    setPage(e, { activePage: n }) {
-        this.setState({ page: n }, () => {
+    setPage(event, value) {
+        this.setState({ page: value }, () => {
+            console.log(this.state);
             this.getData();
             window.scrollTo(0, 0);
         });
@@ -103,12 +105,7 @@ class List extends React.Component {
         return (
             <div id="list-container">
                 <div id="controls">
-                    <div id="action">
-                        <Button.Group>
-                            <Button>Action 1</Button>
-                            <Button>Action 2</Button>
-                        </Button.Group>
-                    </div>
+                    <div id="action"></div>
                     <div id="search">
                         <SearchForm filter={this.filter} />
                     </div>
@@ -120,9 +117,13 @@ class List extends React.Component {
                 </div>
                 <div id="pagination">
                     <Pagination
-                        activePage={this.state.page}
-                        totalPages={this.state.totalPages}
-                        onPageChange={this.setPage}
+                        page={this.state.page}
+                        count={this.state.totalPages}
+                        onChange={this.setPage}
+                        variant="outlined"
+                        shape="rounded"
+                        showFirstButton
+                        showLastButton
                     />
                 </div>
             </div>
diff --git a/src/components/SearchForm.js b/src/components/SearchForm.js
index b3a09c0..1150dec 100644
--- a/src/components/SearchForm.js
+++ b/src/components/SearchForm.js
@@ -1,6 +1,14 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { Button, Select, Input, Icon } from "semantic-ui-react";
+
+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 = {
@@ -16,76 +24,74 @@ class SearchForm extends React.Component {
         };
 
         this.clearSearch = this.clearSearch.bind(this);
-        this.handleInput = this.handleInput.bind(this);
         this.submitSearch = this.submitSearch.bind(this);
     }
 
-    handleInput(event, result) {
-        this.setState({
-            [result.name]: result.value
-        });
-    }
-
     clearSearch(_) {
         this.setState({ value: "" });
         this.props.filter(null, null);
     }
 
-    submitSearch(e) {
-        e.preventDefault();
-        this.props.filter(this.state.field, this.state.value);
+    submitSearch() {
+        // e.preventDefault();
+        if (this.state.value === "") this.clearSearch();
+        else this.props.filter(this.state.field, this.state.value);
     }
 
     render() {
-        const searchOptions = [
-            {
-                key: "port",
-                value: "port",
-                text: "Port"
-            },
-            {
-                key: "domain",
-                value: "domain",
-                text: "Domain"
-            },
-            {
-                key: "ip",
-                value: "ip",
-                text: "IP"
-            },
-            {
-                key: "asn",
-                value: "asn",
-                text: "ASN"
-            },
-            {
-                key: "asn_country_code",
-                value: "asn_country_code",
-                text: "ASN Country Code"
-            }
-        ];
         return (
-            <form onSubmit={this.submitSearch}>
-                <Input
-                    action
-                    type="text"
-                    name="value"
-                    placeholder="Search..."
-                    iconPosition="left"
-                    onChange={this.handleInput}
+            <>
+                <TextField
+                    fullWidth
+                    id="value"
                     value={this.state.value}
+                    onChange={event => {
+                        this.setState({
+                            value: event.target.value
+                        });
+                    }}
+                    onKeyDown={event => {
+                        if (event.key === "Enter") this.submitSearch();
+                        if (event.key === "Escape") this.clearSearch();
+                    }}
+                    placeholder="Search..."
+                    InputProps={{
+                        endAdornment: (
+                            <InputAdornment position="end">
+                                <IconButton onClick={this.clearSearch}>
+                                    {this.state.value !== "" && <ClearIcon />}
+                                </IconButton>
+                            </InputAdornment>
+                        )
+                    }}
+                    sx={{ width: 400 }}
+                />
+                <Select
+                    id="field"
+                    value={this.state.field}
+                    onChange={event => {
+                        this.setState({
+                            field: event.target.value
+                        });
+                    }}
+                    sx={{ width: 200, marginLeft: "1em" }}
+                >
+                    <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"
+                    onClick={this.submitSearch}
+                    sx={{ marginLeft: "1em" }}
                 >
-                    <input />
-                    <Icon name="delete" link onClick={this.clearSearch} />
-                    <Select
-                        name="field"
-                        options={searchOptions}
-                        defaultValue="port"
-                        onChange={this.handleInput}
-                    />
-                    <Button type="submit">Search</Button>
-                </Input>
-            </form>
+                    Search
+                </Button>
+            </>
         );
     }
 }
diff --git a/src/index.html b/src/index.html
index fd42814..15bd1f3 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2,9 +2,10 @@
 <html>
     <head>
         <meta charset="utf-8" />
+        <meta name="viewport" content="initial-scale=1, width=device-width" />
         <link
             rel="stylesheet"
-            href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"
+            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
         />
         <script src="http://localhost:8097"></script>
         <title></title>
diff --git a/src/index.js b/src/index.js
index 83ae8e3..c6d6253 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,13 @@
 import React from "react";
 import { render } from "react-dom";
+import CssBaseline from "@mui/material/CssBaseline";
 
 import App from "./components/App";
 
-render(<App />, document.getElementById("root"));
+render(
+    <>
+        <CssBaseline />
+        <App />
+    </>,
+    document.getElementById("root")
+);
diff --git a/src/styles/main.css b/src/styles/main.css
index 5f43ab6..3d7ecc9 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -99,6 +99,10 @@ body {
     justify-content: center;
 }
 
+#list-container #search {
+    display: flex;
+}
+
 /* Login */
 
 #login-container {
@@ -137,10 +141,8 @@ body {
 /* Error */
 
 #error-container {
+    width: 100%;
     display: flex;
     justify-content: center;
-}
-
-#error-container > .ui.message {
     margin-top: 20vh;
 }