Begin implementing Pinia

lifetracker-vue/package-lock.json

@@ -10,7 +10,9 @@
       "dependencies": {
         "@handsontable/vue3": "^12.3.3",
         "appwrite": "^11.0.0",
+        "axios": "^1.4.0",
         "handsontable": "^12.3.3",
+        "node": "^20.0.0",
         "pinia": "^2.0.35",
         "vue": "^3.2.47",
         "vue-router": "^4.1.6"
@@ -776,6 +778,29 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/axios": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.4.0.tgz",
+      "integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==",
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -1081,6 +1106,25 @@
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
+      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -1685,6 +1729,26 @@
       "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==",
       "dev": true
     },
+    "node_modules/node": {
+      "version": "20.0.0",
+      "resolved": "https://registry.npmjs.org/node/-/node-20.0.0.tgz",
+      "integrity": "sha512-4R1vw5hKUjQw3x65x9g/ape/XlY/ZFHaQWB+jQLFJIJkVKJPDSY4oj3O6qgXOvv2wwgEpK9J2SvJUjuL6zu0uA==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "node-bin-setup": "^1.0.0"
+      },
+      "bin": {
+        "node": "bin/node"
+      },
+      "engines": {
+        "npm": ">=5.0.0"
+      }
+    },
+    "node_modules/node-bin-setup": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/node-bin-setup/-/node-bin-setup-1.1.3.tgz",
+      "integrity": "sha512-opgw9iSCAzT2+6wJOETCpeRYAQxSopqQ2z+N6BXwIMsQQ7Zj5M8MaafQY8JMlolRR6R1UXg2WmhKp0p9lSOivg=="
+    },
     "node_modules/node-fetch": {
       "version": "2.6.7",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
@@ -1936,6 +2000,11 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/read-pkg": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
@@ -2983,6 +3052,28 @@
       "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==",
       "dev": true
     },
+    "axios": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.4.0.tgz",
+      "integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==",
+      "requires": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      },
+      "dependencies": {
+        "form-data": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+          "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.8",
+            "mime-types": "^2.1.12"
+          }
+        }
+      }
+    },
     "balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -3234,6 +3325,11 @@
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
     },
+    "follow-redirects": {
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
+      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
+    },
     "for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -3661,6 +3757,19 @@
       "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==",
       "dev": true
     },
+    "node": {
+      "version": "20.0.0",
+      "resolved": "https://registry.npmjs.org/node/-/node-20.0.0.tgz",
+      "integrity": "sha512-4R1vw5hKUjQw3x65x9g/ape/XlY/ZFHaQWB+jQLFJIJkVKJPDSY4oj3O6qgXOvv2wwgEpK9J2SvJUjuL6zu0uA==",
+      "requires": {
+        "node-bin-setup": "^1.0.0"
+      }
+    },
+    "node-bin-setup": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/node-bin-setup/-/node-bin-setup-1.1.3.tgz",
+      "integrity": "sha512-opgw9iSCAzT2+6wJOETCpeRYAQxSopqQ2z+N6BXwIMsQQ7Zj5M8MaafQY8JMlolRR6R1UXg2WmhKp0p9lSOivg=="
+    },
     "node-fetch": {
       "version": "2.6.7",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
@@ -3810,6 +3919,11 @@
         "source-map-js": "^1.0.2"
       }
     },
+    "proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "read-pkg": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",

lifetracker-vue/package.json

@@ -12,7 +12,9 @@
   "dependencies": {
     "@handsontable/vue3": "^12.3.3",
     "appwrite": "^11.0.0",
+    "axios": "^1.4.0",
     "handsontable": "^12.3.3",
+    "node": "^20.0.0",
     "pinia": "^2.0.35",
     "vue": "^3.2.47",
     "vue-router": "^4.1.6"

lifetracker-vue/src/components/AuthNav.vue

@@ -1,8 +1,13 @@
-<script>
+<script setup>
+import { useSessionStore } from "../stores/session";
+const storeSession = useSessionStore();
 </script>
 
 <template>
-    <div v-if="year == 2023">
+    <div v-if="!storeSession.isConnected">
-        You are not logged in.
+        Not connected.
+        <button @click="storeSession.login">
+            Connect!
+        </button>
     </div>
 </template>

lifetracker-vue/src/main.ts

@@ -1,15 +1,12 @@
-import { createApp } from 'vue'
+import { createApp } from 'vue';
-import { createPinia } from 'pinia'
+import { createPinia } from 'pinia';
 
-import App from './App.vue'
+import App from './App.vue';
-import router from './router'
+import router from './router';
 
-import './assets/main.css'
+import './assets/main.css';
 
-const pinia = createPinia()
+const pinia = createPinia();
-const app = createApp(App)
+const app = createApp(App).use(router).use(pinia);
 
-app.use(router)
+app.mount('#app');
-app.use(pinia)
-
-app.mount('#app')

lifetracker-vue/src/stores/session.ts

@@ -0,0 +1,51 @@
+import type { ISession } from '@/types/session';
+import axios from 'axios';
+import { defineStore } from 'pinia';
+import { Client, Account, ID } from 'appwrite';
+
+export const useSessionStore = defineStore({
+  id: 'sessionState',
+  state: () => ({
+    session: [] as ISession[],
+  }),
+  getters: {
+    isConnected: (state) => state.session['userId'] == 'ryan',
+  },
+  actions: {
+    connect() {
+      const appwriteclient = new Client()
+        .setEndpoint('http://ryanpandya.com:8080/v1')
+        .setProject('lifetracker');
+
+      const account = new Account(appwriteclient);
+      const promise = account.getSession('current');
+      var session: ISession = {
+        email: '',
+        userId: '',
+        id: '',
+      };
+      promise.then(
+        function (response) {
+          response.providerUid;
+          response.userId;
+          response.$id;
+        },
+        function (error) {
+          self.email = null;
+          self.userId = null;
+          self.password = null;
+          self.session = false;
+        }
+      );
+    },
+    login() {
+      const session: ISession = {
+        id: 'moot',
+        userId: 'ryan',
+        email: 'ryan@ryanpandya.com',
+      };
+      this.session = session;
+      console.log('Logged in');
+    },
+  },
+});

lifetracker-vue/src/types/session.ts

@@ -0,0 +1,5 @@
+export interface ISession {
+  id: string;
+  userId: string;
+  email: string;
+}

lifetracker-vue/src/views/DatabaseView.vue

@@ -1,28 +1,7 @@
 <script>
-// Try to connect
-import { Client, Account, ID } from 'appwrite';
-
-const appwriteclient = new Client()
-    .setEndpoint('http://ryanpandya.com:8080/v1') // Your API Endpoint
-    .setProject('lifetracker');               // Your project ID
-
-const account = new Account(appwriteclient);
 var email; var userId; var password; var session;
 export default {
-    mounted(){
+    mounted(){},
-            const promise = account.getSession('current');
-            var self = this;
-            promise.then(function (response) {
-                self.email = response.providerUid;
-                self.userId = response.userId;
-                self.session = response.$id;
-        }, function (error) {
-            self.email = null;
-            self.userId = null;
-            self.password = null;
-            self.session = false;
-        });
-    },
     data(){
             return {
                 userId: userId,