implements permissions within Dashboard view

src/client/components/views/Dashboard/Default.js

@@ -1,6 +1,7 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import config from 'payload/config';
+import { useUser } from '../../data/User';
 import { useStepNav } from '../../elements/StepNav';
 import Eyebrow from '../../elements/Eyebrow';
 import Card from '../../elements/Card';
@@ -19,8 +20,16 @@ const {
 const baseClass = 'dashboard';
 
 const Dashboard = () => {
+  const [filteredGlobals, setFilteredGlobals] = useState([]);
   const { setStepNav } = useStepNav();
   const { push } = useHistory();
+  const { permissions } = useUser();
+
+  useEffect(() => {
+    setFilteredGlobals(
+      globals.filter((global) => permissions?.[global.slug]?.read?.permission),
+    );
+  }, [permissions]);
 
   useEffect(() => {
     setStepNav([]);
@@ -33,42 +42,44 @@ const Dashboard = () => {
         <h3 className={`${baseClass}__label`}>Collections</h3>
         <ul className={`${baseClass}__card-list`}>
           {collections.map((collection) => {
-            return (
-              <li key={collection.slug}>
-                <Card
-                  title={collection.labels.plural}
-                  onClick={() => push({ pathname: `${admin}/collections/${collection.slug}` })}
-                  actions={(
-                    <Button
-                      el="link"
-                      to={`${admin}/collections/${collection.slug}/create`}
-                      icon="plus"
-                      round
-                      buttonStyle="icon-label"
-                      iconStyle="with-border"
-                    />
-                  )}
-                />
-              </li>
-            );
+            if (permissions?.[collection.slug]?.read?.permission) {
+              return (
+                <li key={collection.slug}>
+                  <Card
+                    title={collection.labels.plural}
+                    onClick={() => push({ pathname: `${admin}/collections/${collection.slug}` })}
+                    actions={(
+                      <Button
+                        el="link"
+                        to={`${admin}/collections/${collection.slug}/create`}
+                        icon="plus"
+                        round
+                        buttonStyle="icon-label"
+                        iconStyle="with-border"
+                      />
+                    )}
+                  />
+                </li>
+              );
+            }
+
+            return null;
           })}
         </ul>
-        {(globals && globals.length > 0) && (
-          <>
+        {(filteredGlobals.length > 0) && (
+          <React.Fragment>
             <h3 className={`${baseClass}__label`}>Globals</h3>
             <ul className={`${baseClass}__card-list`}>
-              {globals.map((global) => {
-                return (
-                  <li key={global.slug}>
-                    <Card
-                      title={global.label}
-                      onClick={() => push({ pathname: `${admin}/globals/${global.slug}` })}
-                    />
-                  </li>
-                );
-              })}
+              {filteredGlobals.map((global) => (
+                <li key={global.slug}>
+                  <Card
+                    title={global.label}
+                    onClick={() => push({ pathname: `${admin}/globals/${global.slug}` })}
+                  />
+                </li>
+              ))}
             </ul>
-          </>
+          </React.Fragment>
         )}
       </div>
     </div>