Skip to content

Commit

Permalink
refactor(extension): improve variables naming
Browse files Browse the repository at this point in the history
  • Loading branch information
@jplorek-atix
jplorek-atix committed Jun 2, 2023
1 parent dc20eb0 commit 6b14873
Show file tree
Hide file tree
Showing 4 changed files with 47 additions and 53 deletions.
4 changes: 2 additions & 2 deletions apps/browser-extension-wallet/src/features/address-book/components/AddressBook.tsx
View file
Expand Up @@ -76,7 +76,7 @@ export const AddressBook = withAddressBookContext(() => {
extendLimit();
}, [extendLimit]);

const AddressDrawerInitialStep = (addressToEdit as AddressBookSchema)?.id
const addressDrawerInitialStep = (addressToEdit as AddressBookSchema)?.id
? AddressDetailsSteps.DETAILS
: AddressDetailsSteps.CREATE;

Expand Down Expand Up @@ -123,7 +123,7 @@ export const AddressBook = withAddressBookContext(() => {
)}
</ContentLayout>
<AddressDetailDrawer
initialStep={AddressDrawerInitialStep}
initialStep={addressDrawerInitialStep}
initialValues={addressToEdit}
onCancelClick={() => {
setAddressToEdit({} as AddressBookSchema);
Expand Down
80 changes: 36 additions & 44 deletions ...n-wallet/src/features/address-book/components/AddressDetailDrawer/AddressDetailDrawer.tsx
View file
Expand Up @@ -21,17 +21,21 @@ import {
} from '@providers/AnalyticsProvider/analyticsTracker';
import { useKeyboardShortcut } from '@hooks';

const stepConfiguration: AddressDetailsConfig = {
const stepsConfiguration: AddressDetailsConfig = {
[AddressDetailsSteps.DETAILS]: {
currentSection: AddressDetailsSteps.DETAILS,
nextSection: AddressDetailsSteps.EDIT
nextSection: AddressDetailsSteps.EDIT,
headerTitle: 'browserView.addressBook.addressDetail.title'
},
[AddressDetailsSteps.EDIT]: {
currentSection: AddressDetailsSteps.EDIT,
prevSection: AddressDetailsSteps.DETAILS
prevSection: AddressDetailsSteps.DETAILS,
headerTitle: 'browserView.addressBook.editAddress.title'
},
[AddressDetailsSteps.CREATE]: {
currentSection: AddressDetailsSteps.CREATE
currentSection: AddressDetailsSteps.CREATE,
headerTitle: 'browserView.addressBook.form.addNewAddress',
headerSubtitle: 'browserView.addressBook.form.addNewSubtitle'
}
};

Expand Down Expand Up @@ -68,44 +72,41 @@ export const AddressDetailDrawer = ({
}: AddressDetailDrawerProps): React.ReactElement => {
const { t } = useTranslation();
const [selectedId, setSelectedId] = useState<number | null>();
const [stepsConfig, setStepsConfig] = useState<AddressDetailsSectionConfig>(stepConfiguration[initialStep]);
useEffect(() => {
setStepsConfig(stepConfiguration[initialStep]);
}, [initialStep]);
const showArrowIcon = stepsConfig.currentSection === AddressDetailsSteps.EDIT || popupView;
const [currentStepConfig, setCurrentStepConfig] = useState<AddressDetailsSectionConfig>(
stepsConfiguration[initialStep]
);
const [formValues, setFormValues] = useState<valuesPropType>(initialValues || {});
const analytics = useAnalyticsContext();

const editAddressFormTranslations = {
walletName: t('core.addressForm.name'),
address: t('core.editAddressForm.address')
};
useEffect(() => {
setCurrentStepConfig(stepsConfiguration[initialStep]);
}, [initialStep]);

useEffect(() => {
setFormValues(initialValues);
}, [initialValues]);

const onArrowIconClick = () =>
popupView && (!stepConfiguration[stepsConfig.prevSection] || !initialValues?.id)
popupView && (!stepsConfiguration[currentStepConfig.prevSection] || !initialValues?.id)
? onCancelClick()
: setStepsConfig(stepConfiguration[stepsConfig.prevSection]);
: setCurrentStepConfig(stepsConfiguration[currentStepConfig.prevSection]);

useKeyboardShortcut(['Escape'], () => {
if (selectedId) {
// eslint-disable-next-line unicorn/no-null
setSelectedId(null);
return;
}
stepConfiguration[stepsConfig.prevSection] ? onArrowIconClick() : onCancelClick();
stepsConfiguration[currentStepConfig.prevSection] ? onArrowIconClick() : onCancelClick();
});

const getFieldError = (key: FormKeys) => validations[key]?.(formValues[key]);

const handleOnCancelClick = () => {
if (stepsConfig.currentSection === AddressDetailsSteps.CREATE) {
if (currentStepConfig.currentSection === AddressDetailsSteps.CREATE) {
onCancelClick();
} else {
setStepsConfig(stepConfiguration[AddressDetailsSteps.DETAILS]);
setCurrentStepConfig(stepsConfiguration[AddressDetailsSteps.DETAILS]);
}
};

Expand All @@ -117,34 +118,25 @@ export const AddressDetailDrawer = ({
});
};

const newAddressFormTitle = popupView
? t('browserView.addressBook.addressForm.title.add')
: t('browserView.addressBook.form.addNewAddress');
const drawerHeaderTitle =
stepsConfig.currentSection === AddressDetailsSteps.DETAILS
? t('browserView.addressBook.addressDetail.title')
: (stepsConfig.currentSection === AddressDetailsSteps.CREATE && newAddressFormTitle) ||
t('browserView.addressBook.editAddress.title');
const editAddressFormTranslations = {
walletName: t('core.addressForm.name'),
address: t('core.editAddressForm.address')
};

const isFormStep =
stepsConfig.currentSection === AddressDetailsSteps.EDIT ||
stepsConfig.currentSection === AddressDetailsSteps.CREATE;
const showArrowIcon = currentStepConfig.currentSection === AddressDetailsSteps.EDIT || popupView;
const showForm =
currentStepConfig.currentSection === AddressDetailsSteps.EDIT ||
currentStepConfig.currentSection === AddressDetailsSteps.CREATE;
const headerTitle = currentStepConfig?.headerTitle && t(currentStepConfig.headerTitle);
const headerSubtitle = currentStepConfig?.headerSubtitle && t(currentStepConfig.headerSubtitle);

return (
<>
<Drawer
keyboard={false}
className={cn(styles.drawer, { [styles.popupView]: popupView })}
onClose={onCancelClick}
title={
<DrawerHeader
title={drawerHeaderTitle}
subtitle={
stepsConfig.currentSection === AddressDetailsSteps.CREATE &&
t('browserView.addressBook.form.addNewSubtitle')
}
/>
}
title={<DrawerHeader title={headerTitle} subtitle={headerSubtitle} />}
navigation={
<DrawerNavigation
title={t('browserView.addressBook.title')}
Expand All @@ -154,7 +146,7 @@ export const AddressDetailDrawer = ({
}
footer={
<>
{stepsConfig.currentSection === AddressDetailsSteps.DETAILS && (
{currentStepConfig.currentSection === AddressDetailsSteps.DETAILS && (
<div className={styles.footer}>
<Button
data-testid="address-form-details-btn-edit"
Expand All @@ -164,7 +156,7 @@ export const AddressDetailDrawer = ({
? AnalyticsEventNames.AddressBook.EDIT_ADDRESS_POPUP
: AnalyticsEventNames.AddressBook.EDIT_ADDRESS_BROWSER
);
setStepsConfig(stepConfiguration[stepsConfig.nextSection]);
setCurrentStepConfig(stepsConfiguration[currentStepConfig.nextSection]);
}}
size="large"
block
Expand All @@ -190,15 +182,15 @@ export const AddressDetailDrawer = ({
</Button>
</div>
)}
{isFormStep && (
{showForm && (
<EditAddressFormFooter
validations={validations}
formValues={formValues}
onCancelClick={handleOnCancelClick}
onConfirmClick={onConfirmClick}
getFieldError={getFieldError}
onClose={onCancelClick}
isNewAddress={stepsConfig.currentSection === AddressDetailsSteps.CREATE}
isNewAddress={currentStepConfig.currentSection === AddressDetailsSteps.CREATE}
currentName={initialValues?.name}
/>
)}
Expand All @@ -209,7 +201,7 @@ export const AddressDetailDrawer = ({
>
{visible && (
<>
{stepsConfig.currentSection === AddressDetailsSteps.DETAILS && initialValues && (
{currentStepConfig.currentSection === AddressDetailsSteps.DETAILS && initialValues && (
<div className={styles.container} data-testid="address-form-details-container">
<div className={styles.body}>
<div
Expand Down Expand Up @@ -248,7 +240,7 @@ export const AddressDetailDrawer = ({
</div>
</div>
)}
{isFormStep && (
{showForm && (
<div className={styles.container} data-testid="address-form-container">
<AddressForm
{...{
Expand Down
2 changes: 2 additions & 0 deletions ...-extension-wallet/src/features/address-book/components/AddressDetailDrawer/types/index.ts
View file
Expand Up @@ -8,6 +8,8 @@ export interface AddressDetailsSectionConfig {
currentSection: AddressDetailsSteps;
nextSection?: AddressDetailsSteps;
prevSection?: AddressDetailsSteps;
headerTitle?: string;
headerSubtitle?: string;
}

export type AddressDetailsConfig = Partial<Record<AddressDetailsSteps, AddressDetailsSectionConfig>>;
14 changes: 7 additions & 7 deletions ...wallet/src/views/browser-view/features/adress-book/components/AddressBook/AddressBook.tsx
View file
Expand Up @@ -30,7 +30,7 @@ export const AddressBook = withAddressBookContext((): React.ReactElement => {
const { addressToEdit, setAddressToEdit } = useAddressBookStore();
const { list: addressList, count: addressCount, utils } = useAddressBookContext();
const { extendLimit, saveRecord: saveAddress, updateRecord: updateAddress, deleteRecord: deleteAddress } = utils;
const [isFormVisible, setIsFormVisible] = useState<boolean>(false);
const [isDrawerOpen, setIsDrawerOpen] = useState<boolean>(false);
const analytics = useAnalyticsContext();

const addressListTranslations = {
Expand Down Expand Up @@ -70,7 +70,7 @@ export const AddressBook = withAddressBookContext((): React.ReactElement => {
name: AnalyticsEventNames.AddressBook.VIEW_ADDRESS_DETAILS_BROWSER
});
setAddressToEdit(address);
setIsFormVisible(true);
setIsDrawerOpen(true);
}
})) || [],
[addressList, analytics, setAddressToEdit]
Expand Down Expand Up @@ -98,7 +98,7 @@ export const AddressBook = withAddressBookContext((): React.ReactElement => {
};

const handleAddAddressClick = () => {
setIsFormVisible(true);
setIsDrawerOpen(true);
};

if (!isNumber(addressCount)) return <span />;
Expand All @@ -107,7 +107,7 @@ export const AddressBook = withAddressBookContext((): React.ReactElement => {
<EducationalList items={educationalList} title={translate('browserView.sidePanel.aboutYourWallet')} />
);

const AddressDrawerInitialStep = (addressToEdit as AddressBookSchema)?.id
const addressDrawerInitialStep = (addressToEdit as AddressBookSchema)?.id
? AddressDetailsSteps.DETAILS
: AddressDetailsSteps.CREATE;

Expand Down Expand Up @@ -144,7 +144,7 @@ export const AddressBook = withAddressBookContext((): React.ReactElement => {
initialValues={addressToEdit}
onCancelClick={() => {
setAddressToEdit({} as AddressBookSchema);
setIsFormVisible(false);
setIsDrawerOpen(false);
}}
onConfirmClick={onAddressSave}
onDelete={(id) =>
Expand All @@ -153,8 +153,8 @@ export const AddressBook = withAddressBookContext((): React.ReactElement => {
icon: DeleteIcon
})
}
visible={isFormVisible}
initialStep={AddressDrawerInitialStep}
visible={isDrawerOpen}
initialStep={addressDrawerInitialStep}
/>
</SectionLayout>
</Layout>
Expand Down

0 comments on commit 6b14873

Please sign in to comment.