V0.11/new bug fixes

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+    "cSpell.words": [
+        "Appwrite",
+        "Nuxt",
+        "pinia"
+    ]
+}

pages/index.vue

@@ -1,5 +1,4 @@
 <template>
-    <h1>{{ id }}</h1>
     <form class="center-auth" @submit="handleSignUp">
         <img class="center-auth-image" src="../assets/images/ReFrsh-Logo.png" alt="ReFrsh Logo">
         <h1 class="center-auth-item">Welcome to ReFresh!</h1>
@@ -10,50 +9,38 @@
     </form>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { useMainStore } from '@/store/index.js'
 
-export default {
-    data() {
-        const store = useMainStore()
-        let session = store.session
-        let id: string;
-        if (session == null) {
-            console.log("Account is null");
-            id = "null"
-        }
-        else {
-            console.log(session);
-            id = session.userId
-        }
-        return {
-            id
-        }
-    },
-    methods: {
-        async handleSignUp(e: Event) {
-            const store = useMainStore()
-            console.log(store.session);
+const handleSignUp = async (e: Event) => {
+    const store = useMainStore()
+    const router = useRouter()
+    console.log(store.session);
 
-            if (store.session) {
-                console.log("Already logged in")
-                return
-            }
-            console.log(e.type);
+    if (store.session) {
+        console.log("Already logged in")
+    }
+    console.log(e.type);
 
-            e.preventDefault()
-            await store.signup()
-            console.log(store.session);
-        }
-    },
-    async mounted() {
-        const store = useMainStore()
-        const loggedIn = await store.getSession()
-        this.id = store.session?.userId!!
-        // push the user to session page
-        if (loggedIn) {
-            this.$router.push('/session')
-        }
+    e.preventDefault()
+    const loggedIn = await store.signup()
+    if (loggedIn) {
+        console.log("Logged in")
+        router.push('/session')
+    } else {
+        console.error("Not logged in")
     }
+
+    console.log(store.session);
 }
+
+onMounted(async () => {
+    const store = useMainStore()
+    const router = useRouter()
+    const loggedIn = await store.getSession
+    // push the user to session page
+    if (loggedIn) {
+        router.push('/session')
+    }
+})
 </script>

pages/session/[id].vue

@@ -1,21 +1,21 @@
 <template>
     <div>
         <h1>Welcome To Session {{ $route.params.id }}</h1>
-        <Button @click="copyClipBaord" :class="`${copied ? 'share-button-clicked' : 'share-button'}`">
+        <button @click="copyClipBoard" :class="`${copied ? 'share-button-clicked' : 'share-button'}`">
             <Icon :name="`${copied ? 'icon-park-solid:correct' : 'material-symbols:share'}`" />
             Share Link
-        </Button>
+        </button>
         <Messages v-for="(message, i) in store.chat?.documents" :message="message" :key="i" />
 
-        <div class="sender-box">
+        <form @submit.prevent="appwriteSender(text)" class="sender-box">
             <input type="text" class="classy-input-message" v-model="text" />
-            <button class="classy-button" @click="appwriteSender(text)">Send</button>
-        </div>
-        <div v-if="needAccess">
+            <button class="classy-button">Send</button>
+        </form>
+        <form @submit.prevent="addAccess" v-if="needAccess">
             <br />
             <input type="password" class="classy-input" placeholder="password" v-model="password" />
-            <button @click="addAccess">Submit</button>
-        </div>
+            <button>Submit</button>
+        </form>
     </div>
 </template>
 
@@ -30,14 +30,35 @@ export default {
         }
     },
     methods: {
-        copyClipBaord() {
+        print(text: string) {
+            console.log(text);
+        },
+        copyClipBoard() {
             const url = window.location.href
             navigator.clipboard.writeText(url)
             this.copied = true
             setTimeout(() => {
                 this.copied = false
             }, 1500);
         },
+        async loadChats() {
+            await this.store.getChatMessages(String(this.$route.params.id))
+            const client_ = new Client();
+            client_
+                .setProject('647986a45b07d841d978')
+                .setEndpoint('https://cloud.appwrite.io/v1');
+            client_.subscribe(
+                'databases.6479a05b96a60acff24e.collections.6479a09905d005cea479.documents',
+                (event: any) => {
+                    if (event.events.includes('databases.6479a05b96a60acff24e.collections.6479a09905d005cea479.documents.*.create')) {
+                        console.log('Event Emitted: ', event.payload);
+                        this.store.chat?.documents.push(event.payload)
+                    }
+
+                }
+            );
+
+        },
         async addAccess() {
             const { data } = await useFetch('/api/session/addAccess', {
                 method: 'POST',
@@ -46,15 +67,22 @@ export default {
                     password: this.password,
                     userId: this.store.session?.userId
                 }
-            })
+            });
+
+            if(data) {
+                console.log('data for addAccess: ', data);
+                this.needAccess = false
+                await this.loadChats();
+            }
+
             // data.value?.success ? this.needAccess = false : alert("Wrong Password")
         },
         async appwriteSender(text: string) {
             const { database } = useAppwrite()
             const databaseId = '6479a05b96a60acff24e';
             const userChatCollectionId = '6479a09905d005cea479';
             const store = useMainStore()
-            const loggedIn = await store.getSession()
+            const loggedIn = await store.getSession
             if (loggedIn) {
                 console.log("Logged In");
                 console.log("Message Sender Id: ", store.session?.userId);
@@ -83,10 +111,18 @@ export default {
     async created() {
         console.log("Created")
         const store = useMainStore()
+
         // console.log("This Chat Session: ", store.);
-        const loggedIn = await store.getSession()
+        const loggedIn = await store.getSession
         if (!loggedIn) {
             console.log("Not logged in");
+            alert('You are not logged in, please press ok to login and we\'ll create an anonymous account for you');
+            // new login here
+            // TODO: Make a useLogin hook
+            const loggedIn = await store.signup()
+            this.needAccess = true
+            console.log("Logged In: ", loggedIn);
+
         } else {
             console.log("Logged In");
             // Get details about this session

pages/session/index.vue

@@ -35,12 +35,16 @@ export default {
             const password = this.password.trim()
 
             // Check name availability
-            const checkNameAvailable = await this.store.checkNameAvailability(sessionName)
+            // const checkNameAvailable = await this.store.checkNameAvailability(sessionName)
+            const { data } = await useFetch(`/api/session/exists?sessionId=${sessionName}`)
+            const checkNameAvailable = !data.value?.success;
+            console.log(checkNameAvailable);
+
             if (checkNameAvailable) {
                 console.log("is available");
                 this.nameExists = true
-                const truty = await this.store.createChatSession(sessionName, password)
-                if (truty) {
+                const truthy = await this.store.createChatSession(sessionName, password)
+                if (truthy) {
                     console.log("Session Created");
                     await this.store.getChatSessions()
                     this.sessionName = ""
@@ -58,7 +62,7 @@ export default {
     async mounted() {
 
         const store = useMainStore()
-        const loggedIn = await store.getSession()
+        const loggedIn = await store.getSession
         if (!loggedIn) {
             console.log("Not logged in");
 

server/api/session/exists.ts

@@ -27,7 +27,7 @@ export default defineEventHandler(async (event): Promise<createResponse> => {
     console.log(getDoc);
     return {
       success: true,
-      message: 'Hello World',
+      message: 'Session Does exist',
     };
   } else {
     return {

store/index.ts

@@ -1,9 +1,7 @@
-import { set } from 'nuxt/dist/app/compat/capi';
 import { defineStore } from 'pinia';
 import {
   Models,
   Query,
-  RealtimeResponseEvent,
   Client,
   AppwriteException,
 } from 'appwrite';
@@ -12,39 +10,57 @@ export const useMainStore = defineStore('main', {
     session: null as Models.Session | null,
     chatSessions: null as Models.DocumentList<Models.Document> | null,
     chat: null as Models.DocumentList<Models.Document> | null,
+    // TODO: Edge case if multiple clients open
+    client: Client,
   }),
+  getters: {
+    async getAccount() {
+      const { account } = useAppwrite();
+      const accountInfo = await account.get();
+      return accountInfo;
+    },
+    async getSession(): Promise<Boolean> {
+      const { account } = useAppwrite();
+      console.log('are we in get session?');
+      try {
+        if (this.session !== null) {
+          console.log('SESSION ALREADY SET');
+          // push the user to session page
+          return true;
+        }
+        const currentAccount = await account.getSession('current');
+        if (currentAccount === null) {
+          console.log('NO SESSION');
+          this.session = null;
+          return false;
+        } else if (currentAccount !== null) {
+          console.log('SESSION');
+          console.log('Account Session: ', currentAccount);
+          this.session = currentAccount;
+          console.log(this.session);
+          return true;
+        } else {
+          console.log('Account Session: ', currentAccount);
+        }
+      } catch (error) {
+        console.log(error);
+        return false;
+      }
+      return false;
+    },
+  },
   actions: {
-    async signup() {
+    async signup(): Promise<Boolean> {
       console.log('SIGN_UP');
       try {
         const { account } = useAppwrite();
         const guest = await account.createAnonymousSession();
         this.session = guest;
         console.log(guest);
+        return true;
       } catch (error) {
         console.log(error);
-      }
-    },
-    async getAccount() {
-      const { account } = useAppwrite();
-      const accountInfo = await account.get();
-    },
-    async getSession(): Promise<Boolean> {
-      const { account } = useAppwrite();
-      if (this.session !== null) {
-        console.log('SESSION ALREADY SET');
-        // push the user to session page
-        return true;
-      }
-      if (account.getSession('current') === null) {
-        console.log('NO SESSION');
-        this.session = null;
         return false;
-      } else {
-        console.log('SESSION');
-        this.session = await account.getSession('current');
-        console.log(this.session);
-        return true;
       }
     },
     async getChatMessages(sessionId: string) {
@@ -65,28 +81,6 @@ export const useMainStore = defineStore('main', {
         console.log(error);
       }
     },
-    async checkNameAvailability(sessionName: string): Promise<Boolean> {
-      const { database } = useAppwrite();
-      const databaseId = '6479a05b96a60acff24e';
-      const sessionsCollectionId = '6479c7ee0c7c5e254032';
-
-      try {
-        const sessionExistsDoc = await database.getDocument(
-          databaseId,
-          sessionsCollectionId,
-          sessionName
-        );
-        console.log(sessionExistsDoc);
-        if (sessionExistsDoc) {
-          return false;
-        } else {
-          return true;
-        }
-      } catch (error) {
-        console.log(error);
-        return true;
-      }
-    },
     async createChatSession(
       sessionName: string,
       password: string
@@ -117,33 +111,20 @@ export const useMainStore = defineStore('main', {
       const { database, ID } = useAppwrite();
       const userId = this.session?.userId;
       const databaseId = '6479a05b96a60acff24e';
-      const collectionId = '6479a070bbdfdddab0fd';
+
       try {
-        const sessions = await database.getDocument(
-          databaseId,
-          collectionId,
-          userId!!
-        );
-        // console.log('User Sessions List', sessions.sesssionIds);
         const sessionCollectionId = '6479c7ee0c7c5e254032';
-        sessions.sessionIds.forEach(async (sessionId: string) => {
-          console.log('Session Id', sessionId);
-        });
         const chatSessions = await database.listDocuments(
           databaseId,
           sessionCollectionId,
           [Query.equal('createdBy', [userId!!])]
         );
         console.log('Chat Sessions', chatSessions.documents);
         if (chatSessions.documents.length !== 0) {
-          console.log('are you running this');
-
           this.chatSessions = chatSessions;
         } else {
           console.log('Nope');
         }
-
-        // this.chatSessions = sessions;
       } catch (error: AppwriteException | any) {
         if (error.type === 'document_not_found') {
           console.log('No sessions found');