Merge pull request #16 from imRohan/frontend/dashboard

Minor refactoring to frontend dashboard

src/app/components/landingRight.ts

@@ -24,62 +24,66 @@ const landingRight = {
   data() {
     return {
       apiPath: API_PATH,
-      signupEmail: null,
-      signupName: null,
+      signup: {
+        email: null,
+        accountName: null,
+      },
+      pantry: {
+        id: null,
+        data: null,
+      },
+      basket: null,
+      activeBasket: null,
       showNameField: false,
-      pantryId: null,
-      pantryName: null,
       copyPantryIdMessage: 'copy',
-      pantry: null,
-      basketContents: null,
-      activeBasket: null,
     }
   },
   methods: {
     async createNewPantry() {
+      const { accountName, email } = this.signup
       const { data } = await axios({
         method: 'POST',
         data: {
-          name: this.signupName,
+          name: accountName,
           description: 'defaultDescription',
-          contactEmail: this.signupEmail,
+          contactEmail: email,
         },
         url: `${API_PATH}/pantry/create`,
       })
 
-      this.pantryId = data
+      this.pantry.id = data
       this.$emit('change-view', IView.created)
     },
     async fetchPantry(pantryId: string) {
       const { data } = await axios({
         method: 'GET',
         url: `${API_PATH}/pantry/${pantryId}`,
       })
-      this.pantryId = pantryId
-      this.pantry = data
+      this.pantry.id = pantryId
+      this.pantry.data = data
     },
     async toggleBasket(name: string) {
       if (this.activeBasket === name) {
-        this.basketContents = null
+        this.basket = null
         this.activeBasket = null
       } else {
         const { data } = await axios({
           method: 'GET',
-          url: `${API_PATH}/pantry/${this.pantryId}/basket/${name}`,
+          url: `${API_PATH}/pantry/${this.pantry.id}/basket/${name}`,
         })
-        this.basketContents = data
+        this.basket = data
         this.activeBasket = name
       }
     },
     signupValid() {
       const _emailRegix = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-      return _emailRegix.test(String(this.signupEmail).toLowerCase());
+      return _emailRegix.test(String(this.signup.email).toLowerCase());
     },
     signupNameValid() {
-      return this.signupName !== null
+      return this.signup.accountName !== null
     },
     getStarted() {
-      this.fetchPantry(this.pantryId)
+      this.fetchPantry(this.pantry.id)
       this.$emit('change-view', IView.dashboard)
     },
     goHome() {
@@ -89,7 +93,7 @@ const landingRight = {
       this.$emit('change-view', IView.docs)
     },
     copyPantryId() {
-      this.$emit('copy-text', this.pantryId)
+      this.$emit('copy-text', this.pantry.id)
       this.copyPantryIdMessage = 'copied!'
     },
     enterPantryName() {

src/app/templates/landingRight.html

@@ -12,12 +12,12 @@ <h1>
     <transition name="slide-fade" mode="out-in">
       <div v-if="!showNameField" key="enterEmail">
         <div class="input__container">
-          <input v-model="signupEmail" placeholder="[email protected]">
+          <input v-model="signup.email" placeholder="[email protected]">
           <button @click="enterPantryName" :disabled="!signupValid()">
             Create a Pantry
           </button>
         </div>
-        <p v-if="signupEmail && !signupValid()" class="text--light">
+        <p v-if="signup.email && !signupValid()" class="text--light">
           Sorry, but that email is invalid.
         </p>
         <p v-else class="text--light">
@@ -26,7 +26,7 @@ <h1>
       </div>
       <div v-else key="enterPantryName">
         <div class="input__container">
-          <input v-model="signupName" placeholder="">
+          <input v-model="signup.accountName" placeholder="">
           <button @click="createNewPantry" :disabled="!signupNameValid()">
             Name your Pantry
           </button>
@@ -48,7 +48,7 @@ <h2>Save your PantryID</h2>
       Once you've saved it somewhere, hit the button below and we'll show you how to add items to your pantry.
     </p>
     <p class="text__container text--key">
-      {{ pantryId }}
+      {{ pantry.id }}
       <span class="text__button" @click="copyPantryId">
         {{ copyPantryIdMessage }}
       </span>
@@ -155,30 +155,30 @@ <h2>Get the contents of a Basket</h2>
   </template>
 
   <template v-if="view === 'dashboard'">
-    <template v-if="pantry">
+    <template v-if="pantry.data">
       <h1>
-        {{ pantry.name }}
+        {{ pantry.data.name }}
       </h1>
-      <template v-if="pantry.baskets && pantry.baskets.length !== 0">
+      <template v-if="pantry.data.baskets && pantry.data.baskets.length !== 0">
         <h2>
-          {{pantry.baskets.length}}
-          {{pantry.baskets.length > 1 ? 'Baskets' : 'Basket' }}
+          {{pantry.data.baskets.length}}
+          {{pantry.data.baskets.length > 1 ? 'Baskets' : 'Basket' }}
           in this Pantry
         </h2>
         <div class="basket__container">
           <ul>
-            <template v-for="basket in pantry.baskets">
+            <template v-for="basketName in pantry.data.baskets">
               <li class="text__container">
-                {{ basket }}
-              <span class="text__button" @click="toggleBasket(basket)">
-                {{ activeBasket === basket ? 'hide' : 'show' }}
+                {{ basketName }}
+              <span class="text__button" @click="toggleBasket(basketName)">
+                {{ activeBasket === basketName ? 'hide' : 'show' }}
               </span>
-              <template v-if="activeBasket === basket">
+              <template v-if="activeBasket === basketName">
                 <div class="basket__payload-container">
                   <json-view
                     :deep="1"
                     :showLength="true"
-                    :data="basketContents"/>
+                    :data="basket"/>
                 </div>
               </template>
               </li> 
@@ -197,7 +197,7 @@ <h2>
         <p class="text__container text--code">
           curl -XPOST -H "Content-type: application/json" -d '{
             "key": "value"
-            }' '{{apiPath}}/pantry/{{this.pantryId}}/basket/testBasket'
+            }' '{{apiPath}}/pantry/{{this.pantry.id}}/basket/testBasket'
         </p>
         <button @click="showDocs">
           Show Me The API Docs!