Added base handled for job decode and watcher start/top

src/components/atoms/watcher-status/watcher-status.atom.jsx

@@ -0,0 +1,23 @@
+import { Alert } from "antd";
+import React from "react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import {
+  selectWatcherError,
+  selectWatcherStatus,
+} from "../../../redux/application/application.selectors";
+
+const mapStateToProps = createStructuredSelector({
+  watcherStatus: selectWatcherStatus,
+  watcherError: selectWatcherError,
+});
+
+export function WatcherStatusAtom({ watcherStatus, watcherError }) {
+  return (
+    <div>
+      {watcherStatus}
+      {watcherError && <Alert message={watcherError} />}
+    </div>
+  );
+}
+export default connect(mapStateToProps, null)(WatcherStatusAtom);

src/components/molecules/filepath-item/filepath-item.molecule.jsx

@@ -0,0 +1,6 @@
+import { List } from "antd";
+import React from "react";
+
+export default function FilePathMolecule(item) {
+  return <List.Item title={item}>{item}</List.Item>;
+}

src/components/molecules/sider-sign-out/sider-sign-out.molecule.jsx

@@ -1,3 +1,4 @@
+import { UserOutlined } from "@ant-design/icons";
 import { Menu } from "antd";
 import React from "react";
 import { connect } from "react-redux";
