fix(footer): populate footer from textile profile

Use the letter based avatar as well

#91

src/Layout.tsx

@@ -1,26 +1,23 @@
-import React, { useEffect, ReactElement } from 'react'
+import React, { useEffect } from 'react'
 import styled from 'styled-components'
-import { observer, inject } from 'mobx-react'
+import { inject } from 'mobx-react'
 import Store from './Store'
+import { Profile as ProfileType } from './domain'
 
 import GroupsSidebar from './components/GroupsSidebar'
+import Avatar from './components/Avatar'
 
 const DRAWER_WIDTH = 240
 const HEADER_HEIGHT = 80
 const FOOTER_HEIGHT = 60
 const PRIMARY = '#4267b2'
 const BACKGROUND = '3578E5'
 
-export interface LayoutProps {
-  store: Store
-  children: ReactElement
+interface LayoutProps {
+  profile: ProfileType
 }
 
-const Layout = ({ store, children }: LayoutProps) => {
-  useEffect(() => {
-    store.groupsGetAll()
-  }, [store])
-
+export const Layout: React.FC<LayoutProps> = ({ profile, children }) => {
   return (
     <Section>
       <Header>
@@ -44,8 +41,8 @@ const Layout = ({ store, children }: LayoutProps) => {
       </Content>
       <Footer>
         <Profile>
-          <Img src="https://picsum.photos/seed/picsum/30/30" alt="avatar" />
-          <div>Shokunin</div>
+          <Avatar author={profile.name} />
+          <div>{profile.name}</div>
           <div>Edit</div>
         </Profile>
         <Copyright>© Permaweb</Copyright>
@@ -144,4 +141,13 @@ const Img = styled.img`
   border-radius: 50%;
 `
 
-export default inject('store')(observer(props => <Layout {...props} />))
+const LayoutWrapper: React.FC<{ store: Store }> = ({ store, children }) => {
+  useEffect(() => {
+    store.groupsGetAll()
+  }, [store])
+
+  return <Layout profile={store.profile}>{children}</Layout>
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export default inject('store')(LayoutWrapper as any)

src/Store.ts

@@ -6,7 +6,7 @@ import {
   IObservableArray
 } from 'mobx'
 import { Textile, FileIndex } from '@textile/js-http-client'
-import { Group, Post, Comment } from './domain'
+import { Group, Post, Comment, Profile } from './domain'
 
 configure({ enforceActions: 'always' })
 
@@ -44,6 +44,11 @@ const textile = new Textile({
 class Store {
   gateway: string = 'http://127.0.0.1:5052'
   schema: FileIndex | undefined = undefined
+  profile: Profile = {
+    id: 'ERROR',
+    name: 'ERROR',
+    avatar: 'ERROR'
+  }
   @observable status: string = 'offline'
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   @observable groups: IObservableArray<Group> = [] as any
@@ -54,9 +59,17 @@ class Store {
   async connect() {
     const schema = await textile.schemas.add(SCHEMA)
     // todo update this to profileGet as init
+
+    const profile = await textile.profile.get()
+
     runInAction(() => {
       this.schema = schema
       this.status = 'online'
+      this.profile = {
+        id: profile.id,
+        name: profile.name,
+        avatar: profile.avatar
+      }
     })
   }
 

src/domain.ts

@@ -1,3 +1,9 @@
+export interface Profile {
+  id: string
+  name: string
+  avatar: string
+}
+
 export interface Group {
   groupHash: string
   name: string