fix: render favicon and siteName in title (#668)

Danyal-Faheem · web-flow · commit c0873df57588 · 2024-04-05T16:09:53.000+05:00
* fix: render favicon and siteName in title

* fix: remove translation files
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -51,6 +51,7 @@
     "raw-loader": "4.0.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "react-helmet": "6.1.0",
     "react-redux": "7.2.9",
     "react-router": "6.18.0",
     "react-router-dom": "6.18.0",
diff --git a/src/components/Head/Head.jsx b/src/components/Head/Head.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { Helmet } from 'react-helmet';
+
+import { getConfig } from '@edx/frontend-platform';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import messages from './messages';
+
+const Head = ({ intl }) => (
+  <Helmet>
+    <title>
+      {intl.formatMessage(messages['discussions.page.title'], { siteName: getConfig().SITE_NAME })}
+    </title>
+    <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
+  </Helmet>
+);
+
+Head.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(Head);
diff --git a/src/components/Head/Head.test.jsx b/src/components/Head/Head.test.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { render } from '@testing-library/react';
+import { Helmet } from 'react-helmet';
+
+import { getConfig } from '@edx/frontend-platform';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import Head from './Head';
+
+describe('Head', () => {
+  const props = {};
+  it('should match render title tag and favicon with the site configuration values', () => {
+    render(<IntlProvider locale="en"><Head {...props} /></IntlProvider>);
+    const helmet = Helmet.peek();
+    expect(helmet.title).toEqual(`Discussions | ${getConfig().SITE_NAME}`);
+    expect(helmet.linkTags[0].rel).toEqual('shortcut icon');
+    expect(helmet.linkTags[0].href).toEqual(getConfig().FAVICON_URL);
+  });
+});
diff --git a/src/components/Head/messages.js b/src/components/Head/messages.js
@@ -0,0 +1,11 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  'discussions.page.title': {
+    id: 'discussions.page.title',
+    defaultMessage: 'Discussions | {siteName}',
+    description: 'Title tag',
+  },
+});
+
+export default messages;
diff --git a/src/index.jsx b/src/index.jsx
@@ -10,16 +10,17 @@ import {
 } from '@edx/frontend-platform';
 import { AppProvider, ErrorPage } from '@edx/frontend-platform/react';
 
+import Head from './components/Head/Head';
 import { DiscussionsHome } from './discussions';
 import messages from './i18n';
 import store from './store';
 
-import './assets/favicon.ico';
 import './index.scss';
 
 subscribe(APP_READY, () => {
   ReactDOM.render(
     <AppProvider store={store}>
+      <Head />
       <DiscussionsHome />
     </AppProvider>,
     document.getElementById('root'),
