Skip to content

Commit efe5a9b

Browse files
tnagorratnagorra
committed
Fix issues with ConflictResolution
1 parent 625654b commit efe5a9b

File tree

1 file changed

+165
-95
lines changed

1 file changed

+165
-95
lines changed

‎src/views/ConflictResolution/index.tsx

Lines changed: 165 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
import React from 'react';
1+
import React, { useCallback } from 'react';
22
import {
33
_cs,
44
union,
55
// intersection,
66
// difference,
77
} from '@togglecorp/fujs';
88

9+
import List from '#rsu/../v2/View/List';
910
import ListView from '#rsu/../v2/View/ListView';
1011
import Message from '#rsu/../v2/View/Message';
1112
import Button from '#rsu/../v2/Action/Button';
@@ -23,7 +24,27 @@ import { conflictList, aoiInformation } from './dummy';
2324

2425
import styles from './styles.scss';
2526

26-
function getTagsComparision(original: Tags, prev: Tags | undefined, next: Tags | undefined) {
27+
interface TagStatus {
28+
title: string;
29+
originalValue: string | undefined;
30+
31+
oursDefined: boolean;
32+
theirsDefined: boolean;
33+
34+
oursValue: string | undefined;
35+
oursChanged: boolean;
36+
37+
theirsValue: string | undefined;
38+
theirsChanged: boolean;
39+
40+
conflicted: boolean;
41+
}
42+
43+
function getTagsComparision(
44+
original: Tags,
45+
prev: Tags | undefined,
46+
next: Tags | undefined,
47+
): TagStatus[] {
2748
const originalKeys = new Set(Object.keys(original));
2849
const prevKeys = new Set(prev ? Object.keys(prev) : []);
2950
const nextKeys = new Set(next ? Object.keys(next) : []);
@@ -38,12 +59,15 @@ function getTagsComparision(original: Tags, prev: Tags | undefined, next: Tags |
3859
const oursChanged = originalValue !== oursValue;
3960
const theirsChanged = originalValue !== theirsValue;
4061

41-
const conflicted = (prev && next) && oursValue !== theirsValue;
62+
const conflicted = !!prev && !!next && oursValue !== theirsValue;
4263

4364
return {
4465
title: key,
4566
originalValue,
4667

68+
oursDefined: !!prev,
69+
theirsDefined: !!next,
70+
4771
oursValue,
4872
oursChanged,
4973

@@ -61,6 +85,94 @@ interface Resolution {
6185
[key: string]: ResolveOrigin | undefined;
6286
}
6387

88+
interface TagRowProps extends TagStatus {
89+
oursSelected: boolean;
90+
theirsSelected: boolean;
91+
selected: boolean;
92+
onClick: (title: string, origin: ResolveOrigin) => void;
93+
}
94+
95+
const TagRow = (props: TagRowProps) => {
96+
const {
97+
title,
98+
99+
originalValue,
100+
oursValue,
101+
theirsValue,
102+
103+
oursDefined,
104+
theirsDefined,
105+
106+
oursChanged,
107+
theirsChanged,
108+
109+
oursSelected,
110+
theirsSelected,
111+
112+
selected,
113+
conflicted,
114+
115+
onClick,
116+
} = props;
117+
118+
119+
const handleTheirsClick = useCallback(
120+
() => {
121+
onClick(title, 'theirs');
122+
},
123+
[onClick, title],
124+
);
125+
126+
const handleOursClick = useCallback(
127+
() => {
128+
onClick(title, 'ours');
129+
},
130+
[onClick, title],
131+
);
132+
133+
return (
134+
<Row
135+
key={title}
136+
leftClassName={styles.tagContainer}
137+
left={(
138+
<Tag
139+
title={title}
140+
value={originalValue}
141+
disabled
142+
/>
143+
)}
144+
centerClassName={styles.tagContainer}
145+
center={
146+
oursDefined && (
147+
<Tag
148+
title={title}
149+
value={oursValue}
150+
changed={oursChanged}
151+
conflicted={!selected && conflicted}
152+
selected={oursSelected}
153+
disabled={!conflicted}
154+
onClick={handleOursClick}
155+
/>
156+
)
157+
}
158+
rightClassName={styles.tagContainer}
159+
right={
160+
theirsDefined && (
161+
<Tag
162+
title={title}
163+
value={theirsValue}
164+
changed={theirsChanged}
165+
conflicted={!selected && conflicted}
166+
selected={theirsSelected}
167+
disabled={!conflicted}
168+
onClick={handleTheirsClick}
169+
/>
170+
)
171+
}
172+
/>
173+
);
174+
};
175+
64176
interface State {
65177
activeConflictId?: string;
66178
showOnlyConflicts: boolean;
@@ -73,6 +185,8 @@ type Props = OwnProps;
73185

74186
const conflictKeySelector = (d: ConflictElement) => d.id;
75187

188+
const rowKeySelector = (t: TagStatus) => t.title;
189+
76190
class ConflictResolution extends React.PureComponent<Props, State> {
77191
public constructor(props: Props) {
78192
super(props);
@@ -107,6 +221,14 @@ class ConflictResolution extends React.PureComponent<Props, State> {
107221
console.warn('save');
108222
}
109223

224+
private handleDelete = () => {
225+
console.warn('delete');
226+
}
227+
228+
private handleKeep = () => {
229+
console.warn('keep');
230+
}
231+
110232
private handleTagClick = (key: string, origin: ResolveOrigin | undefined) => {
111233
this.setState((state) => {
112234
const { resolution } = state;
@@ -126,53 +248,58 @@ class ConflictResolution extends React.PureComponent<Props, State> {
126248
this.setState({ showOnlyConflicts: value });
127249
}
128250

251+
private rowRendererParams = (key: string, item: TagStatus) => {
252+
const { resolution } = this.state;
253+
254+
const oursSelected = resolution[key] === 'ours';
255+
const theirsSelected = resolution[key] === 'theirs';
256+
const selected = oursSelected || theirsSelected;
257+
258+
return {
259+
...item,
260+
onClick: this.handleTagClick,
261+
oursSelected,
262+
theirsSelected,
263+
selected,
264+
};
265+
}
266+
129267
public render() {
130268
const { className } = this.props;
131269
const { activeConflictId } = this.state;
132270

133-
const total = conflictList.length;
134-
const resolved = conflictList.filter(c => c.resolutionStatus === 'resolved').length;
135-
const partiallyResolved = conflictList.filter(c => c.resolutionStatus === 'partially-resolved').length;
136-
137271
const activeConflict = this.getActiveConflict(conflictList, activeConflictId);
138272
let children = null;
139273
if (activeConflict) {
140-
const {
141-
showOnlyConflicts,
142-
resolution,
143-
} = this.state;
144-
145274
const {
146275
type,
147276
original,
148277
ours,
149278
theirs,
150279
} = activeConflict;
151280

152-
const originalTagCount = Object.keys(original.tags).length;
153-
const oursTagCount = Object.keys(ours?.tags || {}).length;
154-
const theirsTagCount = Object.keys(theirs?.tags || {}).length;
281+
const {
282+
showOnlyConflicts,
283+
resolution,
284+
} = this.state;
155285

286+
// General
156287
const tags = getTagsComparision(
157288
original.tags,
158289
ours?.tags,
159290
theirs?.tags,
160291
);
161-
162292
const conflictedTags = tags.filter(tag => tag.conflicted);
163-
164293
const resolvedTags = conflictedTags.filter(item => resolution[item.title]);
165-
166294
const modifiedMode = !!ours && !!theirs;
167295

296+
// For map row
168297
const oursMapSelected = resolution.$map === 'ours';
169298
const theirsMapSelected = resolution.$map === 'theirs';
170-
171-
// NOTE: ours and theirs check for modifiedMode
172299
const mapConflicted = !!ours && !!theirs && ours.geoJSON !== theirs.geoJSON;
173-
174300
const mapSelected = oursMapSelected || theirsMapSelected;
175301

302+
// For Info row
176303
let resolvedCount = resolvedTags.length;
177304
let conflictedCount = conflictedTags.length;
178305
if (mapConflicted) {
@@ -182,6 +309,11 @@ class ConflictResolution extends React.PureComponent<Props, State> {
182309
resolvedCount += 1;
183310
}
184311

312+
// For Tag row
313+
const originalTagCount = Object.keys(original.tags).length;
314+
const oursTagCount = Object.keys(ours?.tags || {}).length;
315+
const theirsTagCount = Object.keys(theirs?.tags || {}).length;
316+
185317
children = (
186318
<div className={styles.content}>
187319
<div className={styles.headerContainer}>
@@ -206,13 +338,13 @@ class ConflictResolution extends React.PureComponent<Props, State> {
206338
) : (
207339
<>
208340
<Button
209-
onClick={this.handleSave}
341+
onClick={this.handleDelete}
210342
buttonType="button-primary"
211343
>
212344
Delete
213345
</Button>
214346
<Button
215-
onClick={this.handleSave}
347+
onClick={this.handleKeep}
216348
buttonType="button-primary"
217349
>
218350
Keep
@@ -326,78 +458,12 @@ class ConflictResolution extends React.PureComponent<Props, State> {
326458
</h3>
327459
)}
328460
/>
329-
{
330-
(modifiedMode && showOnlyConflicts ? conflictedTags : tags)
331-
.map((item) => {
332-
const oursSelected = resolution[item.title] === 'ours';
333-
const theirsSelected = resolution[item.title] === 'theirs';
334-
335-
const selected = oursSelected || theirsSelected;
336-
337-
return {
338-
...item,
339-
oursSelected,
340-
theirsSelected,
341-
selected: oursSelected || theirsSelected,
342-
};
343-
})
344-
.map(({
345-
title,
346-
347-
originalValue,
348-
oursValue,
349-
theirsValue,
350-
351-
oursChanged,
352-
theirsChanged,
353-
354-
oursSelected,
355-
theirsSelected,
356-
357-
selected,
358-
conflicted,
359-
}) => (
360-
<Row
361-
key={title}
362-
leftClassName={styles.tagContainer}
363-
left={(
364-
<Tag
365-
title={title}
366-
value={originalValue}
367-
disabled
368-
/>
369-
)}
370-
centerClassName={styles.tagContainer}
371-
center={
372-
ours && (
373-
<Tag
374-
title={title}
375-
value={oursValue}
376-
changed={oursChanged}
377-
conflicted={!selected && conflicted}
378-
selected={oursSelected}
379-
disabled={!conflicted}
380-
onClick={() => this.handleTagClick(title, 'ours')}
381-
/>
382-
)
383-
}
384-
rightClassName={styles.tagContainer}
385-
right={
386-
theirs && (
387-
<Tag
388-
title={title}
389-
value={theirsValue}
390-
changed={theirsChanged}
391-
conflicted={!selected && conflicted}
392-
selected={theirsSelected}
393-
disabled={!conflicted}
394-
onClick={() => this.handleTagClick(title, 'theirs')}
395-
/>
396-
)
397-
}
398-
/>
399-
))
400-
}
461+
<List
462+
data={modifiedMode && showOnlyConflicts ? conflictedTags : tags}
463+
keySelector={rowKeySelector}
464+
renderer={TagRow}
465+
rendererParams={this.rowRendererParams}
466+
/>
401467
</div>
402468
</div>
403469
);
@@ -409,6 +475,10 @@ class ConflictResolution extends React.PureComponent<Props, State> {
409475
);
410476
}
411477

478+
const total = conflictList.length;
479+
const resolved = conflictList.filter(c => c.resolutionStatus === 'resolved').length;
480+
const partiallyResolved = conflictList.filter(c => c.resolutionStatus === 'partially-resolved').length;
481+
412482
return (
413483
<div className={_cs(className, styles.conflictResolution)}>
414484
<div className={styles.sidebar}>

0 commit comments

Comments
 (0)