🔧 Support for refactored import process WIP

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;