Merge pull request #2206 from ever-co/2205-feature-route-breadcrumb-f…

…or-nested-sections 2205 feature route breadcrumb for nested sections
ever-co · Feb 15, 2024 · 180454c · 180454c
2 parents 76f0987 + 65beef6
commit 180454c
Show file tree

Hide file tree

Showing 17 changed files with 62 additions and 14 deletions.
diff --git a/apps/web/app/[locale]/kanban/page.tsx b/apps/web/app/[locale]/kanban/page.tsx
@@ -27,7 +27,7 @@ const Kanban = () => {
 	const breadcrumbPath = [
 		{ title: JSON.parse(t('pages.home.BREADCRUMB')), href: '/' },
 		{ title: activeTeam?.name || '', href: '/' },
-		{ title: t('pages.kanban.KANBAN_BOARD'), href: `/${currentLocale}/kanban` }
+		{ title: t('common.KANBAN'), href: `/${currentLocale}/kanban` }
 	];
 
 	const activeTeamMembers = activeTeam?.members ? activeTeam.members : [];
@@ -82,11 +82,11 @@ const Kanban = () => {
 							<Breadcrumb paths={breadcrumbPath} className="text-sm" />
 						</div>
 						<div className="flex h-10 w-max items-center justify-center   gap-1">
-							<HeaderTabs linkAll={true} />
+							<HeaderTabs kanban={true} linkAll={true} />
 						</div>
 					</div>
 					<div className="flex justify-between items-center mt-10">
-						<h1 className="text-4xl font-semibold ">{t('pages.kanban.KANBAN_BOARD')}</h1>
+						<h1 className="text-4xl font-semibold ">{t('common.KANBAN')} {t('common.BOARD')}</h1>
 						<div className="flex w-fit items-center space-x-2">
 							<strong className="text-gray-400">08:00 ( UTC +04:30 )</strong>
 							<div className="mt-1">

diff --git a/apps/web/app/[locale]/page.tsx b/apps/web/app/[locale]/page.tsx
@@ -2,7 +2,7 @@
 
 'use client';
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useOrganizationTeams } from '@app/hooks';
 import { clsxm } from '@app/utils';
 import NoTeam from '@components/pages/main/no-team';
@@ -31,24 +31,32 @@ import ChatwootWidget from 'lib/features/integrations/chatwoot';
 import 'react-loading-skeleton/dist/skeleton.css';
 import '../../styles/globals.css';
 
-import { useRecoilValue } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 import { fullWidthState } from '@app/stores/fullWidth';
 import { ChevronDown } from 'lucide-react';
 import HeaderTabs from '@components/pages/main/header-tabs';
 import { headerTabs } from '@app/stores/header-tabs';
+import { usePathname } from 'next/navigation';
 
 function MainPage() {
 	const t = useTranslations();
 	const { isTeamMember, isTrackingEnabled, activeTeam } = useOrganizationTeams();
 	const fullWidth = useRecoilValue(fullWidthState);
-	const view = useRecoilValue(headerTabs);
-
+	const [view, setView] = useRecoilState(headerTabs);
+	const path = usePathname();
 	const breadcrumb = [
 		{ title: JSON.parse(t('pages.home.BREADCRUMB')), href: '/' },
-		{ title: activeTeam?.name || '', href: '/' }
+		{ title: activeTeam?.name || '', href: '/' },
+		{ title: t(`common.${view}`), href: `/` }
 	];
 	const { online } = useNetworkState();
-
+	console.log(path, 'path');
+	useEffect(() => {
+		if (view == IssuesView.KANBAN && path == '/') {
+			setView(IssuesView.CARDS);
+		}
+	// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [path, setView]);
 	if (!online) {
 		return <Offline />;
 	}

diff --git a/apps/web/components/pages/main/header-tabs.tsx b/apps/web/components/pages/main/header-tabs.tsx
@@ -8,7 +8,7 @@ import { IssuesView } from '@app/constants';
 import { useRecoilState } from 'recoil';
 import { headerTabs } from '@app/stores/header-tabs';
 
-const HeaderTabs = ({ linkAll }: { linkAll: boolean }) => {
+const HeaderTabs = ({ linkAll, kanban = false }: { linkAll: boolean; kanban?: boolean }) => {
 	const options = [
 		{ label: 'Cards', icon: QueueListIcon, view: IssuesView.CARDS },
 		{ label: 'Table', icon: TableCellsIcon, view: IssuesView.TABLE },
@@ -17,7 +17,7 @@ const HeaderTabs = ({ linkAll }: { linkAll: boolean }) => {
 	];
 	const links = linkAll ? ['/', '/', '/', '/kanban'] : [undefined, undefined, undefined, '/kanban'];
 	const [view, setView] = useRecoilState(headerTabs);
-
+	const activeView = kanban ? IssuesView.KANBAN : view;
 	return (
 		<>
 			{options.map(({ label, icon: Icon, view: optionView }, index) => (
@@ -26,14 +26,15 @@ const HeaderTabs = ({ linkAll }: { linkAll: boolean }) => {
 						<button
 							className={clsxm(
 								'rounded-md p-2 text-gray-700 dark:text-gray-300',
-								view === optionView && 'bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100'
+								activeView === optionView &&
+									'bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100'
 							)}
 							onClick={() => setView(optionView)}
 						>
 							<Icon
 								className={clsxm(
 									'w-5 h-5 inline text-gray-600 dark:text-gray-400',
-									view === optionView && 'dark:text-white text-gray-800'
+									activeView === optionView && 'dark:text-white text-gray-800'
 								)}
 							/>
 						</button>

diff --git a/apps/web/messages/ar.json b/apps/web/messages/ar.json
@@ -6,6 +6,9 @@
 		"REJECT": "رفض",
 		"REJECTED": "مرفوض",
 		"VERIFY": "تحقق",
+		"CARDS": "بطاقات",
+		"TABLE": "جدول",
+		"KANBAN": "كانبان",
 		"TOMORROW": "غدا",
 		"YESTERDAY": "أمس",
 		"INVITE": "دعوة",

diff --git a/apps/web/messages/bg.json b/apps/web/messages/bg.json
@@ -9,6 +9,9 @@
 		"REJECTED": "Отхвърлен",
 		"VERIFY": "провери",
 		"INVITE": "Покани",
+		"KANBAN": "Канбан",
+		"CARDS": "Карти",
+    	"TABLE": "Таблица",
 		"INVITED": "Поканен",
 		"EXPIRE": "Изтича",
 		"EXPIRED": "Изтекъл",

diff --git a/apps/web/messages/de.json b/apps/web/messages/de.json
@@ -5,6 +5,9 @@
 		"ACCEPTED": "Akzeptiert",
 		"REJECT": "Ablehnen",
 		"TOMORROW": "Morgen",
+		"CARDS": "Karten",
+		"TABLE": "Tabelle",
+		"KANBAN": "Kanban",
 		"YESTERDAY": "Gestern",
 		"REJECTED": "Abgelehnt",
 		"VERIFY": "Verifizieren",

diff --git a/apps/web/messages/en.json b/apps/web/messages/en.json
@@ -8,6 +8,9 @@
 		"YESTERDAY": "Yesterday",
 		"REJECTED": "Rejected",
 		"VERIFY": "verify",
+		"CARDS": "Cards",
+		"TABLE": "Table",
+		"KANBAN": "Kanban",
 		"INVITE": "Invite",
 		"INVITED": "Invited",
 		"EXPIRE": "Expire",

diff --git a/apps/web/messages/es.json b/apps/web/messages/es.json
@@ -8,6 +8,9 @@
 		"YESTERDAY": "Ayer",
 		"REJECTED": "Rechazado",
 		"VERIFY": "verificar",
+		"CARDS": "Tarjetas",
+		"TABLE": "Tabla",
+		"KANBAN": "Kanban",
 		"INVITE": "Invitar",
 		"INVITED": "Invitado",
 		"EXPIRE": "Expira",

diff --git a/apps/web/messages/fr.json b/apps/web/messages/fr.json
@@ -9,6 +9,9 @@
 		"REJECTED": "Rejeté",
 		"VERIFY": "Vérifier",
 		"INVITE": "Inviter",
+		"CARDS": "Cartes",
+		"KANBAN": "Kanban",
+		"TABLE": "Tableau",
 		"INVITED": "Invité",
 		"EXPIRE": "Expirer",
 		"EXPIRED": "Expiré",

diff --git a/apps/web/messages/he.json b/apps/web/messages/he.json
@@ -7,6 +7,9 @@
 		"TOMORROW": "מחר",
 		"YESTERDAY": "אתמול",
 		"REJECTED": "נדחה",
+		"CARDS": "כרטיסים",
+		"KANBAN": "קאנבאן",
+    	"TABLE": "טבלה",
 		"VERIFY": "אמת",
 		"INVITE": "הזמן",
 		"INVITED": "הוזמן",

diff --git a/apps/web/messages/it.json b/apps/web/messages/it.json
@@ -8,6 +8,9 @@
 		"YESTERDAY": "Ieri",
 		"REJECTED": "Rifiutato",
 		"VERIFY": "verifica",
+		"CARDS": "Carte",
+		"KANBAN": "Kanban",
+		"TABLE": "Tabella",
 		"INVITE": "Invita",
 		"INVITED": "Invitato",
 		"EXPIRE": "Scade",

diff --git a/apps/web/messages/nl.json b/apps/web/messages/nl.json
@@ -6,6 +6,9 @@
 		"REJECT": "Afwijzen",
 		"TOMORROW": "Morgen",
 		"YESTERDAY": "Gisteren",
+		"CARDS": "Kaarten",
+   		"TABLE": "Tafel",
+		"KANBAN": "Kanban",
 		"REJECTED": "Afgewezen",
 		"VERIFY": "verifiëren",
 		"INVITE": "Uitnodigen",

diff --git a/apps/web/messages/pl.json b/apps/web/messages/pl.json
@@ -9,6 +9,9 @@
 		"REJECTED": "Odrzucone",
 		"VERIFY": "weryfikuj",
 		"INVITE": "Zaproś",
+		"CARDS": "Karty",
+		"KANBAN": "Kanban",
+		"TABLE": "Tabela",
 		"INVITED": "Zaproszony",
 		"EXPIRE": "Wygasa",
 		"EXPIRED": "Wygasło",

diff --git a/apps/web/messages/pt.json b/apps/web/messages/pt.json
@@ -11,6 +11,9 @@
 		"INVITE": "Convidar",
 		"INVITED": "Convidado",
 		"EXPIRE": "Expirar",
+		"CARDS": "Cartões",
+		"KANBAN": "Kanban",
+		"TABLE": "Tabela",
 		"EXPIRED": "Expirado",
 		"REQUEST": "Solicitar",
 		"REQUESTED": "Solicitado",

diff --git a/apps/web/messages/ru.json b/apps/web/messages/ru.json
@@ -9,6 +9,9 @@
 		"REJECTED": "Отклонено",
 		"VERIFY": "Проверить",
 		"INVITE": "Пригласить",
+		"CARDS": "Карты",
+		"TABLE": "Таблица",
+		"KANBAN": "Канбан",
 		"INVITED": "Приглашено",
 		"EXPIRE": "Истекает",
 		"EXPIRED": "Истекло",

diff --git a/apps/web/messages/zh.json b/apps/web/messages/zh.json
@@ -7,6 +7,9 @@
 		"TOMORROW": "明天",
 		"YESTERDAY": "昨天",
 		"REJECTED": "已拒绝",
+		"CARDS": "卡片",
+		"TABLE": "表格",
+		"KANBAN": "看板",
 		"VERIFY": "验证",
 		"INVITE": "邀请",
 		"INVITED": "已邀请",

diff --git a/apps/web/types/local.ts b/apps/web/types/local.ts
@@ -17,7 +17,7 @@ type EnTYPE = typeof en;
 type ObjectLocale = {
 	[key in Locale]: EnTYPE;
 };
-
+// it will throw error if the en.json is not the same as the other json files
 export const ObjectTypes: ObjectLocale = {
 	en,
 	de,