isolate migration frontend, fix console bug

src/hacks/DaveHakkensNL.hacks.tsx

@@ -0,0 +1,142 @@
+/*  functions used for migration between DaveHakkens.nl site and OneArmy
+    in 'hacks' folder as not part of core platform and could later be moved out entirely
+*/
+import * as React from 'react'
+import { functions } from 'src/utils/firebase'
+import { IUser } from 'src/models/user.models'
+import { Button } from 'src/components/Button'
+import { UserStore } from 'src/stores/User/user.store'
+import { Typography } from '@material-ui/core'
+
+interface IProps {
+  mention_name: string
+  userStore: UserStore
+}
+interface IState {
+  isImporting: boolean
+  errMsg?: string
+}
+
+export class DHImport extends React.Component<IProps, IState> {
+  constructor(props: IProps) {
+    super(props)
+    this.state = { isImporting: false }
+  }
+
+  public async importProfileFromDH() {
+    const name = this.props.mention_name
+    console.log('importing mention name', name)
+    if (name) {
+      this.setState({ isImporting: true })
+      const profile = await this.importBPMember(name)
+      await this.props.userStore.updateUserProfile(profile)
+      this.setState({ isImporting: false })
+    }
+  }
+
+  // get DH site member data from @mention_name and merge subset into correct user format
+  public importBPMember = async (name: string) => {
+    try {
+      const result = await functions.httpsCallable('DHSite_getUser')(name)
+      const member = result.data as IBPMember
+      console.log('member', member)
+      const profile: Partial<IUser> = {
+        avatar: member.avatar_urls.full,
+        legacy_id: member.id,
+        mention_name: member.mention_name,
+        country: member.xprofile.groups[1].fields[42].value,
+        about: member.xprofile.groups[1].fields[667].value,
+      }
+      return profile
+    } catch (error) {
+      this.setState({ errMsg: 'User not found' })
+      return {}
+    }
+  }
+
+  public render() {
+    const user = ''
+    return (
+      <>
+        <Button
+          disabled={!this.props.mention_name || this.state.isImporting}
+          onClick={() => this.importProfileFromDH()}
+        >
+          Import @{this.props.mention_name} from Dave Hakkens
+        </Button>
+        <Typography color="error" variant="caption">
+          {this.state.errMsg}
+        </Typography>
+      </>
+    )
+  }
+}
+
+// BP (buddypress) members are imported from the Dave Hakkens site and used for migration
+export interface IBPMember {
+  id: number
+  name: string
+  email: string
+  user_login: string
+  link: string
+  member_types: []
+  xprofile: {
+    groups: {
+      '1': {
+        name: 'Base'
+        fields: {
+          '1': {
+            name: 'Name'
+            value: string
+          }
+          '8': {
+            name: 'Birthday'
+            value: string
+          }
+          '38': {
+            name: 'Website'
+            value: string
+          }
+          '42': {
+            name: 'Location'
+            value: string
+          }
+          '667': {
+            name: 'About'
+            value: string
+          }
+          '1055': {
+            name: 'Your love'
+            value: [string[]]
+          }
+        }
+      }
+      '2': {
+        name: 'Additional information'
+        fields: {
+          '1264': {
+            name: 'Country'
+            value: string
+          }
+        }
+      }
+    }
+  }
+  mention_name: 'fernandochacon'
+  avatar_urls: {
+    full: string
+    thumb: string
+  }
+  _links: {
+    self: [
+      {
+        href: string
+      }
+    ]
+    collection: [
+      {
+        href: string
+      }
+    ]
+  }
+}

src/models/user.models.tsx

@@ -17,6 +17,7 @@ export interface IUser extends IDbDoc {
   _id: string
   verified: boolean
   avatar: string
+  about?: string
   mention_name?: string
   display_name?: string
   legacy_id?: number

src/pages/Profile/content/ProfileEditForm.tsx

@@ -6,17 +6,21 @@ import { IUser, IUserFormInput } from 'src/models/user.models'
 import ImagePreview from 'src/pages/common/UploadedFile/ImagePreview'
 import { LinkButton } from 'src/pages/common/Header/CommunityHeader/elements'
 import { Button } from 'src/components/Button'
+import { UserStore } from 'src/stores/User/user.store'
+import { DHImport } from 'src/hacks/DaveHakkensNL.hacks'
 
 interface IState {
   formValues: IUserFormInput
   formSaved: boolean
   errors: any
+  isImporting: boolean
 }
 
 interface IProps {
   onChange: (formValues: IUserFormInput) => void
   readOnly?: boolean
   user: IUser
+  userStore: UserStore
 }
 
 export class ProfileEditForm extends React.Component<IProps, IState> {
@@ -26,6 +30,7 @@ export class ProfileEditForm extends React.Component<IProps, IState> {
       formValues: props.user as IUserFormInput,
       formSaved: false,
       errors: null,
+      isImporting: false,
     }
   }
 
@@ -49,11 +54,6 @@ export class ProfileEditForm extends React.Component<IProps, IState> {
     return true
   }
 
-  public importProfileFromDH() {
-    const mention_name = this.state.formValues.mention_name
-    console.log('importing mention name', mention_name)
-  }
-
   public render() {
     const { formValues, errors } = this.state
     const { user } = this.props
@@ -100,11 +100,10 @@ export class ProfileEditForm extends React.Component<IProps, IState> {
                       /> */}
                     </>
                   )}
-                  <ImagePreview
-                    imageSrc={user.avatar}
-                    imageAlt={user.mention_name ? user.mention_name : user._id}
-                    onDelete={this.deleteAvatar}
-                    showDelete={false}
+                  <img
+                    src={user.avatar}
+                    alt={user.mention_name ? user.mention_name : user._id}
+                    style={{ maxWidth: 180 }}
                   />
 
                   <Field
@@ -114,12 +113,10 @@ export class ProfileEditForm extends React.Component<IProps, IState> {
                     disabled={this.props.readOnly}
                   />
                   {!this.props.readOnly && (
-                    <Button
-                      disabled={!values.mention_name}
-                      onClick={() => this.importProfileFromDH()}
-                    >
-                      Import @{values.mention_name} from Dave Hakkens
-                    </Button>
+                    <DHImport
+                      mention_name={values.mention_name}
+                      userStore={this.props.userStore}
+                    />
                   )}
 
                   <Field

src/pages/Profile/content/UserProfile.tsx

@@ -62,6 +62,7 @@ export class UserProfile extends React.Component<IProps, IState> {
             user={user}
             readOnly={!this.state.editMode}
             onChange={formValues => this.profileFormValueChanged(formValues)}
+            userStore={this.props.userStore}
           />
 
           <></>

src/stores/User/user.store.ts

@@ -70,14 +70,13 @@ export class UserStore {
   }
 
   public async updateUserProfile(values: IUserFormInput) {
-    console.log('updating user', values)
     const update = { ...(this.user as IUser), ...values }
-    console.log('update', update)
     await Database.setDoc(`users/${update._id}`, update)
     this.user = update
+    console.log('user updated', update)
   }
   public async changeUserPassword() {
-    //
+    // (see code in change pw component and move here)
   }
 
   public async sendEmailVerification() {

types/console.d.ts

@@ -0,0 +1,5 @@
+// tmp fix for typescript bug importing console
+// https://github.com/Microsoft/TypeScript/issues/30471
+declare module 'console' {
+  export = typeof import('console')
+}