stuffsa ddsabps fjz glkjfsfhbv hg<akjyfeczdkfhjzub lichpfcljtblfcjg

frontend/src/pages/gameMasterPage.jsx

@@ -271,243 +271,208 @@ const handleUpdate = async () => {
   };
 
   // Add new handler for form changes
-  const handleFormChange = (key, value) => {
-    setFormData(prev => ({
+  const handleFormChange = (newFormData) => {
+    setFormData(newFormData);
+  };
+
+  // Optimiere Select-Komponenten mit React.memo
+const SelectField = React.memo(({ name, value, label, options, onChange, sx }) => (
+  <FormControl fullWidth sx={{ mb: 2, ...sx }}>
+    <InputLabel>{label}</InputLabel>
+    <Select
+      value={value || ''}
+      label={label}
+      onChange={(e) => onChange(name, e.target.value)}
+    >
+      {options.map(option => (
+        <MenuItem key={option.value} value={option.value}>
+          {option.label}
+        </MenuItem>
+      ))}
+    </Select>
+  </FormControl>
+));
+
+// Add this before the EditModal component
+const nonEditableFields = ['ItemID', 'NpcID', 'CharID', 'GameID', 'Img', 'OwnerName'];
+
+// Add the RenderField component
+const RenderField = React.memo(({ field, formData, handleFormChange, commonStyles }) => {
+  // Convert field name to label
+  const getLabel = (fieldName) => {
+    const labels = {
+      ItemName: 'Name',
+      CharName: 'Name',
+      Name: 'Name',
+      Type: 'Typ',
+      Art: 'Art',
+      Rarity: 'Seltenheit',
+      MaxDurability: 'Max. Haltbarkeit',
+      CurrentDurability: 'Aktuelle Haltbarkeit',
+      GoldValue: 'Goldwert',
+      Abilities: 'Fähigkeiten',
+      AP: 'Angriffspunkte',
+      Race: 'Rasse',
+      Sex: 'Geschlecht',
+      Age: 'Alter',
+      Job: 'Beruf',
+      Description: 'Beschreibung',
+      MaxHealth: 'Max. Gesundheit',
+      CurrentHealth: 'Aktuelle Gesundheit',
+      MaxMana: 'Max. Mana',
+      CurrentMana: 'Aktuelles Mana',
+      Strength: 'Stärke',
+      Dexterity: 'Geschicklichkeit',
+      Agility: 'Beweglichkeit',
+      Endurance: 'Ausdauer',
+      Level: 'Level',
+      Allied: 'Status',
+      Gold: 'Gold'
+    };
+    return labels[fieldName] || fieldName;
+  };
+
+  // Special fields that should use Select instead of TextField
+  const selectFields = {
+    Allied: [
+      { value: 0, label: 'Verbündet' },
+      { value: 1, label: 'Neutral' },
+      { value: 2, label: 'Feindlich' }
+    ],
+    Rarity: [
+      { value: 'common', label: 'Gewöhnlich' },
+      { value: 'uncommon', label: 'Ungewöhnlich' },
+      { value: 'rare', label: 'Selten' },
+      { value: 'epic', label: 'Episch' },
+      { value: 'legendary', label: 'Legendär' }
+    ]
+  };
+
+  if (selectFields[field]) {
+    return (
+      <FormControl fullWidth sx={{ mb: 2, ...commonStyles.select }}>
+        <InputLabel>{getLabel(field)}</InputLabel>
+        <Select
+          value={formData[field] || ''}
+          label={getLabel(field)}
+          onChange={(e) => handleFormChange(field, e.target.value)}
+        >
+          {selectFields[field].map(option => (
+            <MenuItem 
+              key={option.value} 
+              value={option.value}
+              sx={commonStyles.menuItem}
+            >
+              {option.label}
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+    );
+  }
+
+  return (
+    <TextField
+      fullWidth
+      label={getLabel(field)}
+      value={formData[field] || ''}
+      onChange={(e) => handleFormChange(field, e.target.value)}
+      sx={{ mb: 2, ...commonStyles.input }}
+      type={typeof formData[field] === 'number' ? 'number' : 'text'}
+      multiline={field === 'Description' || field === 'Abilities'}
+      rows={field === 'Description' || field === 'Abilities' ? 4 : 1}
+    />
+  );
+});
+
+// First, create a memoized EditModal component outside the main component
+const EditModal = React.memo(({ 
+  editModalOpen, 
+  handleModalClose, 
+  formData, 
+  editType, 
+  handleUpdate, 
+  handleFormChange,
+  commonStyles 
+}) => {
+  const dialogContentRef = React.useRef(null);
+  
+  // Store form state locally
+  const [localFormData, setLocalFormData] = React.useState(formData);
+
+  // Update local form data when parent formData changes
+  React.useEffect(() => {
+    setLocalFormData(formData);
+  }, [formData]);
+
+  // Local form change handler
+  const handleLocalFormChange = (key, value) => {
+    setLocalFormData(prev => ({
       ...prev,
       [key]: value
     }));
   };
 
-  // Update the EditModal component
-  const EditModal = () => {
-    const nonEditableFields = [
-      'GameID', 'CharID', 'ItemID', 'NPCID', 'Img', 'img', 
-      'GameId', 'NpcID', 'itemID', 'PlayerID', 'OwnerName'
-    ];
-    
-    const renderField = (key) => {
-      if (key === 'Allied') {
-        return (
-          <FormControl fullWidth key={key} sx={{ mb: 2, ...commonStyles.select }}>
-            <InputLabel>Status</InputLabel>
-            <Select
-              value={formData[key] || 0}
-              label="Status"
-              onChange={(e) => handleFormChange(key, e.target.value)}
-            >
-              <MenuItem value={0}>Allied</MenuItem>
-              <MenuItem value={1}>Neutral</MenuItem>
-              <MenuItem value={2}>Enemy</MenuItem>
-            </Select>
-          </FormControl>
-        );
-      }
-      
-      if (key === 'Sex') {
-        return (
-          <FormControl fullWidth key={key} sx={{ mb: 2, ...commonStyles.select }}>
-            <InputLabel>Sex</InputLabel>
-            <Select
-              value={formData[key] || ''}
-              label="Sex"
-              onChange={(e) => handleFormChange(key, e.target.value)}
-            >
-              <MenuItem value="Male">Male</MenuItem>
-              <MenuItem value="Female">Female</MenuItem>
-              <MenuItem value="Other">Other</MenuItem>
-            </Select>
-          </FormControl>
-        );
-      }
-
-      if (key === 'Rarity') {
-        return (
-          <FormControl fullWidth key={key} sx={{ mb: 2, ...commonStyles.select }}>
-            <InputLabel>Rarity</InputLabel>
-            <Select
-              value={formData[key] || 1}
-              label="Rarity"
-              onChange={(e) => handleFormChange(key, e.target.value)}
-            >
-              <MenuItem value={1}>Poor</MenuItem>
-              <MenuItem value={2}>Common</MenuItem>
-              <MenuItem value={3}>Uncommon</MenuItem>
-              <MenuItem value={4}>Rare</MenuItem>
-              <MenuItem value={5}>Epic</MenuItem>
-              <MenuItem value={6}>Legendary</MenuItem>
-              <MenuItem value={7}>Artifact</MenuItem>
-            </Select>
-          </FormControl>
-        );
-      }
-
-      if (key === 'Type') {
-        return (
-          <FormControl fullWidth key={key} sx={{ mb: 2, ...commonStyles.select }}>
-            <InputLabel>Type</InputLabel>
-            <Select
-              value={formData[key] || ''}
-              label="Type"
-              onChange={(e) => handleFormChange(key, e.target.value)}
-            >
-              <MenuItem value="Weapon">Weapon</MenuItem>
-              <MenuItem value="Armor">Armor</MenuItem>
-              <MenuItem value="Consumable">Consumable</MenuItem>
-              <MenuItem value="Quest">Quest Item</MenuItem>
-              <MenuItem value="Other">Other</MenuItem>
-            </Select>
-          </FormControl>
-        );
-      }
-
-      if (key === 'Art') {
-        return (
-          <FormControl fullWidth key={key} sx={{ mb: 2, ...commonStyles.select }}>
-            <InputLabel>Art</InputLabel>
-            <Select
-              value={formData[key] || ''}
-              label="Art"
-              onChange={(e) => handleFormChange(key, e.target.value)}
-            >
-              <MenuItem value="Sword">Sword</MenuItem>
-              <MenuItem value="Axe">Axe</MenuItem>
-              <MenuItem value="Bow">Bow</MenuItem>
-              <MenuItem value="Shield">Shield</MenuItem>
-              <MenuItem value="Staff">Staff</MenuItem>
-              <MenuItem value="Potion">Potion</MenuItem>
-              <MenuItem value="Other">Other</MenuItem>
-            </Select>
-          </FormControl>
-        );
-      }
-
-      if (key === 'OwnerID') {
-        return (
-          <FormControl fullWidth key={key} sx={{ mb: 2, ...commonStyles.select }}>
-            <InputLabel sx={{ color: '#fff' }}>Owner</InputLabel>
-            <Select
-              value={formData[key] || ''}
-              label="Owner"
-              onChange={(e) => handleFormChange(key, e.target.value)}
-              sx={{
-                color: '#fff',
-                '& .MuiOutlinedInput-notchedOutline': { borderColor: '#444' },
-                '&:hover .MuiOutlinedInput-notchedOutline': { borderColor: '#764ACB' },
-              }}
-            >
-              {allOwners.map((owner) => (
-                <MenuItem 
-                  key={owner.id} 
-                  value={owner.id || ''}
-                  sx={{ 
-                    ...commonStyles.menuItem,
-                    display: 'flex', 
-                    justifyContent: 'space-between' 
-                  }}
-                >
-                  <span>{owner.name}</span>
-                  {owner.type !== 'None' && (
-                    <Typography 
-                      variant="caption" 
-                      sx={{ 
-                        ml: 2,
-                        color: '#764ACB'
-                      }}
-                    >
-                      {owner.type}
-                    </Typography>
-                  )}
-                </MenuItem>
-              ))}
-            </Select>
-          </FormControl>
-        );
-      }
-
-      return (
-        <TextField
-          key={key}
-          fullWidth
-          label={key}
-          value={formData[key] || ''}
-          onChange={(e) => handleFormChange(key, e.target.value)}
-          sx={{ ...commonStyles.input, mb: 2 }}
-        />
-      );
-    };
-
-    return (
-      <Dialog 
-        open={editModalOpen} 
-        onClose={handleModalClose}
-        sx={commonStyles.dialog}
-      >
-        <DialogTitle sx={{ 
-          borderBottom: '1px solid #444',
-          color: '#fff',
-          backgroundColor: '#2e2e3f',
-          padding: '16px 24px'
-        }}>
-          {editType === 'item' 
-            ? 'Gegenstand Bearbeiten' 
-            : editType === 'npc' 
-              ? 'NSC Bearbeiten' 
-              : 'Charakter Bearbeiten'}
-        </DialogTitle>
-        <DialogContent sx={{ 
-          p: 3,
-          backgroundColor: '#1e1e2f'
-        }}>
-          {formData && (
-            <Box sx={{ p: 2 }}>
-              {Object.keys(formData)
-                .filter(key => !nonEditableFields.includes(key))
-                .map(key => renderField(key))}
-            </Box>
-          )}
-        </DialogContent>
-        <DialogActions sx={{ 
-          borderTop: '1px solid #444',
-          p: 2,
-          backgroundColor: '#2e2e3f',
-          '& .MuiButton-root': {
-            textTransform: 'none',
-            fontSize: '1rem',
-            padding: '6px 16px'
-          }
-        }}>
-          <Button 
-            onClick={handleModalClose}
-            variant="outlined"
-            sx={{
-              color: '#fff',
-              borderColor: '#444',
-              '&:hover': { 
-                borderColor: '#764ACB',
-                backgroundColor: 'rgba(118, 74, 203, 0.1)'
-              }
-            }}
-          >
-            Abbrechen
-          </Button>
-          <Button 
-            onClick={handleUpdate}
-            variant="contained"
-            sx={{
-              backgroundColor: '#764ACB',
-              color: '#fff',
-              '&:hover': { 
-                backgroundColor: '#9865f7'
-              }
-            }}
-          >
-            Änderungen Speichern
-          </Button>
-        </DialogActions>
-      </Dialog>
-    );
+  // Handle final update
+  const handleFinalUpdate = () => {
+    handleFormChange(localFormData); // Update parent state
+    handleUpdate(); // Save changes
   };
 
+  return (
+    <Dialog 
+      open={editModalOpen} 
+      onClose={handleModalClose}
+      sx={commonStyles.dialog}
+      scroll="paper"
+    >
+      <DialogTitle sx={{ color: '#fff' }}>
+        {editType === 'item' ? 'Gegenstand Bearbeiten' :
+         editType === 'npc' ? 'NSC Bearbeiten' :
+         'Charakter Bearbeiten'}
+      </DialogTitle>
+      <DialogContent ref={dialogContentRef}>
+        {localFormData && (
+          <Box sx={{ p: 2 }}>
+            {Object.keys(localFormData)
+              .filter(key => !nonEditableFields.includes(key))
+              .map(key => (
+                <RenderField 
+                  key={key}
+                  field={key}
+                  formData={localFormData}
+                  handleFormChange={handleLocalFormChange}
+                  commonStyles={commonStyles}
+                />
+              ))}
+          </Box>
+        )}
+      </DialogContent>
+      <DialogActions>
+        <Button 
+          onClick={handleModalClose}
+          sx={{ color: '#fff' }}
+        >
+          Abbrechen
+        </Button>
+        <Button 
+          onClick={handleFinalUpdate}
+          variant="contained"
+          sx={{
+            backgroundColor: '#764ACB',
+            color: '#fff',
+            '&:hover': { 
+              backgroundColor: '#9865f7'
+            }
+          }}
+        >
+          Änderungen Speichern
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+});
+
   const Section = ({ title, items, createPath, createText }) => (
     <Box sx={{
       mb: 4,
@@ -767,7 +732,15 @@ const handleUpdate = async () => {
         createPath="/create-item"
         createText="Gegenstand Erstellen"
       />
-      <EditModal />
+      <EditModal
+        editModalOpen={editModalOpen}
+        handleModalClose={handleModalClose}
+        formData={formData}
+        editType={editType}
+        handleUpdate={handleUpdate}
+        handleFormChange={handleFormChange}
+        commonStyles={commonStyles}
+      />
     </Box>
   );
 };