dev day #67

DOCS/TEST_MYUIBRIX_NOW.md

@@ -0,0 +1,198 @@
+# Test MyUIbrix Editor - Quick Guide
+
+**After applying the DOM manipulation fix**
+
+## 🔄 First: Rebuild Frontend
+
+The changes are in TypeScript/React, so you need to rebuild:
+
+```bash
+cd /home/tdvorak/Desktop/PROG+HTML/Fotbal/fotbal-club/frontend
+npm run build
+```
+
+Or for development:
+```bash
+npm start
+```
+
+Then **hard refresh** your browser: `Ctrl + Shift + R` (Linux/Windows) or `Cmd + Shift + R` (Mac)
+
+---
+
+## ✅ Test Checklist
+
+### 1. **Delete Button Test**
+1. Open homepage as admin
+2. Click edit mode (MyUIbrix toolbar appears)
+3. Hover over ANY section (hero, matches, gallery, videos, etc.)
+4. Click the 🗑️ delete button
+5. **Expected:** Section disappears immediately, NO console errors
+6. **Old behavior:** Crash with "removeChild: not a child" error
+
+---
+
+### 2. **Style Changes Test**
+1. In edit mode, click the ⚙️ button on ANY section
+2. Change padding, margin, or background color
+3. **Expected:** Styles apply instantly to that section
+4. **Old behavior:** Only worked on hero section, others didn't change
+
+Try these sections specifically:
+- ✅ Hero section
+- ✅ Matches section
+- ✅ Gallery section  
+- ✅ Videos section
+- ✅ Merch section
+- ✅ Newsletter section
+- ✅ Sponsors section
+
+---
+
+### 3. **Reordering Test**
+1. Drag a section (hold and drag the overlay)
+2. Drop it on another section
+3. **Expected:** Sections reorder smoothly, NO console errors
+4. **Old behavior:** Console errors, sections jump around
+
+Or use the arrow buttons:
+- Click ⬆️ to move section up
+- Click ⬇️ to move section down
+
+---
+
+### 4. **Console Check**
+Open browser DevTools (F12) → Console tab
+
+**Good signs:**
+```
+Visual reorder applied via CSS order
+```
+
+**Bad signs (should NOT see):**
+```
+❌ DOMException: Node.removeChild
+❌ Failed to execute 'removeChild'
+❌ Node.insertBefore: The node to be inserted is not a child
+```
+
+---
+
+## 🎯 What Should Work Now
+
+| Feature | Status | Notes |
+|---------|--------|-------|
+| Delete any section | ✅ Working | Uses React state |
+| Style any section | ✅ Working | All have position:relative |
+| Reorder sections | ✅ Working | CSS order property |
+| Move up/down | ✅ Working | CSS order property |
+| Drag & drop | ✅ Working | No DOM manipulation |
+| Multiple edits | ✅ Working | No race conditions |
+| Save changes | ✅ Working | State persisted to DB |
+
+---
+
+## 🐛 Troubleshooting
+
+### Still seeing "removeChild" errors?
+1. **Hard refresh:** `Ctrl + Shift + R`
+2. **Clear cache:** Browser settings → Clear site data
+3. **Check build:** Ensure `npm run build` completed successfully
+4. **Check file timestamps:** Modified files should be recent
+
+### Styles not applying to some sections?
+1. **Verify data-element:** Section must have `data-element="name"` attribute
+2. **Check position:** Section should have `style={{ position: 'relative', ... }}`
+3. **Console errors:** Look for overlay attachment errors
+
+### Overlays not showing?
+1. **Hover test:** Move mouse slowly over sections
+2. **Z-index:** Check toolbar is visible (z-index: 9999)
+3. **Container:** Verify viewport wrapper is created
+
+---
+
+## 📊 Expected Console Output
+
+When working correctly, you should see:
+
+```javascript
+// On reorder
+Visual reorder applied via CSS order
+
+// On style change (from hook)
+Style change event received for: hero
+
+// On delete (no errors!)
+(nothing - silence is golden!)
+```
+
+---
+
+## 🎉 Success Criteria
+
+All these should work WITHOUT errors:
+
+1. ✅ Delete 3 different sections
+2. ✅ Change styles on 5 different sections
+3. ✅ Reorder sections by dragging
+4. ✅ Move sections with ⬆️⬇️ buttons
+5. ✅ Close editor (X button)
+6. ✅ Reopen editor - changes persisted
+7. ✅ No console errors throughout
+
+---
+
+## 🔬 Advanced Testing
+
+### Test React DevTools
+1. Install React DevTools extension
+2. Open DevTools → Components tab
+3. Find `HomePage` component
+4. Check state:
+   - `visibleElements` Set should reflect deleted items
+   - `elementOrder` array should reflect reordering
+
+### Test Error Boundary
+1. Artificially cause an error (if you want)
+2. ErrorBoundary should catch it
+3. Should show error message
+4. Auto-recovery in 3 seconds
+
+### Test Persistence
+1. Make changes in editor
+2. Click "Publikovat" (Publish) button
+3. Close editor
+4. Refresh page
+5. Changes should be visible in normal view
+
+---
+
+## 📝 Report Results
+
+If everything works:
+```
+✅ WORKING - No removeChild errors
+✅ Delete, style, reorder all functional
+✅ All sections editable
+```
+
+If issues persist:
+```
+❌ ERROR: [paste console error here]
+❌ SECTION: [which section has problem]
+❌ ACTION: [what you were doing]
+```
+
+---
+
+## 🚀 What Changed
+
+**Technical summary:**
+- ❌ Removed: Direct DOM manipulation (`removeChild`, `appendChild`)
+- ✅ Added: React state-driven updates
+- ✅ Added: CSS `order` property for reordering
+- ✅ Added: `position: relative` to all sections
+- ✅ Fixed: Style propagation to all elements
+
+**Result:** MyUIbrix now works WITH React instead of fighting it.