From 7fc4c1912c7fc618198db609b4baa98d8a271969 Mon Sep 17 00:00:00 2001
From: iris <vinzenz.f.s@gmail.com>
Date: Wed, 29 Jul 2026 21:20:36 +0200
Subject: [PATCH] admin: share one drinks list between Drinks and Bars instead
 of two independent copies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Drinks and Bars each fetched + held their own copy of the drinks list. Adding
(or editing/archiving) a drink only updated Drinks's own copy — Bars's
BarDrinkEditor kept rendering the stale pre-change snapshot until a full page
reload re-mounted everything, so a newly added drink didn't show up in the
'add to bar' list without a manual refresh.

Lifted the drinks list + its reload fn into Dashboard, passed down as props to
both Drinks and Bars.
---
 client/src/admin/Admin.tsx | 28 ++++++++++++++++------------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/client/src/admin/Admin.tsx b/client/src/admin/Admin.tsx
index a77e6b8..9c9e8d1 100644
--- a/client/src/admin/Admin.tsx
+++ b/client/src/admin/Admin.tsx
@@ -76,6 +76,18 @@ function Login({ onAuthed }: { onAuthed: () => void }) {
 }
 
 function Dashboard({ onLogout }: { onLogout: () => void }) {
+  // Drinks lives here, not inside <Drinks>, so <Bars> (specifically
+  // BarDrinkEditor's "available to add" list) sees a newly added/edited
+  // drink immediately. Each component used to fetch its own independent
+  // copy of the drinks list, so adding a drink updated only <Drinks>'s
+  // copy — <Bars> kept rendering its stale pre-add snapshot until a full
+  // page reload re-mounted everything.
+  const [drinks, setDrinks] = useState<Drink[]>([]);
+  function reloadDrinks() {
+    fetch('/admin/api/drinks').then(j).then(setDrinks).catch(e => alert(`Fehler beim Laden: ${e}`));
+  }
+  useEffect(reloadDrinks, []);
+
   return (
     <div class="admin">
       <div class="row" style="justify-content: space-between">
@@ -86,8 +98,8 @@ function Dashboard({ onLogout }: { onLogout: () => void }) {
       </div>
       <Stats />
       <Exports />
-      <Drinks />
-      <Bars />
+      <Drinks drinks={drinks} reload={reloadDrinks} />
+      <Bars drinks={drinks} />
     </div>
   );
 }
@@ -175,17 +187,11 @@ function Exports() {
   );
 }
 
-function Drinks() {
-  const [list, setList] = useState<Drink[]>([]);
+function Drinks({ drinks: list, reload }: { drinks: Drink[]; reload: () => void }) {
   const [name, setName] = useState('');
   const [price, setPrice] = useState('');
   const [adding, setAdding] = useState(false);
 
-  function reload() {
-    fetch('/admin/api/drinks').then(j).then(setList).catch(e => alert(`Fehler beim Laden: ${e}`));
-  }
-  useEffect(reload, []);
-
   async function add() {
     const cents = Math.round(parseFloat(price) * 100);
     if (!name || !Number.isFinite(cents) || adding) return;
@@ -360,15 +366,13 @@ function BarDrinkEditor({
   );
 }
 
-function Bars() {
+function Bars({ drinks }: { drinks: Drink[] }) {
   const [bars, setBars] = useState<BarRow[]>([]);
-  const [drinks, setDrinks] = useState<Drink[]>([]);
   const [newName, setNewName] = useState('');
   const [addingBar, setAddingBar] = useState(false);
 
   function reload() {
     fetch('/admin/api/bars').then(j).then(setBars).catch(e => alert(`Fehler beim Laden: ${e}`));
-    fetch('/admin/api/drinks').then(j).then(setDrinks).catch(e => alert(`Fehler beim Laden: ${e}`));
   }
   useEffect(reload, []);