@@ -9,7 +10,11 @@ const mapDispatchToProps = (dispatch) => ({
 
 export function SiderSignOut({ signOutStart, ...restProps }) {
   return (
-    <Menu.Item {...restProps} onClick={() => signOutStart()}>
+    <Menu.Item
+      icon={<UserOutlined />}
+      {...restProps}
+      onClick={() => signOutStart()}
+    >
       Sign Out
     </Menu.Item>
   );

src/components/molecules/watcher-start/watcher-start.molecule.jsx

@@ -0,0 +1,16 @@
+import { Button } from "antd";
+import React from "react";
+import ipcTypes from "../../../ipc.types";
+const { ipcRenderer } = window;
+
+export default function WatcherStartMolecule() {
+  const handleClick = () => {
+    ipcRenderer.send(ipcTypes.default.fileWatcher.toMain.start);
+  };
+
+  return (
+    <div>
+      <Button onClick={handleClick}>Start Watcher</Button>
+    </div>
+  );
+}

src/components/molecules/watcher-stop/watcher-stop.molecule.jsx

@@ -0,0 +1,16 @@
+import { Button } from "antd";
+import React from "react";
+import ipcTypes from "../../../ipc.types";
+const { ipcRenderer } = window;
+
+export default function WatcherStopMolecule() {
+  const handleClick = () => {
+    ipcRenderer.send(ipcTypes.default.fileWatcher.toMain.stop);
+  };
+
+  return (
+    <div>
+      <Button onClick={handleClick}>Stop Watcher</Button>
+    </div>
+  );
+}

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

@@ -0,0 +1,30 @@
+import { List } from "antd";
+import React, { useEffect } from "react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import ipcTypes from "../../../ipc.types";
+import { selectWatchedPaths } from "../../../redux/application/application.selectors";
+import FilepathItemMolecule from "../../molecules/filepath-item/filepath-item.molecule";
+const { ipcRenderer } = window;
+
+const mapStateToProps = createStructuredSelector({
+  watchedPaths: selectWatchedPaths,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+
+export function FilePathsList({ watchedPaths }) {
+  //On Rdner, send request to get file paths to main.
+  useEffect(() => {
+    ipcRenderer.send(ipcTypes.default.fileWatcher.toMain.filepathsGet);
+  }, []);
+
+  return (
+    <div>
+      File Paths
+      <List dataSource={watchedPaths} renderItem={FilepathItemMolecule} />
+    </div>
+  );
+}
+export default connect(mapStateToProps, mapDispatchToProps)(FilePathsList);

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

@@ -1,36 +1,18 @@
-import {
-  DesktopOutlined,
-  FileOutlined,
-  PieChartOutlined,
-  TeamOutlined,
-  UserOutlined,
-} from "@ant-design/icons";
+import { PieChartOutlined, SettingFilled } from "@ant-design/icons";
 import { Menu } from "antd";
 import React from "react";
 import { Link } from "react-router-dom";
 import SiderSignOut from "../../molecules/sider-sign-out/sider-sign-out.molecule";
 
-const { SubMenu } = Menu;
-
 export default function SiderMenuOrganism() {
   return (
     <Menu defaultSelectedKeys={["1"]} mode="inline">
       <Menu.Item key="1" icon={<PieChartOutlined />}>
         <Link to="/">Jobs</Link>
       </Menu.Item>
-      <Menu.Item key="2" icon={<DesktopOutlined />}>
-        <Link to="/nope">Jobs Not Working</Link>
+      <Menu.Item key="2" icon={<SettingFilled />}>
+        <Link to="/settings">Settings</Link>
       </Menu.Item>
-      <SubMenu key="sub1" icon={<UserOutlined />} title="User">
-        <Menu.Item key="3">Tom</Menu.Item>
-        <Menu.Item key="4">Bill</Menu.Item>
-        <Menu.Item key="5">Alex</Menu.Item>
-      </SubMenu>
-      <SubMenu key="sub2" icon={<TeamOutlined />} title="Team">
-        <Menu.Item key="6">Team 1</Menu.Item>
-        <Menu.Item key="8">Team 2</Menu.Item>
-      </SubMenu>
-      <Menu.Item key="9" icon={<FileOutlined />} />
       <SiderSignOut />
     </Menu>
   );

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

@@ -0,0 +1,14 @@
+import React from "react";
+import WatcherStatusAtom from "../../atoms/watcher-status/watcher-status.atom";
+import WatcherStartMolecule from "../../molecules/watcher-start/watcher-start.molecule";
+import WatcherStopMolecule from "../../molecules/watcher-stop/watcher-stop.molecule";
+
+export default function WatcherManagerOrganism() {
+  return (
+    <div>
+      <WatcherStatusAtom />
+      <WatcherStartMolecule />
+      <WatcherStopMolecule />
+    </div>
+  );
+}

src/components/pages/jobs/jobs.page.jsx

@@ -1,47 +1,31 @@
-import { Button } from "antd";
-import React, { useEffect } from "react";
+import React from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import ipcTypes from "../../../ipc.types";
 
-const { ipcRenderer } = window;
+//const { ipcRenderer } = window;
 //const settings = window.require("electron-settings");
 
 const mapStateToProps = createStructuredSelector({});
 const mapDispatchToProps = (dispatch) => ({});
 
 export function JobsPage() {
-  useEffect(() => {
-    ipcRenderer.on("test-success", (event, obj) => {
-      console.log("Test Success", obj);
-    });
+  // useEffect(() => {
+  //   ipcRenderer.on("test-success", (event, obj) => {
+  //     console.log("Test Success", obj);
+  //   });
 
-    // Cleanup the listener events so that memory leaks are avoided.
-    return function cleanup() {
-      ipcRenderer.removeAllListeners(
-        "test-success",
-        ipcTypes.default.filewatcher.startSuccess
-      );
-    };
-  }, []);
+  //   // Cleanup the listener events so that memory leaks are avoided.
+  //   return function cleanup() {
+  //     ipcRenderer.removeAllListeners(
+  //       "test-success",
+  //       ipcTypes.default.filewatcher.startSuccess
+  //     );
+  //   };
+  // }, []);
 
   return (
     <div>
-      <div>Welcome to your new react app. asdas sd</div>
-      <Button
-        onClick={() => {
-          ipcRenderer.send("test", { test: true });
-        }}
-      >
-        TEST
-      </Button>
-      <Button
-        onClick={() => {
-          ipcRenderer.send(ipcTypes.default.filewatcher.start);
-        }}
-      >
-        Start Watcher
-      </Button>
+      <div>Welcome to your new react app. </div>
     </div>
   );
 }

src/components/pages/routes/routes.page.jsx

@@ -5,6 +5,7 @@ import { Route, Switch } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import SiderMenuOrganism from "../../organisms/sider-menu/sider-menu.organism";
 import Jobs from "../jobs/jobs.page";
+import SettingsPage from "../settings/settings.page";
 
 const mapStateToProps = createStructuredSelector({});
 const mapDispatchToProps = (dispatch) => ({});
@@ -19,6 +20,7 @@ export function RoutesPage() {
         <Layout.Content style={{ margin: "1rem" }}>
           <Switch>
             <Route exact path="/" component={Jobs} />
+            <Route exact path="/settings" component={SettingsPage} />
           </Switch>
         </Layout.Content>
       </Layout>

src/components/pages/settings/settings.page.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+import FilePathsListOrganism from "../../organisms/filepaths-list/filepaths-list.organism";
+import WatcherManagerOrganism from "../../organisms/watcher-manager/watcher-manager.organism";
+export default function SettingsPage() {
+  return (
+    <div>
+      <FilePathsListOrganism />
+      <WatcherManagerOrganism />
+    </div>
+  );
+}
+
+// <Button
+// onClick={() => {
+//   ipcRenderer.send(ipcTypes.default.filewatcher.start);
+// }}
+// >
+// Start Watcher
+// </Button>