From 44cdced1a6e407a159f49bc423a96bdca7484c7a Mon Sep 17 00:00:00 2001
From: Rising Odegua <risingodegua@gmail.com>
Date: Mon, 3 May 2021 15:19:33 +0100
Subject: [PATCH] [Components][s]: Add components for creating search page

---
 src/components/search/Form.js  | 62 ++++++++++++++++++++++++++++++++++
 src/components/search/Item.js  | 55 ++++++++++++++++++++++++++++++
 src/components/search/Total.js | 25 ++++++++++++++
 3 files changed, 142 insertions(+)
 create mode 100644 src/components/search/Form.js
 create mode 100644 src/components/search/Item.js
 create mode 100644 src/components/search/Total.js

diff --git a/src/components/search/Form.js b/src/components/search/Form.js
new file mode 100644
index 00000000..61b4aeda
--- /dev/null
+++ b/src/components/search/Form.js
@@ -0,0 +1,62 @@
+import React from 'react'
+import PropTypes from 'prop-types';
+
+/**
+ * Search component form that can be customized with change and submit handlers
+ * @param {object} props
+ * {
+ *  handleChange: A form input change event handler. This function is executed when the
+ *                search input or order by input changes.
+ *  handleSubmit: A form submit event handler. This function is executed when the
+ *                search form is submitted.
+ * } 
+ * @returns 
+ */
+const Form = ({ handleChange, handleSubmit }) => {
+
+  return (
+    <form onSubmit={handleSubmit} className="items-center">
+      <div className="flex">
+        <input
+          type="text"
+          name="q"
+          value={q}
+          onChange={handleChange}
+          placeholder="Search"
+          aria-label="Search"
+          className="bg-white focus:outline-none focus:shadow-outline border border-gray-300 w-1/2 rounded-lg py-2 px-4 block appearance-none leading-normal"
+        />
+        <button
+          onClick={handleSubmit}
+          className="inline-block text-sm px-4 py-3 mx-3 leading-none border rounded text-white bg-black border-black lg:mt-0"
+        >
+          Search
+        </button>
+      </div>
+      <div className="inline-block my-6 float-right">
+        <label htmlFor="field-order-by">Order by:</label>
+        <select
+          className="bg-white"
+          id="field-order-by"
+          name="sort"
+          onChange={handleChange}
+          onBlur={handleChange}
+          value={sort}
+        >
+          <option value="score:desc">Relevance</option>
+          <option value="title_string:asc">Name Ascending</option>
+          <option value="title_string:desc">Name Descending</option>
+          <option value="metadata_modified:desc">Last Modified</option>
+          <option value="views_recent:desc">Popular</option>
+        </select>
+      </div>
+    </form>
+  );
+};
+
+Form.propTypes = {
+  handleChange: PropTypes.func.isRequired,
+  handleSubmit: PropTypes.func.isRequired
+}
+
+export default Form;
diff --git a/src/components/search/Item.js b/src/components/search/Item.js
new file mode 100644
index 00000000..1d47183b
--- /dev/null
+++ b/src/components/search/Item.js
@@ -0,0 +1,55 @@
+import React from 'react'
+import Link from 'next/link';
+import PropTypes from 'prop-types';
+
+/**
+ * Single item from a search result showing info about a dataset.
+ * @param {object} props data package with the following format:
+ * {
+ *  organization: {name: <some name>, title: <some title> },
+ *  title: <Data package title>
+ *  name:  <Data package name>
+ *  description: <description of data package>
+ *  notes: <Notes associated with the data package>
+ * }
+ * @returns React Component
+ */
+const Item = ({ dataset }) => {
+  return (
+    <div className="mb-6">
+      <h3 className="text-xl font-semibold">
+        <Link
+          href={`/@${
+            dataset.organization
+              ? dataset.organization.name
+              : 'dataset'
+          }/${dataset.name}`}
+        >
+          <a className="text-primary">
+            {dataset.title || dataset.name}
+          </a>
+        </Link>
+      </h3>
+      <Link
+        href={`/@${
+          dataset.organization ? dataset.organization.name : 'dataset'
+        }`}
+      >
+        <a className="text-gray-500 block mt-1">
+          {dataset.organization
+            ? dataset.organization.title
+            : 'dataset'}
+        </a>
+      </Link>
+      <div className="leading-relaxed mt-2">
+        {dataset.description || dataset.notes}
+      </div>
+    </div>
+  );
+};
+
+Item.propTypes = {
+  dataset: PropTypes.object.isRequired
+}
+
+export default Item;
diff --git a/src/components/search/Total.js b/src/components/search/Total.js
new file mode 100644
index 00000000..6bf83e17
--- /dev/null
+++ b/src/components/search/Total.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * Displays the total search result
+ * @param {object} props 
+ * {
+ *  count: The total number of search results
+ * } 
+ * @returns React Component
+ */
+const Total = ({ count }) => {
+
+  return (
+    <h1 className="text-3xl font-semibold text-primary my-6 inline-block">
+      {count} results found
+    </h1>
+  );
+};
+
+Total.propTypes = {
+  count: PropTypes.number.isRequired
+}
+
+export default Total;