Skip to content

Commit

Permalink
use hooks instead of HOCs
Browse files Browse the repository at this point in the history
  • Loading branch information
@hannojg
hannojg committed Aug 22, 2023
1 parent 8596920 commit 9d05dab
Show file tree
Hide file tree
Showing 3 changed files with 35 additions and 51 deletions.
23 changes: 6 additions & 17 deletions src/pages/home/report/ReportActionCompose/ReportActionCompose.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import {View} from 'react-native';
import _ from 'underscore';
import lodashGet from 'lodash/get';
import {withOnyx} from 'react-native-onyx';
import {useNavigation} from '@react-navigation/native';
import {useAnimatedRef} from 'react-native-reanimated';
import styles from '../../../../styles/styles';
import ONYXKEYS from '../../../../ONYXKEYS';
import * as Report from '../../../../libs/actions/Report';
Expand All @@ -27,16 +29,14 @@ import ReportDropUI from '../ReportDropUI';
import reportPropTypes from '../../../reportPropTypes';
import OfflineWithFeedback from '../../../../components/OfflineWithFeedback';
import * as Welcome from '../../../../libs/actions/Welcome';
import withAnimatedRef from '../../../../components/withAnimatedRef';
import SendButton from './SendButton';
import AttachmentPickerWithMenuItems from './AttachmentPickerWithMenuItems';
import ReportComposerWithSuggestions from './ReportComposerWithSuggestions';
import debouncedSaveReportComment from './debouncedSaveReportComment';
import withWindowDimensions from '../../../../components/withWindowDimensions';
import withNavigation, {withNavigationPropTypes} from '../../../../components/withNavigation';
import reportActionPropTypes from '../reportActionPropTypes';
import useLocalize from '../../../../hooks/useLocalize';
import getModalState from '../../../../libs/getModalState';
import useWindowDimensions from '../../../../hooks/useWindowDimensions';

const propTypes = {
/** A method to call when the form is submitted */
Expand All @@ -54,9 +54,6 @@ const propTypes = {
/** The report currently being looked at */
report: reportPropTypes,

/** Is the window width narrow, like on a mobile device */
isSmallScreenWidth: PropTypes.bool.isRequired,

/** Is composer full size */
isComposerFullSize: PropTypes.bool,

Expand All @@ -75,10 +72,6 @@ const propTypes = {
/** The type of action that's pending */
pendingAction: PropTypes.oneOf(['add', 'update', 'delete']),

/** animated ref from react-native-reanimated */
animatedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({current: PropTypes.instanceOf(React.Component)})]).isRequired,

...withNavigationPropTypes,
...withCurrentUserPersonalDetailsPropTypes,
};

