From 1cdeb1c70a89ef1936d82e5f82f903c357f7b61a Mon Sep 17 00:00:00 2001
From: Ernst Widerberg <ernstwi@kth.se>
Date: Mon, 18 Oct 2021 11:57:00 +0200
Subject: Implement search

---
 src/components/List.js       | 30 +++++++++++++++++++++++++-----
 src/components/SearchForm.js | 11 ++++++-----
 2 files changed, 31 insertions(+), 10 deletions(-)

(limited to 'src')

diff --git a/src/components/List.js b/src/components/List.js
index e0002ec..6def347 100644
--- a/src/components/List.js
+++ b/src/components/List.js
@@ -10,27 +10,43 @@ class List extends React.Component {
         this.state = {
             objects: [],
             filter: {
-                field: "default-field",
-                value: ""
+                field: null,
+                value: null
             },
             page: 1,
             totalPages: 1
         };
 
+        this.filter = this.filter.bind(this);
+        this.filterString = this.filterString.bind(this);
         this.getData = this.getData.bind(this);
-        this.setPage = this.setPage.bind(this);
         this.queryString = this.queryString.bind(this);
+        this.setPage = this.setPage.bind(this);
     }
 
     componentDidMount() {
         this.getData();
     }
 
+    //
+    // Helpers
+    //
+
+    filterString() {
+        return this.state.filter.field == null ||
+            this.state.filter.value == null
+            ? null
+            : this.state.filter.field + "=" + this.state.filter.value;
+    }
+
     queryString() {
         return [
             `limit=${process.env.PER_PAGE}`,
-            `skip=${this.state.page * process.env.PER_PAGE}`
-        ].join("&");
+            `skip=${(this.state.page - 1) * process.env.PER_PAGE}`,
+            this.filterString()
+        ]
+            .filter(x => x !== null)
+            .join("&");
     }
 
     // Fetch data from external source, update state
@@ -59,6 +75,10 @@ class List extends React.Component {
             .catch(e => this.props.setError(e));
     }
 
+    //
+    // Event handlers
+    //
+
     filter(field, value) {
         this.setState(
             {
diff --git a/src/components/SearchForm.js b/src/components/SearchForm.js
index 0dc288c..e9b933d 100644
--- a/src/components/SearchForm.js
+++ b/src/components/SearchForm.js
@@ -9,8 +9,9 @@ class SearchForm extends React.Component {
 
     constructor(props) {
         super(props);
+        // NOTE: This state is for UI only, List state is used for requests.
         this.state = {
-            field: "default-field",
+            field: "port",
             value: ""
         };
 
@@ -38,9 +39,9 @@ class SearchForm extends React.Component {
     render() {
         const searchOptions = [
             {
-                key: "default-field",
-                value: "default-field",
-                text: "Default field"
+                key: "port",
+                value: "port",
+                text: "Port"
             }
         ];
         return (
@@ -59,7 +60,7 @@ class SearchForm extends React.Component {
                     <Select
                         name="field"
                         options={searchOptions}
-                        defaultValue="default-field"
+                        defaultValue="port"
                         onChange={this.handleInput}
                     />
                     <Button type="submit">Search</Button>
-- 
cgit v1.1