switch from vuex to pinia and changed localstorage to cookies, now no…

…tificantions and profile user cookies for id

frontend/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "axios": "^1.2.1",
+    "pinia": "^2.0.30",
     "vue": "^3.2.41",
     "vue-router": "^4.1.6",
     "vuex": "^4.0.2"

frontend/src/App.vue

@@ -7,16 +7,16 @@
 <script setup>
 import axios from 'axios'
 import { useRouter, useRoute } from 'vue-router';
-import { useStore } from 'vuex'
+import { useUserStore } from '../src/store/UserStore.js'
 
-const router = useRouter();
-const route = useRoute();
+const userStore = useUserStore();
 
-const store = useStore();
+userStore.initializeStore();
 
-store.commit('initializeStore');
+const router = useRouter();
+const route = useRoute();
 
-const token = store.state.token
+const token = userStore.token
 
 function verifyToken() {
   if (token) {
@@ -29,21 +29,7 @@ function verifyToken() {
   }
 }
 
-function getAuthenticatedUser() {
-  axios.get('/api/auth_user/')
-    .then(response => {
-      store.commit('setUsername', response.data.username);
-      store.commit('setUserId', response.data.id);
-      localStorage.setItem('username', response.data.username);
-      localStorage.setItem('user_id', response.data.id);
-    })
-    .catch(error => {
-      console.log(error)
-    })
-}
-
 verifyToken();
-getAuthenticatedUser();
 
 
 </script>

frontend/src/components/ChatBox.vue

@@ -1,8 +1,8 @@
 <template>
     <div id="conversationapp" class="flex flex-col h-full max-[600px]:mb-12">
         <div id="chatcontainer" class="flex flex-col h-full mx-3 mt-2">
-            <div class="mb-1.5" v-for="message in messages" :class="message.tweeker_name == $store.state.username ? 'justify-end flex w-full' : 'flex w-full' ">
-                <article class="flex h-fit w-fit max-w-md p-2 pt-3 pl-3 border-solid border-2 border-gray-100 dark:border-gray-700 bg-gray-700" :class="message.tweeker_name == $store.state.username ? 'rounded-tl-3xl rounded-tr-3xl  rounded-bl-3xl' : 'rounded-tl-3xl rounded-tr-3xl  rounded-br-3xl' ">
+            <div class="mb-1.5" v-for="message in messages" :class="message.tweeker_name == userStore.username ? 'justify-end flex w-full' : 'flex w-full' ">
+                <article class="flex h-fit w-fit max-w-md p-2 pt-3 pl-3 border-solid border-2 border-gray-100 dark:border-gray-700 bg-gray-700" :class="message.tweeker_name == userStore.username ? 'rounded-tl-3xl rounded-tr-3xl  rounded-bl-3xl' : 'rounded-tl-3xl rounded-tr-3xl  rounded-br-3xl' ">
                     <figure class="shrink-0">
                         <img class="rounded-full h-12 w-12 bg-gray-300">
                     </figure>
@@ -36,19 +36,19 @@
 <script setup>
 import axios from 'axios'
 import { ref, onMounted, computed } from 'vue'
-import { useStore } from 'vuex'
+import { useUserStore } from '../store/UserStore.js'
 
+const userStore = useUserStore();
 
 
 const props = defineProps(['user_id']);
 
-const store = useStore()
 
 
 let conversation_id = '0';
 const messages = ref([]);
 const content = ref('');
-const tweeker = computed(() => store.state.username);
+const tweeker = computed(() => userStore.username);
 const formatted_time = 'Now';
 const avatar = '';
 let chatSocket = null;

frontend/src/components/lSideBar.vue

@@ -50,7 +50,7 @@
             </router-link>
         </div>
         <div class="flex py-1">
-            <router-link :to="'/profile/' + this.$store.state.username" class="flex font-semibold text-xl p-2 hover:bg-gray-200 dark:hover:bg-gray-700 hover:rounded-full ">
+            <router-link :to="'/profile/' + userStore.username" class="flex font-semibold text-xl p-2 hover:bg-gray-200 dark:hover:bg-gray-700 hover:rounded-full ">
                 <div class="flex w-11 h-11">
                     <i class="text-xl m-auto fa-solid fa-user"></i>
                 </div>
@@ -62,6 +62,10 @@
 </template>
 
 <script setup>
+import { useUserStore } from '../store/UserStore.js'
+
+const userStore = useUserStore()
+
 </script>
 
 <style>

frontend/src/components/rSideBar.vue

@@ -17,7 +17,7 @@
                 <div class="flex justify-between w-full hover:bg-gray-200 dark:hover:bg-gray-700 hover:rounded-full">
                     <div class="flex p-1">
                         <img class="rounded-full h-12 w-12 max-[600px]:h-8 max-[600px]:w-8 m-auto" src="">
-                        <h1 class="ml-1 font-semibold ">{{ store.state.username }}</h1>
+                        <h1 class="ml-1 font-semibold ">{{ userStore.username }}</h1>
                     </div>
                     <div class="flex m-3">
                         <i class="m-auto text-xl fa-solid fa-bars"></i>
@@ -72,9 +72,9 @@
 <script setup>
 import axios from 'axios'
 import { ref, onMounted } from 'vue'
-import { useStore } from 'vuex'
+import { useUserStore } from '../store/UserStore.js'
 
-const store = useStore()
+const userStore = useUserStore()
 
 let show = ref(false);
 

frontend/src/main.js

@@ -1,8 +1,12 @@
 import { createApp } from 'vue'
+import { createPinia } from 'pinia'
 import './style.css'
 import App from './App.vue'
 import router from './router'
 import axios from 'axios'
-import store from './store'
+const app = createApp(App);
+const pinia = createPinia()
 axios.defaults.baseURL = import.meta.env.VITE_API_BASE_URL
-createApp(App).use(store).use(router, axios).mount('#app')
+app.use(pinia)
+.use(router)
+.mount('#app');

frontend/src/pages/Conversation.vue

@@ -13,9 +13,7 @@
 
 <script setup>
 import ChatBox from '../components/ChatBox.vue';
-import { defineProps } from 'vue'
 
 const props = defineProps(['id']);
 
-
 </script>

frontend/src/pages/Notifications.vue

@@ -35,14 +35,15 @@
 <script setup>
 import axios from 'axios'
 import { ref, onMounted } from 'vue'
-import { useStore } from 'vuex'
-
-const store = useStore();
 
 const notifications = ref([]);
 
-function getNotifications(){
-    axios.get(`/api/notifications/${store.state.user_id}`,) 
+const cookie_user_id = document.cookie.split('; ')
+            .find(row => row.startsWith('user_id='))
+            ?.split('=')[1];
+
+async function getNotifications(){
+    await axios.get(`/api/notifications/${cookie_user_id}`,) 
     .then(response => {
         notifications.value = response.data;
     }).catch(error => {

frontend/src/pages/Profile.vue

@@ -17,10 +17,10 @@
                     </div>
                 </div>
                 <div class="flex justify-end">
-                    <div class="flex flex-col ml-4" v-if="user.id != store.state.user_id">
+                    <div class="flex flex-col ml-4" v-if="user.id != cookie_user_id" :key="follow">
                         <router-link :to="`/conversation/${user.id}`" class="cursor-pointer" >Send message</router-link>
-                        <span class="cursor-pointer" @click="unfollowUser()">Unfollow</span>
-                        <span class="cursor-pointer" @click="followUser()">Follow</span>
+                        <span v-if="follow" class="cursor-pointer" @click="unfollowUser()">Unfollow</span>
+                        <span v-if="!follow" class="cursor-pointer" @click="followUser()">Follow</span>
                     </div>
                 </div>
             </div>
@@ -32,25 +32,32 @@
 import axios from 'axios';
 import { ref, onMounted } from 'vue'
 import { useRoute } from 'vue-router';
-import { useStore } from 'vuex'
 
-const route = useRoute();
+const cookie_user_id = document.cookie.split('; ')
+            .find(row => row.startsWith('user_id='))
+            ?.split('=')[1];
+
+const cookie_username = document.cookie.split('; ')
+.find(row => row.startsWith('username='))
+?.split('=')[1];
 
-const store = useStore();
+
+const route = useRoute();
 
 const user = ref('');
 const followed_by = ref('');
 const following = ref('');
+const follow = ref(false)
 
 async function logged_user_follows_user(){
-    await axios.get(`/api/user1_follows_user2/${store.state.username}/${route.params.username}`,)
+    await axios.get(`/api/user1_follows_user2/${cookie_username}/${route.params.username}`,)
     .then(response => {
         if(response.data['follows'] == true){
             console.log("USER FOLLOWS PROFILE USER")
-            followed_by.value = true
+            follow.value = true
         }else{
             console.log("USER DOES NOT FOLLOW PROFILE USER")
-            followed_by.value = false
+            follow.value = false
         }
     })
     .catch(error => {
@@ -75,6 +82,7 @@ async function followUser(){
     .catch(error => {
         console.log('error' + error)
     })
+    logged_user_follows_user()
 }
 async function unfollowUser(){
     await axios.post(`/api/unfollow/${route.params.username}`,) 
@@ -84,6 +92,7 @@ async function unfollowUser(){
     .catch(error => {
         console.log('error' + error)
     })
+    logged_user_follows_user()
 }
 
 onMounted(() => {

frontend/src/router/index.js

@@ -1,5 +1,5 @@
 import { createWebHistory, createRouter } from "vue-router"
-import store from '../store/index.js'
+import { useUserStore } from '../store/UserStore.js'
 import Main from "../views/Main.vue"
 import Feed from "../pages/Feed.vue"
 import Conversations from "../components/Conversations.vue"
@@ -126,8 +126,13 @@ const router = createRouter({
 })
 
 router.beforeEach((to, from, next) => {
+
+  const userStore = useUserStore();
+
+  const isAuthenticated = userStore.isAuthenticated;
+
   // if user is not logged in and tries to access a page that requires authentication then redirect to login page
-  if (!store.getters.isAuthenticated && (to.name === 'Feed' || to.name === 'Notifications' || 
+  if (!isAuthenticated && (to.name === 'Feed' || to.name === 'Notifications' || 
   to.name === 'Users' || to.name === 'GlobalChat' || to.name === 'Profile' || to.name === 'EditProfile' || 
   to.name === 'Conversation' || to.name === 'Tweek')) {
     next({ name: 'Login' })