Begin implementing Pinia

This commit is contained in:
Ryan Pandya 2023-05-04 14:26:58 -07:00
parent b0c3eaf33d
commit 8bc042aa19
7 changed files with 189 additions and 36 deletions

View File

@ -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",

View File

@ -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"

View File

@ -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>

View File

@ -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');

View File

@ -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');
},
},
});

View File

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

View File

@ -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,