Skip to content

Commit

Permalink
Adding Dynamic components
Browse files Browse the repository at this point in the history
  • Loading branch information
@dr-bizz
dr-bizz committed Jun 17, 2024
1 parent ceaffc0 commit 6041662
Show file tree
Hide file tree
Showing 3 changed files with 123 additions and 101 deletions.
10 changes: 10 additions & 0 deletions ...tacts/ContactDetails/ContactDetailsTab/Mailing/AddAddressModal/DynamicAddAddressModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import dynamic from 'next/dynamic';
import { DynamicComponentPlaceholder } from 'src/components/DynamicPlaceholders/DynamicComponentPlaceholder';

export const DynamicAddAddressModal = dynamic(
() =>
import(/* webpackChunkName: "AddAddressModal" */ './AddAddressModal').then(
({ AddAddressModal }) => AddAddressModal,
),
{ loading: DynamicComponentPlaceholder },
);
10 changes: 10 additions & 0 deletions ...ails/ContactDetailsTab/Mailing/EditContactAddressModal/DynamicEditContactAddressModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import dynamic from 'next/dynamic';
import { DynamicComponentPlaceholder } from 'src/components/DynamicPlaceholders/DynamicComponentPlaceholder';

export const DynamicEditContactAddressModal = dynamic(
() =>
import(
/* webpackChunkName: "EditContactAddressModal" */ './EditContactAddressModal'
).then(({ EditContactAddressModal }) => EditContactAddressModal),
{ loading: DynamicComponentPlaceholder },
);
204 changes: 103 additions & 101 deletions src/components/Tool/FixMailingAddresses/FixMailingAddresses.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@ import {
} from '@mui/material';
import { Trans, useTranslation } from 'react-i18next';
import { makeStyles } from 'tss-react/mui';
import { AddAddressModal } from 'src/components/Contacts/ContactDetails/ContactDetailsTab/Mailing/AddAddressModal/AddAddressModal';
import { EditContactAddressModal } from 'src/components/Contacts/ContactDetails/ContactDetailsTab/Mailing/EditContactAddressModal/EditContactAddressModal';
import { DynamicAddAddressModal } from 'src/components/Contacts/ContactDetails/ContactDetailsTab/Mailing/AddAddressModal/DynamicAddAddressModal';
import { DynamicEditContactAddressModal } from 'src/components/Contacts/ContactDetails/ContactDetailsTab/Mailing/EditContactAddressModal/DynamicEditContactAddressModal';
import theme from '../../../theme';
import NoData from '../NoData';
import Contact from './Contact';
Expand All @@ -40,6 +40,7 @@ const useStyles = makeStyles()(() => ({
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
flexWrap: 'wrap',
width: '100%',
},
divider: {
Expand Down Expand Up @@ -170,6 +171,7 @@ const FixSendNewsletter: React.FC<Props> = ({ accountListId }: Props) => {
const data = {
...dataFromInvalidAddressesCache,
contacts: {
...dataFromInvalidAddressesCache.contacts,
nodes: newContacts,
},
};
Expand Down Expand Up @@ -206,113 +208,113 @@ const FixSendNewsletter: React.FC<Props> = ({ accountListId }: Props) => {

const totalContacts = data?.contacts?.nodes?.length || 0;

//TODO: Make navbar selectId = "fixSendNewsletter" when other branch gets merged

return (
<Box className={classes.outer} data-testid="Home">
<Grid container className={classes.container}>
<Grid item xs={12}>
<Typography variant="h4">{t('Fix Mailing Addresses')}</Typography>
<Divider className={classes.divider} />
</Grid>
<Box className={classes.outer}>
<Grid container className={classes.container}>
<Grid item xs={12}>
<Typography variant="h4">{t('Fix Mailing Addresses')}</Typography>
<Divider className={classes.divider} />
</Grid>

{loading && !data && (
<CircularProgress
data-testid="loading"
style={{ marginTop: theme.spacing(3) }}
/>
)}
{loading && !data && (
<CircularProgress
data-testid="loading"
style={{ marginTop: theme.spacing(3) }}
/>
)}

{!loading && data && (
<React.Fragment>
{!totalContacts && <NoData tool="fixMailingAddresses" />}
{totalContacts && (
<>
<Grid item xs={12}>
<Box className={classes.descriptionBox}>
<Typography>
<strong>
{!loading && data && (
<React.Fragment>
{!totalContacts && <NoData tool="fixMailingAddresses" />}
{totalContacts && (
<>
<Grid item xs={12}>
<Box className={classes.descriptionBox}>
<Typography>
<strong>
{t(
'You have {{amount}} mailing addresses to confirm.',
{
amount: totalContacts,
},
)}
</strong>
</Typography>
<Typography>
{t(
'You have {{amount}} mailing addresses to confirm.',
{
amount: totalContacts,
},
'Choose below which mailing address will be set as primary. Primary mailing addresses will be used for Newsletter exports.',
)}
</strong>
</Typography>
<Typography>
{t(
'Choose below which mailing address will be set as primary. Primary mailing addresses will be used for Newsletter exports.',
)}
</Typography>
<Box className={classes.defaultBox}>
<Typography>{t('Default Primary Source:')}</Typography>
</Typography>
<Box className={classes.defaultBox}>
<Typography>{t('Default Primary Source:')}</Typography>

<Select
className={classes.select}
value={defaultSource}
onChange={handleSourceChange}
size="small"
>
{sourceOptions.map((source) => (
<MenuItem key={source} value={source}>
{source}
</MenuItem>
))}
</Select>
<Button
variant="contained"
className={classes.confirmAllButton}
>
<Icon
path={mdiCheckboxMarkedCircle}
size={0.8}
className={classes.buttonIcon}
/>
{t('Confirm {{amount}} as {{source}}', {
amount: totalContacts,
source: defaultSource,
})}
</Button>
<Select
className={classes.select}
value={defaultSource}
onChange={handleSourceChange}
size="small"
>
{sourceOptions.map((source) => (
<MenuItem key={source} value={source}>
{source}
</MenuItem>
))}
</Select>
<Button
variant="contained"
className={classes.confirmAllButton}
>
<Icon
path={mdiCheckboxMarkedCircle}
size={0.8}
className={classes.buttonIcon}
/>
{t('Confirm {{amount}} as {{source}}', {
amount: totalContacts,
source: defaultSource,
})}
</Button>
</Box>
</Box>
</Box>
</Grid>
<Grid item xs={12}>
{data.contacts.nodes.map((contact) => (
<Contact
id={contact.id}
name={contact.name}
status={contact.status || ''}
key={contact.id}
addresses={contact.addresses.nodes}
openEditAddressModal={(address, contactId) =>
handleModalOpen(ModalEnum.Edit, address, contactId)
}
openNewAddressModal={(address, contactId) =>
handleModalOpen(ModalEnum.New, address, contactId)
}
/>
))}
</Grid>
<Grid item xs={12}>
<Box className={classes.footer}>
<Typography>
<Trans
defaults="Showing <bold>{{value}}</bold> of <bold>{{value}}</bold>"
shouldUnescape
values={{ value: totalContacts }}
components={{ bold: <strong /> }}
</Grid>
<Grid item xs={12}>
{data.contacts.nodes.map((contact) => (
<Contact
id={contact.id}
name={contact.name}
status={contact.status || ''}
key={contact.id}
addresses={contact.addresses.nodes}
openEditAddressModal={(address, contactId) =>
handleModalOpen(ModalEnum.Edit, address, contactId)
}
openNewAddressModal={(address, contactId) =>
handleModalOpen(ModalEnum.New, address, contactId)
}
/>
</Typography>
</Box>
</Grid>
</>
)}
</React.Fragment>
)}
</Grid>
))}
</Grid>
<Grid item xs={12}>
<Box className={classes.footer}>
<Typography>
<Trans
defaults="Showing <bold>{{value}}</bold> of <bold>{{value}}</bold>"
shouldUnescape
values={{ value: totalContacts }}
components={{ bold: <strong /> }}
/>
</Typography>
</Box>
</Grid>
</>
)}
</React.Fragment>
)}
</Grid>
</Box>
{showEditAddressModal && (
<EditContactAddressModal
<DynamicEditContactAddressModal
accountListId={accountListId}
address={selectedAddress}
contactId={selectedContactId}
Expand All @@ -321,11 +323,11 @@ const FixSendNewsletter: React.FC<Props> = ({ accountListId }: Props) => {
/>
)}
{showNewAddressModal && (
<AddAddressModal
<DynamicAddAddressModal
accountListId={accountListId}
contactId={selectedContactId}
handleClose={handleClose}
handleUpdateCacheOnDelete={handleUpdateCacheForAddAddress}
handleUpdateCache={handleUpdateCacheForAddAddress}
/>
)}
</Box>
Expand Down

0 comments on commit 6041662

Please sign in to comment.