🔧 Miscellaneous Fixes (#79)

* ⚡️ Config key to expose hostname in a Docker context

* 🔧 Miscellaneous Fixes

README.md

@@ -40,9 +40,8 @@ For debugging and troubleshooting, you can run this app locally using these step
 
 1. Clone this repo using `git clone https://github.com/rishighan/threetwo.git`
 2. `yarn run dev` (you can ignore the warnings)
-3. This will open `http://localhost:3050` in your default browser
+3. This will open `http://localhost:5173` in your default browser
-4. For testing `OPDS` functionality, create a folder called `comics` under `/src/server` and put some comics in there. The `OPDS` feed is accessed to `http://localhost:8050/api/opds`
+4. Note that this is simply the UI layer and won't offer anything beyond a scaffold. You have to spin up the microservices locally to get it to work.
-5. Note that this is simply the UI layer and won't offer anything beyond a scaffold. You have to spin up the microservices locally to get it to work.
 
 
 ## Troubleshooting

src/client/actions/fileops.actions.tsx

@@ -127,7 +127,8 @@ export const getComicBooks = (options) => async (dispatch) => {
  * @returns Nothing.
  * @param payload
  */
-export const importToDB = (sourceName: string, metadata?: any) => (dispatch) => {
+export const importToDB =
+  (sourceName: string, metadata?: any) => (dispatch) => {
     try {
       const comicBookMetadata = {
         importType: "new",
@@ -144,7 +145,7 @@ export const importToDB = (sourceName: string, metadata?: any) => (dispatch) =>
           },
           sourcedMetadata: metadata || null,
           acquisition: { source: { wanted: true, name: sourceName } },
-      }
+        },
       };
       dispatch({
         type: IMS_CV_METADATA_IMPORT_CALL_IN_PROGRESS,
@@ -169,7 +170,7 @@ export const importToDB = (sourceName: string, metadata?: any) => (dispatch) =>
         importError: error,
       });
     }
-};
+  };
 
 export const fetchVolumeGroups = () => async (dispatch) => {
   try {
@@ -254,7 +255,6 @@ export const fetchComicVineMatches =
  * @returns {any}
  */
 export const extractComicArchive =
-
   (path: string, options: any): any =>
   async (dispatch) => {
     dispatch({

src/client/components/Dashboard/PullList.tsx

@@ -20,7 +20,7 @@ export const PullList = ({ issues }: PullListProps): ReactElement => {
   useEffect(() => {
     dispatch(
       getWeeklyPullList({
-        startDate: "2023-1-25",
+        startDate: "2023-5-25",
         pageSize: "15",
         currentPage: "1",
       }),

src/client/components/Dashboard/RecentlyImported.tsx

@@ -125,7 +125,7 @@ export const RecentlyImported = ({
                     <dd className="is-size-9">
                       <dl>
                         <span className="icon custom-icon">
-                          <img src={`/img/${icon}`} />
+                          <img src={`/src/client/assets/img/${icon}`} />
                         </span>
                       </dl>
                       <dl>

src/client/components/Library/LibraryGrid.tsx

@@ -73,7 +73,7 @@ export const LibraryGrid = (libraryGridProps: ILibraryGridProps) => {
                 <div className="content is-flex is-flex-direction-row">
                   {!isEmpty(sourcedMetadata.comicvine) && (
                     <span className="icon cv-icon is-small">
-                      <img src="/dist/img/cvlogo.svg" />
+                      <img src="/src/client/assets/img/cvlogo.svg" />
                     </span>
                   )}
                   {isNil(rawFileDetails) && (

src/client/components/Navbar.tsx

@@ -85,7 +85,7 @@ const Navbar: React.FunctionComponent = (props) => {
               {downloadProgressTick && <div className="pulsating-circle"></div>}
             </a>
             {!isUndefined(downloadProgressTick) ? (
-              <div className="navbar-dropdown is-right">
+              <div className="navbar-dropdown is-right is-boxed">
                 <a className="navbar-item">
                   <DownloadProgressTick data={downloadProgressTick} />
                 </a>              </div>
@@ -98,7 +98,7 @@ const Navbar: React.FunctionComponent = (props) => {
                 <a className="navbar-link is-arrowless has-text-success">
                   <i className="fa-solid fa-bolt"></i>
                 </a>
-                <div className="navbar-dropdown mt-3 pt-4 pr-2 pl-2 is-right airdcpp-status is-boxed">
+                <div className="navbar-dropdown pr-2 pl-2 is-right airdcpp-status is-boxed">
                   {/* AirDC++ Session Information */}
 
                   <p>

src/client/constants/endpoints.ts

@@ -8,6 +8,7 @@ export const hostURIBuilder = (options: Record<string, string>): string => {
     options.apiPath
   );
 };
+console.log(import.meta);
 
 export const CORS_PROXY_SERVER_URI = hostURIBuilder({
   protocol: "http",