Update admin overview to react to new notifications (#88)

TBD54566975 · Jun 28, 2023 · 854cdd7 · 854cdd7
1 parent 7218273
commit 854cdd7
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 78 deletions.
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -1,4 +1,4 @@
-import { Component, createEffect, createSignal } from 'solid-js';
+import { Component, createEffect, createRoot, createSignal } from 'solid-js';
 import TBDBrackets from '../../assets/tbd-brackets.svg';
 import './Header.scss';
 import { A } from '@solidjs/router';
@@ -8,84 +8,84 @@ import NotifyBlock, { NotifyBlockContent } from '../NotifyBlock/NotifyBlock';
 import { store, updateStore } from '../../utils/store';
 
 const Header: Component<{ username: string }> = (props) => {
- const [ hasApplications, setHasApplications ] = createSignal(false);
- const [ hasSubmissions, setHasSubmissions ] = createSignal(false);
-
- createEffect(() => {
+  const [ hasApplications, setHasApplications ] = createSignal(false);
+  const [ hasSubmissions, setHasSubmissions ] = createSignal(false);
+ 
+  createEffect(() => {
  setHasApplications(!!store.applications?.length);
- }, [store.applications]);
-
- createEffect(() => {
+  }, [store.applications]);
+ 
+  createEffect(() => {
  setHasSubmissions(store.submissions && !!Object.values(store.submissions)?.length);
- }, [store.submissions]);
+  }, [store.submissions]);
 
- return (
-  <header>
- <div class="header">
- <div>
- <div class="header-logo">
- <img src={TBDBrackets} alt="TBD logo" width="60"/>
- <span class="header-logo-title">
- <span class="header-logo-title-username">{props.username}</span>
- <span>SSI Admin Console</span>
- </span>
- </div>
- </div>
- <div class="secondary-nav">
- <a
- target="_blank"
- href="https://developer.tbd.website/docs/apis/ssi-service/"
- class="primary-button">
- Docs <Icon svg={ExternalArrow} />
- </a>
- <div class="secondary-nav-menu">
- <button title="Notifications menu" class="secondary-nav-menu-icon" classList={{"has-notification": hasApplications() || hasSubmissions()}}>
- <Icon svg={Bell} />
- </button>
- <div class="secondary-nav-menu-submenu notifications-submenu">
- <ul>
- {notifications(hasApplications(), hasSubmissions())?.map(notification => 
- <li><NotifyBlock content={notification} /></li>
- )}
- </ul>
- </div>
- </div>
- <div class="secondary-nav-menu">
- <button title="Create menu" class="secondary-nav-menu-icon">
- <Icon svg={Plus} /><Icon svg={ChevronDown} />
- </button>
- <div class="secondary-nav-menu-submenu create-submenu">
- <ul>
- {createMenu && createMenu.map(createItem => 
- <li>
- <A href={createItem.href}>
- <div>
- <Icon svg={Plus} /> {createItem.title}
- </div> 
- <Icon svg={ArrowRight} />
- </A>
- </li>
- )}
- </ul>
- </div>
- </div>
- </div>
- </div>
- <div class="primary-nav">
- <nav>
- <ul>
- {routes.map(route => (
- <li>
- <A href={route.path} end={route.path === '/'}>
- {route.name}
- </A>
- </li>
- ))}
- </ul>
- </nav>
- </div>
- </header>
- )
+  return (
+  <header>
+ <div class="header">
+ <div>
+ <div class="header-logo">
+ <img src={TBDBrackets} alt="TBD logo" width="60"/>
+ <span class="header-logo-title">
+ <span class="header-logo-title-username">{props.username}</span>
+ <span>SSI Admin Console</span>
+ </span>
+ </div>
+ </div>
+ <div class="secondary-nav">
+ <a
+ target="_blank"
+ href="https://developer.tbd.website/docs/apis/ssi-service/"
+ class="primary-button">
+ Docs <Icon svg={ExternalArrow} />
+ </a>
+ <div class="secondary-nav-menu">
+ <button title="Notifications menu" class="secondary-nav-menu-icon" classList={{"has-notification": hasApplications() || hasSubmissions()}}>
+ <Icon svg={Bell} />
+ </button>
+ <div class="secondary-nav-menu-submenu notifications-submenu">
+ <ul>
+ {notifications(hasApplications(), hasSubmissions())?.map(notification => 
+ <li><NotifyBlock content={notification} /></li>
+ )}
+ </ul>
+ </div>
+ </div>
+ <div class="secondary-nav-menu">
+ <button title="Create menu" class="secondary-nav-menu-icon">
+ <Icon svg={Plus} /><Icon svg={ChevronDown} />
+ </button>
+ <div class="secondary-nav-menu-submenu create-submenu">
+ <ul>
+ {createMenu && createMenu.map(createItem => 
+ <li>
+ <A href={createItem.href}>
+ <div>
+ <Icon svg={Plus} /> {createItem.title}
+ </div> 
+ <Icon svg={ArrowRight} />
+ </A>
+ </li>
+ )}
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="primary-nav">
+ <nav>
+ <ul>
+ {routes.map(route => (
+ <li>
+ <A href={route.path} end={route.path === '/'}>
+ {route.name}
+ </A>
+ </li>
+ ))}
+ </ul>
+ </nav>
+ </div>
+  </header>
+  )
 }
 
 export default Header;

diff --git a/src/pages/Admin/AdminOverview/AdminOverview.tsx b/src/pages/Admin/AdminOverview/AdminOverview.tsx
@@ -1,4 +1,4 @@
-import { Component } from "solid-js";
+import { Component, createEffect, createSignal } from "solid-js";
 import AvatarPerson from "../../../assets/avatar-person.svg";
 import SearchCheckmark from "../../../assets/search-checkmark.svg";
 import GroupPeople from "../../../assets/group-people.svg";
@@ -7,14 +7,26 @@ import Card, { CardContent } from "../../../components/Card/Card";
 import NotifyBlock from "../../../components/NotifyBlock/NotifyBlock";
 import "./AdminOverview.scss";
 import { notifications } from "../../../components/Header/Header";
+import { store, updateStore } from "@/utils/store";
 
 const AdminOverview: Component = () => {
+ const [ hasApplications, setHasApplications ] = createSignal(false);
+ const [ hasSubmissions, setHasSubmissions ] = createSignal(false);
+
+ createEffect(() => {
+ setHasApplications(!!store.applications?.length);
+ }, [store.applications]);
+
+ createEffect(() => {
+ setHasSubmissions(store.submissions && !!Object.values(store.submissions)?.length);
+ }, [store.submissions]);
+
  return (
  <div class="admin-overview">
  <div class="info-panel">
  <h1>SSI Admin Console</h1>
  <div class="info-panel-inbox">
- {notifications && notifications.map(notification => 
+ {notifications(hasApplications(), hasSubmissions())?.map(notification => 
  <NotifyBlock content={notification} />
  )}
  </div>