WS-2627: My News page front end improvements

src/app/lib/config/services/hindi.ts

@@ -128,6 +128,14 @@ export const service: DefaultServiceConfig = {
         remove: 'Remove',
         removing: 'Removing',
       },
+      myNews: {
+        title: 'My News',
+        description: 'My saved articles',
+        loadingArticles: 'Loading...',
+        noArticles: "You haven't saved any articles yet",
+        errorText:
+          'This content does not seem to be working. Please try again later.',
+      },
       gist: 'सारांश',
       error: {
         404: {

src/app/models/types/translations.ts

@@ -63,6 +63,13 @@ export interface Translations {
     remove: string;
     removing: string;
   };
+  myNews?: {
+    title: string;
+    description: string;
+    loadingArticles: string;
+    noArticles: string;
+    errorText: string;
+  };
   error: {
     home?: string;
     currentPage?: string;

ws-nextjs-app/pages/[service]/my-news/MyNewsPage/MyNewsPageContent.tsx

@@ -9,7 +9,7 @@ import Text from '#app/components/Text';
 import styles from '../styles';
 import MyNewsPageLoading from './MyNewsPageLoading';
 
-const ITEMS_PER_PAGE = 10;
+const ITEMS_PER_PAGE = 16;
 
 interface MyNewsPageContentProps {
   page?: string;
@@ -41,37 +41,43 @@ const MyNewsPageContent = ({ page }: MyNewsPageContentProps) => {
     ...translations?.pagination,
   };
 
+  if (!translations?.myNews) return null;
+  const { title, errorText, noArticles, description } = translations.myNews;
+
   const translatedPage = pageXOfY
     .replace('{x}', String(activePage))
     .replace('{y}', String(pageCount));
 
-  // TODO: To be updated with translations
-  const metadataTitle =
-    activePage >= 2 ? `My News, ${translatedPage}` : 'My News';
+  const metadataTitle = activePage >= 2 ? `${title}, ${translatedPage}` : title;
 
   if (isLoading) {
     return <MyNewsPageLoading />;
   }
 
+  console.log({ title });
+
   const renderContent = () => {
     if (error) {
       return (
         <Text size="doublePica" fontVariant="sansBold">
-          This content does not seem to be working. Please try again later.
+          {errorText}
         </Text>
       );
     }
 
     if (!savedArticles.length) {
       return (
         <Text size="doublePica" fontVariant="sansBold">
-          You haven&apos;t saved any articles yet
+          {noArticles}
         </Text>
       );
     }
 
     return (
       <>
+        <Heading level={2} css={styles.subheading} size="doublePica">
+          {description}
+        </Heading>
         <CurationGrid
           summaries={savedArticles}
           headingLevel={2}
@@ -103,7 +109,7 @@ const MyNewsPageContent = ({ page }: MyNewsPageContentProps) => {
         lang={lang}
       />
       <Heading level={1} css={styles.heading}>
-        My News
+        {title}
       </Heading>
       {renderContent()}
     </>

ws-nextjs-app/pages/[service]/my-news/MyNewsPage/MyNewsPageGuest.tsx

@@ -1,17 +1,23 @@
+import { use } from 'react';
 import Heading from '#app/components/Heading';
 import Text from '#app/components/Text';
+import { ServiceContext } from '#app/contexts/ServiceContext';
 import styles from '../styles';
 
 // TODO: Placeholder component to be updated.
-const MyNewsPageGuest = () => (
-  <>
-    <Heading level={1} css={styles.heading}>
-      My News
-    </Heading>
-    <Text size="doublePica" fontVariant="sansBold">
-      Please sign in to view your saved articles.
-    </Text>
-  </>
-);
+const MyNewsPageGuest = () => {
+  const { translations } = use(ServiceContext);
+
+  return (
+    <>
+      <Heading level={1} css={styles.heading}>
+        {translations?.myNews?.errorText}
+      </Heading>
+      <Text size="doublePica" fontVariant="sansBold">
+        Please sign in to view your saved articles.
+      </Text>
+    </>
+  );
+};
 
 export default MyNewsPageGuest;

ws-nextjs-app/pages/[service]/my-news/MyNewsPage/MyNewsPageLoading.tsx

@@ -1,17 +1,25 @@
+import { use } from 'react';
 import Heading from '#app/components/Heading';
 import Text from '#app/components/Text';
+import { ServiceContext } from '#app/contexts/ServiceContext';
 import styles from '../styles';
 
-// TODO: Placeholder component to be updated.
-const MyNewsPageLoading = () => (
-  <>
-    <Heading level={1} css={styles.heading}>
-      My News
-    </Heading>
-    <Text size="doublePica" fontVariant="sansBold">
-      Loading your articles...
-    </Text>
-  </>
-);
+const MyNewsPageLoading = () => {
+  const { translations } = use(ServiceContext);
+  const { title, loadingArticles } = {
+    ...translations?.myNews,
+  };
+
+  return (
+    <>
+      <Heading level={1} css={styles.heading}>
+        {title}
+      </Heading>
+      <Text size="doublePica" fontVariant="sansBold">
+        {loadingArticles}
+      </Text>
+    </>
+  );
+};
 
 export default MyNewsPageLoading;

ws-nextjs-app/pages/[service]/my-news/MyNewsPage/index.tsx

@@ -18,14 +18,14 @@ const MyNewsPageContent = dynamic(() => import('./MyNewsPageContent'), {
 const MyNewsPage = ({ pageData, page }: MyNewsPageProps) => {
   const { isPersonalizationAvailable, isPersonalizationEnabled } =
     use(AccountContext);
-  const { lang } = use(ServiceContext);
+  const { lang, translations } = use(ServiceContext);
 
-  if (!isPersonalizationAvailable) return null;
+  if (!isPersonalizationAvailable || !translations?.myNews) return null;
 
   return (
     <main css={styles.main}>
       <MetadataContainer
-        title="My News"
+        title={translations?.myNews?.title}
         lang={lang}
         openGraphType="website"
         hasAmpPage={false}

ws-nextjs-app/pages/[service]/my-news/styles.ts

@@ -1,4 +1,5 @@
-import { css } from '@emotion/react';
+import { css, Theme } from '@emotion/react';
+import pixelsToRem from '#app/utilities/pixelsToRem';
 
 const styles = {
   main: ({ spacings, mq }) =>
@@ -13,9 +14,23 @@ const styles = {
     margin: '0 auto',
   }),
 
-  heading: css({
-    padding: '2rem 0',
-  }),
+  heading: ({ spacings, mq }: Theme) =>
+    css({
+      marginTop: `${spacings.TRIPLE}rem`,
+      marginBottom: `${spacings.TRIPLE}rem`,
+      [mq.GROUP_3_MIN_WIDTH]: {
+        marginTop: `${spacings.QUINTUPLE}rem`,
+        marginBottom: `${spacings.SEXTUPLE}rem`,
+      },
+    }),
+
+  subheading: ({ spacings, mq }: Theme) =>
+    css({
+      marginBottom: `${spacings.DOUBLE}rem`,
+      [mq.GROUP_3_MIN_WIDTH]: {
+        marginBottom: `${pixelsToRem(20)}rem`,
+      },
+    }),
 };
 
 export default styles;