use useLocale

components/layout/Footer.js

@@ -1,19 +1,17 @@
 import React from 'react';
 import classNames from 'classnames';
-import { FormattedMessage, useIntl } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 import Link from 'components/common/Link';
 import styles from './Footer.module.css';
 import useVersion from 'hooks/useVersion';
+import useLocale from 'hooks/useLocale';
 
 export default function Footer() {
   const { current } = useVersion();
-  const intl = useIntl();
+  const [locale] = useLocale();
 
   return (
-    <footer
-      className="container"
-      dir={intl.formatMessage({ id: 'metrics.dir', defaultMessage: 'ltr' })}
-    >
+    <footer className="container" dir={locale === 'ar-SA' ? 'rtl' : 'ltr'}>
       <div className={classNames(styles.footer, 'row')}>
         <div className="col-12 col-md-4" />
         <div className="col-12 col-md-4">