Fix various empty states

Author: ivarnakken

app/components/HeaderNotifications/index.tsx

@@ -1,7 +1,7 @@
 import { BadgeIcon, LoadingIndicator } from '@webkom/lego-bricks';
 import { usePreparedEffect } from '@webkom/react-prepare';
 import cx from 'classnames';
-import { Bell, BellRing } from 'lucide-react';
+import { Bell, BellOff, BellRing } from 'lucide-react';
 import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { fetchNotificationFeed } from 'app/actions/FeedActions';
@@ -71,7 +71,9 @@ const HeaderNotificationsContent = () => {
   }
 
   if (!fetchingNotifications && notifications.length === 0) {
-    return <EmptyState body="Ingen varslinger å vise" />;
+    return (
+      <EmptyState iconNode={<BellOff />} body="Du har ingen varslinger ..." />
+    );
   }
 
   return (

app/routes/forum/components/ForumList.tsx

@@ -1,6 +1,9 @@
 import { Flex, LinkButton, LoadingIndicator, Page } from '@webkom/lego-bricks';
 import { usePreparedEffect } from '@webkom/react-prepare';
+import { MessageSquare, MessageSquareDashed } from 'lucide-react';
+import { Helmet } from 'react-helmet-async';
 import { fetchForums } from 'app/actions/ForumActions';
+import EmptyState from 'app/components/EmptyState';
 import { Tag } from 'app/components/Tags';
 import { selectAllForums } from 'app/reducers/forums';
 import { useAppDispatch, useAppSelector } from 'app/store/hooks';
@@ -30,11 +33,21 @@ const ForumList = () => {
         )
       }
     >
-      <Flex column>
-        {forums?.map((f: PublicForum) => (
-          <ForumListEntry forum={f} key={f.id} />
-        ))}
-      </Flex>
+      <Helmet title="Forum" />
+      {!forums.length && (
+        <EmptyState
+          iconNode={<MessageSquareDashed />}
+          header="Her var det tomt ..."
+          body="Opprett et nytt forum da vel!"
+        />
+      )}
+      {forums.length > 0 && (
+        <Flex column>
+          {forums?.map((f: PublicForum) => (
+            <ForumListEntry forum={f} key={f.id} />
+          ))}
+        </Flex>
+      )}
       <LoadingIndicator loading={fetching} />
     </Page>
   );

app/routes/meetings/components/MeetingList.module.css

@@ -16,8 +16,3 @@
 .meetingTime {
   color: var(--secondary-font-color);
 }
-
-.noDataMessage {
-  color: var(--secondary-font-color);
-  text-align: center;
-}

app/routes/meetings/components/MeetingList.tsx

@@ -7,11 +7,13 @@ import {
   Page,
 } from '@webkom/lego-bricks';
 import { usePreparedEffect } from '@webkom/react-prepare';
+import { CalendarOff } from 'lucide-react';
 import moment from 'moment-timezone';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Helmet } from 'react-helmet-async';
 import { Link } from 'react-router-dom';
 import { fetchAll } from 'app/actions/MeetingActions';
+import EmptyState from 'app/components/EmptyState';
 import { Tag } from 'app/components/Tags';
 import Time from 'app/components/Time';
 import { useCurrentUser } from 'app/reducers/auth';
@@ -27,6 +29,7 @@ import styles from './MeetingList.module.css';
 import type { EntityId } from '@reduxjs/toolkit';
 import type { ListMeeting } from 'app/store/models/Meeting';
 import type { CurrentUser } from 'app/store/models/User';
+import type { Pagination } from 'app/utils/legoAdapter/buildPaginationReducer';
 
 function MeetingListItem({
   meeting,
@@ -77,9 +80,13 @@ function MeetingListItem({
 const MeetingListView = ({
   sections,
   currentUser,
+  fetchMorePagination,
+  fetchOlderPagination,
 }: {
   sections: MeetingSection[];
   currentUser: CurrentUser;
+  fetchMorePagination: Pagination;
+  fetchOlderPagination: Pagination;
 }) => (
   <div>
     {sections.map((item, key) => (
@@ -91,7 +98,15 @@ const MeetingListView = ({
       </div>
     ))}
     {!sections.length && (
-      <h3 className={styles.noDataMessage}>Ingen møter å vise</h3>
+      <EmptyState
+        iconNode={<CalendarOff />}
+        header={`Du har ingen ${
+          !fetchMorePagination.hasMore && fetchOlderPagination.hasMore
+            ? 'kommende'
+            : ''
+        } møter`}
+        body="Opprett et nytt et da vel!"
+      />
     )}
   </div>
 );
@@ -187,7 +202,12 @@ const MeetingList = () => {
     >
       <Helmet title="Dine møter" />
       {meetingSections && currentUser && (
-        <MeetingListView currentUser={currentUser} sections={meetingSections} />
+        <MeetingListView
+          currentUser={currentUser}
+          sections={meetingSections}
+          fetchMorePagination={fetchMorePagination}
+          fetchOlderPagination={fetchOlderPagination}
+        />
       )}
       <LoadingIndicator
         loading={fetchMorePagination.fetching || fetchOlderPagination.fetching}