allow viewing of a project without an ID (and other refactors)

src/views/ProjectViewView.vue

@@ -66,28 +66,40 @@
     </div>
 
     <div>
-      <button
-        @click="openDialog({ name: 'you', did: activeDid })"
-        class="text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md"
-      >
-        I gave...
-      </button>
-      ... or choose a contact who gave:
+      <div v-if="activeDid">
+        <button
+          @click="openDialog({ name: 'you', did: activeDid })"
+          class="text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md"
+        >
+          I gave...
+        </button>
+        &horbar; or:
+      </div>
       <!-- similar contact selection code is in multiple places -->
-      <button
-        v-for="contact in allContacts"
-        :key="contact.did"
-        @click="openDialog(contact)"
-        class="text-blue-500"
-      >
-        &nbsp;{{ contact.name }},
-      </button>
+      Record a gift from
+      <span v-for="contact in allContacts" :key="contact.did">
+        <button @click="openDialog(contact)" class="text-blue-500">
+          &nbsp;{{ contact.name }}</button
+        >,
+      </span>
       <span v-if="allContacts.length > 0">&nbsp;or&nbsp;</span>
       <button @click="openDialog()" class="text-blue-500">
         someone not specified
       </button>
     </div>
 
+    <!-- Gifts to & from this -->
+    <!--
+    <div class="mt-8 flex justify-around">
+      <div>
+        <h1 class="text-xl">Given to this Project</h1>
+      </div>
+      <div>
+        <h1 class="text-xl">... and from this Project</h1>
+      </div>
+    </div>
+    -->
+
     <GiftedDialog
       ref="customDialog"
       @dialog-result="handleDialogResult"
@@ -108,6 +120,7 @@ import { Component, Vue } from "vue-facing-decorator";
 
 import GiftedDialog from "@/components/GiftedDialog.vue";
 import { accountsDB, db } from "@/db";
+import { AccountsSchema } from "@/db/tables/accounts";
 import { Contact } from "@/db/tables/contacts";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import { createAndSubmitGive } from "@/libs/endorserServer";
@@ -120,26 +133,42 @@ import QuickNav from "@/components/QuickNav";
   components: { GiftedDialog, AlertMessage, QuickNav },
 })
 export default class ProjectViewView extends Vue {
+  accounts: AccountsSchema;
   activeDid = "";
-  allContacts: Array<Contact> = [];
-  apiServer = "";
-  expanded = false;
-  name = "";
-  description = "";
-  truncatedDesc = "";
-  truncateLength = 40;
-  timeSince = "";
-  projectId = localStorage.getItem("projectId") || ""; // handle ID
-  errorMessage = "";
   alertMessage = "";
   alertTitle = "";
-  accounts: AccountsSchema;
+  allContacts: Array<Contact> = [];
+  apiServer = "";
+  description = "";
+  errorMessage = "";
+  expanded = false;
+  givesToThis: Array<any> = [];
+  givesFromThis: Array<any> = [];
+  name = "";
   numAccounts = 0;
+  projectId = localStorage.getItem("projectId") || ""; // handle ID
+  timeSince = "";
+  truncatedDesc = "";
+  truncateLength = 40;
 
   async beforeCreate() {
     accountsDB.open();
     this.accounts = accountsDB.accounts;
-    this.numAccounts = await this.accounts.count();
+    this.numAccounts = (await this.accounts?.count()) || 0;
+  }
+
+  async created() {
+    await db.open();
+    const settings = await db.settings.get(MASTER_SETTINGS_KEY);
+    this.activeDid = settings?.activeDid || "";
+    this.apiServer = settings?.apiServer || "";
+    this.allContacts = await db.contacts.toArray();
+
+    this.accounts = accountsDB.accounts;
+    const accountsArr = await this.accounts?.toArray();
+    const account = accountsArr.find((acc) => acc.did === this.activeDid);
+    const identity = JSON.parse(account?.identity || "null");
+    this.LoadProject(identity);
   }
 
   public async getIdentity(activeDid) {
@@ -188,11 +217,13 @@ export default class ProjectViewView extends Vue {
       this.apiServer +
       "/api/claim/byHandle/" +
       encodeURIComponent(this.projectId);
-    const token = await accessToken(identity);
     const headers = {
       "Content-Type": "application/json",
-      Authorization: "Bearer " + token,
     };
+    if (identity) {
+      const token = await accessToken(identity);
+      headers["Authorization"] = "Bearer " + token;
+    }
 
     try {
       const resp = await this.axios.get(url, { headers });
@@ -202,7 +233,6 @@ export default class ProjectViewView extends Vue {
           const eventDate = new Date(startTime);
           const now = moment.now();
           this.timeSince = moment.utc(now).to(eventDate);
-          errorMessage;
         }
         this.name = resp.data.claim?.name || "(no name)";
         this.description = resp.data.claim?.description || "(no description)";
@@ -224,28 +254,6 @@ export default class ProjectViewView extends Vue {
     }
   }
 
-  async created() {
-    await db.open();
-    const settings = await db.settings.get(MASTER_SETTINGS_KEY);
-    this.activeDid = settings?.activeDid || "";
-    this.apiServer = settings?.apiServer || "";
-    this.allContacts = await db.contacts.toArray();
-
-    if (this.numAccounts === 0) {
-      console.error("Problem!  Should have a profile!");
-    } else {
-      const accounts = await accountsDB.accounts.toArray();
-      const account = accounts.find((acc) => acc.did === this.activeDid);
-      const identity = JSON.parse(account?.identity || "null");
-      if (!identity) {
-        throw new Error(
-          "An ID is chosen but there are no keys for it so it cannot be used to talk with the service.",
-        );
-      }
-      this.LoadProject(identity);
-    }
-  }
-
   openDialog(contact) {
     this.$refs.customDialog.open(contact);
   }