Toolbar should respect show avatars setting in wp (#1845)

* Added conditional for avatar value of null to toolbar * Added optional chaining to ViewerType in useAuth * Added optional chaining to both instances of img in MyAccount * Updated additional useAuth test to include changes to Viewer * Update .changeset/smooth-dogs-cough.md Co-authored-by: John Parris <[email protected]> --------- Co-authored-by: John Parris <[email protected]>
wpengine · Mar 14, 2024 · 8e1b5db · 8e1b5db
1 parent 50c30cb
commit 8e1b5db
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 22 deletions.
diff --git a/.changeset/smooth-dogs-cough.md b/.changeset/smooth-dogs-cough.md
@@ -0,0 +1,5 @@
+---
+"@faustwp/core": patch
+---
+
+Faust Toolbar will now respect the Show Avatars setting in WordPress. Requires WPGraphQL version 1.22.1 or higher.
diff --git a/packages/faustwp-core/src/components/Toolbar/nodes/MyAccount.tsx b/packages/faustwp-core/src/components/Toolbar/nodes/MyAccount.tsx
@@ -58,31 +58,35 @@ export function AuthenticatedAccount() {
     <>
       <ToolbarItem aria-haspopup="true">
         Howdy, <span className="display-name">{data?.viewer?.name}</span>
-        <img
-          alt=""
-          src={data?.viewer?.avatar26.url}
-          srcSet={`${data?.viewer?.avatar52.url as string} 2x`}
-          className="avatar avatar-26 photo"
-          height="26"
-          width="26"
-          loading="lazy"
-          decoding="async"
-        />
+        {data?.viewer?.avatar64?.url ? (
+          <img
+            alt=""
+            src={data?.viewer?.avatar26?.url}
+            srcSet={`${data?.viewer?.avatar52?.url as string} 2x`}
+            className="avatar avatar-26 photo"
+            height="26"
+            width="26"
+            loading="lazy"
+            decoding="async"
+          />
+        ) : null}
       </ToolbarItem>
       <ToolbarSubmenuWrapper>
         <ToolbarSubmenu id="wp-admin-bar-user-actions">
           <li id="wp-admin-bar-user-info">
             <ToolbarItem tabIndex={-1} href={getAdminUrl('profile.php')}>
-              <img
-                alt=""
-                src={data?.viewer?.avatar64.url}
-                srcSet={`${data?.viewer?.avatar128.url as string} 2x`}
-                className="avatar avatar-64 photo"
-                height="64"
-                width="64"
-                loading="lazy"
-                decoding="async"
-              />
+              {data?.viewer?.avatar64?.url ? (
+                <img
+                  alt=""
+                  src={data?.viewer?.avatar64?.url}
+                  srcSet={`${data?.viewer?.avatar128?.url as string} 2x`}
+                  className="avatar avatar-64 photo"
+                  height="64"
+                  width="64"
+                  loading="lazy"
+                  decoding="async"
+                />
+              ) : null}
               <span className="display-name">{data?.viewer?.name}</span>
               <span className="username">{data?.viewer?.username}</span>
             </ToolbarItem>

diff --git a/packages/faustwp-core/src/hooks/useAuth.tsx b/packages/faustwp-core/src/hooks/useAuth.tsx
@@ -39,6 +39,9 @@ type ViewerType = {
   uri?: string;
   url?: string;
   userId?: number;
+  avatar?: {
+    url?: string;
+  };
 };
 
 export type UseAuthConfig = RedirectStrategyConfig | LocalStrategyConfig;
@@ -173,6 +176,9 @@ export function useAuth(_config?: UseAuthConfig) {
               uri
               url
               userId
+              avatar {
+                url
+              }
             }
           }
         `,

diff --git a/packages/faustwp-core/tests/hooks/useAuth.test.ts b/packages/faustwp-core/tests/hooks/useAuth.test.ts
@@ -47,7 +47,7 @@ describe('useAuth hook', () => {
       status: 200,
       body: JSON.stringify({ accessToken: 'at', refreshToken: 'rt' }),
     });
-    fetchMock.get(`http://headless.local/index.php?graphql&query=query%20GetFaustViewer%20%7B%0A%20%20viewer%20%7B%0A%20%20%20%20name%0A%20%20%20%20username%0A%20%20%20%20capabilities%0A%20%20%20%20databaseId%0A%20%20%20%20description%0A%20%20%20%20email%0A%20%20%20%20firstName%0A%20%20%20%20id%0A%20%20%20%20lastName%0A%20%20%20%20nickname%0A%20%20%20%20locale%0A%20%20%20%20registeredDate%0A%20%20%20%20slug%0A%20%20%20%20templates%0A%20%20%20%20uri%0A%20%20%20%20url%0A%20%20%20%20userId%0A%20%20%20%20__typename%0A%20%20%7D%0A%7D&operationName=GetFaustViewer&variables=%7B%7D`, {
+    fetchMock.get(`http://headless.local/index.php?graphql&query=query%20GetFaustViewer%20%7B%0A%20%20viewer%20%7B%0A%20%20%20%20name%0A%20%20%20%20username%0A%20%20%20%20capabilities%0A%20%20%20%20databaseId%0A%20%20%20%20description%0A%20%20%20%20email%0A%20%20%20%20firstName%0A%20%20%20%20id%0A%20%20%20%20lastName%0A%20%20%20%20nickname%0A%20%20%20%20locale%0A%20%20%20%20registeredDate%0A%20%20%20%20slug%0A%20%20%20%20templates%0A%20%20%20%20uri%0A%20%20%20%20url%0A%20%20%20%20userId%0A%20%20%20%20avatar%20%7B%0A%20%20%20%20%20%20url%0A%20%20%20%20%20%20__typename%0A%20%20%20%20%7D%0A%20%20%20%20__typename%0A%20%20%7D%0A%7D&operationName=GetFaustViewer&variables=%7B%7D`, {
       status: 200,
       body: JSON.stringify({
         data: {
@@ -126,7 +126,7 @@ describe('useAuth hook', () => {
         refreshToken: 'rt',
       }),
     });
-    fetchMock.get(`http://headless.local/index.php?graphql&query=query%20GetFaustViewer%20%7B%0A%20%20viewer%20%7B%0A%20%20%20%20name%0A%20%20%20%20username%0A%20%20%20%20capabilities%0A%20%20%20%20databaseId%0A%20%20%20%20description%0A%20%20%20%20email%0A%20%20%20%20firstName%0A%20%20%20%20id%0A%20%20%20%20lastName%0A%20%20%20%20nickname%0A%20%20%20%20locale%0A%20%20%20%20registeredDate%0A%20%20%20%20slug%0A%20%20%20%20templates%0A%20%20%20%20uri%0A%20%20%20%20url%0A%20%20%20%20userId%0A%20%20%20%20__typename%0A%20%20%7D%0A%7D&operationName=GetFaustViewer&variables=%7B%7D`, {
+    fetchMock.get(`http://headless.local/index.php?graphql&query=query%20GetFaustViewer%20%7B%0A%20%20viewer%20%7B%0A%20%20%20%20name%0A%20%20%20%20username%0A%20%20%20%20capabilities%0A%20%20%20%20databaseId%0A%20%20%20%20description%0A%20%20%20%20email%0A%20%20%20%20firstName%0A%20%20%20%20id%0A%20%20%20%20lastName%0A%20%20%20%20nickname%0A%20%20%20%20locale%0A%20%20%20%20registeredDate%0A%20%20%20%20slug%0A%20%20%20%20templates%0A%20%20%20%20uri%0A%20%20%20%20url%0A%20%20%20%20userId%0A%20%20%20%20avatar%20%7B%0A%20%20%20%20%20%20url%0A%20%20%20%20%20%20__typename%0A%20%20%20%20%7D%0A%20%20%20%20__typename%0A%20%20%7D%0A%7D&operationName=GetFaustViewer&variables=%7B%7D`, {
       status: 200,
       body: JSON.stringify({
         data: {