Problems with retaining data

[folaht]

1. When I go back and forth a page, the guestbook entry stops working.
2. When close and restart the page, the guestbook is reset.

Guestbook.vue

<template>

<div>
    <h1>Guestbook</h1>

    <SignGuestbook :refreshMethod="refreshList"/>
    <ViewGuestbook v-bind:entries="d_entries" />
</div>
</template>

<script>
import SignGuestbook from './SignGuestbook.vue'
import ViewGuestbook from './ViewGuestbook.vue'

import guestbook from '~/api/guestbook'

export default {
  name: 'Guestbook',
  components: {
    SignGuestbook,
    ViewGuestbook
  },
  data () {
    return {
      d_entries: []
    }
  },
  methods: {
    refreshList: async function () {
      this.d_entries = await guestbook.getItems()
    }
  },
  async created () {
    await guestbook.createMutableData()
    await this.refreshList()
  }
}
</script>

SignGuestbook.vue

<template>
  <div>
  <span>Sign Guestbook</span>

    <input type="text" v-model="name" size="30" placeholder="Type your name here" required><br>
    <textarea name="guestbookcomments" v-model="comment" rows="4" cols="50" maxlength="50" placeholder="Give us your feedback here" required/><br>
    <button v-on:click="addEntry">Submit</button>
    <button v-on:click="reset">Reset</button>
    <br>
    <router-link to="/">&lt;&lt; Back</router-link>
    <br>

  </div>
</template>

<script>

import guestbook from '~/api/guestbook'

export default {
  name: 'SignGuestbook',
  props: {
    refreshMethod: ''
  },
  data () {
    return { comment: '', name: '' }
  },
  methods: {
    addEntry: async function () {
      const randomKey = Math.floor((Math.random() * 10000) + 1)
      await guestbook.insertItem(randomKey, { name: this.name, comment: this.comment })
      this.comment = ''
      this.name = ''
      await this.refreshMethod()
    },
    reset: async function () {
      this.comment = ''
      this.name = ''
    }
  }
}

</script>

<style scoped>
textarea[name=guestbookcomments] {
  resize: none;
}
</style>

safenetwork.js

export let app

async function authoriseAndConnect () {
  const opts = {
    forceUseMock: true
  }
  let appInfo = {
    name: 'SAFE Guestbook Application',
    id: 'net.maidsafe.tutorials.web-app',
    version: '1.0.0',
    vendor: 'Bâs Yropeên'
  }
  app = await window.safe.initialiseApp(appInfo, null, opts)
  console.log('Authorising SAFE application...')
  try {
    const authReqUri = await app.auth.genAuthUri()
    console.log('Generated authentication URI...', authReqUri)
    const authUri = await window.safe.authorise(authReqUri)
    console.log('SAFE application authorised...')
    await app.auth.loginFromUri(authUri)
  } catch (err) {
    console.warn('Application authorisation was rejected', err)
  }
  console.log('Application connected to the network')
}

export default {
  authoriseAndConnect
}

HomePage.vue

<template>
<div>
<h1>HomePage</h1>
<p>
Bla bla bla..
</p>
<p>
  <router-link to="/guestbook">Please sign my guestbook</router-link>
</p>
</div>
</template>

<script>
import safenetwork from '~/api/safenetwork'

export default {
  name: 'HomePage',
  async created () {
    await safenetwork.authoriseAndConnect()
  }
}
</script>

guestbook.js

import { app } from '~/api/safenetwork'

let md

async function createMutableData () {
  if (!md) {
    const typeTag = 15000
    md = await app.mutableData.newRandomPublic(typeTag)
    const initialData = {
      'random_key_1': JSON.stringify({
        name: 'name 1',
        comment: 'comment'
      }),
      'random_key_2': JSON.stringify({
        name: 'name 2',
        comment: 'comment'
      })
    }
    await md.quickSetup(initialData)
  }
}

async function getItems () {
  const entries = await md.getEntries()
  let entriesList = await entries.listEntries()
  let items = []
  entriesList.forEach((entry) => {
    const value = entry.value
    if (value.buf.length === 0) return
    const parsedValue = JSON.parse(value.buf)
    items.push({ key: entry.key, value: parsedValue, version: value.version })
  })
  return items
}

async function insertItem (key, value) {
  const mutations = await app.mutableData.newMutation()
  await mutations.insert(key, JSON.stringify(value))
  await md.applyEntriesMutation(mutations)
}

export default {
  createMutableData,
  getItems,
  insertItem
}

[bochaco]

Thanks @folaht for reporting this, we’ll give it a try and get back to you with some info.

It’s funny I was today trying to create those gif animations for things like this, or documentation, tutorials, etc., which tool/s do you/anybody use/recommend?

[folaht]

I use peek.

[folaht]

Full source code can be found at:

Sign in

I hope you can find the flaws in my code.
I can’t create any web apps otherwise.

[bochaco]

Hi @folaht, I was just looking at this and I think I know what’s happening.

When you are going back to the home page you are creating a new instance of the safeApp object (I mean safeApp object of the API), so let’s say this object is your safeApp2, and when you go to the guestbook page again you are not creating a new MD object from that new safeApp2 object, you are still using the MD created with safeApp1, but trying to apply mutations using an API object (mutations) created with safeApp2 object.

To sum it up, if you add "if (app) return" to the beginning of your authoriseAndConnect function it works fine since it uses the first safeApp object everytime.

BTW, the code you shared here is not the same I found when cloning your repo, this one works for me but not the one in the repo, it seems you need to push it.