Merge branch 'dev' into debian12

fix: update dependency reference for backend service in docker-compose

backend/Dockerfile

@@ -7,6 +7,6 @@ RUN npm install
 
 COPY . .
 
-EXPOSE 8002
+EXPOSE 8102
 
 CMD ["npm", "start"]

backend/routes/api.js

@@ -7,8 +7,6 @@ import {
   deleteLoanFromDatabase,
   getBorrowableItemsFromDatabase,
   createLoanInDatabase,
-  onTake,
-  onReturn,
 } from "../services/database.js";
 import { authenticate, generateToken } from "../services/tokenService.js";
 const router = express.Router();
@@ -87,26 +85,6 @@ router.post("/borrowableItems", authenticate, async (req, res) => {
   }
 });
 
-router.post("/takeLoan/:id", authenticate, async (req, res) => {
-  const loanId = req.params.id;
-  const result = await onTake(loanId);
-  if (result.success) {
-    res.status(200).json({ message: "Loan taken successfully" });
-  } else {
-    res.status(500).json({ message: "Failed to take loan" });
-  }
-});
-
-router.post("/returnLoan/:id", authenticate, async (req, res) => {
-  const loanId = req.params.id;
-  const result = await onReturn(loanId);
-  if (result.success) {
-    res.status(200).json({ message: "Loan returned successfully" });
-  } else {
-    res.status(500).json({ message: "Failed to return loan" });
-  }
-});
-
 router.post("/createLoan", authenticate, async (req, res) => {
   try {
     const { items, startDate, endDate } = req.body || {};

backend/server.js

@@ -5,7 +5,7 @@ import apiRouter from "./routes/api.js";
 import apiRouterV2 from "./routes/apiV2.js";
 env.config();
 const app = express();
-const port = 8002;
+const port = 8102;
 
 app.use(cors());
 // Increase body size limits to support large CSV JSON payloads

backend/services/database.js

@@ -8,6 +8,7 @@ const pool = mysql
     user: process.env.DB_USER,
     password: process.env.DB_PASSWORD,
     database: process.env.DB_NAME,
+    port: process.env.DB_PORT,
   })
   .promise();
 
@@ -293,29 +294,3 @@ export const createLoanInDatabase = async (
     conn.release();
   }
 };
-
-// These functions are only temporary, and will be deleted when the full bin is set up.
-
-export const onTake = async (loanId) => {
-  const [result] = await pool.query(
-    "UPDATE loans SET take_date = NOW() WHERE id = ?",
-    [loanId]
-  );
-
-  if (result.affectedRows > 0) {
-    return { success: true };
-  }
-  return { success: false };
-};
-
-export const onReturn = async (loanId) => {
-  const [result] = await pool.query(
-    "UPDATE loans SET returned_date = NOW() WHERE id = ?",
-    [loanId]
-  );
-
-  if (result.affectedRows > 0) {
-    return { success: true };
-  }
-  return { success: false };
-};

docker-compose.yml

@@ -1,23 +1,30 @@
 services:
-  #  borrow_system-frontend:
-  #    container_name: borrow_system-frontend
-  #    build: ./frontend
-  #    ports:
-  #      - "8001:8001"
-  #    environment:
-  #      - CHOKIDAR_USEPOLLING=true
-  #    volumes:
-  #      - ./frontend:/app
-  #      - /app/node_modules
-  #    restart: unless-stopped
+  borrow_system-frontend:
+    container_name: borrow_system-frontend
+    build: ./frontend
+    ports:
+      - "8101:8101"
+    networks:
+      - proxynet
+      - borrow_system-internal
+    environment:
+      - CHOKIDAR_USEPOLLING=true
+    volumes:
+      - ./frontend:/app
+      - /app/node_modules
+    restart: unless-stopped
 
   borrow_system-backend:
     container_name: borrow_system-backend
     build: ./backend
     ports:
-      - "8002:8002"
+      - "8102:8102"
+    networks:
+      - proxynet
+      - borrow_system-internal
     environment:
       DB_HOST: mysql
+      DB_PORT: 3306
       DB_USER: root
       DB_PASSWORD: ${DB_PASSWORD}
       DB_NAME: borrow_system
@@ -38,6 +45,14 @@ services:
       - mysql-data:/var/lib/mysql
     ports:
       - "3309:3306"
+    networks:
+      - borrow_system-internal
 
 volumes:
   mysql-data:
+
+networks:
+  proxynet:
+    external: true
+  borrow_system-internal:
+    external: false

frontend/Dockerfile

@@ -7,6 +7,6 @@ RUN npm install
 
 COPY . .
 
-EXPOSE 8001
+EXPOSE 8101
 
 CMD ["npm", "run", "dev"]

frontend/src/components/Form4.tsx

