From 43a1811f91ccc2a11894a944094d28246b98237a Mon Sep 17 00:00:00 2001
From: Vishnu Raghav B <design@vishnuraghav.com>
Date: Wed, 4 Nov 2020 01:27:31 +0530
Subject: [PATCH] implemented backup feature and working on restore

---
 App_Resources/Android/app.gradle              |   2 +-
 .../Android/src/main/AndroidManifest.xml      |   6 +-
 app/app.scss                                  |  24 +-
 app/components/App.vue                        |   2 +-
 app/components/EditRecipe.vue                 |   2 +-
 app/components/EnRecipes.vue                  |  32 +-
 app/components/Settings.vue                   | 334 ++++++++++++------
 app/components/ViewRecipe.vue                 |  20 +-
 app/components/modal/ActionDialog.vue         |   4 +-
 app/store.js                                  |  36 +-
 package-lock.json                             |  10 +-
 package.json                                  |   3 +-
 12 files changed, 309 insertions(+), 166 deletions(-)

diff --git a/App_Resources/Android/app.gradle b/App_Resources/Android/app.gradle
index bd15716f..f31990b6 100644
--- a/App_Resources/Android/app.gradle
+++ b/App_Resources/Android/app.gradle
@@ -17,7 +17,7 @@ android {
   defaultConfig {
     versionCode 1
     versionName '1.0.0'
-    minSdkVersion 25
+    minSdkVersion 19
     generatedDensities = []
     ndk {
       abiFilters.clear()
diff --git a/App_Resources/Android/src/main/AndroidManifest.xml b/App_Resources/Android/src/main/AndroidManifest.xml
index 9b91d72e..d3173fb4 100644
--- a/App_Resources/Android/src/main/AndroidManifest.xml
+++ b/App_Resources/Android/src/main/AndroidManifest.xml
@@ -1,12 +1,10 @@
 <?xml version="1.0" encoding="utf-8"?>
 <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="__PACKAGE__" android:versionCode="10000" android:versionName="1.0">
 	<supports-screens android:smallScreens="true" android:normalScreens="true" android:largeScreens="true" android:xlargeScreens="true" />
-	<!-- <uses-permission android:name="android.permission.CAMERA" /> -->
+	<uses-permission android:name="android.permission.CAMERA" />
+	<uses-feature android:name="android.hardware.camera" android:required="false" />
 	<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
 	<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
-	<!-- <uses-permission android:name="android.permission.READ_USER_DICTIONARY" /> -->
-	<!-- <uses-permission android:name="android.permission.INTERNET"/> -->
-	<!-- <uses-feature android:name="android.hardware.camera" android:required="true" /> -->
 	<application android:name="com.tns.NativeScriptApplication" android:allowBackup="true" android:icon="@drawable/icon" android:label="@string/app_name" android:theme="@style/AppTheme" android:requestLegacyExternalStorage="true">
 		<activity android:name="com.tns.NativeScriptActivity" android:label="@string/title_activity_kimera" android:screenOrientation="portrait" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|smallestScreenSize|screenLayout|locale|uiMode" android:theme="@style/LaunchScreenTheme" android:windowSoftInputMode="adjustPan">
 			<meta-data android:name="SET_THEME_ON_LAUNCH" android:resource="@style/AppTheme" />
diff --git a/app/app.scss b/app/app.scss
index 3b8a90ef..ae6a154c 100644
--- a/app/app.scss
+++ b/app/app.scss
@@ -303,10 +303,12 @@ RadListView {
 }
 .imageHolder {
   vertical-alignment: center;
-  border-radius: 6 0 0 6;
-  // prettier-ignore
-  Image {
+  &.card {
     border-radius: 6 0 0 6;
+    // prettier-ignore
+    Image {
+    border-radius: 6 0 0 6;
+  }
   }
 }
 .swipe-item {
@@ -533,11 +535,9 @@ ActivityIndicator {
   animation-timing-function: ease-in-out;
 }
 .bounce-leave-active {
-  animation-name: bounce-in;
-  animation-duration: 0.1s;
+  animation-name: bounce-out;
+  animation-duration: 0.25s;
   animation-fill-mode: forwards;
-  animation-direction: reverse;
-  animation-timing-function: ease;
 }
 @keyframes bounce-in {
   0% {
@@ -559,6 +559,16 @@ ActivityIndicator {
     transform: scale(1);
   }
 }
+@keyframes bounce-out {
+  0% {
+    transform: scale(1);
+  }
+
+  100% {
+    transform: scale(0);
+    opacity: 0;
+  }
+}
 .dolly-enter-active {
   animation-name: dolly;
   animation-duration: 1s;
diff --git a/app/components/App.vue b/app/components/App.vue
index 911dbe6c..99573acb 100644
--- a/app/components/App.vue
+++ b/app/components/App.vue
@@ -338,7 +338,7 @@ export default {
     },
   },
   created() {
-    let themeName = ApplicationSettings.getString("application-theme", "Light")
+    let themeName = ApplicationSettings.getString("appTheme", "Light")
     setTimeout((e) => Theme.setMode(Theme[themeName]), 50)
     if (!this.recipes.length) this.initializeRecipes()
     if (!this.categories.length) this.initializeCategories()
diff --git a/app/components/EditRecipe.vue b/app/components/EditRecipe.vue
index 20b7cf90..2093ef8d 100644
--- a/app/components/EditRecipe.vue
+++ b/app/components/EditRecipe.vue
@@ -611,7 +611,7 @@ export default {
     },
     imageSaveOperation() {
       let imgSavedToPath = path.join(
-        knownFolders.documents().getFolder("enrecipes").path,
+        knownFolders.documents().getFolder("EnRecipes").path,
         `${this.getRandomID()}.jpg`
       )
       let workerService = new WorkerService()
diff --git a/app/components/EnRecipes.vue b/app/components/EnRecipes.vue
index 416e78cc..752c9f20 100644
--- a/app/components/EnRecipes.vue
+++ b/app/components/EnRecipes.vue
@@ -69,7 +69,7 @@
             columns="112, *"
             androidElevation="2"
           >
-            <GridLayout class="imageHolder" rows="112" columns="112">
+            <GridLayout class="imageHolder card" rows="112" columns="112">
               <Image
                 row="0"
                 col="0"
@@ -199,7 +199,10 @@
 </template>
 
 <script>
-import { Utils, AndroidApplication } from "@nativescript/core"
+import {
+  Utils,
+  AndroidApplication,
+} from "@nativescript/core"
 
 import EditRecipe from "./EditRecipe.vue"
 import ViewRecipe from "./ViewRecipe.vue"
@@ -405,20 +408,7 @@ export default {
         this.deletionDialogActive = false
       })
     },
-    // getTotalTime(prepTime, timeRequired) {
-    //   let pT = prepTime.split(":")
-    //   let cT = timeRequired.split(":")
-    //   let hrs = parseInt(pT[0]) + parseInt(cT[0])
-    //   let mins = parseInt(pT[1]) + parseInt(cT[1])
-    //   if (mins > 60) {
-    //     hrs += Math.floor(mins / 60)
-    //     mins -= 60
-    //   }
-    //   return {
-    //     hrs,
-    //     mins,
-    //   }
-    // },
+
     formattedTime(time) {
       let t = time.split(":")
       let h = parseInt(t[0])
@@ -438,9 +428,9 @@ export default {
       this.releaseGlobalBackEvent()
       this.$navigateTo(EditRecipe, {
         // transition: {
-        //   name: "slide",
-        //   duration: 250,
-        //   curve: "easeIn",
+        //   name: "fade",
+        //   duration: 200,
+        //   curve: "easeOut",
         // },
         props: {
           selectedCategory: this.selectedCategory,
@@ -452,8 +442,8 @@ export default {
       this.$navigateTo(ViewRecipe, {
         // transition: {
         //   name: "fade",
-        //   duration: 250,
-        //   curve: "easeIn",
+        //   duration: 200,
+        //   curve: "easeOut",
         // },
         props: {
           filterTrylater: this.filterTrylater,
diff --git a/app/components/Settings.vue b/app/components/Settings.vue
index 16813c38..cccdec03 100644
--- a/app/components/Settings.vue
+++ b/app/components/Settings.vue
@@ -23,16 +23,20 @@
           <Label verticalAlignment="center" class="bx" :text="icon.theme" />
           <StackLayout>
             <Label text="Theme" class="option-title" />
-            <Label :text="themeName" class="option-info" textWrap="true" />
+            <Label :text="appTheme" class="option-info" textWrap="true" />
           </StackLayout>
         </StackLayout>
         <StackLayout class="hr m-10"></StackLayout>
         <Label text="Backup/Restore" class="group-header" />
-        <StackLayout orientation="horizontal" class="option" @tap="backupData">
+        <StackLayout orientation="horizontal" class="option" @tap="backupCheck">
           <Label class="bx" :text="icon.save" />
           <Label text="Backup data" />
         </StackLayout>
-        <StackLayout orientation="horizontal" class="option" @tap="restoreData">
+        <StackLayout
+          orientation="horizontal"
+          class="option"
+          @tap="restoreCheck"
+        >
           <Label class="bx" :text="icon.restore" />
           <Label text="Restore data" />
         </StackLayout>
@@ -47,17 +51,20 @@ import {
   path,
   getFileAccess,
   knownFolders,
+  Application,
+  File,
+  Folder,
 } from "@nativescript/core"
-import * as permissions from "nativescript-permissions"
-import { Zip } from "nativescript-zip"
+import * as Permissions from "@nativescript-community/perms"
+import { Zip } from "@nativescript/zip"
 import * as Toast from "nativescript-toast"
-
-import * as filepicker from "nativescript-plugin-filepicker"
-
+import * as Filepicker from "nativescript-plugin-filepicker"
 import Theme from "@nativescript/theme"
 import ActionDialog from "./modal/ActionDialog.vue"
 import ConfirmDialog from "./modal/ConfirmDialog.vue"
 
+import { Couchbase } from "nativescript-couchbase-plugin"
+const recipesDB = new Couchbase("EnRecipes")
 import { mapState, mapActions } from "vuex"
 export default {
   props: [
@@ -70,36 +77,17 @@ export default {
   data() {
     return {
       viewIsScrolled: false,
-      interface: {
-        theme: {
-          title: "Theme",
-          subTitle: "Light",
-          icon: "\ued09",
-        },
-      },
-      backupRestore: [
-        {
-          title: "EnRecipes Backup Directory",
-          subTitle: "/storage/emulated/0/EnRecipes",
-          icon: "\ued7c",
-        },
-        {
-          title: "Backup Data",
-          subTitle: null,
-          icon: "\uee48",
-        },
-        {
-          title: "Restore Data",
-          subTitle: null,
-          icon: "\ueadc",
-        },
-      ],
-      themeName: "Light",
-      themesArray: ["Light", "Dark"],
+      appTheme: "Light",
     }
   },
   computed: {
-    ...mapState(["icon", "currentComponent"]),
+    ...mapState([
+      "icon",
+      "recipes",
+      "userCategories",
+      "userYieldUnits",
+      "currentComponent",
+    ]),
   },
   methods: {
     ...mapActions(["setCurrentComponentAction"]),
@@ -121,7 +109,7 @@ export default {
           height: "108",
         },
       }).then((action) => {
-        if (action && action !== "Cancel" && this.themeName !== action) {
+        if (action && action !== "Cancel" && this.appTheme !== action) {
           this.$showModal(ConfirmDialog, {
             props: {
               title: "App Reload Required",
@@ -132,91 +120,235 @@ export default {
             },
           }).then((result) => {
             if (result) {
-              this.interface.theme.subTitle = this.themeName = action
-              ApplicationSettings.setString("application-theme", action)
+              this.appTheme = action
+              ApplicationSettings.setString("appTheme", action)
               setTimeout((e) => this.restartApp(), 250)
             }
           })
         }
       })
     },
-    selectBackupDir(args) {
-      this.highlight(args)
-      let btn = args.object
-      permissions
-        .requestPermission(android.Manifest.permission.WRITE_EXTERNAL_STORAGE)
-        .then(() => {
-          alert("select backup directory")
-        })
-        .catch(() => {
-          console.log("Uh oh, no permissions - plan B time!")
-        })
-    },
-    backupData(args) {
-      let btn = args.object
-      this.highlight(args)
-      permissions
-        .requestPermission(android.Manifest.permission.WRITE_EXTERNAL_STORAGE)
-        .then(() => {
-          const sdDownloadPath = android.os.Environment.getExternalStoragePublicDirectory(
-            android.os.Environment.DIRECTORY_DOWNLOADS
-          ).toString()
-          let date = new Date()
-          let formattedDate = `${date.getFullYear()}${date.getMonth()}${date.getDate()}_${date.getHours()}-${date.getMinutes()}-${date.getSeconds()}`
-          let fromPath = path.join(knownFolders.documents().path, "enrecipes")
-          let destPath = path.join(
-            sdDownloadPath,
-            `EnRecipes-${formattedDate}.zip`
-          )
-          console.log(fromPath, destPath, sdDownloadPath)
-          Zip.zip({
-            directory: fromPath,
-            archive: destPath,
+
+    writeFile(file, data) {
+      file
+        .writeText(JSON.stringify(data))
+        .then((res) => {
+          file.readText().then((res) => {
+            // console.log("Data: ", res)
           })
-            .then((success) => {
-              Toast.makeText(
-                "Backup file successfully saved to Downloads",
-                "long"
-              ).show()
-              console.log("success:" + success)
-            })
-            .catch((err) => {
-              console.log(err)
-            })
-          // console.log(fromPath, destPath, sdDownloadPath)
-          // alert("Backup successful!")
         })
-        .catch(() => {
-          console.log("Uh oh, no permissions - plan B time!")
+        .catch((err) => {
+          console.log(err)
         })
     },
-    restoreData(args) {
+    BackupDataFiles(option) {
+      const folder = path.join(knownFolders.documents().path, "EnRecipes")
+      const EnRecipesFile = File.fromPath(path.join(folder, "EnRecipes.json"))
+      const userCategoriesFile = File.fromPath(
+        path.join(folder, "userCategories.json")
+      )
+      const userYieldUnitsFile = File.fromPath(
+        path.join(folder, "userYieldUnits.json")
+      )
+      switch (option) {
+        case "create":
+          this.writeFile(EnRecipesFile, this.recipes)
+          this.userCategories.length &&
+            this.writeFile(userCategoriesFile, this.userCategories)
+          this.userYieldUnits.length &&
+            this.writeFile(userYieldUnitsFile, this.userYieldUnits)
+          break
+        case "delete":
+          EnRecipesFile.remove()
+          this.userCategories.length && userCategoriesFile.remove()
+          this.userYieldUnits.length && userYieldUnitsFile.remove()
+          break
+        default:
+          break
+      }
+    },
+    backupPermissionConfirmation() {
+      return this.$showModal(ConfirmDialog, {
+        props: {
+          title: "Grant permission",
+          description:
+            "EnRecipes requires storage permission in order to backup your data to this device",
+          cancelButtonText: "NOT NOW",
+          okButtonText: "CONTINUE",
+        },
+      })
+    },
+    backupData() {
+      this.BackupDataFiles("create")
+      let date = new Date()
+      let formattedDate =
+        date.getFullYear() +
+        "-" +
+        ("0" + (date.getMonth() + 1)).slice(-2) +
+        "-" +
+        ("0" + date.getDate()).slice(-2) +
+        "_" +
+        ("0" + date.getHours()).slice(-2) +
+        ("0" + date.getMinutes()).slice(-2) +
+        ("0" + date.getSeconds()).slice(-2)
+      const sdDownloadPath = android.os.Environment.getExternalStoragePublicDirectory(
+        android.os.Environment.DIRECTORY_DOWNLOADS
+      ).toString()
+      let fromPath = path.join(knownFolders.documents().path, "EnRecipes")
+      let destPath = path.join(
+        sdDownloadPath,
+        `EnRecipes-Backup_${formattedDate}.zip`
+      )
+      Zip.zip({
+        directory: fromPath,
+        archive: destPath,
+      })
+        .then((success) => {
+          Toast.makeText(
+            "Backup file successfully saved to Downloads",
+            "long"
+          ).show()
+          console.log("success:" + success)
+          this.BackupDataFiles("delete")
+        })
+        .catch((err) => {
+          console.log(err)
+        })
+    },
+    backupCheck(args) {
       let btn = args.object
       this.highlight(args)
-      let vm = this
-      let context = filepicker.create({
+
+      if (!this.recipes.length) {
+        Toast.makeText("To perform a backup, add at least one recipe").show()
+      } else {
+        this.permissionCheck(this.backupPermissionConfirmation, this.backupData)
+      }
+    },
+
+    restorePermissionConfirmation() {
+      return this.$showModal(ConfirmDialog, {
+        props: {
+          title: "Grant permission",
+          description:
+            "EnRecipes requires storage permission in order to restore your data from a previous backup.",
+          cancelButtonText: "NOT NOW",
+          okButtonText: "CONTINUE",
+        },
+      })
+    },
+    restoreData() {},
+    restoreCheck(args) {
+      let btn = args.object
+      this.highlight(args)
+
+      this.permissionCheck(
+        this.restorePermissionConfirmation,
+        this.openFilePicker
+      )
+    },
+    openFilePicker() {
+      let context = Filepicker.create({
         mode: "single", // use "multiple" for multiple selection
         extensions: ["zip"],
       })
-      context
-        .authorize()
-        .then(function() {
-          return context.present()
+      context.present().then((selection) => {
+        Toast.makeText("Processing...").show()
+        let result = selection[0]
+        let zipPath = result
+        let dest = knownFolders.documents().path
+        this.validateZipContent(zipPath)
+        // Zip.unzip({
+        //   archive: zipPath,
+        //   directory: dest,
+        //   overwrite: true,
+        // })
+        //   .then((success) => {
+        //     this.restoreDataInDB()
+        //     Toast.makeText("Restore successful!").show()
+        //   })
+        //   .catch((err) => {
+        //     console.log(err)
+        //   })
+      })
+    },
+    validateZipContent(zipPath) {
+      Zip.unzip({
+        archive: zipPath,
+        overwrite: true,
+      }).then((success) => {
+        let cacheFolderPath = success + "/EnRecipes"
+        const EnRecipesFilePath = cacheFolderPath + "/EnRecipes.json"
+        const userCategoriesFilePath = cacheFolderPath + "/userCategories.json"
+        const userYieldUnitsFilePath = cacheFolderPath + "/userYieldUnits.json"
+        if (
+          Folder.exists(cacheFolderPath) &&
+          File.exists(EnRecipesFilePath) &&
+          File.exists(userCategoriesFilePath) &&
+          File.exists(userCategoriesFilePath)
+        ) {
+          console.log("Zip intact")
+          // Check if EnRecipes.json is of type array
+          File.fromPath(EnRecipesFilePath)
+            .readText()
+            .then((data) => {
+              let EnRecipesData = JSON.parse(data)
+              console.log(Array.isArray(EnRecipesData))
+              EnRecipesData.forEach(recipe => {
+                
+              })
+              console.log(EnRecipesData)
+            })
+        } else {
+          Folder.fromPath(success).remove()
+          console.log("Zip modified externally or incorrect file")
+        }
+      })
+    },
+    restoreDataInDB() {
+      // recipesDB.android
+      // recipesDB.android.destroyDatabase()
+    },
+
+    permissionCheck(confirmation, action) {
+      if (!ApplicationSettings.getBoolean("storagePermissionAsked", false)) {
+        confirmation().then((e) => {
+          if (e) {
+            Permissions.request("storage").then((res) => {
+              let status = res[Object.keys(res)[0]]
+              if (status === "authorized") action()
+              if (status !== "denied")
+                ApplicationSettings.setBoolean("storagePermissionAsked", true)
+              else Toast.makeText("Permission denied").show()
+            })
+          }
         })
-        .then(function(selection) {
-          let result = selection
-          console.log(result)
-        })
-        .catch(function(e) {
-          console.log(e)
+      } else {
+        Permissions.request("storage").then((res) => {
+          let status = res[Object.keys(res)[0]]
+          if (status !== "authorized") {
+            confirmation().then((e) => {
+              e && this.openAppSettingsPage()
+            })
+          } else action()
         })
+      }
+    },
+    openAppSettingsPage() {
+      const intent = new android.content.Intent(
+        android.provider.Settings.ACTION_APPLICATION_DETAILS_SETTINGS
+      )
+      intent.addCategory(android.content.Intent.CATEGORY_DEFAULT)
+      intent.setData(
+        android.net.Uri.parse(
+          "package:" + Application.android.context.getPackageName()
+        )
+      )
+      Application.android.foregroundActivity.startActivity(intent)
     },
   },
   created() {
-    this.interface.theme.subTitle = this.themeName = ApplicationSettings.getString(
-      "application-theme",
-      "Light"
-    )
+    this.appTheme = ApplicationSettings.getString("appTheme", "Light")
   },
 }
 </script>
diff --git a/app/components/ViewRecipe.vue b/app/components/ViewRecipe.vue
index 3103071d..39d6efdc 100644
--- a/app/components/ViewRecipe.vue
+++ b/app/components/ViewRecipe.vue
@@ -1,7 +1,7 @@
 <template>
-  <Page @loaded="initializePage">
-    <ActionBar height="152" margin="0" flat="true" visibility="collapse">
-      <GridLayout rows="24, 64, 64" columns="auto, *, auto,auto, auto">
+  <Page @loaded="initializePage" @unloaded="hideInfo">
+    <ActionBar height="136" margin="0" flat="true">
+      <GridLayout rows="24, 64, 48" columns="auto, *, auto,auto, auto">
         <Label
           row="1"
           col="0"
@@ -444,6 +444,8 @@ import { mapState, mapActions } from "vuex"
 
 import EditRecipe from "./EditRecipe.vue"
 
+let feedback = new Feedback()
+
 export default {
   props: [
     "filterTrylater",
@@ -507,7 +509,6 @@ export default {
       this.selectedTabIndex = args.object.selectedIndex
     },
     showInfo() {
-      let feedback = new Feedback()
       feedback.show({
         title: `You tried this recipe ${this.niceDates(
           this.recipe.lastTried
@@ -518,6 +519,9 @@ export default {
         ),
       })
     },
+    hideInfo() {
+      feedback.hide()
+    },
     highlight(args) {
       let temp = args.object.className
       args.object.className = `${temp} option-highlight`
@@ -551,7 +555,7 @@ export default {
     shareRecipe() {
       let overview = `${
         this.recipe.title
-      } Recipe\n\nApprox. cooking time: ${this.formattedTime(
+      }\n\nTime required: ${this.formattedTime(
         this.recipe.timeRequired
       )}\n`
       let shareContent = overview
@@ -583,12 +587,12 @@ export default {
       if (this.recipe.references.length) {
         let references = `\nReferences:\n\n`
         this.recipe.references.forEach((e, i) => {
-          references += `${e}\n\n`
+          references += `${i + 1}. ${e}\n\n`
         })
         shareContent += references
       }
       let sharenote =
-        "\nCreated and shared via EnRecipes.\n\nDownload the app on f-droid:\nhttps://www.vishnuraghav.com/"
+        "\nCreated and shared via EnRecipes.\nDownload the app on f-droid: https://www.vishnuraghav.com/"
 
       shareContent += sharenote
 
@@ -652,7 +656,7 @@ export default {
   },
   mounted() {
     this.showFab = true
-    setTimeout((e) => this.recipe.tried && this.showInfo(), 2000)
+    setTimeout((e) => this.recipe.tried && this.showInfo(), 500)
   },
 }
 </script>
diff --git a/app/components/modal/ActionDialog.vue b/app/components/modal/ActionDialog.vue
index 4bc0bd52..b76a51e8 100644
--- a/app/components/modal/ActionDialog.vue
+++ b/app/components/modal/ActionDialog.vue
@@ -1,6 +1,6 @@
 <template>
   <Page>
-    <StackLayout class="dialogContainer" :class="isLightMode">
+    <StackLayout class="dialogContainer" :class="appTheme">
       <Label class="dialogTitle orkm" :text="title" />
       <ListView
         width="100%"
@@ -37,7 +37,7 @@ import { Application } from "@nativescript/core"
 export default {
   props: ["title", "list", "height", "action"],
   computed: {
-    isLightMode() {
+    appTheme() {
       return Application.systemAppearance()
     },
   },
diff --git a/app/store.js b/app/store.js
index 23af75af..49263529 100644
--- a/app/store.js
+++ b/app/store.js
@@ -1,9 +1,10 @@
 import Vue from "vue"
 import Vuex from "vuex"
 import { Couchbase } from "nativescript-couchbase-plugin"
-const recipesDB = new Couchbase("enrecipes")
-const categoriesDB = new Couchbase("userCategories")
-const yieldUnitsDB = new Couchbase("userYieldUnits")
+import { getFileAccess } from "@nativescript/core"
+const recipesDB = new Couchbase("EnRecipes")
+const userCategoriesDB = new Couchbase("userCategories")
+const userYieldUnitsDB = new Couchbase("userYieldUnits")
 
 Vue.use(Vuex)
 
@@ -49,7 +50,7 @@ let defaultYieldUnits = [
   "Millilitre",
   "Litre",
   "Roll",
-  "Pattie",
+  "Patty",
   "Loaf",
 ]
 
@@ -98,7 +99,7 @@ export default new Vuex.Store({
       //     "Continue adding hot broth, 1/2 cup at a time, and stirring until all the broth has been absorbed and rice is tender but firm. Add the mushroom mixture, spinach, pepper, salt and grated Parmesan cheese; cook and stir until heated through. If desired, sprinkle with parsley and shaved Parmesan cheese. Serve immediately.",
       //   ],
       //   notes: [
-      //     "Nutrition Facts\n3/4 cup: 409 calories, 22g fat (12g saturated fat), 61mg cholesterol, 667mg sodium, 41g carbohydrate (3g sugars, 2g fiber), 11g protein.",
+      //     "Nutrition Facts: 3/4 cup: 409 calories, 22g fat (12g saturated fat), 61mg cholesterol, 667mg sodium, 41g carbohydrate (3g sugars, 2g fiber), 11g protein.",
       //   ],
       //   references: [
       //     "https://www.tasteofhome.com/recipes/mushroom-spinach-risotto/",
@@ -189,9 +190,9 @@ export default new Vuex.Store({
       })
     },
     initializeCategories(state) {
-      let isCategoriesStored = categoriesDB.query({ select: [] }).length
+      let isCategoriesStored = userCategoriesDB.query({ select: [] }).length
       if (isCategoriesStored) {
-        state.userCategories = categoriesDB.getDocument(
+        state.userCategories = userCategoriesDB.getDocument(
           "userCategories"
         ).userCategories
         let categoriesWithRecipes = state.recipes.map((e) => e.category)
@@ -199,15 +200,18 @@ export default new Vuex.Store({
           categoriesWithRecipes.includes(e)
         )
       } else {
-        categoriesDB.createDocument({ userCategories: [] }, "userCategories")
+        userCategoriesDB.createDocument(
+          { userCategories: [] },
+          "userCategories"
+        )
       }
       state.categories = [...defaultCategories, ...state.userCategories]
       state.categories.sort()
     },
     initializeYieldUnits(state) {
-      let isYieldUnitsStored = yieldUnitsDB.query({ select: [] }).length
+      let isYieldUnitsStored = userYieldUnitsDB.query({ select: [] }).length
       if (isYieldUnitsStored) {
-        state.userYieldUnits = yieldUnitsDB.getDocument(
+        state.userYieldUnits = userYieldUnitsDB.getDocument(
           "userYieldUnits"
         ).userYieldUnits
         let yieldUnitsWithRecipes = state.recipes.map((e) => e.yield.unit)
@@ -215,7 +219,10 @@ export default new Vuex.Store({
           yieldUnitsWithRecipes.includes(e)
         )
       } else {
-        yieldUnitsDB.createDocument({ userYieldUnits: [] }, "userYieldUnits")
+        userYieldUnitsDB.createDocument(
+          { userYieldUnits: [] },
+          "userYieldUnits"
+        )
       }
       state.yieldUnits = [...defaultYieldUnits, ...state.userYieldUnits]
     },
@@ -227,7 +234,7 @@ export default new Vuex.Store({
       let lowercase = state.categories.map((e) => e.toLowerCase())
       if (lowercase.indexOf(category.toLowerCase()) == -1) {
         state.userCategories.push(category)
-        categoriesDB.updateDocument("userCategories", {
+        userCategoriesDB.updateDocument("userCategories", {
           userCategories: [...state.userCategories],
         })
         state.categories = [...defaultCategories, ...state.userCategories]
@@ -238,7 +245,7 @@ export default new Vuex.Store({
       let lowercase = state.yieldUnits.map((e) => e.toLowerCase())
       if (lowercase.indexOf(unit.toLowerCase()) == -1) {
         state.userYieldUnits.push(unit)
-        yieldUnitsDB.updateDocument("userYieldUnits", {
+        userYieldUnitsDB.updateDocument("userYieldUnits", {
           userYieldUnits: [...state.userYieldUnits],
         })
         state.yieldUnits = [...defaultYieldUnits, ...state.userYieldUnits]
@@ -249,6 +256,7 @@ export default new Vuex.Store({
       recipesDB.updateDocument(id, recipe)
     },
     deleteRecipe(state, { index, id }) {
+      getFileAccess().deleteFile(state.recipes[index].imageSrc)
       state.recipes.splice(index, 1)
       recipesDB.deleteDocument(id)
     },
@@ -268,7 +276,7 @@ export default new Vuex.Store({
       let lowercase = state.categories.map((e) => e.toLowerCase())
       if (lowercase.indexOf(updated.toLowerCase()) == -1) {
         state.userCategories.push(updated)
-        categoriesDB.updateDocument("userCategories", {
+        userCategoriesDB.updateDocument("userCategories", {
           userCategories: [...state.userCategories],
         })
         state.categories = [...defaultCategories, ...state.userCategories]
diff --git a/package-lock.json b/package-lock.json
index 608d0517..466872ed 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1172,6 +1172,11 @@
         "webpack-sources": "~1.4.3"
       }
     },
+    "@nativescript/zip": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@nativescript/zip/-/zip-5.0.0.tgz",
+      "integrity": "sha512-iM1ln1KPRqNEKebvXkZGe3899+Esbp9DMF+hwTwC7Gd+oqhc4Wh8Tas97ormzMHR6iPasiOXs6wKuu625TYdIQ=="
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz",
@@ -5223,11 +5228,6 @@
         "schema-utils": "^2.7.0"
       }
     },
-    "nativescript-zip": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/nativescript-zip/-/nativescript-zip-4.0.2.tgz",
-      "integrity": "sha512-CoJx97Pd49mOMIkpL2dJBBKFsy3XsnstWEQLL5tiV9ObfX3gWH42uG0HL4LjCP5yh5ovxT7CDYGlm68lnExP9A=="
-    },
     "negotiator": {
       "version": "0.6.2",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
diff --git a/package.json b/package.json
index 3e57b9d6..cbb98b83 100644
--- a/package.json
+++ b/package.json
@@ -8,10 +8,12 @@
     "run": "ns run android"
   },
   "dependencies": {
+    "@nativescript-community/perms": "^2.1.1",
     "@nativescript/core": "~7.0.0",
     "@nativescript/datetimepicker": "^2.0.4",
     "@nativescript/theme": "^3.0.0",
     "@nativescript/webpack": "3.0.0",
+    "@nativescript/zip": "^5.0.0",
     "@nstudio/nativescript-checkbox": "^2.0.4",
     "nativescript-clipboard": "^2.0.0",
     "nativescript-couchbase-plugin": "^0.9.6",
@@ -23,7 +25,6 @@
     "nativescript-ui-listview": "^9.0.4",
     "nativescript-ui-sidedrawer": "^9.0.3",
     "nativescript-vue": "^2.6.1",
-    "nativescript-zip": "^4.0.2",
     "vuex": "^3.3.0"
   },
   "devDependencies": {