Localizations for texts in Notifications

src/Components/Notifications/NoticeBoard.tsx

@@ -5,11 +5,13 @@ import PageTitle from "../Common/PageTitle";
 import { Card, CardContent } from "@material-ui/core";
 import Loading from "../Common/Loading";
 import { formatDate } from "../../Utils/utils";
+import { useTranslation } from "react-i18next";
 
 export const NoticeBoard: any = () => {
   const dispatch: any = useDispatch();
   const [isLoading, setIsLoading] = useState(true);
   const [data, setData] = useState<any[]>([]);
+  const { t } = useTranslation();
 
   useEffect(() => {
     setIsLoading(true);
@@ -43,7 +45,7 @@ export const NoticeBoard: any = () => {
                   </span>
                 </div>
                 <div className="text-xs text-gray-900">
-                  On: {formatDate(item.created_date)}
+                  {t("on")}: {formatDate(item.created_date)}
                 </div>
               </div>
             </CardContent>
@@ -56,7 +58,7 @@ export const NoticeBoard: any = () => {
       <Card key="no-notice" className="my-4 rounded-lg">
         <CardContent>
           <div className="text-xl text-center semibold">
-            No notices for you.
+            {t("no_notices_for_you")}
           </div>
         </CardContent>
       </Card>
@@ -66,7 +68,11 @@ export const NoticeBoard: any = () => {
   if (isLoading) return <Loading />;
   return (
     <div className="px-6">
-      <PageTitle title="Notice Board" hideBack={true} breadcrumbs={false} />
+      <PageTitle
+        title={t("Notice Board")}
+        hideBack={true}
+        breadcrumbs={false}
+      />
       <div>{notices}</div>
     </div>
   );

src/Components/Notifications/NotificationsList.tsx

@@ -24,6 +24,7 @@ import {
 import SlideOver from "../../CAREUI/interactive/SlideOver";
 import ButtonV2 from "../Common/components/ButtonV2";
 import SelectMenuV2 from "../Form/SelectMenuV2";
+import { useTranslation } from "react-i18next";
 
 const RESULT_LIMIT = 14;
 
@@ -41,6 +42,7 @@ const NotificationTile = ({
   const dispatch: any = useDispatch();
   const [result, setResult] = useState(notification);
   const [isMarkingAsRead, setIsMarkingAsRead] = useState(false);
+  const { t } = useTranslation();
 
   const handleMarkAsRead = async () => {
     setIsMarkingAsRead(true);
@@ -124,15 +126,15 @@ const NotificationTile = ({
                   : "care-l-envelope-check"
               }
             />
-            <span className="text-xs">Mark as Read</span>
+            <span className="text-xs">{t("mark_as_read")}</span>
           </ButtonV2>
           <ButtonV2
             border
             ghost
             className="font-semibold px-2 py-1 bg-white hover:bg-secondary-300 flex-shrink-0"
           >
             <CareIcon className="care-l-envelope-open" />
-            <span className="text-xs">Open</span>
+            <span className="text-xs">{t("open")}</span>
           </ButtonV2>
         </div>
       </div>
@@ -164,6 +166,7 @@ export default function NotificationsList({
   const [isMarkingAllAsRead, setIsMarkingAllAsRead] = useState(false);
   const [isSubscribed, setIsSubscribed] = useState("");
   const [isSubscribing, setIsSubscribing] = useState(false);
+  const { t } = useTranslation();
 
   useEffect(() => {
     function handleKeyDown(event: KeyboardEvent) {
@@ -208,21 +211,21 @@ export default function NotificationsList({
       return (
         <>
           <CareIcon className="care-l-bell" />
-          <span className="text-xs">Subscribe</span>
+          <span className="text-xs">{t("subscribe")}</span>
         </>
       );
     } else if (status === "SubscribedOnAnotherDevice") {
       return (
         <>
           <CareIcon className="care-l-bell" />
-          <span className="text-xs">Subscribe on this device</span>
+          <span className="text-xs">{t("subscribe_on_this_device")}</span>
         </>
       );
     } else {
       return (
         <>
           <CareIcon className="care-l-bell-slash" />
-          <span className="text-xs">Unsubscribe</span>
+          <span className="text-xs">{t("unsubscribe")}</span>
         </>
       );
     }
@@ -254,12 +257,12 @@ export default function NotificationsList({
               })
               .catch(function (_e) {
                 Error({
-                  msg: "Unsubscribe failed.",
+                  msg: t("unsubscribe_failed"),
                 });
               });
           })
           .catch(function (_e) {
-            Error({ msg: "Subscription Error" });
+            Error({ msg: t("subscription_error") });
           });
       })
       .catch(function (_e) {
@@ -376,7 +379,7 @@ export default function NotificationsList({
               border
               onClick={() => setOffset((prev) => prev + RESULT_LIMIT)}
             >
-              {isLoading ? "Loading..." : "Load More"}
+              {isLoading ? t("loading") : t("load_more")}
             </ButtonV2>
           </div>
         )}
@@ -385,7 +388,7 @@ export default function NotificationsList({
   } else if (data && data.length === 0) {
     manageResults = (
       <div className="px-4 pt-3 lg:px-8">
-        <h5> No Results Found </h5>
+        <h5> {t("no_results_found")} </h5>
       </div>
     );
   }
@@ -395,7 +398,7 @@ export default function NotificationsList({
   return (
     <>
       <Item
-        text="Notifications"
+        text={t("Notifications")}
         do={() => setOpen(!open)}
         icon={<CareIcon className="care-l-bell h-5" />}
         badgeCount={unreadCount}
@@ -404,7 +407,7 @@ export default function NotificationsList({
         open={open}
         setOpen={setOpen}
         slideFrom="right"
-        title="Notifications"
+        title={t("Notifications")}
         dialogClass="md:w-[400px]"
         onCloseClick={onClickCB}
       >
@@ -421,7 +424,7 @@ export default function NotificationsList({
               }}
             >
               <CareIcon className="care-l-sync" />
-              <span className="text-xs">Reload</span>
+              <span className="text-xs">{t("reload")}</span>
             </ButtonV2>
             <ButtonV2
               onClick={handleSubscribeClick}
@@ -445,13 +448,13 @@ export default function NotificationsList({
                     : "care-l-envelope-check"
                 }
               />
-              <span className="text-xs">Mark all as Read</span>
+              <span className="text-xs">{t("mark_all_as_read")}</span>
             </ButtonV2>
           </div>
 
           <SelectMenuV2
             className="mb-2"
-            placeholder="Filter by category"
+            placeholder={t("filter_by_category")}
             options={NOTIFICATION_EVENTS}
             value={eventFilter}
             optionLabel={(o) => o.text}

src/Locale/en/Common.json

@@ -20,5 +20,7 @@
   "Apply": "Apply",
   "Clear Filters": "Clear Filters",
   "powered_by": "Powered By",
-  "care": "CARE"
+  "care": "CARE",
+  "on": "On",
+  "open": "Open"
 }

src/Locale/en/Notifications.json

@@ -0,0 +1,17 @@
+{
+  "no_notices_for_you": "No notices for you.",
+  "mark_as_read": "Mark as Read",
+  "subscribe": "Subscribe",
+  "subscribe_on_this_device": "Subscribe on this device",
+  "filter_by_category": "Filter by category",
+  "mark_all_as_read": "Mark all as Read",
+  "reload": "Reload",
+  "Notifications": "Notifications",
+  "no_results_found": "No Results Found",
+  "load_more": "Load More",
+  "subscription_error": "Subscription Error",
+  "unsubscribe_failed": "Unsubscribe failed.",
+  "unsubscribe": "Unsubscribe",
+  "escape": "Escape",
+  "loading": "Loading..."
+}

src/Locale/en/index.js

@@ -2,10 +2,12 @@ import Auth from "./Auth.json";
 import Common from "./Common.json";
 import Entities from "./Entities.json";
 import Facility from "./Facility.json";
+import Notifications from "./Notifications.json";
 
 export default {
   ...Auth,
   ...Common,
   ...Entities,
   ...Facility,
+  ...Notifications,
 };