@@ -4,7 +4,6 @@ import { handleDeleteLoan } from "../utils/userHandler";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import Cookies from "js-cookie";
 import { queryClient } from "../utils/queryClient";
-import { onTake, onReturn } from "../utils/userHandler";
 
 type Loan = {
   id: number;
@@ -27,7 +26,7 @@ const formatDate = (iso: string | null) => {
 };
 
 async function fetchUserLoans(): Promise<Loan[]> {
-  const res = await fetch("http://localhost:8002/api/userLoans", {
+  const res = await fetch("https://backend.insta.the1s.de/api/userLoans", {
     method: "GET",
     headers: { Authorization: `Bearer ${Cookies.get("token") || ""}` },
   });
@@ -50,20 +49,6 @@ const Form4: React.FC = () => {
     },
   });
 
-  const takeMutation = useMutation({
-    mutationFn: (loanID: number) => onTake(loanID),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["userLoans"] });
-    },
-  });
-
-  const returnMutation = useMutation({
-    mutationFn: (loanID: number) => onReturn(loanID),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["userLoans"] });
-    },
-  });
-
   const onDelete = (loanID: number) => deleteMutation.mutate(loanID);
 
   if (isFetching) {
@@ -114,32 +99,11 @@ const Form4: React.FC = () => {
                   </div>
                   <div>
                     <span className="text-slate-500">Abgeholt:</span>{" "}
-                    {loan.take_date ? (
-                      formatDate(loan.take_date)
-                    ) : (
-                      <button
-                        className="inline-flex items-center rounded-md border border-blue-200 bg-blue-50 px-2 py-0.5 text-[11px] font-medium text-blue-700 hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-500/40 disabled:opacity-50"
-                        onClick={() => takeMutation.mutate(loan.id)}
-                        disabled={takeMutation.isPending}
-                      >
-                        {takeMutation.isPending ? "..." : "Abholen"}
-                      </button>
-                    )}
+                    {formatDate(loan.take_date)}
                   </div>
                   <div>
                     <span className="text-slate-500">Zurück:</span>{" "}
-                    {loan.returned_date ? (
-                      formatDate(loan.returned_date)
-                    ) : (
-                      <button
-                        className="inline-flex items-center rounded-md border border-emerald-200 bg-emerald-50 px-2 py-0.5 text-[11px] font-medium text-emerald-700 hover:bg-emerald-100 focus:outline-none focus:ring-2 focus:ring-emerald-500/40 disabled:opacity-50"
-                        onClick={() => returnMutation.mutate(loan.id)}
-                        disabled={returnMutation.isPending || !loan.take_date}
-                        title={!loan.take_date ? "Erst abholen" : ""}
-                      >
-                        {returnMutation.isPending ? "..." : "Zurückgeben"}
-                      </button>
-                    )}
+                    {formatDate(loan.returned_date)}
                   </div>
                 </div>
                 <div className="mt-2 text-xs text-slate-700">
@@ -206,31 +170,10 @@ const Form4: React.FC = () => {
                     {formatDate(loan.end_date)}
                   </td>
                   <td className="px-4 py-3 whitespace-nowrap font-mono tabular-nums text-slate-900">
-                    {loan.take_date ? (
-                      formatDate(loan.take_date)
-                    ) : (
-                      <button
-                        className="inline-flex items-center rounded-md border border-blue-200 bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-500/40 disabled:opacity-50"
-                        onClick={() => takeMutation.mutate(loan.id)}
-                        disabled={takeMutation.isPending}
-                      >
-                        {takeMutation.isPending ? "..." : "Abholen"}
-                      </button>
-                    )}
+                    {formatDate(loan.take_date)}
                   </td>
                   <td className="px-4 py-3 whitespace-nowrap font-mono tabular-nums text-slate-900">
-                    {loan.returned_date ? (
-                      formatDate(loan.returned_date)
-                    ) : (
-                      <button
-                        className="inline-flex items-center rounded-md border border-emerald-200 bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700 hover:bg-emerald-100 focus:outline-none focus:ring-2 focus:ring-emerald-500/40 disabled:opacity-50"
-                        onClick={() => returnMutation.mutate(loan.id)}
-                        disabled={returnMutation.isPending || !loan.take_date}
-                        title={!loan.take_date ? "Erst abholen" : ""}
-                      >
-                        {returnMutation.isPending ? "..." : "Zurückgeben"}
-                      </button>
-                    )}
+                    {formatDate(loan.returned_date)}
                   </td>
                   <td className="px-4 py-3 whitespace-nowrap font-mono tabular-nums text-slate-900">
                     {formatDate(loan.created_at)}
@@ -239,7 +182,7 @@ const Form4: React.FC = () => {
                     <div className="text-slate-900">
                       {Array.isArray(loan.loaned_items_name)
                         ? loan.loaned_items_name.join(", ")
-                        : ""}
+                        : "-"}
                     </div>
                   </td>
                   <td className="px-4 py-3 text-right">

frontend/src/utils/fetchData.ts

@@ -25,7 +25,7 @@ export const fetchAllData = async (token: string | undefined) => {
   if (!token) return;
   // First we fetch all items that are potentially available for borrowing
   try {
-    const response = await fetch("http://localhost:8002/api/items", {
+    const response = await fetch("https://backend.insta.the1s.de/api/items", {
       method: "GET",
       headers: {
         Authorization: `Bearer ${token}`,
@@ -57,7 +57,7 @@ export const fetchAllData = async (token: string | undefined) => {
 
   // get all loans
   try {
-    const response = await fetch("http://localhost:8002/api/loans", {
+    const response = await fetch("https://backend.insta.the1s.de/api/loans", {
       method: "GET",
       headers: {
         Authorization: `Bearer ${token}`,
@@ -89,7 +89,7 @@ export const fetchAllData = async (token: string | undefined) => {
 
   // get user loans
   try {
-    const response = await fetch("http://localhost:8002/api/userLoans", {
+    const response = await fetch("https://backend.insta.the1s.de/api/userLoans", {
       method: "GET",
       headers: {
         Authorization: `Bearer ${token}`,
@@ -122,7 +122,7 @@ export const fetchAllData = async (token: string | undefined) => {
 
 export const loginUser = async (username: string, password: string) => {
   try {
-    const response = await fetch("http://localhost:8002/api/login", {
+    const response = await fetch("https://backend.insta.the1s.de/api/login", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
@@ -158,7 +158,7 @@ export const getBorrowableItems = async () => {
   }
 
   try {
-    const response = await fetch("http://localhost:8002/api/borrowableItems", {
+    const response = await fetch("https://backend.insta.the1s.de/api/borrowableItems", {
       method: "POST",
       headers: {
         Authorization: `Bearer ${Cookies.get("token") || ""}`,

frontend/src/utils/userHandler.ts

@@ -5,7 +5,7 @@ import { queryClient } from "./queryClient";
 export const handleDeleteLoan = async (loanID: number): Promise<boolean> => {
   try {
     const response = await fetch(
-      `http://localhost:8002/api/deleteLoan/${loanID}`,
+      `https://backend.insta.the1s.de/api/deleteLoan/${loanID}`,
       {
         method: "DELETE",
         headers: {
@@ -75,7 +75,7 @@ export const rmFromRemove = (itemID: number) => {
 
 export const createLoan = async (startDate: string, endDate: string) => {
   const items = removeArr;
-  const response = await fetch("http://localhost:8002/api/createLoan", {
+  const response = await fetch("https://backend.insta.the1s.de/api/createLoan", {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
@@ -100,40 +100,3 @@ export const createLoan = async (startDate: string, endDate: string) => {
 
   return true;
 };
-
-export const onReturn = async (loanID: number) => {
-  const response = await fetch(
-    `http://localhost:8002/api/returnLoan/${loanID}`,
-    {
-      method: "POST",
-      headers: {
-        Authorization: `Bearer ${Cookies.get("token") || ""}`,
-      },
-    }
-  );
-
-  if (!response.ok) {
-    myToast("Fehler beim Zurückgeben der Ausleihe", "error");
-    return false;
-  }
-
-  myToast("Ausleihe erfolgreich zurückgegeben!", "success");
-  return true;
-};
-
-export const onTake = async (loanID: number) => {
-  const response = await fetch(`http://localhost:8002/api/takeLoan/${loanID}`, {
-    method: "POST",
-    headers: {
-      Authorization: `Bearer ${Cookies.get("token") || ""}`,
-    },
-  });
-
-  if (!response.ok) {
-    myToast("Fehler beim Ausleihen der Ausleihe", "error");
-    return false;
-  }
-
-  myToast("Ausleihe erfolgreich ausgeliehen!", "success");
-  return true;
-};

frontend/vite.config.ts

@@ -1,15 +1,17 @@
 import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-import svgr from "vite-plugin-svgr";
 import tailwindcss from "@tailwindcss/vite";
 
 export default defineConfig({
-  plugins: [react(), svgr(), tailwindcss()],
+  plugins: [tailwindcss()],
   server: {
     host: "0.0.0.0",
-    port: 8001,
-    watch: {
-      usePolling: true,
+    allowedHosts: ["insta.the1s.de"],
+    port: 8101,
+    watch: { usePolling: true },
+    hmr: {
+      host: "insta.the1s.de",
+      port: 8101,
+      protocol: "wss",
     },
   },
 });