[FIXES] Auth Check In User Pref And Current Active User (#262)

#262

Author: dineshsingh1

.changeset/green-coins-enjoy.md

@@ -0,0 +1,5 @@
+---
+'mexit-webapp': patch
+---
+
+Auth check in update preferences & active current user

apps/extension/src/Components/Sidebar/NotesInfoBar.tsx

@@ -4,8 +4,8 @@ import searchLine from '@iconify/icons-ri/search-line'
 import { Icon } from '@iconify/react'
 import { debounce } from 'lodash'
 
-import { MEXIT_FRONTEND_URL_BASE, mog } from '@mexit/core'
-import { SidebarListFilterWrapper, SidebarListFilter, Input, SnippetCards, copyTextToClipboard } from '@mexit/shared'
+import { mog } from '@mexit/core'
+import { SidebarListFilterWrapper, SidebarListFilter, Input, SnippetCards } from '@mexit/shared'
 
 import useRaju from '../../Hooks/useRaju'
 import useDataStore from '../../Stores/useDataStore'
@@ -25,7 +25,6 @@ export const NotesInfoBar = () => {
 
   const onSearch = async (newSearchTerm: string) => {
     const res = await dispatch('SEARCH', ['node'], newSearchTerm)
-    mog('node search results', { res, newSearchTerm })
 
     setSearchedNodes(res?.map((item) => item.id))
   }

apps/webapp/src/Components/Editor/Banner/index.tsx

@@ -32,10 +32,10 @@ const Banner: React.FC<BannerType> = ({
 
   const currentUser = useAuthStore((s) => s.userDetails)
   const activeUsers = useRouteStore((s) => Settify(s.routes[route]?.users))
-  // const usersExcludingMe = activeUsers.filter((userId) => currentUser?.userID !== userId)
 
   const isUserOnly = activeUsers.includes(currentUser?.userID)
-  // const layoutChange = useMediaQuery({ minWidth: size.tiny })
+
+  if (activeUsers?.length === 1 && isUserOnly) return
 
   return (
     <BannerContainer>

apps/webapp/src/Components/EditorInfobar/Metadata.tsx

@@ -12,6 +12,7 @@ import { DataGroup, DataWrapper, MetadataWrapper } from '@mexit/shared'
 import { RelativeTime } from '@mexit/shared'
 
 import { useMentions } from '../../Hooks/useMentions'
+import { useAuthStore } from '../../Stores/useAuth'
 import { useContentStore } from '../../Stores/useContentStore'
 import { useEditorStore } from '../../Stores/useEditorStore'
 import { useMentionStore } from '../../Stores/useMentionsStore'
@@ -68,10 +69,17 @@ const Metadata = ({
 
   const sharedUsers = useMemo(() => {
     const sharedUsersOfNode = getSharedUsersOfNodeOfSpace(nodeId, namespaceId)
+    const currentUser = useAuthStore.getState().userDetails
     mog('ACTIVE USERS', { activeUsers, mentionable })
-    return sharedUsersOfNode
-      .map((user) => ({ userId: user.userID, active: activeUsers.includes(user.userID) }))
+
+    const usersWithStatus = sharedUsersOfNode
+      .map((user) => {
+        const isUserActive = currentUser?.userID === user.userID || activeUsers?.includes(user.userID)
+        return { userId: user.userID, active: isUserActive }
+      })
       .sort((a, b) => Number(a.active) - Number(b.active))
+
+    return usersWithStatus
   }, [location, activeUsers, mentionable, namespaceId, nodeId])
 
   if (!publicMetadata && (content === undefined || content.metadata === undefined || metadata === undefined || isEmpty))
@@ -83,7 +91,7 @@ const Metadata = ({
         <DataGroup>
           {metadata.lastEditedBy !== undefined && (
             <DataWrapper interactive={metadata.updatedAt !== undefined}>
-              {metadata.lastEditedBy !== undefined && !publicMetadata ? (
+              {metadata.lastEditedBy !== undefined ? (
                 <ProfileIcon data-title={metadata.lastEditedBy}>
                   <ProfileImageWithToolTip props={{ userid: metadata.lastEditedBy, size: 16 }} placement="bottom" />
                 </ProfileIcon>

apps/webapp/src/Editor/MexEditor.tsx

@@ -1,12 +1,6 @@
 import { useState, useEffect, ReactElement } from 'react'
 
-import {
-  Plate,
-  selectEditor, // PlaceholderProps,
-  PlatePluginComponent,
-  SelectEditorOptions,
-  getPlateEditorRef
-} from '@udecode/plate'
+import { Plate, PlatePluginComponent, SelectEditorOptions } from '@udecode/plate'
 import { DndProvider } from 'react-dnd'
 import { HTML5Backend } from 'react-dnd-html5-backend'
 import { EditableProps } from 'slate-react/dist/components/editable'

apps/webapp/src/Hooks/API/usePolling.tsx

@@ -6,7 +6,6 @@ import { useAuthStore } from '../../Stores/useAuth'
 import { useBookmarks } from '../useBookmarks'
 import { useFetchShareData } from '../useFetchShareData'
 import { useNamespaceApi } from './useNamespaceAPI'
-import { useApi } from './useNodeAPI'
 
 export const PollingInterval = {
   [PollActions.shared]: 5 * 60 * 1000, // 5 minutes

apps/webapp/src/Hooks/API/useUserAPI.ts

@@ -46,7 +46,7 @@ export const useUserService = () => {
     if (user) return user
 
     try {
-      return await client.get<any>(apiURLs.user.getFromEmail(email), { headers: workspaceHeaders() }).then((resp) => {
+      return await client.get<any>(apiURLs.user.getFromEmail(email)).then((resp) => {
         mog('Response', { data: resp.data })
         if (resp?.data?.userId && resp?.data?.name) {
           addUser({
@@ -74,27 +74,23 @@ export const useUserService = () => {
     if (user) return user
 
     try {
-      return await client
-        .get(apiURLs.user.getFromUserId(userID), {
-          headers: workspaceHeaders()
-        })
-        .then((resp: any) => {
-          mog('Response', { data: resp.data })
-          if (resp?.data?.email && resp?.data?.name) {
-            addUser({
-              userID,
-              email: resp?.data?.email,
-              alias: resp?.data?.alias ?? resp?.data?.name,
-              name: resp?.data?.name
-            })
-          }
-          return {
+      return await client.get(apiURLs.user.getFromUserId(userID)).then((resp: any) => {
+        mog('Response', { data: resp.data })
+        if (resp?.data?.email && resp?.data?.name) {
+          addUser({
             userID,
-            email: resp?.data?.email ?? undefined,
+            email: resp?.data?.email,
             alias: resp?.data?.alias ?? resp?.data?.name,
             name: resp?.data?.name
-          }
-        })
+          })
+        }
+        return {
+          userID,
+          email: resp?.data?.email ?? undefined,
+          alias: resp?.data?.alias ?? resp?.data?.name,
+          name: resp?.data?.name
+        }
+      })
     } catch (e) {
       mog('Error Fetching User Details', { error: e, userID })
       return { userID }
@@ -131,9 +127,11 @@ export const useUserService = () => {
     }
 
     try {
-      return await client.put(apiURLs.user.updateInfo, { id: userID, preference: userPreferences }).then((resp) => {
-        return true
-      })
+      return await client
+        .put(apiURLs.user.updateInfo, { id: userID, preference: userPreferences }, { headers: workspaceHeaders() })
+        .then((resp) => {
+          return true
+        })
     } catch (e) {
       mog('Error Updating User Info', { error: e, userID })
       return false

apps/webapp/src/Hooks/useSyncUserPreferences.ts

@@ -3,12 +3,14 @@ import { useEffect } from 'react'
 import { mog } from '@mexit/core'
 import { mergeUserPreferences } from '@mexit/shared'
 
+import { useAuthStore } from '../Stores/useAuth'
 import { useUserPreferenceStore } from '../Stores/userPreferenceStore'
 import { useUserService } from './API/useUserAPI'
 
 const USER_PREF_AUTO_SAVE_MS = 30 * 60 * 1000 // 30 minutes
 
 export const useAutoSyncUserPreference = () => {
+  const isAuthenticated = useAuthStore((store) => store.authenticated)
   const getUserPreferences = useUserPreferenceStore((s) => s.getUserPreferences)
   const setUserPreferences = useUserPreferenceStore((store) => store.setUserPreferences)
   const hasHydrated = useUserPreferenceStore((s) => s._hasHydrated)
@@ -34,17 +36,20 @@ export const useAutoSyncUserPreference = () => {
     // mog(`Fetching User Preferences`)
     if (hasHydrated) {
       // mog('Hydration finished')
-      updateCurrentUserPreferences()
+      if (isAuthenticated) updateCurrentUserPreferences()
     }
-  }, [hasHydrated])
+  }, [hasHydrated, isAuthenticated])
 
   /**
    * Saves the user preference at every interval
    */
   useEffect(() => {
-    const intervalId = setInterval(() => {
-      updateUserPreferences()
-    }, USER_PREF_AUTO_SAVE_MS)
-    return () => clearInterval(intervalId)
-  }, [])
+    if (isAuthenticated) {
+      const intervalId = setInterval(() => {
+        updateUserPreferences()
+      }, USER_PREF_AUTO_SAVE_MS)
+
+      return () => clearInterval(intervalId)
+    }
+  }, [isAuthenticated])
 }