Assign the result of useI18n consistently (#2219)

* Assign the result of useI18n consistently We use the following interchangably: - `const i18n = useI18n();` - `const intl = useI18n();` - `const {translate} = useI18n();` The commit standardizes us to always use `const i18n = useI18n();` * Stop destructuing intl.translate from withAppProvider props
Shopify · Oct 3, 2019 · d2191d0 · d2191d0
1 parent f2d60c5
commit d2191d0
Show file tree

Hide file tree

Showing 20 changed files with 86 additions and 74 deletions.
diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx
@@ -44,7 +44,7 @@ export function Badge({
   progress,
   size = DEFAULT_SIZE,
 }: BadgeProps) {
-  const intl = useI18n();
+  const i18n = useI18n();
 
   const className = classNames(
     styles.Badge,
@@ -56,17 +56,17 @@ export function Badge({
   let progressMarkup;
   switch (progress) {
     case PROGRESS_LABELS.incomplete:
-      progressMarkup = intl.translate(
+      progressMarkup = i18n.translate(
         'Polaris.Badge.PROGRESS_LABELS.incomplete',
       );
       break;
     case PROGRESS_LABELS.partiallyComplete:
-      progressMarkup = intl.translate(
+      progressMarkup = i18n.translate(
         'Polaris.Badge.PROGRESS_LABELS.partiallyComplete',
       );
       break;
     case PROGRESS_LABELS.complete:
-      progressMarkup = intl.translate('Polaris.Badge.PROGRESS_LABELS.complete');
+      progressMarkup = i18n.translate('Polaris.Badge.PROGRESS_LABELS.complete');
       break;
   }
 
@@ -79,19 +79,19 @@ export function Badge({
   let statusMarkup;
   switch (status) {
     case STATUS_LABELS.info:
-      statusMarkup = intl.translate('Polaris.Badge.STATUS_LABELS.info');
+      statusMarkup = i18n.translate('Polaris.Badge.STATUS_LABELS.info');
       break;
     case STATUS_LABELS.success:
-      statusMarkup = intl.translate('Polaris.Badge.STATUS_LABELS.success');
+      statusMarkup = i18n.translate('Polaris.Badge.STATUS_LABELS.success');
       break;
     case STATUS_LABELS.warning:
-      statusMarkup = intl.translate('Polaris.Badge.STATUS_LABELS.warning');
+      statusMarkup = i18n.translate('Polaris.Badge.STATUS_LABELS.warning');
       break;
     case STATUS_LABELS.attention:
-      statusMarkup = intl.translate('Polaris.Badge.STATUS_LABELS.attention');
+      statusMarkup = i18n.translate('Polaris.Badge.STATUS_LABELS.attention');
       break;
     case STATUS_LABELS.new:
-      statusMarkup = intl.translate('Polaris.Badge.STATUS_LABELS.new');
+      statusMarkup = i18n.translate('Polaris.Badge.STATUS_LABELS.new');
       break;
   }
 

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -109,7 +109,7 @@ export function Button({
   textAlign,
   fullWidth,
 }: ButtonProps) {
-  const intl = useI18n();
+  const i18n = useI18n();
 
   const isDisabled = disabled || loading;
 
@@ -156,7 +156,7 @@ export function Button({
       <Spinner
         size="small"
         color={spinnerColor}
-        accessibilityLabel={intl.translate(
+        accessibilityLabel={i18n.translate(
           'Polaris.Button.spinnerAccessibilityLabel',
         )}
       />

diff --git a/src/components/DataTable/DataTable.tsx b/src/components/DataTable/DataTable.tsx
@@ -93,8 +93,12 @@ class DataTable extends React.PureComponent<CombinedProps, DataTableState> {
 
   constructor(props: CombinedProps) {
     super(props);
-    const {translate} = props.polaris.intl;
-    this.totalsRowHeading = translate('Polaris.DataTable.totalsRowHeading');
+    const {
+      polaris: {intl},
+    } = props;
+    this.totalsRowHeading = intl.translate(
+      'Polaris.DataTable.totalsRowHeading',
+    );
   }
 
   componentDidMount() {

diff --git a/src/components/DataTable/components/Cell/Cell.tsx b/src/components/DataTable/components/Cell/Cell.tsx
@@ -38,7 +38,7 @@ export function Cell({
   defaultSortDirection = 'ascending',
   onSort,
 }: CellProps) {
-  const {translate} = useI18n();
+  const i18n = useI18n();
   const numeric = contentType === 'numeric';
   const className = classNames(
     styles.Cell,
@@ -63,7 +63,7 @@ export function Cell({
   const oppositeDirection =
     sortDirection === 'ascending' ? 'descending' : 'ascending';
 
-  const sortAccessibilityLabel = translate(
+  const sortAccessibilityLabel = i18n.translate(
     'Polaris.DataTable.sortAccessibilityLabel',
     {direction: sorted ? oppositeDirection : direction},
   );

diff --git a/src/components/DataTable/components/Navigation/Navigation.tsx b/src/components/DataTable/components/Navigation/Navigation.tsx
@@ -24,7 +24,7 @@ export function Navigation({
   navigateTableLeft,
   navigateTableRight,
 }: NavigationProps) {
-  const {translate} = useI18n();
+  const i18n = useI18n();
 
   const pipMarkup = columnVisibilityData.map((column, index) => {
     const className = classNames(
@@ -35,13 +35,15 @@ export function Navigation({
     return <div className={className} key={`pip-${index}`} />;
   });
 
-  const leftA11yLabel = translate('Polaris.DataTable.navAccessibilityLabel', {
-    direction: 'left',
-  });
+  const leftA11yLabel = i18n.translate(
+    'Polaris.DataTable.navAccessibilityLabel',
+    {direction: 'left'},
+  );
 
-  const rightA11yLabel = translate('Polaris.DataTable.navAccessibilityLabel', {
-    direction: 'right',
-  });
+  const rightA11yLabel = i18n.translate(
+    'Polaris.DataTable.navAccessibilityLabel',
+    {direction: 'right'},
+  );
 
   return (
     <div className={styles.Navigation}>

diff --git a/src/components/DatePicker/components/Month/Month.tsx b/src/components/DatePicker/components/Month/Month.tsx
@@ -60,7 +60,7 @@ export function Month({
   year,
   weekStartsOn,
 }: MonthProps) {
-  const intl = useI18n();
+  const i18n = useI18n();
 
   const isInHoveringRange = allowRange ? hoveringDateIsInRange : () => false;
   const now = new Date();
@@ -73,7 +73,7 @@ export function Month({
   const weekdays = getWeekdaysOrdered(weekStartsOn).map((weekday) => (
     <Weekday
       key={weekday}
-      title={intl.translate(
+      title={i18n.translate(
         `Polaris.DatePicker.daysAbbreviated.${weekdayName(weekday)}`,
       )}
       current={current && new Date().getDay() === weekday}
@@ -126,7 +126,7 @@ export function Month({
   return (
     <div role="grid" className={styles.Month}>
       <div className={className}>
-        {intl.translate(`Polaris.DatePicker.months.${monthName(month)}`)} {year}
+        {i18n.translate(`Polaris.DatePicker.months.${monthName(month)}`)} {year}
       </div>
       <div role="rowheader" className={styles.WeekHeadings}>
         {weekdays}

diff --git a/src/components/DropZone/DropZone.tsx b/src/components/DropZone/DropZone.tsx
@@ -188,9 +188,7 @@ class DropZone extends React.Component<CombinedProps, State> {
     super(props);
 
     const {
-      polaris: {
-        intl: {translate},
-      },
+      polaris: {intl},
       type,
     } = props;
     const suffix = capitalize(type);
@@ -200,10 +198,12 @@ class DropZone extends React.Component<CombinedProps, State> {
       id: props.id || getUniqueID(),
       dragging: false,
       error: false,
-      errorOverlayText: translate(`Polaris.DropZone.errorOverlayText${suffix}`),
+      errorOverlayText: intl.translate(
+        `Polaris.DropZone.errorOverlayText${suffix}`,
+      ),
       focused: false,
       numFiles: 0,
-      overlayText: translate(`Polaris.DropZone.overlayText${suffix}`),
+      overlayText: intl.translate(`Polaris.DropZone.overlayText${suffix}`),
       size: 'extraLarge',
       type,
     };

diff --git a/src/components/DropZone/components/FileUpload/FileUpload.tsx b/src/components/DropZone/components/FileUpload/FileUpload.tsx
@@ -21,12 +21,16 @@ export interface FileUploadProps {
 }
 
 export function FileUpload(props: FileUploadProps) {
-  const {translate} = useI18n();
+  const i18n = useI18n();
   const {size, type, focused, disabled} = useContext(DropZoneContext);
   const suffix = capitalize(type);
   const {
-    actionTitle = translate(`Polaris.DropZone.FileUpload.actionTitle${suffix}`),
-    actionHint = translate(`Polaris.DropZone.FileUpload.actionHint${suffix}`),
+    actionTitle = i18n.translate(
+      `Polaris.DropZone.FileUpload.actionTitle${suffix}`,
+    ),
+    actionHint = i18n.translate(
+      `Polaris.DropZone.FileUpload.actionHint${suffix}`,
+    ),
   } = props;
 
   const imageClasses = classNames(

diff --git a/...onents/ContextualSaveBar/components/DiscardConfirmationModal/DiscardConfirmationModal.tsx b/...onents/ContextualSaveBar/components/DiscardConfirmationModal/DiscardConfirmationModal.tsx
@@ -14,31 +14,31 @@ export function DiscardConfirmationModal({
   onDiscard,
   onCancel,
 }: DiscardConfirmationModalProps) {
-  const intl = useI18n();
+  const i18n = useI18n();
 
   return (
     <Modal
-      title={intl.translate('Polaris.DiscardConfirmationModal.title')}
+      title={i18n.translate('Polaris.DiscardConfirmationModal.title')}
       open={open}
       onClose={onCancel}
       primaryAction={{
-        content: intl.translate(
+        content: i18n.translate(
           'Polaris.DiscardConfirmationModal.primaryAction',
         ),
         destructive: true,
         onAction: onDiscard,
       }}
       secondaryActions={[
         {
-          content: intl.translate(
+          content: i18n.translate(
             'Polaris.DiscardConfirmationModal.secondaryAction',
           ),
           onAction: onCancel,
         },
       ]}
       sectioned
     >
-      {intl.translate('Polaris.DiscardConfirmationModal.message')}
+      {i18n.translate('Polaris.DiscardConfirmationModal.message')}
     </Modal>
   );
 }
diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
@@ -20,12 +20,12 @@ const COLORS_WITH_BACKDROPS = [
 interface Props extends IconProps {}
 
 export function Icon({source, color, backdrop, accessibilityLabel}: Props) {
-  const intl = useI18n();
+  const i18n = useI18n();
 
   if (color && backdrop && COLORS_WITH_BACKDROPS.indexOf(color) < 0) {
     // eslint-disable-next-line no-console
     console.warn(
-      intl.translate('Polaris.Icon.backdropWarning', {
+      i18n.translate('Polaris.Icon.backdropWarning', {
         color,
         colorsWithBackDrops: COLORS_WITH_BACKDROPS.join(', '),
       }),

diff --git a/src/components/Link/Link.tsx b/src/components/Link/Link.tsx
@@ -32,11 +32,11 @@ export function Link({
   id,
   monochrome,
 }: LinkProps) {
-  const intl = useI18n();
+  const i18n = useI18n();
   let childrenMarkup = children;
 
   if (external && typeof children === 'string') {
-    const iconLabel = intl.translate(
+    const iconLabel = i18n.translate(
       'Polaris.Common.newWindowAccessibilityHint',
     );
 

diff --git a/src/components/Modal/components/CloseButton/CloseButton.tsx b/src/components/Modal/components/CloseButton/CloseButton.tsx
@@ -13,7 +13,7 @@ export interface CloseButtonProps {
 }
 
 export function CloseButton({title = true, onClick}: CloseButtonProps) {
-  const intl = useI18n();
+  const i18n = useI18n();
 
   const className = classNames(
     styles.CloseButton,
@@ -24,7 +24,7 @@ export function CloseButton({title = true, onClick}: CloseButtonProps) {
     <button
       onClick={onClick}
       className={className}
-      aria-label={intl.translate('Polaris.Common.close')}
+      aria-label={i18n.translate('Polaris.Common.close')}
     >
       <Icon source={MobileCancelMajorMonotone} color="inkLighter" />
     </button>

diff --git a/src/components/Navigation/components/Item/Item.tsx b/src/components/Navigation/components/Item/Item.tsx
@@ -83,7 +83,7 @@ export function Item({
   matchPaths,
   excludePaths,
 }: ItemProps) {
-  const intl = useI18n();
+  const i18n = useI18n();
   const {isNavigationCollapsed} = useMediaQuery();
   const {location, onNavigationDismiss} = useContext(NavigationContext);
   const [expanded, setExpanded] = useState(false);
@@ -116,7 +116,7 @@ export function Item({
   if (isNew) {
     badgeMarkup = (
       <Badge status="new" size="small">
-        {intl.translate('Polaris.Badge.STATUS_LABELS.new')}
+        {i18n.translate('Polaris.Badge.STATUS_LABELS.new')}
       </Badge>
     );
   } else if (typeof badge === 'string') {

diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
@@ -60,12 +60,12 @@ export function Pagination({
   accessibilityLabel,
   label,
 }: PaginationProps) {
-  const intl = useI18n();
+  const i18n = useI18n();
 
   const node: React.RefObject<HTMLElement> = React.createRef();
 
   const navLabel =
-    accessibilityLabel || intl.translate('Polaris.Pagination.pagination');
+    accessibilityLabel || i18n.translate('Polaris.Pagination.pagination');
 
   const className = classNames(styles.Pagination, plain && styles.plain);
 
@@ -81,7 +81,7 @@ export function Pagination({
       className={previousClassName}
       url={previousURL}
       onMouseUp={handleMouseUpByBlurring}
-      aria-label={intl.translate('Polaris.Pagination.previous')}
+      aria-label={i18n.translate('Polaris.Pagination.previous')}
       id="previousURL"
     >
       <Icon source={ArrowLeftMinor} />
@@ -92,7 +92,7 @@ export function Pagination({
       type="button"
       onMouseUp={handleMouseUpByBlurring}
       className={previousClassName}
-      aria-label={intl.translate('Polaris.Pagination.previous')}
+      aria-label={i18n.translate('Polaris.Pagination.previous')}
       disabled={!hasPrevious}
     >
       <Icon source={ArrowLeftMinor} />
@@ -104,7 +104,7 @@ export function Pagination({
       className={nextClassName}
       url={nextURL}
       onMouseUp={handleMouseUpByBlurring}
-      aria-label={intl.translate('Polaris.Pagination.next')}
+      aria-label={i18n.translate('Polaris.Pagination.next')}
       id="nextURL"
     >
       <Icon source={ArrowRightMinor} />
@@ -115,7 +115,7 @@ export function Pagination({
       type="button"
       onMouseUp={handleMouseUpByBlurring}
       className={nextClassName}
-      aria-label={intl.translate('Polaris.Pagination.next')}
+      aria-label={i18n.translate('Polaris.Pagination.next')}
       disabled={!hasNext}
     >
       <Icon source={ArrowRightMinor} />

diff --git a/src/components/ProgressBar/ProgressBar.tsx b/src/components/ProgressBar/ProgressBar.tsx
@@ -19,14 +19,14 @@ export interface ProgressBarProps {
 }
 
 export function ProgressBar({progress = 0, size = 'medium'}: ProgressBarProps) {
-  const intl = useI18n();
+  const i18n = useI18n();
 
   const className = classNames(
     styles.ProgressBar,
     size && styles[variationName('size', size)],
   );
 
-  const warningMessage = intl.translate(
+  const warningMessage = i18n.translate(
     progress < 0
       ? 'Polaris.ProgressBar.negativeWarningMessage'
       : 'Polaris.ProgressBar.exceedWarningMessage',