Begin implementing Pinia

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">
-        You are not logged in.
+    <div v-if="!storeSession.isConnected">
+        Not connected.
+        <button @click="storeSession.login">
+            Connect!
+        </button>
     </div>
 </template>

lifetracker-vue/src/main.ts

@@ -1,15 +1,12 @@
-import { createApp } from 'vue'
-import { createPinia } from 'pinia'
+import { createApp } from 'vue';
+import { createPinia } from 'pinia';
 
-import App from './App.vue'
-import router from './router'
+import App from './App.vue';
+import router from './router';
 
-import './assets/main.css'
+import './assets/main.css';
 
-const pinia = createPinia()
-const app = createApp(App)
+const pinia = createPinia();
+const app = createApp(App).use(router).use(pinia);
 
-app.use(router)
-app.use(pinia)
-
-app.mount('#app')
+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(){
-            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;
-        });
-    },
+    mounted(){},
     data(){
             return {
                 userId: userId,