Skip to content

Migrate AccessOrNotFoundWrapper from withOnyx to useOnyx #49251

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
roryabraham merged 3 commits into from
Oct 2, 2024
Merged

Migrate AccessOrNotFoundWrapper from withOnyx to useOnyx #49251

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a372b9e
migrate AccessOrNotFoundWrapper from withOnyx to useOnyx
mkzie2 Sep 16, 2024
c62c0f9
Merge branch 'main' of https://github.com/mkzie2/App into mkzie2-migr…
mkzie2 Sep 26, 2024
785c45b
resolve comments
mkzie2 Sep 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 21 additions & 19 deletions src/pages/workspace/AccessOrNotFoundWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/* eslint-disable rulesdir/no-negated-variables */
import React, {useEffect, useState} from 'react';
import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
import {withOnyx} from 'react-native-onyx';
import {useOnyx} from 'react-native-onyx';
import type {FullPageNotFoundViewProps} from '@components/BlockingViews/FullPageNotFoundView';
import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
Expand Down Expand Up @@ -43,7 +43,7 @@ const ACCESS_VARIANTS = {
>;

type AccessVariant = keyof typeof ACCESS_VARIANTS;
type AccessOrNotFoundWrapperOnyxProps = {
type AccessOrNotFoundWrapperChildrenProps = {
/** The report that holds the transaction */
report: OnyxEntry<OnyxTypes.Report>;

Expand All @@ -54,9 +54,9 @@ type AccessOrNotFoundWrapperOnyxProps = {
isLoadingReportData: OnyxEntry<boolean>;
};

type AccessOrNotFoundWrapperProps = AccessOrNotFoundWrapperOnyxProps & {
type AccessOrNotFoundWrapperProps = {
/** The children to render */
children: ((props: AccessOrNotFoundWrapperOnyxProps) => React.ReactNode) | React.ReactNode;
children: ((props: AccessOrNotFoundWrapperChildrenProps) => React.ReactNode) | React.ReactNode;

/** The id of the report that holds the transaction */
reportID?: string;
Expand Down Expand Up @@ -102,13 +102,25 @@ function PageNotFoundFallback({policyID, shouldShowFullScreenFallback, fullPageN
);
}

function AccessOrNotFoundWrapper({accessVariants = [], fullPageNotFoundViewProps, shouldBeBlocked, ...props}: AccessOrNotFoundWrapperProps) {
const {policy, policyID, report, iouType, allPolicies, featureName, isLoadingReportData} = props;
function AccessOrNotFoundWrapper({
accessVariants = [],
fullPageNotFoundViewProps,
shouldBeBlocked,
policyID,
reportID,
iouType,
allPolicies,
featureName,
...props
}: AccessOrNotFoundWrapperProps) {
const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`);
const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`);
const [isLoadingReportData] = useOnyx(ONYXKEYS.IS_LOADING_REPORT_DATA, {initialValue: true});
const {login = ''} = useCurrentUserPersonalDetails();
const isPolicyIDInRoute = !!policyID?.length;
const isMoneyRequest = !!iouType && IOUUtils.isValidMoneyRequestType(iouType);
const isFromGlobalCreate = isEmptyObject(report?.reportID);
const pendingField = featureName ? props.policy?.pendingFields?.[featureName] : undefined;
const pendingField = featureName ? policy?.pendingFields?.[featureName] : undefined;

useEffect(() => {
if (!isPolicyIDInRoute || !isEmptyObject(policy)) {
Expand Down Expand Up @@ -160,19 +172,9 @@ function AccessOrNotFoundWrapper({accessVariants = [], fullPageNotFoundViewProps
);
}

return callOrReturn(props.children, props);
return callOrReturn(props.children, {report, policy, isLoadingReportData});

@blazejkustra blazejkustra Sep 25, 2024

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Verify that this doesn't break anything (there are less props provided to children now)

@mkzie2 mkzie2 Sep 26, 2024

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We only use it here, so maybe let's narrow the type down to include policy only?

App/src/pages/workspace/tags/WorkspaceTagsSettingsPage.tsx

Line 125 in bb30c66

{({policy}) => (

}

export type {AccessVariant};

export default withOnyx<AccessOrNotFoundWrapperProps, AccessOrNotFoundWrapperOnyxProps>({
report: {
key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
},
policy: {
key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
},
isLoadingReportData: {
key: ONYXKEYS.IS_LOADING_REPORT_DATA,
},
})(AccessOrNotFoundWrapper);
export default AccessOrNotFoundWrapper;