Update notify block with store data

src/App.tsx

@@ -11,7 +11,7 @@ import setupStore from './utils/setup';
 
 
 const App: Component = () => {
-    let username = "kirahsapong";
+    let username = "tbd";
     const { pathname } = useLocation();
     const [ isLoading, setIsLoading ] = createSignal(true);
 

src/components/Header/Header.tsx

@@ -5,6 +5,7 @@ import { A } from '@solidjs/router';
 import routes from '../../routes/routes';
 import Icon, { ArrowRight, Bell, ChevronDown, ExternalArrow, Plus } from '../../icons/Icon';
 import NotifyBlock, { NotifyBlockContent } from '../NotifyBlock/NotifyBlock';
+import { store } from '../../utils/store';
 
 const Header: Component<{ username: string }> = (props) => {
   return (
@@ -82,22 +83,24 @@ export const notifications: NotifyBlockContent[] = [
     {
         title: "View applications",
         href: "/credentials/applications",
-        hasNotify: true,
-        message: "You have pending applications to resolve"
+        hasNotify: !!store.applications?.length,
+        ...!!store.applications?.length && { message: "You have pending applications to resolve" }
     },
     {
         title: "View submissions",
-        href: "/verification/submissions"
+        href: "/verification/submissions",
+        hasNotify: store.submissions && !!Object.values(store.submissions)?.length,
+        ...store.submissions && !!Object.values(store.submissions)?.length && { message: "You have pending applications to resolve" }
     }
 ]
 
 const createMenu = [
     {
-        title: "new credential",
+        title: "New credential",
         href: "/credentials"
     },
     {
-        title: "new submission link",
+        title: "New submission link",
         href: "/verification"
     }
 ]

src/components/NotifyBlock/NotifyBlock.scss

@@ -4,6 +4,7 @@
     color: var(--color-blue);
     border: 1px solid;
     padding: 1rem;
+    min-width: 300px;
 
     &-content {
         display: flex;

src/components/Panel/Panel.scss

@@ -157,6 +157,12 @@
                             background: var(--orange-20);
                             border: 1px solid var(--color-orange);
                         }
+
+                        &-info {
+                            color: var(--color-black);
+                            background: var(--blue-120);
+                            border: 1px solid var(--color-blue);
+                        }
                     }
 
                 }

src/pages/AdminOverview/AdminOverview.scss

@@ -9,7 +9,7 @@
             "c c d"
             "c c e";
             grid-template-columns: 3fr 1fr 3fr;
-            grid-template-rows: 3fr 1fr 1fr;
+            grid-template-rows: 1fr 1fr;
 
             & > :is(:nth-child(1)) {
                 grid-area: a;

src/pages/Credentials/views/Applications/Applications.tsx

@@ -9,7 +9,7 @@ const Applications: Component = () => {
         incoming: {
             id: "incoming",
             title: "Incoming",
-            listItems: transformApplications(store.applications),
+            listItems: transformApplications(applications),
             fallback: "You have no new Applications to review, so there's nothing here.",
             buttons: [
                 {
@@ -55,7 +55,10 @@ const transformApplications = (applications) => {
         return {
             name: `****-${application.id.slice(-4)}`,
             id: Object.values(store.credentials).find((credential : { id, name})  => credential.id === application.manifest_id)?.["name"],
-            type: "Needs Review"
+            tag: {
+                type: "info",
+                label: "Needs Review",
+            }
         }
     })
 }

src/pages/Credentials/views/CredentialManifests/Details/IssueModal/IssueModal.tsx

@@ -82,7 +82,7 @@ const IssueModal: Component<{ content }> = (props) => {
     const isFormValid = () => {
         const isExpiryValid = formValues().expires ? formValues().expiry !== '' : true;
         const isSubjectValid = formValues().subject !== '';
-        const isSubjectDataValid = formValues().properties.trim() !== '' && formValues().properties.trim() !== schemaProperties;
+        const isSubjectDataValid = formValues().properties.trim() !== '' && formValues().properties.trim() !== schemaProperties
         return isExpiryValid && isSubjectValid && isSubjectDataValid && !isError();
     }
 

src/pages/Verification/views/Submissions/Submissions.tsx

@@ -8,7 +8,7 @@ const Submissions: Component = () => {
         "for-review": {
             id: "for-review",
             title: "For Review",
-            listItems: transformSubmissions(store.submissions),
+            listItems: transformSubmissions(store.submissions["pending"]),
             fallback: "You have no new Submissions to review, so there's nothing here.",
             buttons: [
                 {
@@ -49,14 +49,20 @@ const Submissions: Component = () => {
 export default Submissions;
 
 const transformSubmissions = (submissions) => {
-    return Object.values(submissions).flatMap((submissionSet: []) => {
-        return [...submissionSet.map((submission: { verifiablePresentation, status })  => {
+    if (typeof submissions === "object") {
+        submissions = Object.values(submissions);
+    }
+    if (submissions) {
+        return submissions.map((submission: { verifiablePresentation, status })  => {
             return {
                 name: `****-${submission.verifiablePresentation.id.slice(-4)}`,
-                id: store.definitions.find(definition => definition.id === submission.verifiablePresentation.presentation_submission.definitionID)?.name,
-                type: submission.status
+                id: store.definitions?.find(definition => definition.id === submission.verifiablePresentation.presentation_submission.definitionID)?.name,
+                tag: {
+                    type: "info",
+                    label: submission.status[0].toUpperCase() + submission.status.substring(1)
+                }
             }
-        })]
-
-    })
+        });
+    };
+    return [];
 }

src/pages/Verification/views/Submissions/samples/mocks.tsx

@@ -19,7 +19,7 @@ export const submissions = [
     },
     {
         "reason": "good reasons",
-        "status": "approved",
+        "status": "pending",
         "verifiablePresentation": {
             "holder": "did:key:1234567",
             "id": "12345-123456-123456",

src/utils/setup.tsx

@@ -12,27 +12,27 @@ const setupStore = async () => {
     }
 
     // hydrate the store
-    if (Object.values(store.user).length === 0) {
+    if (store.user && Object.values(store.user).length === 0) {
         await hydrateDIDStore();
     }
-    if (store.manifests.length === 0) {
+    if (store.manifests?.length === 0) {
         await hydrateManifestStore();
     }
-    if (store.applications.length === 0) {
+    if (store.applications?.length === 0) {
         await hydrateApplicationStore();
     }
-    if (store.definitions.length === 0) {
+    if (store.definitions?.length === 0) {
         await hydrateDefinitionStore();
     }
     if (Object.values(store.submissions).length === 0) {
         await hydrateSubmissionStore("pending");
         await hydrateSubmissionStore("approved");
         await hydrateSubmissionStore("denied");
     }
-    if (store.schemas.length === 0) {
+    if (store.schemas?.length === 0) {
         await hydrateSchemaStore();
     }
-    if (store.deletedDIDs.length === 0) {
+    if (store.deletedDIDs?.length === 0) {
         await hydrateDeletedDIDsStore();
     }
     // we hydrate these because there may be objects not issued by a newly set did