feat: implement custom hook for parsing changes to improve display formatting

frontend/src/components/settings/git/status/ViewChanges.jsx

@@ -1,74 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Modal from '../../../ui/Modal';
+import Modal from '@ui/Modal';
 import DiffCommit from './DiffCommit';
 import {FileText} from 'lucide-react';
+import useChangeParser from '@hooks/useChangeParser';
 
 const ViewChanges = ({isOpen, onClose, change, isIncoming}) => {
-    const parseKey = key => {
-        // Handle custom formats
-        if (key.startsWith('custom_formats[')) {
-            const formatName = key.match(/\[(.*?)\]/)?.[1] || '';
-            return `Custom Format: ${formatName}`;
-        }
-
-        // Handle nested keys
-        const parts = key.split('.');
-        if (parts.length > 1) {
-            return parts
-                .map(part =>
-                    part
-                        .split(/[\[\]_]/)
-                        .map(
-                            word =>
-                                word.charAt(0).toUpperCase() +
-                                word.slice(1).toLowerCase()
-                        )
-                        .join(' ')
-                )
-                .join(': ');
-        }
-
-        // Handle special cases
-        const specialTerms = {
-            minimumcustomformatscore: 'Minimum Custom Format Score',
-            minscoreincrement: 'Minimum Score Increment',
-            upgradeuntilscore: 'Upgrade Until Score',
-            upgradesallowed: 'Upgrades Allowed',
-            customformat: 'Custom Format',
-            qualitygroup: 'Quality Group'
-        };
-
-        const lowerKey = key.toLowerCase();
-        if (specialTerms[lowerKey]) {
-            return specialTerms[lowerKey];
-        }
-
-        // General formatting
-        return key
-            .split(/[\[\]_]/)
-            .map(
-                word =>
-                    word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
-            )
-            .join(' ')
-            .trim();
-    };
-
-    const formatValue = value => {
-        if (value === null || value === undefined || value === '~') return '-';
-
-        if (Array.isArray(value)) {
-            return value.length === 0 ? '[]' : value.join(', ');
-        }
-
-        if (typeof value === 'object') {
-            return JSON.stringify(value, null, 2);
-        }
-
-        return String(value);
-    };
-
+    // Parse the array of changes
+    const parsedChanges = useChangeParser(change.changes || []);
     const titleContent = (
         <div className='flex items-center space-x-4'>
             <div className='flex items-center space-x-2'>
@@ -88,6 +27,7 @@ const ViewChanges = ({isOpen, onClose, change, isIncoming}) => {
             title={titleContent}
             width='7xl'>
             <div className='space-y-4'>
+                {/* If there's a commit message, show it */}
                 {change.commit_message && (
                     <DiffCommit commitMessage={change.commit_message} />
                 )}
@@ -111,27 +51,26 @@ const ViewChanges = ({isOpen, onClose, change, isIncoming}) => {
                             </tr>
                         </thead>
                         <tbody>
-                            {change.changes.map((item, index) => (
+                            {parsedChanges.map(item => (
                                 <tr
-                                    key={index}
+                                    key={item.id}
                                     className='bg-gray-900 border-b border-gray-700'>
                                     <td className='py-4 px-4 text-gray-300'>
-                                        {item.change.charAt(0).toUpperCase() +
-                                            item.change.slice(1).toLowerCase()}
+                                        {item.changeType}
                                     </td>
                                     <td className='py-4 px-4'>
                                         <span className='font-medium text-gray-100'>
-                                            {parseKey(item.key)}
+                                            {item.key}
                                         </span>
                                     </td>
                                     <td className='py-4 px-4 font-mono text-sm text-gray-300'>
                                         <div className='whitespace-pre-wrap'>
-                                            {formatValue(item.from)}
+                                            {item.from}
                                         </div>
                                     </td>
                                     <td className='py-4 px-4 font-mono text-sm text-gray-300'>
                                         <div className='whitespace-pre-wrap'>
-                                            {formatValue(item.to || item.value)}
+                                            {item.to}
                                         </div>
                                     </td>
                                 </tr>

frontend/src/hooks/useChangeParser.js

@@ -0,0 +1,54 @@
+import {useMemo} from 'react';
+
+/**
+ * Custom hook to parse the raw changes from the backend
+ * into a format more suitable for display.
+ */
+export default function useChangeParser(changes) {
+    const parseValue = value => {
+        // Make sure null, undefined, and '~' are consistently shown
+        if (value === null || value === undefined || value === '~') {
+            return '-';
+        }
+
+        // For arrays, join them or show '[]'
+        if (Array.isArray(value)) {
+            return value.length === 0 ? '[]' : value.join(', ');
+        }
+
+        // For objects, stringify with indentation
+        if (typeof value === 'object') {
+            return JSON.stringify(value, null, 2);
+        }
+
+        // Otherwise, just cast to string
+        return String(value);
+    };
+
+    /**
+     * Prepare each change entry for display:
+     * - `changeType` is a humanized version of "modified", "added", "removed".
+     * - `formattedKey` can be the raw `key` from the backend or further modified
+     *   if you wish to remove bracket notation, handle special naming, etc.
+     */
+    const parsedChanges = useMemo(() => {
+        if (!Array.isArray(changes)) return [];
+
+        return changes.map((item, index) => {
+            const changeType =
+                item.change.charAt(0).toUpperCase() +
+                item.change.slice(1).toLowerCase();
+            const formattedKey = item.key; // or transform item.key if needed
+
+            return {
+                id: `${formattedKey}-${index}-${item.change}`, // a stable key
+                changeType,
+                key: formattedKey,
+                from: parseValue(item.from),
+                to: parseValue(item.to ?? item.value)
+            };
+        });
+    }, [changes]);
+
+    return parsedChanges;
+}