From 893d04afe97645153c005f85a921ad8039f34c64 Mon Sep 17 00:00:00 2001 From: Sam Chau Date: Thu, 19 Sep 2024 11:38:24 +0930 Subject: [PATCH] fix: remove diff component mounting error - fixes modal animation for diffs --- .../src/components/settings/git/ChangeRow.jsx | 73 +++++++------------ .../components/settings/git/ChangeTable.jsx | 4 +- .../settings/git/StatusContainer.jsx | 26 +++++++ .../settings/git/modal/ViewDiff.jsx | 16 +--- 4 files changed, 57 insertions(+), 62 deletions(-) diff --git a/frontend/src/components/settings/git/ChangeRow.jsx b/frontend/src/components/settings/git/ChangeRow.jsx index f09e72d..543a312 100644 --- a/frontend/src/components/settings/git/ChangeRow.jsx +++ b/frontend/src/components/settings/git/ChangeRow.jsx @@ -1,7 +1,6 @@ import React, {useState} from 'react'; import { Eye, - Loader, Plus, MinusCircle, Edit, @@ -13,14 +12,17 @@ import { File } from 'lucide-react'; import Tooltip from '../../ui/Tooltip'; -import {getDiff} from '../../../api/api'; -import Alert from '../../ui/Alert'; -import Diff from './modal/ViewDiff'; +import ViewDiff from './modal/ViewDiff'; -const ChangeRow = ({change, isSelected, onSelect, isIncoming, isDevMode}) => { - const [loadingDiff, setLoadingDiff] = useState(false); +const ChangeRow = ({ + change, + isSelected, + onSelect, + isIncoming, + isDevMode, + diffContent +}) => { const [showDiff, setShowDiff] = useState(false); - const [diffContent, setDiffContent] = useState(''); const getStatusIcon = status => { switch (status) { @@ -55,24 +57,9 @@ const ChangeRow = ({change, isSelected, onSelect, isIncoming, isDevMode}) => { } }; - const handleViewDiff = async () => { - setLoadingDiff(true); - try { - const response = await getDiff(change.file_path); - if (response.success) { - setDiffContent(response.diff); - setShowDiff(true); - } else { - Alert.error(response.error); - } - } catch (error) { - Alert.error( - 'An unexpected error occurred while fetching the diff.' - ); - console.error('Error fetching diff:', error); - } finally { - setLoadingDiff(false); - } + const handleViewDiff = e => { + e.stopPropagation(); + setShowDiff(true); }; return ( @@ -104,20 +91,11 @@ const ChangeRow = ({change, isSelected, onSelect, isIncoming, isDevMode}) => { @@ -130,17 +108,16 @@ const ChangeRow = ({change, isSelected, onSelect, isIncoming, isDevMode}) => { /> - {showDiff && ( - setShowDiff(false)} - diffContent={diffContent} - type={change.type} - name={change.name} - commitMessage={change.commit_message} - isDevMode={isDevMode} - /> - )} + setShowDiff(false)} + diffContent={diffContent} + type={change.type} + name={change.name} + commitMessage={change.commit_message} + isDevMode={isDevMode} + /> ); }; diff --git a/frontend/src/components/settings/git/ChangeTable.jsx b/frontend/src/components/settings/git/ChangeTable.jsx index 5af2e21..f5ebcb4 100644 --- a/frontend/src/components/settings/git/ChangeTable.jsx +++ b/frontend/src/components/settings/git/ChangeTable.jsx @@ -11,7 +11,8 @@ const ChangeTable = ({ onSelectChange, sortConfig, onRequestSort, - isDevMode + isDevMode, + diffContents }) => { const sortedChanges = changesArray => { if (!sortConfig.key) return changesArray; @@ -94,6 +95,7 @@ const ChangeTable = ({ } isIncoming={isIncoming} isDevMode={isDevMode} + diffContent={diffContents[change.file_path]} /> ))} diff --git a/frontend/src/components/settings/git/StatusContainer.jsx b/frontend/src/components/settings/git/StatusContainer.jsx index 515c038..961319b 100644 --- a/frontend/src/components/settings/git/StatusContainer.jsx +++ b/frontend/src/components/settings/git/StatusContainer.jsx @@ -4,6 +4,7 @@ import ChangeTable from './ChangeTable'; import CommitSection from './CommitMessage'; import {getRandomMessage, noChangesMessages} from '../../../utils/messages'; import ActionButtons from './ActionButtons'; +import {getDiff} from '../../../api/api'; const StatusContainer = ({ status, @@ -23,6 +24,7 @@ const StatusContainer = ({ const [commitMessage, setCommitMessage] = useState(''); const [selectionType, setSelectionType] = useState(null); const [noChangesMessage, setNoChangesMessage] = useState(''); + const [diffContents, setDiffContents] = useState({}); const requestSort = key => { let direction = 'ascending'; @@ -107,6 +109,28 @@ const StatusContainer = ({ }; useEffect(() => { + const fetchDiffs = async () => { + const allChanges = [ + ...status.incoming_changes, + ...status.outgoing_changes + ]; + const diffPromises = allChanges.map(change => + getDiff(change.file_path) + ); + const diffs = await Promise.all(diffPromises); + + const newDiffContents = {}; + allChanges.forEach((change, index) => { + if (diffs[index].success) { + newDiffContents[change.file_path] = diffs[index].diff; + } + }); + + setDiffContents(newDiffContents); + }; + + fetchDiffs(); + if ( status.incoming_changes.length === 0 && status.outgoing_changes.length === 0 @@ -174,6 +198,7 @@ const StatusContainer = ({ sortConfig={sortConfig} onRequestSort={requestSort} isDevMode={isDevMode} + diffContents={diffContents} /> )} @@ -193,6 +218,7 @@ const StatusContainer = ({ sortConfig={sortConfig} onRequestSort={requestSort} isDevMode={isDevMode} + diffContents={diffContents} /> )} diff --git a/frontend/src/components/settings/git/modal/ViewDiff.jsx b/frontend/src/components/settings/git/modal/ViewDiff.jsx index be7d1ea..5d2ffe2 100644 --- a/frontend/src/components/settings/git/modal/ViewDiff.jsx +++ b/frontend/src/components/settings/git/modal/ViewDiff.jsx @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import Modal from '../../../ui/Modal'; -const Diff = ({ +const ViewDiff = ({ isOpen, onClose, diffContent, @@ -57,16 +57,6 @@ const Diff = ({ {name === 'Deleted File' ? 'Deleted File' : name} - {commitMessage && ( -
- - Commit Message: - -

- {commitMessage} -

-
- )}
@@ -87,7 +77,7 @@ const Diff = ({ ); }; -Diff.propTypes = { +ViewDiff.propTypes = { isOpen: PropTypes.bool.isRequired, onClose: PropTypes.func.isRequired, diffContent: PropTypes.string, @@ -97,4 +87,4 @@ Diff.propTypes = { title: PropTypes.string }; -export default Diff; +export default ViewDiff;