feat: dashboard left bar improvements

apps/web/app/editor/course/[courseid]/activity/[activityid]/edit/page.tsx

@@ -1,5 +1,5 @@
 import { default as React, } from "react";
-import AuthProvider from "@components/Security/AuthProvider";
+import AuthProvider from "@components/Security/AuthProviderDepreceated";
 import EditorWrapper from "@components/Objects/Editor/EditorWrapper";
 import { getCourseMetadataWithAuthHeader } from "@services/courses/courses";
 import { cookies } from "next/headers";

apps/web/app/organizations/page.tsx

@@ -5,7 +5,7 @@ import { deleteOrganizationFromBackend } from "@services/organizations/orgs";
 import useSWR, { mutate } from "swr";
 import { swrFetcher } from "@services/utils/ts/requests";
 import { getAPIUrl, getUriWithOrg } from "@services/config/config";
-import AuthProvider from "@components/Security/AuthProvider";
+import AuthProvider from "@components/Security/AuthProviderDepreceated";
 
 const Organizations = () => {
   const { data: organizations, error } = useSWR(`${getAPIUrl()}orgs/user/page/1/limit/10`, swrFetcher)

apps/web/app/orgs/[orgslug]/(withmenu)/layout.tsx

@@ -1,6 +1,6 @@
 import "@styles/globals.css";
 import { Menu } from "@components/Objects/Menu/Menu";
-import AuthProvider from "@components/Security/AuthProvider";
+import AuthProvider from "@components/Security/AuthProviderDepreceated";
 
 export default function RootLayout({ children, params }: { children: React.ReactNode , params :any}) {
   return (

apps/web/app/orgs/[orgslug]/dash/layout.tsx

@@ -1,5 +1,5 @@
 import LeftMenu from '@components/Dashboard/UI/LeftMenu'
-import AuthProvider from '@components/Security/AuthProvider'
+import AuthProvider from '@components/Security/AuthProviderDepreceated'
 import React from 'react'
 
 function DashboardLayout({ children, params }: { children: React.ReactNode, params: any }) {

apps/web/app/orgs/[orgslug]/layout.tsx

@@ -1,5 +1,6 @@
 'use client';
 import { OrgProvider } from "@components/Contexts/OrgContext";
+import AuthProvider from "@components/Security/AuthContext";
 import { getAPIUrl } from "@services/config/config";
 import { swrFetcher } from "@services/utils/ts/requests";
 import "@styles/globals.css";
@@ -8,10 +9,12 @@ import useSWR from "swr";
 export default function RootLayout({ children, params }: { children: React.ReactNode, params: any }) {
 
   return (
-      <div>
+    <div>
+      <AuthProvider orgslug={params.orgslug}>
         <OrgProvider orgslug={params.orgslug}>
-        {children}
+          {children}
-      </OrgProvider>
+        </OrgProvider>
-      </div>
+      </AuthProvider>
+    </div>
   );
 }

apps/web/app/orgs/[orgslug]/settings/account/passwords/passwords.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { AuthContext } from '@components/Security/AuthProvider';
+import { AuthContext } from '@components/Security/AuthProviderDepreceated';
 import React, { useEffect } from 'react'
 import { Formik, Form, Field, ErrorMessage } from 'formik';
 import { updatePassword } from '@services/settings/password';

apps/web/app/orgs/[orgslug]/settings/account/profile/profile.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { AuthContext } from '@components/Security/AuthProvider';
+import { AuthContext } from '@components/Security/AuthProviderDepreceated';
 import React, { useEffect } from 'react'
 import { Formik, Form, Field, ErrorMessage } from 'formik';
 import { updateProfile } from '@services/settings/profile';

apps/web/app/orgs/[orgslug]/settings/layout.tsx

@@ -3,7 +3,7 @@ import React, { createContext, useState } from 'react'
 import { styled } from '@stitches/react';
 import Link from 'next/link';
 import LearnHouseWhiteLogo from '@public/learnhouse_text_white.png';
-import AuthProvider, { AuthContext } from '@components/Security/AuthProvider';
+import AuthProvider, { AuthContext } from '@components/Security/AuthProviderDepreceated';
 import Avvvatars from 'avvvatars-react';
 import Image from 'next/image';
 import AuthenticatedClientElement from '@components/Security/AuthenticatedClientElement';

apps/web/components/Dashboard/UI/LeftMenu.tsx

@@ -1,33 +1,67 @@
 'use client';
 import { useOrg } from '@components/Contexts/OrgContext';
+import { useAuth } from '@components/Security/AuthContext';
 import ToolTip from '@components/StyledElements/Tooltip/Tooltip'
-import { ArrowLeft, Book, Home } from 'lucide-react'
+import LearnHouseDashboardLogo from '@public/dashLogo.png';
+import Avvvatars from 'avvvatars-react';
+import { ArrowLeft, Book, Home, Settings } from 'lucide-react'
+import Image from 'next/image';
 import Link from 'next/link'
 import React, { use, useEffect } from 'react'
 
 function LeftMenu() {
     const org = useOrg() as any;
+    const auth = useAuth() as any;
+    const [loading, setLoading] = React.useState(true);
+
+    function waitForEverythingToLoad() {
+        if (org && auth) {
+            return true;
+        }
+        return false;
+    }
 
     useEffect(() => {
-
+        if (waitForEverythingToLoad()) {
+            setLoading(false);
+        }
     }
-        , [org])
+        , [loading])
 
 
     return (
         <div
             style={{ background: "linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), radial-gradient(271.56% 105.16% at 50% -5.16%, rgba(255, 255, 255, 0.18) 0%, rgba(0, 0, 0, 0.00) 100%), #2E2D2D" }}
-            className='flex flex-col w-20 justifiy-center bg-black h-screen justify-center text-white'>
+            className='flex flex-col w-24 bg-black h-screen  text-white shadow-xl'>
-            <div className='flex flex-col space-y-5 items-center mx-auto'>
+            <div className='flex flex-col h-full'>
-                <ToolTip content={"Back to " + org?.name} slateBlack sideOffset={8} side='right'  >
+                <div className='flex h-20 mt-6'>
-                    <Link className='bg-white text-black hover:text-white rounded-lg p-2 hover:bg-white/10 transition-all ease-linear' href={`/`} ><ArrowLeft className='hover:text-white' size={18} /></Link>
+                    <Link className='mx-auto' href={"/dash"}>
-                </ToolTip>
+                        <Image alt="Learnhouse logo" width={40} src={LearnHouseDashboardLogo} />
-                <ToolTip content={"Home"} slateBlack sideOffset={8} side='right'  >
+                    </Link>
-                    <Link className='bg-white/5 rounded-lg p-2 hover:bg-white/10 transition-all ease-linear' href={`/dash`} ><Home size={18} /></Link>
+                </div>
-                </ToolTip>
+                <div className='flex grow flex-col justify-center space-y-5 items-center mx-auto'>
-                <ToolTip content={"Courses"} slateBlack sideOffset={8} side='right'  >
+                    <ToolTip content={"Back to " + org?.name} slateBlack sideOffset={8} side='right'  >
-                    <Link className='bg-white/5 rounded-lg p-2 hover:bg-white/10 transition-all ease-linear' href={`/dash/courses`} ><Book size={18} /></Link>
+                        <Link className='bg-white text-black hover:text-white rounded-lg p-2 hover:bg-white/10 transition-all ease-linear' href={`/`} ><ArrowLeft className='hover:text-white' size={18} /></Link>
-                </ToolTip>
+                    </ToolTip>
+                    <ToolTip content={"Home"} slateBlack sideOffset={8} side='right'  >
+                        <Link className='bg-white/5 rounded-lg p-2 hover:bg-white/10 transition-all ease-linear' href={`/dash`} ><Home size={18} /></Link>
+                    </ToolTip>
+                    <ToolTip content={"Courses"} slateBlack sideOffset={8} side='right'  >
+                        <Link className='bg-white/5 rounded-lg p-2 hover:bg-white/10 transition-all ease-linear' href={`/dash/courses`} ><Book size={18} /></Link>
+                    </ToolTip>
+                </div>
+                <div className='flex flex-col mx-auto pb-7 space-y-2'>
+                    <Link href={'/dash/user/settings'} className='py-3'>
+                        <Settings className='mx-auto text-neutral-400 cursor-pointer' size={18} />
+                    </Link>
+                    <div className="flex items-center">
+                        <div className="mx-auto shadow-lg">
+                            <Avvvatars radius={3} border borderColor='white' borderSize={3} size={35} value={auth.user.user_uuid} style="shape" />
+                        </div>
+                    </div>
+                    <div className="text-xs px-4 text-gray-200 ">{auth.user.username}</div>
+
+                </div>
             </div>
 
 

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

@@ -2,7 +2,7 @@
 import React from "react";
 import { useEditor, EditorContent } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
-import { AuthContext } from "../../Security/AuthProvider";
+import { AuthContext } from "../../Security/AuthProviderDepreceated";
 import learnhouseIcon from "public/learnhouse_icon.png";
 import { ToolbarButtons } from "./Toolbar/ToolbarButtons";
 import { motion } from "framer-motion";

apps/web/components/Objects/Modals/Feedback/Feedback.tsx

@@ -4,7 +4,7 @@ import * as Form from '@radix-ui/react-form'
 import React, { useState } from "react";
 import * as Sentry from '@sentry/browser';
 import { CheckCircleIcon } from "lucide-react";
-import { AuthContext } from "@components/Security/AuthProvider";
+import { AuthContext } from "@components/Security/AuthProviderDepreceated";
 import { randomUUID } from "crypto";
 
 export const FeedbackModal = (user: any) => {

apps/web/components/Security/AuthContext.tsx

@@ -0,0 +1,58 @@
+import { getNewAccessTokenUsingRefreshToken, getUserInfo } from '@services/auth/auth';
+import { getAPIUrl } from '@services/config/config';
+import { swrFetcher } from '@services/utils/ts/requests';
+import React, { useEffect } from 'react'
+import useSWR from 'swr';
+
+const AuthContext = React.createContext({})
+
+type Auth = {
+  access_token: string;
+  isAuthenticated: boolean;
+  user: any;
+}
+
+function AuthProvider({ children, orgslug }: { children: React.ReactNode, orgslug: string }) {
+  const [auth, setAuth] = React.useState<Auth>({ access_token: "", isAuthenticated: false, user: {} });
+
+  async function checkRefreshToken() {
+    //deleteCookie("access_token_cookie");
+    let data = await getNewAccessTokenUsingRefreshToken();
+    if (data) {
+      return data.access_token;
+    }
+  }
+
+  async function checkAuth() {
+    try {
+      let access_token = await checkRefreshToken();
+      let userInfo = {};
+
+      if (access_token) {
+        userInfo = await getUserInfo(access_token);
+        setAuth({ access_token: access_token, isAuthenticated: true, user: userInfo });
+
+      } else {
+        setAuth({ access_token: access_token, isAuthenticated: false, user: userInfo });
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  useEffect(() => {
+    checkAuth();
+  }, [])
+
+  return (
+    <AuthContext.Provider value={auth}>
+      {children}
+    </AuthContext.Provider>
+  )
+}
+
+export function useAuth() {
+  return React.useContext(AuthContext);
+}
+
+export default AuthProvider

apps/web/components/Security/AuthenticatedClientElement.tsx

@@ -1,6 +1,6 @@
 'use client';
 import React from "react";
-import { AuthContext } from "./AuthProvider";
+import { AuthContext } from "./AuthProviderDepreceated";
 import useSWR, { mutate } from "swr";
 import { getAPIUrl } from "@services/config/config";
 import { swrFetcher } from "@services/utils/ts/requests";

apps/web/components/Security/HeaderProfileBox.tsx

@@ -2,7 +2,7 @@
 import React from "react";
 import styled from "styled-components";
 import Link from "next/link";
-import { AuthContext } from "./AuthProvider";
+import { AuthContext } from "./AuthProviderDepreceated";
 import Avvvatars from "avvvatars-react";
 import { GearIcon } from "@radix-ui/react-icons";