Show team icon in app nav

Author: Rokt33r

src/components/App.tsx

@@ -199,6 +199,7 @@ const App = () => {
             id: team.id,
             name: team.name,
             domain: team.domain,
+            iconUrl: team.iconUrl,
           }
         }),
       })

src/components/molecules/AppNavigatorBoostHubTeamItem.tsx

@@ -16,6 +16,9 @@ const Container = styled.div`
   border-width: 3px;
   border-style: solid;
   border-color: transparent;
+  &:hover {
+    border-color: ${({ theme }) => theme.borderColor};
+  }
   &.active {
     border-color: ${({ theme }) => theme.textColor};
   }
@@ -34,6 +37,11 @@ const MainButton = styled.button`
   border: 1px solid ${({ theme }) => theme.teamSwitcherBorderColor};
   color: ${({ theme }) => theme.teamSwitcherTextColor};
   font-size: 13px;
+  & > .icon {
+    width: 36px;
+    height: 36px;
+    border-radius: 8px;
+  }
 
   &:hover,
   &:active,
@@ -53,12 +61,14 @@ interface AppNavigatorBoostHubTeamItemProps {
   domain: string
   name: string
   active: boolean
+  iconUrl?: string
 }
 
 const AppNavigatorBoostHubTeamItem = ({
   active,
   domain,
   name,
+  iconUrl,
 }: AppNavigatorBoostHubTeamItemProps) => {
   const { push } = useRouter()
 
@@ -73,7 +83,11 @@ const AppNavigatorBoostHubTeamItem = ({
       onClick={navigateToTeam}
     >
       <MainButton className={active ? 'active' : ''} onClick={navigateToTeam}>
-        {name.slice(0, 1)}
+        {iconUrl == null ? (
+          name.slice(0, 1)
+        ) : (
+          <img className='icon' src={iconUrl} />
+        )}
       </MainButton>
     </Container>
   )

src/components/organisms/AppNavigator.tsx

@@ -65,6 +65,7 @@ const TopLevelNavigator = () => {
           active={activeBoostHubTeamDomain === boostHubTeam.domain}
           name={boostHubTeam.name}
           domain={boostHubTeam.domain}
+          iconUrl={boostHubTeam.iconUrl}
         />
       )
     })

src/components/organisms/BoostHubSignInForm.tsx

@@ -85,6 +85,7 @@ const BoostHubSignInForm = () => {
               id: team.id,
               name: team.name,
               domain: team.domain,
+              iconUrl: team.iconUrl,
             }
           }),
         })

src/lib/boosthub.tsx

@@ -6,6 +6,7 @@ import { WebviewTag } from 'electron'
 import React, { useRef, useCallback, FC } from 'react'
 import { createStoreContext } from './context'
 import querystring from 'querystring'
+import { useEffectOnce } from 'react-use'
 
 export const boostHubBaseUrl = process.env.BOOST_HUB_BASE_URL as string
 
@@ -25,6 +26,10 @@ export function getBoostHubTeamPageUrl(teamName: string) {
   return `${boostHubBaseUrl}/${teamName}`
 }
 
+export function getBoostHubTeamIconUrl(location: string) {
+  return `${boostHubBaseUrl}/api/files/icons/${location}`
+}
+
 export const boostHubTeamsCreatePageUrl = `${boostHubBaseUrl}/cooperate`
 
 export const boostHubIdlePageUrl = `${boostHubBaseUrl}/api/desktop/idle`
@@ -41,17 +46,49 @@ export const boostHubPreloadUrl = formatUrl({
 const boostHubDesktopLoginApiUrl = `${boostHubBaseUrl}/api/desktop/login`
 const boostHubDesktopGlobalDataUrl = `${boostHubBaseUrl}/api/desktop`
 const boostHubSignOutUrl = `${boostHubBaseUrl}/api/desktop/signout`
+let domReady = false
+const domReadyQueue = [] as { resolve?: () => void; reject?: () => void }[]
+
+function waitDomReady() {
+  const queue: { resolve?: () => void; reject?: () => void } = {}
+  const promise = new Promise((resolve, reject) => {
+    if (domReady) {
+      console.log('dom ready no wait')
+      resolve()
+      return
+    }
+    queue.resolve = resolve
+    queue.reject = reject
+    domReadyQueue.push(queue)
+  })
+
+  return promise
+}
 
 function useBoostHubStore() {
   const webviewRef = useRef<WebviewTag>(null)
 
+  useEffectOnce(() => {
+    webviewRef.current!.addEventListener('dom-ready', () => {
+      domReady = true
+      let queue = domReadyQueue.shift()
+      while (queue != null) {
+        if (queue.resolve != null) {
+          queue.resolve()
+        }
+        queue = domReadyQueue.shift()
+      }
+    })
+  })
+
   const fetchJson = useCallback(
     async (
       url: string,
       options?: {
         method: string
       }
     ) => {
+      await waitDomReady()
       const { method } = {
         method: 'get',
         ...options,
@@ -72,13 +109,30 @@ function useBoostHubStore() {
   const fetchDesktopGlobalData = useCallback(async () => {
     const data = await fetchJson(boostHubDesktopGlobalDataUrl)
 
-    return data as {
+    return {
+      user: {
+        id: data.user.id,
+        uniqueName: data.user.uniqueName,
+        displayName: data.user.displayName,
+      },
+      teams: data.teams.map((team: any) => {
+        return {
+          id: team.id,
+          name: team.name,
+          domain: team.domain,
+          iconUrl:
+            team.icon != null
+              ? getBoostHubTeamIconUrl(team.icon.location)
+              : undefined,
+        }
+      }),
+    } as {
       user: {
         id: string
         uniqueName: string
         displayName: string
       }
-      teams: { id: string; domain: string; name: string }[]
+      teams: { id: string; name: string; domain: string; iconUrl?: string }[]
     }
   }, [fetchJson])
 
@@ -88,13 +142,30 @@ function useBoostHubStore() {
       { method: 'post' }
     )
 
-    return data as {
+    return {
+      user: {
+        id: data.user.id,
+        uniqueName: data.user.uniqueName,
+        displayName: data.user.displayName,
+      },
+      teams: data.teams.map((team: any) => {
+        return {
+          id: team.id,
+          name: team.name,
+          domain: team.domain,
+          iconUrl:
+            team.icon != null
+              ? getBoostHubTeamIconUrl(team.icon.location)
+              : undefined,
+        }
+      }),
+    } as {
       user: {
         id: string
         uniqueName: string
         displayName: string
       }
-      teams: { id: string; domain: string; name: string }[]
+      teams: { id: string; name: string; domain: string; iconUrl?: string }[]
     }
   }
   const signOut = useCallback(async () => {

src/lib/generalStatus.ts

@@ -17,6 +17,7 @@ export interface GeneralStatus {
     id: string
     name: string
     domain: string
+    iconUrl?: string
   }[]
 }