Expand All @@ -99,13 +92,10 @@ const defaultProps = {
const shouldFocusInputOnScreenFocus = canFocusInputOnScreenFocus();

function ReportActionCompose({
animatedRef,
blockedFromConcierge,
currentUserPersonalDetails,
disabled,
isComposerFullSize,
isMediumScreenWidth,
isSmallScreenWidth,
network,
onSubmit,
pendingAction,
Expand All @@ -115,9 +105,11 @@ function ReportActionCompose({
reportActions,
shouldShowComposeInput,
isCommentEmpty: isCommentEmptyProp,
navigation,
}) {
const {translate} = useLocalize();
const navigation = useNavigation();
const {isMediumScreenWidth, isSmallScreenWidth} = useWindowDimensions();
const animatedRef = useAnimatedRef();

/**
* Updates the Highlight state of the composer
Expand Down Expand Up @@ -397,10 +389,7 @@ ReportActionCompose.defaultProps = defaultProps;

export default compose(
withNetwork(),
withNavigation,
withWindowDimensions,
withCurrentUserPersonalDetails,
withAnimatedRef,
withOnyx({
isCommentEmpty: {
key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${reportID}`,
Expand Down
32 changes: 14 additions & 18 deletions src/pages/home/report/ReportActionCompose/ReportComposerWithSuggestions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import {withOnyx} from 'react-native-onyx';
import PropTypes from 'prop-types';
import _ from 'underscore';
import lodashGet from 'lodash/get';
import {useIsFocused, useNavigation} from '@react-navigation/native';
import styles from '../../../../styles/styles';
import themeColors from '../../../../styles/themes/default';
import Composer from '../../../../components/Composer';
Expand All @@ -22,17 +23,15 @@ import usePrevious from '../../../../hooks/usePrevious';
import * as EmojiUtils from '../../../../libs/EmojiUtils';
import * as User from '../../../../libs/actions/User';
import * as ReportUtils from '../../../../libs/ReportUtils';
import withNavigation from '../../../../components/withNavigation';
import withNavigationFocus from '../../../../components/withNavigationFocus';
import compose from '../../../../libs/compose';
import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize';
import withKeyboardState, {keyboardStatePropTypes} from '../../../../components/withKeyboardState';
import reportActionPropTypes from '../reportActionPropTypes';
import canFocusInputOnScreenFocus from '../../../../libs/canFocusInputOnScreenFocus';
import debouncedSaveReportComment from './debouncedSaveReportComment';
import UpdateComment from './UpdateComment';
import Suggestions from './Suggestions';
import getDraftComment from '../../../../libs/ComposerUtils/getDraftComment';
import useLocalize from '../../../../hooks/useLocalize';
import compose from '../../../../libs/compose';
import withKeyboardState from '../../../../components/withKeyboardState';

const {RNTextInputReset} = NativeModules;

Expand Down Expand Up @@ -76,8 +75,7 @@ const propTypes = {

isFullComposerAvailable: PropTypes.bool.isRequired,

...withLocalizePropTypes,
...keyboardStatePropTypes,
isKeyboardShown: PropTypes.bool.isRequired,
};

const defaultProps = {
Expand All @@ -94,10 +92,7 @@ function ReportComposerWithSuggestions({
parentReportActions,
numberOfLines,
// HOCs
preferredLocale,
navigation,
isKeyboardShown,
isFocused: isFocusedProp,
// Props: Report
reportID,
report,
Expand Down Expand Up @@ -125,6 +120,10 @@ function ReportComposerWithSuggestions({

forwardedRef,
}) {
const {preferredLocale} = useLocalize();
const isFocused = useIsFocused();
const navigation = useNavigation();

const [value, setValue] = useState(() => getDraftComment(reportID) || '');
const commentRef = useRef(value);

Expand Down Expand Up @@ -375,13 +374,13 @@ function ReportComposerWithSuggestions({
// This callback is used in the contextMenuActions to manage giving focus back to the compose input.
// TODO: we should clean up this convoluted code and instead move focus management to something like ReportFooter.js or another higher up component
ReportActionComposeFocusManager.onComposerFocus(() => {
if (!willBlurTextInputOnTapOutside || !isFocusedProp) {
if (!willBlurTextInputOnTapOutside || !isFocused) {
return;
}

focus(false);
});
}, [focus, isFocusedProp]);
}, [focus, isFocused]);

/**
* Check if the composer is visible. Returns true if the composer is not covered up by emoji picker or menu. False otherwise.
Expand Down Expand Up @@ -445,17 +444,17 @@ function ReportComposerWithSuggestions({
}, [focusComposerOnKeyPress, navigation, setUpComposeFocusManager]);

const prevIsModalVisible = usePrevious(modal.isVisible);
const prevIsFocused = usePrevious(isFocusedProp);
const prevIsFocused = usePrevious(isFocused);
useEffect(() => {
// We want to focus or refocus the input when a modal has been closed or the underlying screen is refocused.
// We avoid doing this on native platforms since the software keyboard popping
// open creates a jarring and broken UX.
if (!(willBlurTextInputOnTapOutside && !modal.isVisible && isFocusedProp && (prevIsModalVisible || !prevIsFocused))) {
if (!(willBlurTextInputOnTapOutside && !modal.isVisible && isFocused && (prevIsModalVisible || !prevIsFocused))) {
return;
}

focus();
}, [focus, prevIsFocused, prevIsModalVisible, isFocusedProp, modal.isVisible]);
}, [focus, prevIsFocused, prevIsModalVisible, isFocused, modal.isVisible]);

useEffect(() => {
if (value.length !== 0) {
Expand Down Expand Up @@ -548,9 +547,6 @@ ReportComposerWithSuggestions.propTypes = propTypes;
ReportComposerWithSuggestions.defaultProps = defaultProps;

export default compose(
withLocalize,
withNavigation,
withNavigationFocus,
withKeyboardState,
withOnyx({
numberOfLines: {
Expand Down
31 changes: 15 additions & 16 deletions src/pages/home/report/ReportActionCompose/UpdateComment.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,12 @@ import {withOnyx} from 'react-native-onyx';
import PropTypes from 'prop-types';
import usePrevious from '../../../../hooks/usePrevious';
import ONYXKEYS from '../../../../ONYXKEYS';
import compose from '../../../../libs/compose';
import withLocalize from '../../../../components/withLocalize';
import useLocalize from '../../../../hooks/useLocalize';

const propTypes = {
/** The comment of the report */
comment: PropTypes.string,

/** The preferred locale of the user */
preferredLocale: PropTypes.string.isRequired,

/** The report associated with the comment */
report: PropTypes.shape({
/** The ID of the report */
Expand All @@ -36,10 +32,17 @@ const defaultProps = {
comment: '',
};

function UpdateComment({comment, commentRef, preferredLocale, report, value, updateComment}) {
/**
* This component doesn't render anything. It runs a side effect to update the comment of a report under certain conditions.
* It is connected to the actual draft comment in onyx. The comment in onyx might updates multiple times, and we want to avoid
* re-rendering a UI component for that. That's why the side effect was moved down to a separate component.
* @returns {null}
*/
function UpdateComment({comment, commentRef, report, value, updateComment}) {
const prevCommentProp = usePrevious(comment);
const prevPreferredLocale = usePrevious(preferredLocale);
const prevReportId = usePrevious(report.reportID);
const {preferredLocale} = useLocalize();
const prevPreferredLocale = usePrevious(preferredLocale);

useEffect(() => {
// Value state does not have the same value as comment props when the comment gets changed from another tab.
Expand All @@ -52,7 +55,6 @@ function UpdateComment({comment, commentRef, preferredLocale, report, value, upd
return;
}

console.log('UpdateComment.js: Updating from', comment, 'to comment', commentRef.current);
updateComment(comment);
}, [prevCommentProp, prevPreferredLocale, prevReportId, comment, preferredLocale, report.reportID, updateComment, value, commentRef]);

Expand All @@ -63,11 +65,8 @@ UpdateComment.propTypes = propTypes;
UpdateComment.defaultProps = defaultProps;
UpdateComment.displayName = 'UpdateComment';

export default compose(
withLocalize,
withOnyx({
comment: {
key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${reportID}`,
},
}),
)(UpdateComment);
export default withOnyx({
comment: {
key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${reportID}`,
},
})(UpdateComment);

0 comments on commit 9d05dab

Please sign in to comment.