jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(ui/player): remove key and prop warnings

Browse source
This commit is contained in:
sylenien 2022-11-25 17:59:49 +01:00
parent ee2eeadf56
commit 3a6a2dd4a6
12 changed files with 38 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
frontend/app/components/Errors/List/List.js
View file

@ -25,7 +25,7 @@ const sortOptions = Object.entries(sortOptionsMap)
@connect(state => ({
loading: state.getIn([ "errors", "loading" ]),
resolveToggleLoading: state.getIn(["errors", "resolve", "loading"]) ||
resolveToggleLoading: state.getIn(["errors", "resolve", "loading"]) ||
state.getIn(["errors", "unresolve", "loading"]),
ignoreLoading: state.getIn([ "errors", "ignore", "loading" ]),
mergeLoading: state.getIn([ "errors", "merge", "loading" ]),
@ -54,19 +54,19 @@ export default class List extends React.PureComponent {
}
this.debounceFetch = debounce(this.props.editOptions, 1000);
}
componentDidMount() {
this.props.applyFilter({ });
}
check = ({ errorId }) => {
const { checkedIds } = this.state;
const newCheckedIds = checkedIds.contains(errorId)
? checkedIds.remove(errorId)
const newCheckedIds = checkedIds.contains(errorId)
? checkedIds.remove(errorId)
: checkedIds.add(errorId);
this.setState({
checkedAll: newCheckedIds.size === this.props.list.size,
checkedIds: newCheckedIds
checkedIds: newCheckedIds
});
}
@ -184,7 +184,7 @@ export default class List extends React.PureComponent {
onClick={ this.unresolve }
disabled={ someLoading || currentCheckedIds.size === 0}
/>
}
}
{ status !== IGNORED &&
<IconButton
outline
@ -196,10 +196,10 @@ export default class List extends React.PureComponent {
onClick={ this.ignore }
disabled={ someLoading || currentCheckedIds.size === 0}
/>
}
}
</div>
<div className="flex items-center ml-6">
<span className="mr-2 color-gray-medium">Sort By</span>
<span className="mr-2 color-gray-medium">Sort By</span>
<Select
defaultValue={ `${sort}-${order}` }
name="sort"
@ -212,7 +212,6 @@ export default class List extends React.PureComponent {
wrapperClassName="ml-3"
placeholder="Filter by name or message"
icon="search"
iconPosition="left"
name="filter"
onChange={ this.onQueryChange }
value={query}
@ -258,4 +257,4 @@ export default class List extends React.PureComponent {
</div>
);
}
}
}

3
frontend/app/components/Session/IOSPlayer/Crashes.js
View file

