Merge pull request #354 from kpi-ua/KB-264-Change-Logout-layout-in-ne…

…w-UI KB-264-Change-Logout-layout-in-new-UI
kpi-ua · Jan 24, 2025 · e7074e9 · e7074e9
2 parents d195f6e + db9119f
commit e7074e9
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 47 deletions.
diff --git a/src/app/[locale]/(private)/header.tsx b/src/app/[locale]/(private)/header.tsx
@@ -8,23 +8,22 @@ import { Show } from '@/components/utils/show';
 import { cn } from '@/lib/utils';
 import { useLocalStorage } from '@/hooks/use-storage';
 import { User } from '@/types/user';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
 import { Button } from '@/components/ui/button';
 import { logout } from '@/actions/auth.actions';
 import { useTranslations } from 'next-intl';
 import { SignOut } from '@/app/images';
 import { Paragraph } from '@/components/typography/paragraph';
+import { USER_CATEGORIES } from '@/types/constants';
+import React from 'react';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 
 export const Header = () => {
   const isMobile = useIsMobile();
+
   const [user] = useLocalStorage<User>('user');
+
   const t = useTranslations('private.profile');
+  const tUserCategory = useTranslations('global.user-category');
 
   const handleLogout = async () => {
     await logout();
@@ -41,29 +40,27 @@ export const Header = () => {
       </Show>
       <div className="flex items-center gap-8">
         <LocaleSwitch />
-        <DropdownMenu modal={false}>
-          <DropdownMenuTrigger className="focus:outline-none focus:ring-0">
-            <ProfilePicture src={user?.photo || ''} />
-          </DropdownMenuTrigger>
-          <DropdownMenuContent className="mr-6 w-[240px] p-4">
-            <DropdownMenuLabel className="flex items-center gap-2">
-              <ProfilePicture size="sm" src={user?.photo || ''} />
-              <Paragraph className="text-base font-medium leading-5">{user?.username}</Paragraph>
-            </DropdownMenuLabel>
-            <DropdownMenuItem className="focus:bg-accent-foreground-none">
-              <Button
-                variant="secondary"
-                size="small"
-                className="w-full"
-                onClick={handleLogout}
-                iconPosition="end"
-                icon={<SignOut />}
-              >
-                {t('button.logout')}
-              </Button>
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
+        <div className="flex items-center gap-3">
+          <ProfilePicture size="sm" src={user?.photo || ''} />
+          <div className="hidden flex-col md:flex">
+            <Paragraph className="m-0 text-base font-medium">{user?.username}</Paragraph>
+            {user?.userCategories.map((category) => (
+              <Paragraph className="m-0 text-base font-semibold" key={category}>
+                {tUserCategory(USER_CATEGORIES[category])}
+              </Paragraph>
+            ))}
+          </div>
+        </div>
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger>
+              <Button variant="secondary" icon={<SignOut />} onClick={handleLogout} />
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{t('button.logout')}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
       </div>
     </header>
   );

diff --git a/src/app/[locale]/(private)/profile/components/info-block.tsx b/src/app/[locale]/(private)/profile/components/info-block.tsx
@@ -25,6 +25,7 @@ export function InfoBlock({ className }: Props) {
   const [user, setUser] = useLocalStorage<User>('user');
 
   const t = useTranslations('private.profile');
+  const tUserCategory = useTranslations('global.user-category');
 
   const { errorToast } = useServerErrorToast();
 
@@ -58,7 +59,7 @@ export function InfoBlock({ className }: Props) {
             <div className="flex gap-2">
               {user?.userCategories.map((category) => (
                 <Heading6 key={category} className="text-basic-blue">
-                  {USER_CATEGORIES[category]}
+                  {tUserCategory(USER_CATEGORIES[category])}
                 </Heading6>
               ))}
               {studentProfile?.status && <Badge className="text-other-blue">{studentProfile.status}</Badge>}

diff --git a/src/components/ui/locale-switch.tsx b/src/components/ui/locale-switch.tsx
@@ -3,6 +3,14 @@
 import { Link, LOCALE, usePathname } from '@/i18n/routing';
 import { useLocale } from 'next-intl';
 import { FlagGB, FlagUA } from '@/app/images';
+import { ReactNode } from 'react';
+
+const LocaleOption = ({ text, icon }: { text: string; icon: ReactNode }) => (
+  <>
+    <span className="hidden text-neutral-600 md:block">{text}</span>
+    {icon}
+  </>
+);
 
 export const LocaleSwitch = () => {
   const locale = useLocale();
@@ -11,17 +19,9 @@ export const LocaleSwitch = () => {
   const getTitle = () => {
     switch (locale) {
       case LOCALE.UK:
-        return (
-          <>
-            Switch to English <FlagGB />
-          </>
-        );
+        return <LocaleOption text="Switch to English" icon={<FlagGB />} />;
       default:
-        return (
-          <>
-            Перейти на українську <FlagUA />
-          </>
-        );
+        return <LocaleOption text="Перейти на українську" icon={<FlagUA />} />;
     }
   };
 

diff --git a/src/messages/en.json b/src/messages/en.json
@@ -45,6 +45,10 @@
       "terms-of-service": "Terms of service",
       "contacts": "Contacts"
     },
+    "user-category": {
+      "student": "Student",
+      "spw": "SPW"
+    },
     "footer": "<paragraph>Developer: <kbislink>KBIS</kbislink></paragraph><paragraph>© {year} Igor Sikorsky Kyiv Polytechnic Institute</paragraph>",
     "goto-old": "Go to the old version of Campus"
   },

diff --git a/src/messages/uk.json b/src/messages/uk.json
@@ -45,6 +45,10 @@
       "terms-of-service": "Правила використання",
       "contacts": "Контакти"
     },
+    "user-category": {
+      "student": "Студент",
+      "spw": "НПП"
+    },
     "footer": "<paragraph>Розробник: <kbislink>КБІС</kbislink></paragraph><paragraph>© {year} КПІ ім. Ігоря Сікорського</paragraph>",
     "goto-old": "Перейти на стару версію Кампусу"
   },
@@ -232,7 +236,7 @@
         "add-new": "Додати новий",
         "edit": "Редагувати",
         "agree": "Погоджуюсь",
-        "logout": "Вийти з акаунту"
+        "logout": "Вийти"
       },
       "placeholder": {
         "credo": "Введіть улюблену цитату",

diff --git a/src/types/constants.ts b/src/types/constants.ts
@@ -1,4 +1,4 @@
-export enum UserCategories {
+export enum UserCategory {
   Student = 'Student',
   Lecturer = 'Lecturer',
 }
@@ -12,8 +12,8 @@ export enum EmploymentType {
 }
 
 export const USER_CATEGORIES = {
-  [UserCategories.Student]: 'Студент',
-  [UserCategories.Lecturer]: 'Науково-педагогічний працівник',
+  [UserCategory.Student]: 'student',
+  [UserCategory.Lecturer]: 'spw', // SPW stands for scientific and pedagogical worker
 };
 
 export const EMPLOYMENT_TYPE = {

diff --git a/src/types/user.ts b/src/types/user.ts
@@ -1,6 +1,6 @@
 import { StudentProfile } from '@/types/student-profile';
 import { EmployeeProfile } from '@/types/employee-profile';
-import { UserCategories } from '@/types/constants';
+import { UserCategory } from '@/types/constants';
 
 export interface User {
   id: number;
@@ -16,7 +16,7 @@ export interface User {
   modules: string[];
   intellectProfileEnabled: boolean;
   intellectProfile?: string;
-  userCategories: UserCategories[];
+  userCategories: UserCategory[];
   codeOfHonorSignDate: string;
   studentProfile?: StudentProfile;
   employeeProfile?: EmployeeProfile;