Merge pull request fortran-lang#17 from arteevraina/refactor-search-tile

refactor: Search Tile & Component
arteevraina · Feb 22, 2023 · c516f88 · c516f88
2 parents 0488ad5 + c2a9252
commit c516f88
Show file tree

Hide file tree

Showing 6 changed files with 126 additions and 67 deletions.
diff --git a/flask/packages.py b/flask/packages.py
@@ -61,6 +61,7 @@ def search_packages():
                 "author": 1,
                 "description": 1,
                 "tags": 1,
+                "updatedAt": 1,
             },
         )
         .sort(sorted_by, -1)

diff --git a/registry/src/components/packageItem.js b/registry/src/components/packageItem.js
@@ -2,6 +2,36 @@ import { MDBListGroupItem } from "mdb-react-ui-kit";
 import { Row, Col, Image } from "react-bootstrap";
 
 const PackageItem = ({ packageEntity }) => {
+  function formatDate(timestamp) {
+    const now = new Date();
+    const date = new Date(timestamp);
+
+    // Check if the date is less than 12 hours ago
+    const diff = (now.getTime() - date.getTime()) / 1000;
+    if (diff < 43200) {
+      // 12 hours = 43,200 seconds
+      // Calculate minutes or hours ago
+      const minutes = Math.floor(diff / 60);
+      if (minutes < 60) {
+        return `${minutes} minutes ago`;
+      } else {
+        const hours = Math.floor(minutes / 60);
+        return `${hours} hours ago`;
+      }
+    } else {
+      // Format date in "YYYY-MM-DD" format
+      const year = date.getUTCFullYear();
+      const month = String(date.getUTCMonth() + 1).padStart(2, "0");
+      const monthName = new Date(Date.UTC(year, month, 1)).toLocaleString(
+        "en-US",
+        { month: "long" }
+      );
+      const day = String(date.getUTCDate()).padStart(2, "0");
+
+      return `${monthName} ${day},  ${year}`;
+    }
+  }
+
   return (
     <MDBListGroupItem id="list-item">
       <Row>
@@ -17,19 +47,14 @@ const PackageItem = ({ packageEntity }) => {
           <div>
             <h5 id="list-item-package-name">{packageEntity.name}</h5>
           </div>
-          <h6 className="mb-2 text-muted">{packageEntity.description}</h6>
           <h6 className="mb-2 text-muted">
             Namespace {packageEntity.namespace}
           </h6>
+          <label className="mb-2 text-muted">{packageEntity.description}</label>
         </Col>
-        <Col md={1} style={{ flex: 1 }}>
-          <h6
-            style={{
-              textAlign: "right",
-            }}
-          >
-            By {packageEntity.author}
-          </h6>
+        <Col md={1} style={{ flex: 1, textAlign: "right" }}>
+          <h6>By {packageEntity.author}</h6>
+          <label>{formatDate(packageEntity.updatedAt)}</label>
         </Col>
       </Row>
     </MDBListGroupItem>

diff --git a/registry/src/components/pagination.js b/registry/src/components/pagination.js
@@ -7,18 +7,25 @@ import {
 import { searchPackage } from "../store/actions/searchActions";
 
 const Pagination = ({ currentPage, totalPages }) => {
+  const dispatch = useDispatch();
   const query = useSelector((state) => state.search.query);
   const orderBy = useSelector((state) => state.search.orderBy);
 
   const maxVisibleItems = 5;
-  let startPage = Math.max(currentPage - Math.floor(maxVisibleItems / 2), 1);
-  let endPage = Math.min(startPage + maxVisibleItems - 1, totalPages);
-  const dispatch = useDispatch();
+  const startPage = Math.max(currentPage - Math.floor(maxVisibleItems / 2), 1);
+  const endPage = Math.min(startPage + maxVisibleItems - 1, totalPages);
 
   const handlePageChange = (page) => {
     dispatch(searchPackage(query, page, orderBy));
   };
 
+  const generatePageTiles = () => {
+    return Array.from(
+      { length: endPage - startPage + 1 },
+      (_, i) => i + startPage
+    );
+  };
+
   return (
     <nav aria-label="Pagination">
       <MDBPagination className="mb-0">
@@ -28,10 +35,7 @@ const Pagination = ({ currentPage, totalPages }) => {
         >
           <MDBPaginationLink aria-disabled="true">Previous</MDBPaginationLink>
         </MDBPaginationItem>
-        {Array.from(
-          { length: endPage - startPage + 1 },
-          (_, i) => i + startPage
-        ).map((page) => (
+        {generatePageTiles().map((page) => (
           <MDBPaginationItem
             key={page}
             active={currentPage + 1 === page}

diff --git a/registry/src/pages/Navbar.js b/registry/src/pages/Navbar.js
@@ -21,12 +21,13 @@ import { logout } from "../store/actions/authActions";
 import { searchPackage, setQuery } from "../store/actions/searchActions";
 
 const Navbar = () => {
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const [showNavSecond, setShowNavSecond] = useState(false);
+
   const isAuthenticated = useSelector((state) => state.auth.isAuthenticated);
   const username = useSelector((state) => state.auth.username);
   const uuid = useSelector((state) => state.auth.uuid);
-  const navigate = useNavigate();
-  const [showNavSecond, setShowNavSecond] = useState(false);
-  const dispatch = useDispatch();
 
   const signOut = () => {
     dispatch(logout(uuid));

diff --git a/registry/src/pages/search.js b/registry/src/pages/search.js
@@ -8,6 +8,7 @@ import DropdownButton from "react-bootstrap/DropdownButton";
 import { searchPackage, setOrderBy } from "../store/actions/searchActions";
 
 const Search = () => {
+  const dispatch = useDispatch();
   const packages = useSelector((state) => state.search.packages);
   const error = useSelector((state) => state.search.error);
   const totalPages = useSelector((state) => state.search.totalPages);
@@ -17,53 +18,78 @@ const Search = () => {
 
   const dropdownOptions = ["None", "Date last updated"];
 
-  const dispatch = useDispatch();
+  const onDropDownSelect = (option) => {
+    dispatch(setOrderBy(option));
+    dispatch(searchPackage(query, 0, option));
+  };
 
-  return error !== null ? (
-    <div className="container">
-      <div id="result">{error}</div>
-    </div>
-  ) : packages !== null ? (
-    packages.length === 0 ? (
+  if (error !== null) {
+    return (
       <div className="container">
-        <div>No packages found.</div>
+        <div id="result">{error}</div>
       </div>
-    ) : (
-      <div className="container">
-        <br />
-        <div className="d-flex justify-content-end" id="dropdown-orderby">
-          <label>Order by</label>
-          <DropdownButton title={orderBy}>
-            {dropdownOptions.map((option) => (
-              <Dropdown.Item
-                key={option}
-                onClick={() => {
-                  dispatch(setOrderBy(option));
-                  dispatch(searchPackage(query, 0, option));
-                }}
-              >
-                {option}
-              </Dropdown.Item>
-            ))}
-          </DropdownButton>
+    );
+  }
+
+  if (packages !== null) {
+    if (packages.length === 0) {
+      return (
+        <div className="container">
+          <div>No packages found.</div>
         </div>
-        <MDBListGroup
-          style={{
-            alignItems: "center",
-          }}
-        >
-          {packages.map((packageEntity) => (
-            <PackageItem
-              key={packageEntity.name + packageEntity.namespace}
-              packageEntity={packageEntity}
-            />
-          ))}
+      );
+    } else {
+      return (
+        <div className="container">
           <br />
-          <Pagination currentPage={currentPage} totalPages={totalPages} />
-        </MDBListGroup>
-      </div>
-    )
-  ) : null;
+          <div className="d-flex justify-content-end" id="dropdown-orderby">
+            <label>Order by</label>
+            <DropdownSortBy
+              orderBy={orderBy}
+              dropdownOptions={dropdownOptions}
+              onDropDownSelect={onDropDownSelect}
+            />
+          </div>
+          <ListView
+            packages={packages}
+            currentPage={currentPage}
+            totalPages={totalPages}
+          />
+        </div>
+      );
+    }
+  }
 };
 
 export default Search;
+
+const ListView = ({ packages, currentPage, totalPages }) => {
+  return (
+    <MDBListGroup
+      style={{
+        alignItems: "center",
+      }}
+    >
+      {packages.map((packageEntity) => (
+        <PackageItem
+          key={packageEntity.name + packageEntity.namespace}
+          packageEntity={packageEntity}
+        />
+      ))}
+      <br />
+      <Pagination currentPage={currentPage} totalPages={totalPages} />
+    </MDBListGroup>
+  );
+};
+
+const DropdownSortBy = ({ orderBy, dropdownOptions, onDropDownSelect }) => {
+  return (
+    <DropdownButton title={orderBy}>
+      {dropdownOptions.map((option) => (
+        <Dropdown.Item key={option} onClick={() => onDropDownSelect(option)}>
+          {option}
+        </Dropdown.Item>
+      ))}
+    </DropdownButton>
+  );
+};
diff --git a/registry/src/store/actions/searchActions.js b/registry/src/store/actions/searchActions.js
@@ -4,20 +4,22 @@ export const SEARCH_PACKAGE = "SEARCH_PACKAGE";
 export const SEARCH_SUCCESS = "SEARCH_SUCCESS";
 export const SEARCH_FAILURE = "SEARCH_FAILURE";
 
+const sortedByMap = new Map()
+  .set("Date last updated", "updatedat")
+  .set("None", "");
+
 export const searchPackage =
-  (query, page, sorted_by = "") =>
+  (query, page, sortedBy = "") =>
   async (dispatch) => {
-    if (sorted_by === "Date last updated") {
-      sorted_by = "updatedat";
-    } else {
-      sorted_by = "";
+    if (sortedBy.length !== 0) {
+      sortedBy = sortedByMap.get(sortedBy);
     }
 
     const url = `${
       process.env.REACT_APP_REGISTRY_API_URL
     }/packages?query=${encodeURIComponent(query)}&page=${encodeURIComponent(
       page
-    )}&sorted_by=${encodeURIComponent(sorted_by)}`;
+    )}&sorted_by=${encodeURIComponent(sortedBy)}`;
 
     dispatch({
       type: SEARCH_PACKAGE,