Added job searching, sider keys, formatting on settings

src/components/organisms/filepaths-list/filepaths-list.organism.jsx

@@ -1,4 +1,4 @@
-import { List } from "antd";
+import { List, Typography } from "antd";
 import React, { useEffect } from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -24,7 +24,7 @@ export function FilePathsList({ watchedPaths }) {
   console.log("watchedPaths", watchedPaths);
   return (
     <div>
-      File Paths
+      <Typography.Title>Watcher File Paths</Typography.Title>
       <List dataSource={watchedPaths || []} renderItem={FilepathItemMolecule} />
       <FilepathAddMolecule />
     </div>

src/components/organisms/jobs-list-latest/jobs-list-latest.organism.jsx

@@ -3,24 +3,12 @@ import { useQuery } from "@apollo/client";
 import { Dropdown, List, Menu, Spin } from "antd";
 import React, { useState } from "react";
 import InfiniteScroll from "react-infinite-scroller";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
 import { QUERY_ALL_JOBS_PAGINATED } from "../../../graphql/jobs.queries";
-import { setSelectedJobId } from "../../../redux/application/application.actions";
-import { selectSelectedJobId } from "../../../redux/application/application.selectors";
 import ErrorResultAtom from "../../atoms/error-result/error-result.atom";
 import JobsListItemMolecule from "../../molecules/jobs-list-item/jobs-list-item.molecule";
-import "./jobs-list-latest.organism.styles.scss";
-
-const mapStateToProps = createStructuredSelector({
-  selectedJobId: selectSelectedJobId,
-});
-const mapDispatchToProps = (dispatch) => ({
-  setSelectedJobId: (jobId) => dispatch(setSelectedJobId(jobId)),
-});
 
 const limit = 20;
-export function JobsTableOrganism({ selectedJobId, setSelectedJobId }) {
+export default function JobsTableOrganism() {
   const [state, setState] = useState({ hasMore: true });
 
   const { loading, error, data, refetch, fetchMore } = useQuery(
@@ -110,4 +98,3 @@ export function JobsTableOrganism({ selectedJobId, setSelectedJobId }) {
     </div>
   );
 }
-export default connect(mapStateToProps, mapDispatchToProps)(JobsTableOrganism);

src/components/organisms/jobs-list-latest/jobs-list-latest.organism.styles.scss

@@ -1,9 +0,0 @@
-.jobs-list-container {
-  height: 100%;
-}
-
-.jobs-list-infinite-container {
-  overflow-y: auto;
-  overflow-x: hidden;
-  height: 100%;
-}

src/components/organisms/jobs-list-search/jobs-list-search.organism.jsx

@@ -0,0 +1,102 @@
+import { SyncOutlined } from "@ant-design/icons";
+import { useLazyQuery } from "@apollo/client";
+import { Dropdown, List, Menu, Spin } from "antd";
+import React, { useState } from "react";
+import InfiniteScroll from "react-infinite-scroller";
+import { SEARCH_JOBS_PAGINATED } from "../../../graphql/jobs.queries";
+import ErrorResultAtom from "../../atoms/error-result/error-result.atom";
+import JobsListItemMolecule from "../../molecules/jobs-list-item/jobs-list-item.molecule";
+import JobsSearchFieldsMolecule from "../../molecules/jobs-search-fields/jobs-search-fields.molecule";
+
+const limit = 20;
+export default function JobsTableOrganism() {
+  const [state, setState] = useState({ hasMore: true });
+
+  const [
+    callSearch,
+    { loading, error, data, refetch, fetchMore },
+  ] = useLazyQuery(SEARCH_JOBS_PAGINATED, {
+    variables: {
+      offset: 0,
+      limit: limit,
+    },
+  });
+
+  const menu = (
+    <Menu>
+      <Menu.Item onClick={() => refetch()}>
+        <SyncOutlined />
+        Reload
+      </Menu.Item>
+    </Menu>
+  );
+
+  const handleInfiniteOnLoad = (page) => {
+    if (fetchMore)
+      fetchMore({
+        variables: {
+          offset: limit * page,
+        },
+        updateQuery: (prev, { fetchMoreResult }) => {
+          if (!fetchMoreResult) {
+            console.log("No more results. Fetch More was empty.");
+            setState({ ...state, hasMore: false });
+            return prev;
+          }
+
+          const newCache = Object.assign({}, prev, {
+            jobs: [...prev.search_jobs, ...fetchMoreResult.search_jobs],
+          });
+
+          if (
+            newCache.jobs.length >= data &&
+            data.search_jobs_aggregate.aggregate.count
+          ) {
+            console.log("No more results.");
+            setState({ ...state, hasMore: false });
+          }
+
+          return newCache;
+        },
+      });
+  };
+
+  if (error)
+    return (
+      <ErrorResultAtom
+        title="Error fetching Jobs data."
+        errorMessage={JSON.stringify(error)}
+      />
+    );
+
+  return (
+    <div className="jobs-list-container">
+      <JobsSearchFieldsMolecule callSearchQuery={callSearch} />
+      <div className="jobs-list-infinite-container">
+        <InfiniteScroll
+          pageStart={0}
+          loadMore={handleInfiniteOnLoad}
+          hasMore={!loading && state.hasMore}
+          useWindow={false}
+        >
+          <Dropdown overlay={menu} trigger={["contextMenu"]}>
+            <List
+              bordered
+              dataSource={data ? data.search_jobs : []}
+              renderItem={(item) => <JobsListItemMolecule item={item} />}
+            >
+              {loading && state.hasMore && (
+                <div>
+                  <Spin />
+                </div>
+              )}
+            </List>
+          </Dropdown>
+        </InfiniteScroll>
+      </div>
+      {`${data ? data.search_jobs.length : 0} jobs loaded. ${
+        data ? data.search_jobs_aggregate.aggregate.count : 0
+      } total jobs.`}
+    </div>
+  );
+}

src/components/organisms/sider-menu/sider-menu.organism.jsx

@@ -8,15 +8,18 @@ import React from "react";
 import { Link } from "react-router-dom";
 import ipcTypes from "../../../ipc.types";
 import SiderSignOut from "../../molecules/sider-sign-out/sider-sign-out.molecule";
+import { useLocation } from "react-router-dom";
 const { ipcRenderer } = window;
 
 export default function SiderMenuOrganism() {
+  const { pathname } = useLocation();
+
   return (
-    <Menu defaultSelectedKeys={["1"]} mode="inline">
-      <Menu.Item key="1" icon={<PieChartOutlined />}>
+    <Menu defaultSelectedKeys={[`/`]} selectedKeys={[pathname]} mode="inline">
+      <Menu.Item key="/" icon={<PieChartOutlined />}>
         <Link to="/">Jobs</Link>
       </Menu.Item>
-      <Menu.Item key="2" icon={<SettingFilled />}>
+      <Menu.Item key="/settings" icon={<SettingFilled />}>
         <Link to="/settings">Settings</Link>
       </Menu.Item>
       <SiderSignOut />

src/components/organisms/watcher-manager/watcher-manager.organism.jsx

@@ -1,3 +1,4 @@
+import { Typography } from "antd";
 import React from "react";
 import WatcherStatusAtom from "../../atoms/watcher-status/watcher-status.atom";
 import WatcherStartMolecule from "../../molecules/watcher-start/watcher-start.molecule";
@@ -6,6 +7,7 @@ import WatcherStopMolecule from "../../molecules/watcher-stop/watcher-stop.molec
 export default function WatcherManagerOrganism() {
   return (
     <div>
+      <Typography.Title level={4}>Watcher Status</Typography.Title>
       <WatcherStatusAtom />
       <WatcherStartMolecule />
       <WatcherStopMolecule />