fix: session auth issues

apps/web/components/Objects/Activities/AI/AIActivityAsk.tsx

@@ -1,4 +1,4 @@
-import { useSession } from 'next-auth/react'
+import { useLHSession } from '@components/Contexts/LHSessionContext'
 import {
   sendActivityAIChatMessage,
   startActivityAIChatSession,
@@ -74,7 +74,7 @@ type ActivityChatMessageBoxProps = {
 }
 
 function ActivityChatMessageBox(props: ActivityChatMessageBoxProps) {
-  const session = useSession() as any
+  const session = useLHSession() as any
   const aiChatBotState = useAIChatBot() as AIChatBotStateTypes
   const dispatchAIChatBot = useAIChatBotDispatch() as any
 
@@ -328,7 +328,7 @@ type AIMessageProps = {
 }
 
 function AIMessage(props: AIMessageProps) {
-  const session = useSession() as any
+  const session = useLHSession() as any
 
   const words = props.message.message.split(' ')
 
@@ -378,7 +378,7 @@ const AIMessagePlaceHolder = (props: {
   activity_uuid: string
   sendMessage: any
 }) => {
-  const session = useSession() as any
+  const session = useLHSession() as any
   const [feedbackModal, setFeedbackModal] = React.useState(false)
   const aiChatBotState = useAIChatBot() as AIChatBotStateTypes
 

apps/web/components/Objects/CourseUpdates/CourseUpdates.tsx

@@ -20,12 +20,15 @@ import toast from 'react-hot-toast'
 import ConfirmationModal from '@components/StyledElements/ConfirmationModal/ConfirmationModal'
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
+import { useLHSession } from '@components/Contexts/LHSessionContext'
 
 dayjs.extend(relativeTime);
 
 function CourseUpdates() {
   const course = useCourse() as any;
-  const { data: updates } = useSWR(`${getAPIUrl()}courses/${course?.courseStructure.course_uuid}/updates`, swrFetcher)
+  const session = useLHSession() as any;
+  const access_token = session?.data?.tokens?.access_token;
+  const { data: updates } = useSWR(`${getAPIUrl()}courses/${course?.courseStructure.course_uuid}/updates`, (url) => swrFetcher(url, access_token))
   const [isModelOpen, setIsModelOpen] = React.useState(false)
 
   function handleModelOpen() {
@@ -71,7 +74,7 @@ function CourseUpdates() {
 
 const UpdatesSection = () => {
   const [selectedView, setSelectedView] = React.useState('list')
-  const isAdmin = useAdminStatus() as boolean;
+  const adminStatus = useAdminStatus() ;
   return (
     <div className='bg-white/95 backdrop-blur-md nice-shadow rounded-lg w-[700px] overflow-hidden'>
       <div className='bg-gray-50/70 flex justify-between outline outline-1 rounded-lg outline-neutral-200/40'>
@@ -80,7 +83,7 @@ const UpdatesSection = () => {
           <span>Updates</span>
 
         </div>
-        {isAdmin && <div
+        {adminStatus.isAdmin && <div
           onClick={() => setSelectedView('new')}
           className='py-2 px-4 space-x-2 items-center flex cursor-pointer text-xs font-medium hover:bg-gray-200 bg-gray-100 outline outline-1  outline-neutral-200/40'>
           <PencilLine size={14} />
@@ -98,6 +101,7 @@ const UpdatesSection = () => {
 const NewUpdateForm = ({ setSelectedView }: any) => {
   const org = useOrg() as any;
   const course = useCourse() as any;
+  const session = useLHSession() as any;
 
   const validate = (values: any) => {
     const errors: any = {}
@@ -124,7 +128,7 @@ const NewUpdateForm = ({ setSelectedView }: any) => {
         course_uuid: course.courseStructure.course_uuid,
         org_id: org.id
       }
-      const res = await createCourseUpdate(body)
+      const res = await createCourseUpdate(body, session.data?.tokens?.access_token)
       if (res.status === 200) {
         toast.success('Update added successfully')
         setSelectedView('list')
@@ -192,23 +196,25 @@ const NewUpdateForm = ({ setSelectedView }: any) => {
 
 const UpdatesListView = () => {
   const course = useCourse() as any;
-  const isAdmin = useAdminStatus() as boolean;
-  const { data: updates } = useSWR(`${getAPIUrl()}courses/${course?.courseStructure.course_uuid}/updates`, swrFetcher)
+  const adminStatus = useAdminStatus() ;
+  const session = useLHSession() as any;
+  const access_token = session?.data?.tokens?.access_token;
+  const { data: updates } = useSWR(`${getAPIUrl()}courses/${course?.courseStructure?.course_uuid}/updates`, (url) => swrFetcher(url, access_token))
 
   return (
     <div className='px-5 bg-white overflow-y-auto' style={{ maxHeight: '400px' }}>
-      {updates && updates.map((update: any) => (
+      {updates && !adminStatus.loading && updates.map((update: any) => (
         <div key={update.id} className='py-2 border-b border-neutral-200 antialiased'>
           <div className='font-bold text-gray-500 flex space-x-2 items-center justify-between '>
             <div className='flex space-x-2 items-center'>
               <span> {update.title}</span>
-              <span 
-              title={"Created at " + dayjs(update.creation_date).format('MMMM D, YYYY')}
-              className='text-xs font-semibold text-gray-300'>
-              {dayjs(update.creation_date).fromNow()}
+              <span
+                title={"Created at " + dayjs(update.creation_date).format('MMMM D, YYYY')}
+                className='text-xs font-semibold text-gray-300'>
+                {dayjs(update.creation_date).fromNow()}
               </span>
             </div>
-            {isAdmin && <DeleteUpdateButton update={update} />}</div>
+            {adminStatus.isAdmin &&  !adminStatus.loading && <DeleteUpdateButton update={update} />}</div>
           <div className='text-gray-600'>{update.content}</div>
         </div>
       ))}
@@ -223,11 +229,12 @@ const UpdatesListView = () => {
 }
 
 const DeleteUpdateButton = ({ update }: any) => {
+  const session = useLHSession() as any;
   const course = useCourse() as any;
   const org = useOrg() as any;
 
   const handleDelete = async () => {
-    const res = await deleteCourseUpdate(course.courseStructure.course_uuid, update.courseupdate_uuid)
+    const res = await deleteCourseUpdate(course.courseStructure.course_uuid, update.courseupdate_uuid, session.data?.tokens?.access_token)
     if (res.status === 200) {
       toast.success('Update deleted successfully')
       mutate(`${getAPIUrl()}courses/${course?.courseStructure.course_uuid}/updates`)

apps/web/components/Objects/Editor/ActiveAvatars.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import UserAvatar from '../UserAvatar'
-import { useSession } from 'next-auth/react'
+import { useLHSession } from '@components/Contexts/LHSessionContext'
 import { getUserAvatarMediaDirectory } from '@services/media/media';
 import { getCollaborationServerUrl } from '@services/config/config';
 import { useOrg } from '@components/Contexts/OrgContext';
@@ -11,7 +11,7 @@ type ActiveAvatarsProps = {
 }
 
 function ActiveAvatars(props: ActiveAvatarsProps) {
-    const session = useSession() as any;
+    const session = useLHSession() as any;
     const org = useOrg() as any;
     const [activeUsers, setActiveUsers] = useState({} as any);
 

apps/web/components/Objects/Editor/Editor.tsx

@@ -41,7 +41,7 @@ import html from 'highlight.js/lib/languages/xml'
 import python from 'highlight.js/lib/languages/python'
 import java from 'highlight.js/lib/languages/java'
 import { CourseProvider } from '@components/Contexts/CourseContext'
-import { useSession } from 'next-auth/react'
+import { useLHSession } from '@components/Contexts/LHSessionContext'
 import AIEditorToolkit from './AI/AIEditorToolkit'
 import useGetAIFeatures from '@components/AI/Hooks/useGetAIFeatures'
 import UserAvatar from '../UserAvatar'
@@ -65,7 +65,7 @@ interface Editor {
 }
 
 function Editor(props: Editor) {
-  const session = useSession() as any
+  const session = useLHSession() as any
   const dispatchAIEditor = useAIEditorDispatch() as any
   const aiEditorState = useAIEditor() as AIEditorStateTypes
   const is_ai_feature_enabled = useGetAIFeatures({ feature: 'editor' })

apps/web/components/Objects/Editor/EditorWrapper.tsx

@@ -5,7 +5,7 @@ import { updateActivity } from '@services/courses/activities'
 import { toast } from 'react-hot-toast'
 import Toast from '@components/StyledElements/Toast/Toast'
 import { OrgProvider } from '@components/Contexts/OrgContext'
-import { useSession } from 'next-auth/react'
+import { useLHSession } from '@components/Contexts/LHSessionContext'
 
 // Collaboration
 import { HocuspocusProvider } from '@hocuspocus/provider'
@@ -24,7 +24,7 @@ interface EditorWrapperProps {
 }
 
 function EditorWrapper(props: EditorWrapperProps): JSX.Element {
-  const session = useSession() as any
+  const session = useLHSession() as any
   // Define provider in the state
   const [provider, setProvider] = React.useState<HocuspocusProvider | null>(null);
   const [thisPageColor, setThisPageColor] = useState(randomColor({ luminosity: 'light' }) as string)

apps/web/components/Objects/Menu/Menu.tsx

@@ -7,15 +7,15 @@ import MenuLinks from './MenuLinks'
 import { getOrgLogoMediaDirectory } from '@services/media/media'
 import useSWR from 'swr'
 import { swrFetcher } from '@services/utils/ts/requests'
+import { useLHSession } from '@components/Contexts/LHSessionContext'
+import { useOrg } from '@components/Contexts/OrgContext'
 
 export const Menu = (props: any) => {
   const orgslug = props.orgslug
+  const session = useLHSession() as any;
+  const access_token = session?.data?.tokens?.access_token;
   const [feedbackModal, setFeedbackModal] = React.useState(false)
-  const {
-    data: org,
-    error: error,
-    isLoading,
-  } = useSWR(`${getAPIUrl()}orgs/slug/${orgslug}`, swrFetcher)
+  const org = useOrg() as any;
 
   function closeFeedbackModal() {
     setFeedbackModal(false)

apps/web/components/Objects/Modals/Course/Create/CreateCourse.tsx

@@ -15,9 +15,11 @@ import React, { useState } from 'react'
 import { BarLoader } from 'react-spinners'
 import { revalidateTags } from '@services/utils/ts/requests'
 import { useRouter } from 'next/navigation'
+import { useLHSession } from '@components/Contexts/LHSessionContext'
 
 function CreateCourseModal({ closeModal, orgslug }: any) {
   const [isSubmitting, setIsSubmitting] = useState(false)
+  const session = useLHSession()
   const [name, setName] = React.useState('')
   const [description, setDescription] = React.useState('')
   const [learnings, setLearnings] = React.useState('')
@@ -71,7 +73,8 @@ function CreateCourseModal({ closeModal, orgslug }: any) {
     let status = await createNewCourse(
       orgId,
       { name, description, tags, visibility },
-      thumbnail
+      thumbnail,
+      session.data?.tokens?.access_token
     )
     await revalidateTags(['courses'], orgslug)
     setIsSubmitting(false)
@@ -80,9 +83,6 @@ function CreateCourseModal({ closeModal, orgslug }: any) {
       closeModal()
       router.refresh()
       await revalidateTags(['courses'], orgslug)
-
-      // refresh page (FIX for Next.js BUG)
-      // window.location.reload();
     } else {
       alert('Error creating course, please see console logs')
     }

apps/web/components/Objects/Modals/Dash/OrgAccess/OrgInviteCodeGenerate.tsx

@@ -3,6 +3,7 @@ import { getAPIUrl } from '@services/config/config'
 import { createInviteCode, createInviteCodeWithUserGroup } from '@services/organizations/invites'
 import { swrFetcher } from '@services/utils/ts/requests'
 import { Shield, Ticket } from 'lucide-react'
+import { useLHSession } from '@components/Contexts/LHSessionContext'
 import React, { useEffect } from 'react'
 import toast from 'react-hot-toast'
 import useSWR, { mutate } from 'swr'
@@ -13,6 +14,7 @@ type OrgInviteCodeGenerateProps = {
 
 function OrgInviteCodeGenerate(props: OrgInviteCodeGenerateProps) {
     const org = useOrg() as any
+    const session = useLHSession()
     const [usergroup_id, setUsergroup_id] = React.useState(0);
     const { data: usergroups } = useSWR(
         org ? `${getAPIUrl()}usergroups/org/${org.id}` : null,
@@ -20,7 +22,7 @@ function OrgInviteCodeGenerate(props: OrgInviteCodeGenerateProps) {
     )
 
     async function createInviteWithUserGroup() {
-        let res = await createInviteCodeWithUserGroup(org.id, usergroup_id)
+        let res = await createInviteCodeWithUserGroup(org.id, usergroup_id, session.data?.tokens?.access_token)
         if (res.status == 200) {
             mutate(`${getAPIUrl()}orgs/${org.id}/invites`)
             props.setInvitesModal(false)
@@ -30,7 +32,7 @@ function OrgInviteCodeGenerate(props: OrgInviteCodeGenerateProps) {
     }
 
     async function createInvite() {
-        let res = await createInviteCode(org.id)
+        let res = await createInviteCode(org.id, session.data?.tokens?.access_token)
         if (res.status == 200) {
             mutate(`${getAPIUrl()}orgs/${org.id}/invites`)
             props.setInvitesModal(false)

apps/web/components/Objects/Thumbnails/CollectionThumbnail.tsx

@@ -7,6 +7,7 @@ import { deleteCollection } from '@services/courses/collections'
 import { getCourseThumbnailMediaDirectory } from '@services/media/media'
 import { revalidateTags } from '@services/utils/ts/requests'
 import { X } from 'lucide-react'
+import { useLHSession } from '@components/Contexts/LHSessionContext'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
 import React from 'react'
@@ -74,9 +75,10 @@ function CollectionThumbnail(props: PropsType) {
 
 const CollectionAdminEditsArea = (props: any) => {
   const router = useRouter()
+  const session = useLHSession() ;
 
   const deleteCollectionUI = async (collectionId: number) => {
-    await deleteCollection(collectionId)
+    await deleteCollection(collectionId, session.data?.tokens?.access_token)
     await revalidateTags(['collections'], props.orgslug)
     // reload the page
     router.refresh()

apps/web/components/Objects/Thumbnails/CourseThumbnail.tsx

@@ -7,6 +7,7 @@ import { deleteCourseFromBackend } from '@services/courses/courses'
 import { getCourseThumbnailMediaDirectory } from '@services/media/media'
 import { revalidateTags } from '@services/utils/ts/requests'
 import { Settings, X } from 'lucide-react'
+import { useLHSession } from '@components/Contexts/LHSessionContext'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
 import React, { useEffect } from 'react'
@@ -24,15 +25,16 @@ function removeCoursePrefix(course_uuid: string) {
 function CourseThumbnail(props: PropsType) {
   const router = useRouter()
   const org = useOrg() as any
+  const session = useLHSession();
 
   async function deleteCourses(course_uuid: any) {
-    await deleteCourseFromBackend(course_uuid)
+    await deleteCourseFromBackend(course_uuid, session.data?.tokens?.access_token)
     await revalidateTags(['courses'], props.orgslug)
 
     router.refresh()
   }
 
-  useEffect(() => {}, [org])
+  useEffect(() => { }, [org])
 
   return (
     <div className="relative">
@@ -92,8 +94,8 @@ const AdminEditsArea = (props: {
           href={getUriWithOrg(
             props.orgSlug,
             '/dash/courses/course/' +
-              removeCoursePrefix(props.courseId) +
-              '/general'
+            removeCoursePrefix(props.courseId) +
+            '/general'
           )}
         >
           <div

apps/web/components/Objects/UserAvatar.tsx

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react'
 import { getUriWithOrg } from '@services/config/config'
 import { useParams } from 'next/navigation'
 import { getUserAvatarMediaDirectory } from '@services/media/media'
-import { useSession } from 'next-auth/react'
+import { useLHSession } from '@components/Contexts/LHSessionContext'
 
 type UserAvatarProps = {
   width?: number
@@ -20,7 +20,7 @@ type UserAvatarProps = {
 }
 
 function UserAvatar(props: UserAvatarProps) {
-  const session = useSession() as any
+  const session = useLHSession() as any
   const params = useParams() as any
 
   function checkUrlProtocol(url: string): boolean {