Skip to content

Commit cf00dc4

Browse files
nahbee10nahbee10
committed
remove comments and use better react functions to memoize
1 parent 4ffc471 commit cf00dc4

File tree

6 files changed

+61
-74
lines changed

6 files changed

+61
-74
lines changed

‎client/modules/IDE/components/AssetList.jsx

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
import PropTypes from 'prop-types';
21
import React, { useEffect } from 'react';
32
import { useDispatch, useSelector } from 'react-redux';
43
import { Helmet } from 'react-helmet';
5-
import { withTranslation, useTranslation } from 'react-i18next';
4+
import { useTranslation } from 'react-i18next';
65
import AssetListRow from './AssetListRow';
76
import Loader from '../../App/components/loader';
87
import * as AssetActions from '../actions/assets';
98

10-
const AssetList = ({ t }) => {
9+
const AssetList = () => {
10+
const { t } = useTranslation();
1111
const dispatch = useDispatch();
1212
const { username, assetList, loading } = useSelector((state) => ({
1313
username: state.user.username,
@@ -60,8 +60,4 @@ const AssetList = ({ t }) => {
6060
);
6161
};
6262

63-
AssetList.propTypes = {
64-
t: PropTypes.func.isRequired
65-
};
66-
67-
export default withTranslation()(AssetList);
63+
export default AssetList;

‎client/modules/IDE/components/CollectionList/CollectionList.jsx

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import PropTypes from 'prop-types';
2-
import React, { useEffect, useState, useCallback } from 'react';
2+
import React, { useEffect, useState, useMemo } from 'react';
33
import { Helmet } from 'react-helmet';
4-
import { withTranslation } from 'react-i18next';
4+
import { useTranslation } from 'react-i18next';
55
import { connect } from 'react-redux';
66
import { bindActionCreators } from 'redux';
77
import classNames from 'classnames';
@@ -34,9 +34,9 @@ const CollectionList = ({
3434
resetSorting,
3535
sorting,
3636
project,
37-
t,
3837
mobile
3938
}) => {
39+
const { t } = useTranslation();
4040
const [hasLoadedData, setHasLoadedData] = useState(false);
4141
const [
4242
addingSketchesToCollectionId,
@@ -64,7 +64,7 @@ const CollectionList = ({
6464
}
6565
}, [loading]);
6666

67-
const getTitle = useCallback(() => {
67+
const getTitle = useMemo(() => {
6868
if (propsUsername === user.username) {
6969
return t('CollectionList.Title');
7070
}
@@ -100,7 +100,7 @@ const CollectionList = ({
100100
return null;
101101
};
102102

103-
const getButtonLabel = useCallback(
103+
const getButtonLabel = useMemo(
104104
(fieldName, displayName) => {
105105
const { field, direction } = sorting;
106106
let buttonLabel;
@@ -162,7 +162,7 @@ const CollectionList = ({
162162
return (
163163
<article className="sketches-table-container">
164164
<Helmet>
165-
<title>{getTitle()}</title>
165+
<title>{getTitle}</title>
166166
</Helmet>
167167

168168
{renderLoader()}
@@ -258,7 +258,6 @@ CollectionList.propTypes = {
258258
id: PropTypes.string
259259
})
260260
}),
261-
t: PropTypes.func.isRequired,
262261
mobile: PropTypes.bool
263262
};
264263

@@ -297,6 +296,4 @@ function mapDispatchToProps(dispatch) {
297296
);
298297
}
299298

300-
export default withTranslation()(
301-
connect(mapStateToProps, mapDispatchToProps)(CollectionList)
302-
);
299+
export default connect(mapStateToProps, mapDispatchToProps)(CollectionList);

‎client/modules/IDE/components/FileNode.jsx

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import PropTypes from 'prop-types';
22
import classNames from 'classnames';
3-
import React, { useState, useRef, useEffect } from 'react';
4-
import { useDispatch, useSelector, connect } from 'react-redux';
3+
import React, { useState, useRef } from 'react';
4+
import { connect } from 'react-redux';
55
import { bindActionCreators } from 'redux';
6-
import { withTranslation } from 'react-i18next';
76
import { useTranslation } from 'react-i18next';
87
import * as IDEActions from '../actions/ide';
98
import * as FileActions from '../actions/files';
@@ -86,7 +85,6 @@ const FileNode = ({
8685
}) => {
8786
const [isOptionsOpen, setIsOptionsOpen] = useState(false);
8887
const [isEditingName, setIsEditingName] = useState(false);
89-
const [isFocused, setIsFocused] = useState(false);
9088
const [isDeleting, setIsDeleting] = useState(false);
9189
const [updatedName, setUpdatedName] = useState(name);
9290

@@ -245,7 +243,7 @@ const FileNode = ({
245243
<div className="sidebar__file-item--folder">
246244
<button
247245
className="sidebar__file-item-closed"
248-
onClick={showFolderChildren(id)}
246+
onClick={() => showFolderChildren(id)}
249247
aria-label={t('FileNode.OpenFolderARIA')}
250248
title={t('FileNode.OpenFolderARIA')}
251249
>
@@ -257,7 +255,7 @@ const FileNode = ({
257255
</button>
258256
<button
259257
className="sidebar__file-item-open"
260-
onClick={hideFolderChildren(id)}
258+
onClick={() => hideFolderChildren(id)}
261259
aria-label={t('FileNode.CloseFolderARIA')}
262260
title={t('FileNode.CloseFolderARIA')}
263261
>
@@ -408,11 +406,9 @@ function mapDispatchToProps(dispatch) {
408406
return bindActionCreators(Object.assign(FileActions, IDEActions), dispatch);
409407
}
410408

411-
const TranslatedFileNode = withTranslation()(FileNode);
412-
413409
const ConnectedFileNode = connect(
414410
mapStateToProps,
415411
mapDispatchToProps
416-
)(TranslatedFileNode);
412+
)(FileNode);
417413

418-
export { TranslatedFileNode as FileNode, ConnectedFileNode as default };
414+
export { FileNode, ConnectedFileNode as default };

‎client/modules/IDE/components/SketchList.jsx

Lines changed: 43 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import PropTypes from 'prop-types';
22
import classNames from 'classnames';
3-
import React, { useEffect, useState, useCallback } from 'react';
3+
import React, { useEffect, useState, useMemo, useCallback } from 'react';
44
import { Helmet } from 'react-helmet';
55
import { connect } from 'react-redux';
66
import { useTranslation } from 'react-i18next';
77
import { bindActionCreators } from 'redux';
8-
import * as ProjectsActions from '../actions/projects'; // Added Projects actions
9-
import * as CollectionsActions from '../actions/collections'; // Added Collections actions
10-
import * as ToastActions from '../actions/toast'; // Added Toast actions
11-
import * as SortingActions from '../actions/sorting'; // Added Sorting actions
8+
import * as ProjectsActions from '../actions/projects';
9+
import * as CollectionsActions from '../actions/collections';
10+
import * as ToastActions from '../actions/toast';
11+
import * as SortingActions from '../actions/sorting';
1212
import getSortedSketches from '../selectors/projects';
1313
import Loader from '../../App/components/loader';
1414
import Overlay from '../../App/components/Overlay';
@@ -43,7 +43,7 @@ const SketchList = ({
4343
}
4444
}, [sketches]);
4545

46-
const getSketchesTitle = useCallback(
46+
const getSketchesTitle = useMemo(
4747
() =>
4848
username === user.username
4949
? t('SketchList.Title')
@@ -81,44 +81,47 @@ const SketchList = ({
8181
[sorting, t]
8282
);
8383

84-
const renderFieldHeader = (fieldName, displayName) => {
85-
const { field, direction } = sorting;
86-
const headerClass = classNames({
87-
'sketches-table__header': true,
88-
'sketches-table__header--selected': field === fieldName
89-
});
90-
const buttonLabel = getButtonLabel(fieldName, displayName);
91-
return (
92-
<th scope="col">
93-
<button
94-
className="sketch-list__sort-button"
95-
onClick={() => toggleDirectionForField(fieldName)}
96-
aria-label={buttonLabel}
97-
>
98-
<span className={headerClass}>{displayName}</span>
99-
{field === fieldName &&
100-
(direction === SortingActions.DIRECTION.ASC ? (
101-
<ArrowUpIcon
102-
focusable="false"
103-
role="img"
104-
aria-label={t('SketchList.DirectionAscendingARIA')}
105-
/>
106-
) : (
107-
<ArrowDownIcon
108-
focusable="false"
109-
role="img"
110-
aria-label={t('SketchList.DirectionDescendingARIA')}
111-
/>
112-
))}
113-
</button>
114-
</th>
115-
);
116-
};
84+
const renderFieldHeader = useCallback(
85+
(fieldName, displayName) => {
86+
const { field, direction } = sorting;
87+
const headerClass = classNames({
88+
'sketches-table__header': true,
89+
'sketches-table__header--selected': field === fieldName
90+
});
91+
const buttonLabel = getButtonLabel(fieldName, displayName);
92+
return (
93+
<th scope="col">
94+
<button
95+
className="sketch-list__sort-button"
96+
onClick={() => toggleDirectionForField(fieldName)}
97+
aria-label={buttonLabel}
98+
>
99+
<span className={headerClass}>{displayName}</span>
100+
{field === fieldName &&
101+
(direction === SortingActions.DIRECTION.ASC ? (
102+
<ArrowUpIcon
103+
focusable="false"
104+
role="img"
105+
aria-label={t('SketchList.DirectionAscendingARIA')}
106+
/>
107+
) : (
108+
<ArrowDownIcon
109+
focusable="false"
110+
role="img"
111+
aria-label={t('SketchList.DirectionDescendingARIA')}
112+
/>
113+
))}
114+
</button>
115+
</th>
116+
);
117+
},
118+
[sorting, getButtonLabel, toggleDirectionForField, t]
119+
);
117120

118121
return (
119122
<article className="sketches-table-container">
120123
<Helmet>
121-
<title>{getSketchesTitle()}</title>
124+
<title>{getSketchesTitle}</title>
122125
</Helmet>
123126
{renderLoader()}
124127
{renderEmptyTable()}

‎client/modules/IDE/components/SketchListRowBase.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Link } from 'react-router-dom';
55
import { bindActionCreators } from 'redux';
66
import { connect } from 'react-redux';
77
import * as ProjectActions from '../actions/project';
8-
import * as IdeActions from '../actions/ide'; // Adding the missing Ide actions
8+
import * as IdeActions from '../actions/ide';
99
import TableDropdown from '../../../components/Dropdown/TableDropdown';
1010
import MenuItem from '../../../components/Dropdown/MenuItem';
1111
import dates from '../../../utils/formatDate';

‎client/modules/User/components/Collection.jsx

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,10 @@ import { useDispatch, useSelector } from 'react-redux';
44
import { Helmet } from 'react-helmet';
55
import { useTranslation } from 'react-i18next';
66
import classNames from 'classnames';
7-
import * as ProjectActions from '../../IDE/actions/project';
8-
import * as ProjectsActions from '../../IDE/actions/projects';
97
import * as CollectionsActions from '../../IDE/actions/collections';
10-
import * as ToastActions from '../../IDE/actions/toast';
118
import * as SortingActions from '../../IDE/actions/sorting';
12-
import * as IdeActions from '../../IDE/actions/ide';
139
import { getCollection } from '../../IDE/selectors/collections';
1410
import Loader from '../../App/components/loader';
15-
import dates from '../../../utils/formatDate';
1611
import ArrowUpIcon from '../../../images/sort-arrow-up.svg';
1712
import ArrowDownIcon from '../../../images/sort-arrow-down.svg';
1813
import CollectionMetadata from './CollectionMetadata';

0 commit comments

Comments
 (0)