@ -13,7 +13,7 @@ function Crashes({ player }) {
const [ filter, setFilter ] = useState("");
const filterRE = getRE(filter, 'i');
const filtered = player.lists[CRASHES].listNow.filter(({ name, reason, stacktrace }) =>
const filtered = player.lists[CRASHES].listNow.filter(({ name, reason, stacktrace }) =>
filterRE.test(name) || filterRE.test(reason) || filterRE.test(stacktrace)
);
return (
@ -23,7 +23,6 @@ function Crashes({ player }) {
className="input-small"
placeholder="Filter"
icon="search"
iconPosition="left"
name="filter"
onChange={ setFilter }
/>

9
frontend/app/components/Session/IOSPlayer/Logs.js
View file

@ -20,13 +20,13 @@ function Logs({ player }) {
const [ activeTab, setTab ] = useState(ALL);
const onInputChange = useCallback(({ target }) => setFilter(target.value));
const filterRE = getRE(filter, 'i');
const filtered = player.lists[LOGS].listNow.filter(({ severity, content }) =>
const filtered = player.lists[LOGS].listNow.filter(({ severity, content }) =>
(activeTab === ALL || activeTab === severity) && filterRE.test(content)
);
return (
<>
<PanelLayout.Header>
<Tabs
<Tabs
tabs={ TABS }
active={ activeTab }
onClick={ setTab }
@ -36,7 +36,6 @@ function Logs({ player }) {
className="input-small"
placeholder="Filter"
icon="search"
iconPosition="left"
name="filter"
onChange={ onInputChange }
/>
@ -48,8 +47,8 @@ function Logs({ player }) {
title="No recordings found"
>
<Autoscroll>
{ filtered.map(log =>
<Log text={log.content} level={log.severity}/>
{ filtered.map(log =>
<Log text={log.content} level={log.severity}/>
)}
</Autoscroll>
</NoContent>

2
frontend/app/components/Session_/Console/ConsoleRow/ConsoleRow.tsx
View file

@ -41,7 +41,7 @@ function ConsoleRow(props: Props) {
)}
<span>{renderWithNL(lines.pop())}</span>
</div>
{canExpand && expanded && lines.map((l: any, i: number) => <div key={l.slice(0,3)+i} className="ml-4 mb-1">{l}</div>)}
{/* {canExpand && expanded && lines.map((l: any, i: number) => <div key={l.slice(0,3)+i} className="ml-4 mb-1">{l}</div>)} */}
</div>
<JumpButton onClick={() => jump(log.time)} />
</div>

1
frontend/app/components/Session_/Exceptions/Exceptions.tsx
View file

@ -81,7 +81,6 @@ function Exceptions({ errorStack, sourcemapUploaded, loading }: IProps) {
className="input-small"
placeholder="Filter by name or message"
icon="search"
iconPosition="left"
name="filter"
onChange={onFilterChange}
height={28}

1
frontend/app/components/Session_/GraphQL/GraphQL.js
View file

@ -132,7 +132,6 @@ export default class GraphQL extends React.PureComponent {
// className="input-small"
placeholder="Filter by name or type"
icon="search"
iconPosition="left"
name="filter"
onChange={this.onFilterChange}
/>

1
frontend/app/components/Session_/Network/NetworkContent.js
View file

@ -230,7 +230,6 @@ export default class NetworkContent extends React.PureComponent {
className="input-small"
placeholder="Filter by name"
icon="search"
iconPosition="left"
name="filter"
onChange={this.onFilterChange}
height={28}

39
frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx
View file

@ -31,7 +31,7 @@ let throttledCall = () => 999
function renderWithNL(s = '') {
if (typeof s !== 'string') return '';
return s.split('\n').map((line, i) => <div className={cn({ 'ml-20': i !== 0 })}>{line}</div>);
return s.split('\n').map((line, i) => <div key={i + line.slice(0, 6)} className={cn({ 'ml-20': i !== 0 })}>{line}</div>);
}
const getIconProps = (level: any) => {
@ -129,23 +129,25 @@ function ConsolePanel() {
const item = filteredList[index];
return (
// @ts-ignore
<CellMeasurer cache={cache} columnIndex={0} key={key} rowIndex={index} parent={parent}>
{({ measure }: any) => (
<ConsoleRow
style={style}
log={item}
jump={jump}
iconProps={getIconProps(item.level)}
renderWithNL={renderWithNL}
onClick={() => showDetails(item)}
recalcHeight={() => {
measure();
(_list as any).current.recomputeRowHeights(index);
}}
/>
)}
</CellMeasurer>
<React.Fragment key={key}>
{/* @ts-ignore */}
<CellMeasurer cache={cache} columnIndex={0} key={key} rowIndex={index} parent={parent}>
{({ measure }: any) => (
<ConsoleRow
style={style}
log={item}
jump={jump}
iconProps={getIconProps(item.level)}
renderWithNL={renderWithNL}
onClick={() => showDetails(item)}
recalcHeight={() => {
measure();
(_list as any).current.recomputeRowHeights(index);
}}
/>
)}
</CellMeasurer>
</React.Fragment>
);
};
@ -205,7 +207,6 @@ function ConsolePanel() {
className="input-small h-8"
placeholder="Filter by keyword"
icon="search"
iconPosition="left"
name="filter"
height={28}
onChange={onFilterChange}

4
frontend/app/components/shared/DevTools/ConsoleRow/ConsoleRow.tsx
View file

@ -49,13 +49,13 @@ function ConsoleRow(props: Props) {
)}
<span>{renderWithNL(lines.pop())}</span>
</div>
{canExpand &&
{/* {canExpand &&
expanded &&
lines.map((l: string, i: number) => (
<div key={l.slice(0, 4) + i} className="ml-4 mb-1">
{l}
</div>
))}
))} */}
</div>
<JumpButton onClick={() => jump(log.time)} />
</div>

1
frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx
View file

@ -310,7 +310,6 @@ function NetworkPanel() {
className="input-small"
placeholder="Filter by name, type or value"
icon="search"
iconPosition="left"
name="filter"
onChange={onFilterChange}
height={28}

1
frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx
View file

@ -149,7 +149,6 @@ function StackEventPanel(props: Props) {
className="input-small h-8"
placeholder="Filter by keyword"
icon="search"
iconPosition="left"
name="filter"
height={28}
onChange={onFilterChange}

3
frontend/app/components/shared/LiveSessionSearchField/LiveSessionSearchField.tsx
View file

@ -35,7 +35,6 @@ function LiveSessionSearchField(props: Props) {
onBlur={ () => setTimeout(setShowModal, 200, false) }
onChange={ onSearchChange }
icon="search"
iconPosition="left"
placeholder={ 'Find live sessions by user or metadata.'}
fluid
id="search"
@ -56,4 +55,4 @@ function LiveSessionSearchField(props: Props) {
);
}
export default connect(null, { fetchFilterSearch, editFilter, addFilterByKeyAndValue })(LiveSessionSearchField);
export default connect(null, { fetchFilterSearch, editFilter, addFilterByKeyAndValue })(LiveSessionSearchField);