🔧 Support for refactored import process WIP

src/client/actions/fileops.actions.tsx

@@ -59,7 +59,7 @@ export const fetchComicBookMetadata = (options) => async (dispatch) => {
       page: 1,
     },
   };
-  const walked = await walkFolder("./comics");
+
   // dispatch(
   //   success({
   //     // uid: 'once-please', // you can specify your own uid if required
@@ -70,13 +70,11 @@ export const fetchComicBookMetadata = (options) => async (dispatch) => {
   //     autoDismiss: 0,
   //   }),
   // );
-  walked.forEach((walkedFolders) =>
-    dispatch({
-      type: LS_IMPORT,
-      meta: { remote: true },
-      data: { extractionOptions, walkedFolders },
-    }),
-  );
+  dispatch({
+    type: LS_IMPORT,
+    meta: { remote: true },
+    data: { extractionOptions },
+  });
 };
 
 export const getComicBooks = (options) => async (dispatch) => {

src/client/actions/settings.actions.tsx

@@ -46,3 +46,7 @@ export const deleteSettings = () => async (dispatch) => {
     });
   }
 };
+
+export const flushDb = () => async (dispatch) => {
+  
+}

src/client/components/AirDCPPSettings/AirDCPPHubsForm.tsx

@@ -11,6 +11,7 @@ export const AirDCPPHubsForm = (airDCPPClientUserSettings): ReactElement => {
   const dispatch = useDispatch();
   const [hubList, setHubList] = useState([]);
   const { ADCPPSocket } = useContext(AirDCPPSocketContext);
+
   useEffect(() => {
     (async () => {
       if (!isEmpty(settings)) {

src/client/components/AirDCPPSettings/AirDCPPSettingsForm.tsx

@@ -7,7 +7,6 @@ import axios from "axios";
 import { AirDCPPSocketContext } from "../../context/AirDCPPSocket";
 import AirDCPPSocket from "../../services/DcppSearchService";
 import { isUndefined, isEmpty, isNil } from "lodash";
-import { CORS_PROXY_SERVER_URI } from "../../constants/endpoints";
 
 export const AirDCPPSettingsForm = (airDCPPClientSettings): ReactElement => {
   const { settings } = airDCPPClientSettings;

src/client/components/ComicDetail.tsx

@@ -490,8 +490,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
   let comicBookTitle = "";
   if (!isNil(comicBookDetailData.rawFileDetails)) {
     const encodedFilePath = encodeURI(
-      `${IMPORT_SERVICE_HOST}` +
-        removeLeadingPeriod(comicBookDetailData.rawFileDetails.path),
+      `${IMPORT_SERVICE_HOST}/${comicBookDetailData.rawFileDetails.cover.filePath}`,
     );
     imagePath = escapePoundSymbol(encodedFilePath);
     comicBookTitle = comicBookDetailData.rawFileDetails.name;

src/client/components/Library.tsx

@@ -42,7 +42,7 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => {
   const RawFileDetails = ({ value }) => {
     if (!isNil(value.path)) {
       const encodedFilePath = encodeURI(
-        `${IMPORT_SERVICE_HOST}` + removeLeadingPeriod(value.path),
+        `${IMPORT_SERVICE_HOST}/${value.cover.filePath}`,
       );
       const filePath = escapePoundSymbol(encodedFilePath);
       return (
@@ -257,6 +257,9 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => {
 
   RawFileDetails.propTypes = {
     value: PropTypes.shape({
+      cover: PropTypes.shape({
+        filePath: PropTypes.string,
+      }),
       name: PropTypes.string,
       path: PropTypes.string,
       fileSize: PropTypes.number,

src/client/components/RecentlyImported.tsx

@@ -41,8 +41,7 @@ export const RecentlyImported = ({
             let comicName = "";
             if (!isNil(rawFileDetails)) {
               const encodedFilePath = encodeURI(
-                `${IMPORT_SERVICE_HOST}` +
-                  removeLeadingPeriod(rawFileDetails.path),
+                `${IMPORT_SERVICE_HOST}/${rawFileDetails.cover.filePath}`,
               );
               imagePath = escapePoundSymbol(encodedFilePath);
               comicName = rawFileDetails.name;
@@ -77,11 +76,11 @@ export const RecentlyImported = ({
                   )}
                   {/* Issue type */}
                   {!isUndefined(sourcedMetadata.comicvine) &&
-                  !isNil(
-                    detectIssueTypes(
-                      sourcedMetadata.comicvine.volumeInformation.description,
-                    ),
-                  ) ? (
+                    !isNil(
+                      detectIssueTypes(
+                        sourcedMetadata.comicvine.volumeInformation.description,
+                      ),
+                    ) ? (
                     <span className="tag is-warning">
                       {
                         detectIssueTypes(

src/client/components/SystemSettings/SystemSettingsForm.tsx

@@ -1,9 +1,48 @@
-import React, { ReactElement } from "react";
+import React, { ReactElement, useCallback } from "react";
+import { flushDb } from "../../actions/settings.actions";
 
 export const SystemSettingsForm = (settingsObject): ReactElement => {
   const { settings } = settingsObject;
 
-  return <div className="mt-4 is-clearfix"></div>;
+  // const flushDb = useC
+  return (
+    <div className="is-clearfix">
+      <div className="mt-4">
+        <h3 className="title">Flush DB and Temporary Folders</h3>
+        <h6 className="subtitle has-text-grey-light">
+          If you are encountering issues, start over using this functionality.
+        </h6>
+        <article className="message is-danger">
+          <div className="message-body is-size-6 is-family-secondary">
+            Flushing and resetting will clear out:
+            <ol>
+              <li>The mongo collection that holds library metadata</li>
+
+              <li>
+                Your <code>USERDATA_DIRECTORY</code> which includes
+                <code>covers</code>, <code>temporary</code> and
+                <code>expanded</code> subfolders.
+              </li>
+            </ol>
+          </div>
+        </article>
+
+        <article className="message is-info">
+          <div className="message-body is-size-6 is-family-secondary">
+            Your comic book files are not touched, and your settings will remain
+            intact.
+          </div>
+        </article>
+
+        <button className="button is-danger" onClick={flushDb}>
+          <span className="icon">
+            <i className="fas fa-eraser"></i>
+          </span>
+          <span>Flush DB & Temporary Folders</span>
+        </button>
+      </div>
+    </div>
+  );
 };
 
 export default SystemSettingsForm;

src/client/constants/endpoints.ts

@@ -51,7 +51,7 @@ export const SETTINGS_SERVICE_BASE_URI = hostURIBuilder({
 });
 
 export const SOCKET_BASE_URI = hostURIBuilder({
-  protocol: "http",
+  protocol: "ws",
   host: process.env.UNDERLYING_HOSTNAME || "localhost",
   port: "3001",
   apiPath: `/`,

src/client/store/index.ts

@@ -7,7 +7,7 @@ import { io } from "socket.io-client";
 import socketIoMiddleware from "redux-socket.io-middleware";
 import { SOCKET_BASE_URI } from "../constants/endpoints";
 
-const socketConnection = io(SOCKET_BASE_URI);
+const socketConnection = io(SOCKET_BASE_URI, { transports: ["websocket"] });
 
 export const history = createBrowserHistory();
 const configureStore = (initialState) => {

src/server/index.ts

@@ -30,8 +30,8 @@ app.use(bodyParser.urlencoded({ extended: true }));
 
 // REGISTER ROUTES
 // all of the routes will be prefixed with /api
-// const routes: Router[] = Object.values(router);
-// app.use("/api", routes);
+const routes: Router[] = Object.values(router);
+app.use("/api", routes);
 
 // Send index.html on root request
 app.use(express.static("dist"));