[Components][l]: Update portal components

src/components/blog/Post.js

@@ -5,24 +5,24 @@ import parse from 'html-react-parser';
 /**
  * Displays a blog post page
  * @param {object} props 
- * {
+ * post = {
  *  title: <The title of the blog post>
- *  content: <The body of the blog post>
- *  modified: <The utc date when the post was last modified.
- *  featured_image: <Url/relative url to post cover image
+ *  content: <The body of the blog post. Can be plain text or html>
+ *  createdAt: <The utc date when the post was last modified>.
+ *  featuredImage: <Url/relative url to post cover image>
  * }
  * @returns 
  */
-const Post = ({ page }) => {
-  const { title, content, modified, featured_image } = page;
+const Post = ({ post }) => {
+  const { title, content, createdAt, featuredImage } = post;
 
   return (
     <>
       <h1 className="text-3xl font-semibold text-primary my-6 inline-block">
         {title}
       </h1>
-      <p className="mb-6">Edited: {modified}</p>
-      <img src={featured_image} className="mb-6" alt="featured_img" />
+      <p className="mb-6">Posted: {createdAt}</p>
+      <img src={featuredImage} className="mb-6" alt="featured_img" />
       <div>{parse(content)}</div>
     </>
   );
@@ -33,8 +33,8 @@ Post.propTypes = {
   page: PropTypes.shape({
     title: PropTypes.string.isRequired,
     content: PropTypes.string.isRequired,
-    modified: PropTypes.string,
-    featured_image: PropTypes.string,
+    createdAt: PropTypes.number,
+    featuredImage: PropTypes.string,
   })
 }
 

src/components/blog/PostList.js

@@ -16,9 +16,6 @@ import parse from 'html-react-parser';
 const PostList = ({ posts }) => {
   return (
     <>
-      <h1 className="text-3xl font-semibold text-primary my-6 inline-block">
-        {posts.length} posts found
-      </h1>
       {posts.map((post, index) => (
         <div key={index}>
           <a

src/components/search/Form.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import PropTypes from 'prop-types';
 
 /**
@@ -12,50 +12,33 @@ import PropTypes from 'prop-types';
  * } 
  * @returns 
  */
-const Form = ({ handleChange, handleSubmit }) => {
-
+const Form = ({ handleSubmit }) => {
+  const [searchQuery, setSearchQuery] = useState("")
   return (
-    <form onSubmit={handleSubmit} className="items-center">
+    <form onSubmit={(e) => e.preventDefault()} className="items-center">
       <div className="flex">
         <input
           type="text"
-          name="q"
-          value={q}
-          onChange={handleChange}
+          name="search#q"
+          value={searchQuery}
+          onChange={(e) => { setSearchQuery(e.target.value) }}
           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}
+          onClick={() => handleSubmit(searchQuery)}
+          type="button"
           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
 }
 

src/index.js

@@ -21,6 +21,11 @@ import CustomLink from './components/misc/CustomLink'
 import Nav from './components/ui/Nav'
 import Recent from './components/ui/Recent'
 
+//UI components
+import Form from './components/search/Form'
+import Item from './components/search/Item'
+import ItemTotal from './components/search/Total'
+
 export {
     Table,
     PlotlyChart,
@@ -34,5 +39,8 @@ export {
     PostList,
     Org,
     Error,
-    CustomLink
+    CustomLink,
+    Form,
+    Item,
+    ItemTotal
 }