Vue3: migrating from vuex to Pinia (#249)

* Vue3: migrating from vuex to Pinia

* toggle input fixes

* update configureCompat

---------

Co-authored-by: Forms Dev <chirag+new@notionforms.io>

resources/js/middleware/admin.js

@@ -1,7 +1,8 @@
-import store from '~/store'
+import { useAuthStore } from '../stores/auth';
 
 export default (to, from, next) => {
-  if (!store.getters['auth/user'].admin) {
+  const authStore = useAuthStore()
+  if (!authStore.user?.admin) {
     next({ name: 'home' })
   } else {
     next()

resources/js/middleware/auth.js

@@ -1,8 +1,9 @@
-import store from '~/store'
+import { useAuthStore } from '../stores/auth';
 import Cookies from 'js-cookie'
 
 export default async (to, from, next) => {
-  if (!store.getters['auth/check']) {
+  const authStore = useAuthStore()
+  if (!authStore.check) {
     Cookies.set('intended_url', to.path)
 
     next({ name: 'login' })

resources/js/middleware/check-auth.js

@@ -1,4 +1,4 @@
-import store from '~/store'
+import { useAuthStore } from '../stores/auth';
 import * as Sentry from '@sentry/vue'
 
 export function initCrisp (user) {
@@ -36,12 +36,13 @@ export function initSentry (user) {
 }
 
 export default async (to, from, next) => {
-  if (!store.getters['auth/check'] &&
-    store.getters['auth/token'] !== null &&
-    store.getters['auth/token'] !== undefined
+  const authStore = useAuthStore()
+  if (!authStore.check &&
+    authStore.token !== null &&
+    authStore.token !== undefined
   ) {
     try {
-      store.dispatch('auth/fetchUser').then((user) => {
+      authStore.fetchUser().then((user) => {
         initCrisp(user)
         initSentry(user)
       })

resources/js/middleware/guest.js

@@ -1,7 +1,8 @@
-import store from '~/store'
+import { useAuthStore } from '../stores/auth';
 
 export default (to, from, next) => {
-  if (store.getters['auth/check']) {
+  const authStore = useAuthStore()
+  if (authStore.check) {
     next({ name: 'home' })
   } else {
     next()

resources/js/middleware/notion-connection.js

@@ -1,7 +1,8 @@
-import store from '~/store'
+import { useAuthStore } from '../stores/auth';
 
 export default async (to, from, next) => {
-  if (store.getters['auth/check'] && store.getters['auth/user'].workspaces_count === 0) {
+  const authStore = useAuthStore()
+  if (authStore.check && authStore.user?.workspaces_count === 0) {
     if ([
       'forms.create',
       'forms.show',

resources/js/middleware/role.js

@@ -1,4 +1,4 @@
-import store from '~/store'
+import { useAuthStore } from '../stores/auth';
 
 /**
  * This is middleware to check the current user role.
@@ -7,14 +7,13 @@ import store from '~/store'
  */
 
 export default (to, from, next, roles) => {
-  // Grab the user
-  const user = store.getters['auth/user']
-
+  const authStore = useAuthStore()
+  
   // Split roles into an array
   roles = roles.split(',')
 
   // Check if the user has one of the required roles...
-  if (!roles.includes(user.role)) {
+  if (!roles.includes(authStore.user?.role)) {
     next('/unauthorized')
   }
 

resources/js/middleware/subscribed.js

@@ -1,7 +1,8 @@
-import store from '~/store'
+import { useAuthStore } from '../stores/auth';
 
 export default (to, from, next) => {
-  if (!store.getters['auth/user'].is_subscribed) {
+  const authStore = useAuthStore()
+  if (!authStore.user?.is_subscribed) {
     next({ name: 'pricing' })
   } else {
     next()