Making use of UI.authn.findProfileImage (solid-ui)

package.json

@@ -47,7 +47,8 @@
     "normalize.css": "^8.0.1",
     "rdflib": "^1.0.4",
     "solid-namespace": "^0.2.0",
-    "solid-panes": "^2.0.0"
+    "solid-panes": "^2.0.0",
+    "solid-ui": "^1.1.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.0.0",

src/global/header.ts

@@ -1,6 +1,7 @@
 import $rdf, { IndexedFormula, NamedNode, sym } from "rdflib"
 import namespace from "solid-namespace"
 import panes from "solid-panes"
+import UI from "solid-ui"
 import { icon } from "./icon"
 import { SolidSession } from "../../typings/solid-auth-client"
 import { emptyProfile } from "./empty-profile"
@@ -137,13 +138,13 @@ async function getMenuItems (outliner: any): Promise<Array<{
 }
 
 function getProfileImg (store: IndexedFormula, user: NamedNode): string | HTMLElement {
-  const hasPhoto = (store.anyValue as any)(user, ns.vcard("hasPhoto"), null, user.doc())
-  if (!hasPhoto) {
+  const profileUrl = UI.widgets.findImage(user)
+  if (!profileUrl) {
     return emptyProfile
   }
   const profileImage = document.createElement("div")
   profileImage.classList.add("header-user-menu__photo")
-  profileImage.style.backgroundImage = `url("${hasPhoto}")`
+  profileImage.style.backgroundImage = `url("${profileUrl}")`
   return profileImage
 }
 

typings/solid-ui.d.ts

@@ -0,0 +1,4 @@
+declare module 'solid-ui' {
+  const solidUI: any
+  export default solidUI
+}