chore: use URL from local environment variables; display record count…

… in content page

Dockerfile-frontend

@@ -10,7 +10,11 @@ COPY ./web-frontend/ .
 RUN npm install
 
 # for production mode
-RUN node ./node_modules/rimraf dist && node ./node_modules/typescript/bin/tsc && node ./node_modules/vite/bin/vite.js build
+RUN npm run build
+
+ARG MB3_API_URL
+RUN touch .env
+RUN echo "VITE_MB3_API_URL=${MB3_API_URL}" > .env
 
 EXPOSE 3000
-CMD npm run preview
+CMD npm run start

docker/docker-compose-deploy.yaml

@@ -1,7 +1,6 @@
-version: '3.1'
+version: "3.1"
 
 services:
-
   mongodb:
     extends:
       file: docker-compose-common.yaml
@@ -28,8 +27,8 @@ services:
     build:
       context: ..
       dockerfile: Dockerfile-frontend
-    environment:
-      MB3_API_URL: "http://${MB3_API_HOST}:${MB3_API_PORT}"
+      args:
+        MB3_API_URL: "http://${MB3_API_HOST}:${MB3_API_PORT}"
     ports:
       - "${MB3_FRONTEND_PORT}:3000"
 

docker/env.dist

@@ -6,7 +6,7 @@
 # Server configuration
 # --------------------
 
-# The port where the API is exposed for frontend and applikation usage
+# The port where the API is exposed for frontend and application usage
 MB3_API_PORT=8081
 
 # The host where the frontend is running

web-frontend/.dockerignore

@@ -1,4 +1,8 @@
 node_modules
 npm-debug.log
 dist
-data
+data
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local

web-frontend/package.json

@@ -2,8 +2,9 @@
   "name": "web-frontend",
   "version": "1.0.0",
   "scripts": {
-    "start": "vite --host localhost --port 3000 --strictPort --open",
-    "build": "rimraf dist && tsc && vite build",
+    "dev": "vite --mode development --host localhost --port 3000 --strictPort --open",
+    "build": "rimraf dist && tsc && vite build --mode production",
+    "start": "vite --mode production --host 0.0.0.0 --port 3000 --strictPort",
     "preview": "vite preview --host 0.0.0.0 --port 3000 -d --strictPort",
     "compile": "tsc",
     "clean-install": "rm package-lock.json && rm -rf node_modules && npm i",

web-frontend/src/elements/routes/pages/accession/Accession.tsx

@@ -14,8 +14,6 @@ import {
 } from 'react-router-dom';
 import routes from '../../../../constants/routes';
 
-const base = 'http://localhost:8081';
-
 function Accession() {
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
@@ -25,8 +23,8 @@ function Accession() {
   const [requestedAccession, setRequestedAccession] = useState<string>('');
   const [record, setRecord] = useState<Record | undefined>();
 
-  async function getRecord(base: string, id: string) {
-    const url = base + '/v1/records/' + id;
+  async function getRecord(id: string) {
+    const url = import.meta.env.VITE_MB3_API_URL + '/v1/records/' + id;
 
     const resp = await fetch(url);
     if (resp.ok) {
@@ -42,11 +40,11 @@ function Accession() {
     }
   }
 
-  const handleOnSearch = useCallback(async (base: string, id: string) => {
+  const handleOnSearch = useCallback(async (id: string) => {
     setIsRequesting(true);
     setRequestedAccession(id);
 
-    const rec: Record | undefined = await getRecord(base, id);
+    const rec: Record | undefined = await getRecord(id);
     if (rec) {
       rec.peak.peak.values = rec.peak.peak.values.map((p) => {
         const _p = p;
@@ -82,7 +80,7 @@ function Accession() {
     const id = searchParams.get('id');
     if (id) {
       setAccession(id);
-      handleOnSearch(base, id);
+      handleOnSearch(id);
     }
   }, [handleOnSearch, searchParams]);
 

web-frontend/src/elements/routes/pages/content/Content.tsx

@@ -1,7 +1,45 @@
+import { useCallback, useEffect, useState } from 'react';
+import Spinner from '../../../basic/Spinner';
+
 function Content() {
+  const [isRequesting, setIsRequesting] = useState<boolean>(false);
+  const [recordCount, setRecordCount] = useState<number | undefined>();
+
+  async function getRecordCount() {
+    const url = import.meta.env.VITE_MB3_API_URL + '/v1/records/count';
+
+    const resp = await fetch(url);
+    if (resp.ok) {
+      return await resp.json();
+    } else {
+      return undefined;
+    }
+  }
+
+  const handleOnFetch = useCallback(async () => {
+    setIsRequesting(true);
+
+    const count: number | undefined = await getRecordCount();
+
+    setRecordCount(count);
+    setIsRequesting(false);
+  }, []);
+
+  useEffect(() => {
+    handleOnFetch();
+  }, [handleOnFetch]);
+
   return (
     <div>
-      <h2>Content View</h2>
+      {isRequesting ? (
+        <Spinner buttonDisabled buttonStyle={{ display: 'none' }} />
+      ) : (
+        <h2>
+          {recordCount
+            ? `MassBank has ${recordCount} entries!`
+            : 'Could not fetch record count!'}
+        </h2>
+      )}
     </div>
   );
 }