updates(notification): update ui (#115)

eclipse-tractusx · Jul 3, 2023 · 3df160d · 3df160d
1 parent 800db1e
commit 3df160d
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 14 deletions.
diff --git a/src/assets/locales/de/notification.json b/src/assets/locales/de/notification.json
@@ -122,19 +122,23 @@
     "unread": "Ungelesen",
     "all": {
       "title": "All notifications",
-      "description": "Messaged for required action from your side"
+      "description": "Messaged for required action from your side",
+      "countTitle": "new"
     },
     "info": {
       "title": "Info notifications",
-      "description": "Changes of assigned roles or newly created tech users"
+      "description": "Changes of assigned roles or newly created tech users",
+      "countTitle": "new"
     },
     "app": {
       "title": "App notifications",
-      "description": "App publish notifications, request, activations, etc."
+      "description": "App publish notifications, request, activations, etc.",
+      "countTitle": "new"
     },
     "withaction": {
       "title": "Action Required",
-      "description": "Your action is needed"
+      "description": "Your action is needed",
+      "countTitle": "to do"
     }
   },
   "tooltip": {

diff --git a/src/assets/locales/en/notification.json b/src/assets/locales/en/notification.json
@@ -118,19 +118,23 @@
     "unread": "Unread First",
     "all": {
       "title": "All notifications",
-      "description": "Messaged for required action from your side"
+      "description": "Messaged for required action from your side",
+      "countTitle": "new"
     },
     "info": {
       "title": "Info notifications",
-      "description": "Changes of assigned roles or newly created tech users"
+      "description": "Changes of assigned roles or newly created tech users",
+      "countTitle": "new"
     },
     "app": {
       "title": "App notifications",
-      "description": "App publish notifications, request, activations, etc."
+      "description": "App publish notifications, request, activations, etc.",
+      "countTitle": "new"
     },
     "withaction": {
       "title": "Action Required",
-      "description": "Your action is needed"
+      "description": "Your action is needed",
+      "countTitle": "to do"
     }
   },
   "tooltip": {

diff --git a/src/components/pages/NotificationCenter/index.tsx b/src/components/pages/NotificationCenter/index.tsx
@@ -107,10 +107,10 @@ export default function NotificationCenter() {
   >([])
   const [paginationData, setPaginationData] =
     useState<CXNotificationPagination>()
-  const setView = (e: React.MouseEvent<HTMLInputElement>) => {
-    setFilterOption(e.currentTarget.value)
+  const setView = (val: string) => {
     setLoaded(true)
     setPage(0)
+    setFilterOption(val)
   }
 
   useEffect(() => {
@@ -163,27 +163,31 @@ export default function NotificationCenter() {
       buttonDescription: t('sortOptions.all.description'),
       onButtonClick: setView,
       count: getTotalCount(pages?.unread),
+      countTitle: t('sortOptions.all.countTitle'),
     },
     {
       buttonText: t('sortOptions.app.title'),
       buttonValue: NOTIFICATION_TOPIC.OFFER,
       buttonDescription: t('sortOptions.app.description'),
       onButtonClick: setView,
       count: pages?.offerUnread || 0,
+      countTitle: t('sortOptions.app.countTitle'),
     },
     {
       buttonText: t('sortOptions.info.title'),
       buttonValue: NOTIFICATION_TOPIC.INFO,
       buttonDescription: t('sortOptions.info.description'),
       onButtonClick: setView,
       count: pages?.infoUnread || 0,
+      countTitle: t('sortOptions.info.countTitle'),
     },
     {
       buttonText: t('sortOptions.withaction.title'),
       buttonValue: NOTIFICATION_TOPIC.ACTION,
       buttonDescription: t('sortOptions.withaction.description'),
       onButtonClick: setView,
       count: pages?.actionRequired || 0,
+      countTitle: t('sortOptions.withaction.countTitle'),
     },
   ]
 

diff --git a/src/components/shared/frame/FramedSelector/index.tsx b/src/components/shared/frame/FramedSelector/index.tsx
@@ -27,7 +27,8 @@ export interface Buttons {
   buttonValue: string
   buttonDescription: string
   count: string | number
-  onButtonClick?: React.MouseEventHandler
+  onButtonClick: (val: string) => void
+  countTitle: string
 }
 
 export interface FramedSelectorProps {
@@ -45,6 +46,7 @@ export const FramedSelector = ({ views, activeView }: FramedSelectorProps) => {
           buttonDescription,
           onButtonClick,
           count,
+          countTitle,
         }) => (
           <Box
             sx={{
@@ -57,15 +59,15 @@ export const FramedSelector = ({ views, activeView }: FramedSelectorProps) => {
             }}
             key={buttonText}
             className="frameButton"
-            onClick={onButtonClick}
+            onClick={() => onButtonClick(buttonValue)}
           >
             <Typography className="title" variant="h4">
               {buttonText}:
             </Typography>
             <Box className="textNumber">
-              <Typography variant="h4">{buttonDescription}</Typography>
+              <Typography variant="body2">{buttonDescription}</Typography>
               <Box className="value">
-                <Typography variant="h4">{buttonValue}</Typography>
+                <Typography variant="h4">{countTitle}</Typography>
                 <Typography variant="h2">{count}</Typography>
               </Box>
             </Box>