change: adjust organization logo in header

src/components/UniversiHeader/index.tsx

@@ -1,18 +1,31 @@
 import { Link } from "react-router-dom";
 import { WelcomeUser } from "./components/WelcomeUser/WelcomeUser";
 import { LoginButton } from "./components/LoginButton/LoginButton";
+import { useContext, createRef } from "react";
+import { AuthContext } from "@/contexts/Auth";
+import { groupHeaderUrl } from "@/utils/apiUtils";
 import "./styles.less";
 
 
 export function Header() {
+  const authContext = useContext(AuthContext);
+  const imageLogoRef : any = createRef();
+
+  function imgLogoLoadError(): any {
+    imageLogoRef.current.onError = "";
+    imageLogoRef.current.src = `/assets/imgs/organization-headers/codata.png`;
+  }
+
     return (
     <header id="header">
-      <div className="logo-container">
+      { authContext?.profile &&
+        <div className="logo-container">
           <img src="/assets/imgs/universi-me2.png"/>
-      </div>
+        </div>
+      }
       <div className="left-items">
-        <Link to="/" id="header-logo">
-        <img src={getHeaderLogoUrl()} className="organization-logo" alt="" />
+        <Link to={authContext?.profile ? `/group` + authContext.organization?.path as string : `/`} id="header-logo">
+          <img src={groupHeaderUrl(authContext.organization!)} className="organization-logo" alt="" onError={imgLogoLoadError} ref={imageLogoRef} title={authContext.organization?.name} />
         </Link>
       </div>
       <div className="right-items">
@@ -21,15 +34,3 @@ export function Header() {
     </header>
   );
 }
-
-function getHeaderLogoUrl() {
-    const match = REGEXP_MATCH_SUBDOMAIN.exec(location.hostname);
-    let subdomain = match ? match[1] : undefined;
-
-    if (!subdomain)
-        subdomain = "codata";
-
-    return `/assets/imgs/organization-headers/${subdomain}.png`
-}
-
-const REGEXP_MATCH_SUBDOMAIN = /^(?:[a-z]{3,5}:\/\/)?([^\.]*)?\.universi\.me/;

src/components/UniversiHeader/styles.less

@@ -30,6 +30,10 @@
 
     }
 
+    .logo-container + .left-items {
+        padding-left: 0.5rem;
+    }
+
     .organization-logo{
         height: inherit;
         width: auto;
@@ -59,7 +63,7 @@
     }
 
     .left-items{
-        padding-left: 0.5rem;
+        padding-left: 5rem;
         height: 100%;
         overflow: hidden;
         img{

src/services/UniversimeApi/Auth.ts

@@ -18,7 +18,7 @@ export type LogOut_ResponseDTO =     ApiResponse;
 
 export async function validateToken() {
     const response = await api.get<GetAccount_ResponseDTO>('/account');
-    return response.data.body;
+    return response.data.body?.user ?? null;
 }
 
 export async function signin({ username, password, recaptchaToken }: SignIn_RequestDTO) {

src/types/Group.ts

@@ -16,6 +16,7 @@ export type Group = {
     publicGroup:       boolean;
     rootGroup:         boolean;
     bannerImage:       string | null;
+    headerImage:       string | null;
     organization:      Group | null;
     canEdit:           boolean;
     everyoneCanPost:   boolean;

src/utils/apiUtils.ts

@@ -7,6 +7,13 @@ export function groupBannerUrl(group: Group) {
     return `${import.meta.env.VITE_UNIVERSIME_API}/group/banner/${group.id}`;
 }
 
+export function groupHeaderUrl(group: Group) {
+    if(group?.headerImage) {
+        return  group?.headerImage.startsWith('/') ? import.meta.env.VITE_UNIVERSIME_API + group?.headerImage : group?.headerImage;
+    }
+    return `/assets/imgs/organization-headers/${group?.nickname ?? `codata`}.png`
+}
+
 export function groupImageUrl(group: Group) {
     if(!group.image)
         return "/assets/imgs/group.png"