feat: menu upgrades

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

@@ -2,7 +2,7 @@ import "@styles/globals.css";
 import { Menu } from "@components/UI/Elements/Menu/Menu";
 import AuthProvider from "@components/Security/AuthProvider";
 
-export default function RootLayout({ children, params }: { children: React.ReactNode , params:any}) {
+export default async function RootLayout({ children, params }: { children: React.ReactNode , params:any}) {
   
   return (
     <>

front/components/UI/Elements/Menu/Menu.tsx

@@ -4,19 +4,19 @@ import learnhouseLogo from "public/learnhouse_logo.png";
 import Link from "next/link";
 import Image from "next/image";
 import { getUriWithOrg } from "@services/config/config";
-import { getOrganizationContextInfo } from "@services/organizations/orgs";
+import { getOrganizationContextInfo, getOrganizationContextInfoNoAsync } from "@services/organizations/orgs";
 import ClientComponentSkeleton from "@components/UI/Utils/ClientComp";
 import { HeaderProfileBox } from "@components/Security/HeaderProfileBox";
 
-export const Menu = async (props: any) => {
+export const Menu =  (props: any) => {
     const orgslug = props.orgslug;
-    const org = await getOrganizationContextInfo(orgslug, { revalidate: 1800, tags: ['organizations'] });
+    const org =  getOrganizationContextInfoNoAsync(orgslug, { revalidate: 1800, tags: ['organizations'] });
     console.log(org);
 
     return (
         <>
             <div className="h-[60px]"></div>
-            <div className="backdrop-blur-lg bg-white/90 fixed flex top-0 left-0 right-0 h-[60px] items-center pl-10 pr-10 space-x-4 shadow-[0px_4px_16px_rgba(0,0,0,0.02)] z-50">
+            <div className="backdrop-blur-lg bg-white/90 fixed flex top-0 left-0 right-0 h-[60px] items-center pl-5 pr-5 space-x-5 shadow-[0px_4px_16px_rgba(0,0,0,0.02)] z-50">
                 <div className="logo flex ">
                     <Link href={getUriWithOrg(orgslug, "/")}>
                         <div className="flex w-auto h-9 rounded-md items-center m-auto justify-center" >
@@ -46,7 +46,7 @@ const LinkItem = (props: any, orgslug: any) => {
     const link = props.link;
     return (
         <Link href={getUriWithOrg(orgslug, link)}>
-            <li className="flex space-x-2 items-center text-[#909192]">
+            <li className="flex space-x-2 items-center text-[#909192] font-medium">
                 {props.type == 'courses' &&
                     <>
                         <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">

front/components/UI/Elements/Menu/ProfileArea.tsx

@@ -0,0 +1,156 @@
+"use client";
+import React from "react";
+import styled from "styled-components";
+import Link from "next/link";
+import Avvvatars from "avvvatars-react";
+import { GearIcon } from "@radix-ui/react-icons";
+import { getRefreshToken, getUserInfo } from "@services/auth/auth";
+import { usePathname } from "next/navigation";
+import { useRouter } from "next/router";
+
+export interface Auth {
+  access_token: string;
+  isAuthenticated: boolean;
+  userInfo: any;
+  isLoading: boolean;
+}
+
+function ProfileArea() {
+
+
+  const PRIVATE_ROUTES = ["/course/*/edit", "/settings*", "/trail"];
+  const NON_AUTHENTICATED_ROUTES = ["/login", "/register"];
+
+
+  const router = useRouter();
+  const pathname = usePathname();
+  const [auth, setAuth] = React.useState<Auth>({ access_token: "", isAuthenticated: false, userInfo: {}, isLoading: true });
+
+  async function checkRefreshToken() {
+    let data = await getRefreshToken();
+    if (data) {
+      return data.access_token;
+    }
+  }
+
+
+  async function checkAuth() {
+    try {
+      let access_token = await checkRefreshToken();
+      let userInfo = {};
+      let isLoading = false;
+
+      if (access_token) {
+        userInfo = await getUserInfo(access_token);
+        setAuth({ access_token, isAuthenticated: true, userInfo, isLoading });
+
+        // Redirect to home if user is trying to access a NON_AUTHENTICATED_ROUTES route
+
+        if (NON_AUTHENTICATED_ROUTES.some((route) => new RegExp(`^${route.replace("*", ".*")}$`).test(pathname))) {
+          router.push("/");
+        }
+
+
+      } else {
+        setAuth({ access_token, isAuthenticated: false, userInfo, isLoading });
+
+        // Redirect to login if user is trying to access a private route
+        if (PRIVATE_ROUTES.some((route) => new RegExp(`^${route.replace("*", ".*")}$`).test(pathname))) {
+          router.push("/login");
+        }
+
+      }
+    } catch (error) {
+
+    }
+  }
+  return (
+    <ProfileAreaStyled>
+      {!auth.isAuthenticated && (
+        <UnidentifiedArea>
+          <ul>
+            <li>
+              <Link href="/login">
+                Login
+              </Link>
+            </li>
+            <li>
+              <Link href="/signup">
+                Sign up
+              </Link>
+            </li>
+          </ul>
+        </UnidentifiedArea>
+      )}
+      {auth.isAuthenticated && (
+        <AccountArea>
+          <div>{auth.userInfo.user_object.username}</div>
+          <div>
+            <Avvvatars value={auth.userInfo.user_object.user_id} style="shape" />
+          </div>
+          <Link href={"/settings"}><GearIcon /></Link>
+        </AccountArea>
+      )}
+    </ProfileAreaStyled>
+  )
+}
+
+const AccountArea = styled.div`
+  padding-right: 20px;
+  display: flex;
+  place-items: center;
+
+  a{
+    // center the gear icon
+    display: flex;
+    place-items: center;
+    place-content: center;
+    width: 29px;
+    height: 29px;
+    border-radius: 19px;
+    background: #F5F5F5;
+
+    // hover effect
+    &:hover{
+      background: #E5E5E5;
+
+    }
+  }
+
+  div {
+    margin-right: 10px;
+  }
+  img {
+    width: 29px;
+    border-radius: 19px;
+  }
+`;
+
+const ProfileAreaStyled = styled.div`
+  display: flex;
+  place-items: stretch;
+  place-items: center;
+`;
+
+const UnidentifiedArea = styled.div`
+  display: flex;
+  place-items: stretch;
+  flex-grow: 1;
+
+  ul {
+    display: flex;
+    place-items: center;
+    list-style: none;
+    padding-left: 20px;
+
+    li {
+      padding-right: 20px;
+      font-size: 16px;
+      font-weight: 500;
+      color: #171717;
+    }
+  }
+`;
+
+
+export default ProfileArea

front/services/organizations/orgs.ts

@@ -19,7 +19,12 @@ export async function deleteOrganizationFromBackend(org_id: any) {
 }
 
 export async function getOrganizationContextInfo(org_slug: any, next: any) {
-  const result = await fetch(`${getAPIUrl()}orgs/slug/${org_slug}`, RequestBody("GET", null,next));
+  const result = await fetch(`${getAPIUrl()}orgs/slug/${org_slug}`, RequestBody("GET", null, next));
   const res = await errorHandling(result);
   return res;
 }
+
+export function getOrganizationContextInfoNoAsync(org_slug: any, next: any) {
+  const result = fetch(`${getAPIUrl()}orgs/slug/${org_slug}`, RequestBody("GET", null, next));
+  return result;
+}