From 1d97615f14ea1b1adea993c9025e4d66d0c52b33 Mon Sep 17 00:00:00 2001
From: Andrew Tavis McAllister <andrew.t.mcallister@gmail.com>
Date: Thu, 12 Dec 2024 01:13:09 +0100
Subject: [PATCH] Rename group route id + refactor to account for it

---
 frontend/components/card/CardConnect.vue      |  4 +--
 frontend/components/feed/Feed.vue             |  5 +--
 frontend/components/feed/FeedItem.vue         |  2 +-
 .../menu/mobile/MenuMobileNavBar.vue          |  2 +-
 frontend/components/modal/ModalSharePage.vue  |  2 +-
 frontend/components/page/PageBreadcrumbs.vue  | 26 ++++++--------
 .../left/SidebarLeftMainSectionSelectors.vue  |  2 +-
 .../i18n/check/i18n_check_key_identifiers.py  |  3 +-
 .../groups/{[id] => [group-id]}/about.vue     | 16 ++++-----
 .../groups/{[id] => [group-id]}/events.vue    |  0
 .../[id]/groups/{[id] => [group-id]}/faq.vue  |  0
 .../[id]/groups/[group-id]/index.vue          | 35 +++++++++++++++++++
 .../groups/{[id] => [group-id]}/resources.vue |  0
 .../organizations/[id]/groups/[id]/index.vue  | 18 ----------
 frontend/utils/routeUtils.ts                  | 19 ++++++++++
 15 files changed, 80 insertions(+), 54 deletions(-)
 rename frontend/pages/organizations/[id]/groups/{[id] => [group-id]}/about.vue (93%)
 rename frontend/pages/organizations/[id]/groups/{[id] => [group-id]}/events.vue (100%)
 rename frontend/pages/organizations/[id]/groups/{[id] => [group-id]}/faq.vue (100%)
 create mode 100644 frontend/pages/organizations/[id]/groups/[group-id]/index.vue
 rename frontend/pages/organizations/[id]/groups/{[id] => [group-id]}/resources.vue (100%)
 delete mode 100644 frontend/pages/organizations/[id]/groups/[id]/index.vue

diff --git a/frontend/components/card/CardConnect.vue b/frontend/components/card/CardConnect.vue
index 82b3b45e6..ca33d89bb 100644
--- a/frontend/components/card/CardConnect.vue
+++ b/frontend/components/card/CardConnect.vue
@@ -121,10 +121,10 @@ const props = defineProps<{
 
 const { userIsSignedIn } = useUser();
 const paramsId = useRoute().params.id;
-const paramsIdGroup = useRoute().params.groupId;
+const paramsGroupId = useRoute().params.groupId;
 
 const id = typeof paramsId === "string" ? paramsId : undefined;
-const idGroup = typeof paramsIdGroup === "string" ? paramsIdGroup : undefined;
+const idGroup = typeof paramsGroupId === "string" ? paramsGroupId : undefined;
 
 const organizationStore = useOrganizationStore();
 const groupStore = useGroupStore();
diff --git a/frontend/components/feed/Feed.vue b/frontend/components/feed/Feed.vue
index 20344bae4..8f4f089f3 100644
--- a/frontend/components/feed/Feed.vue
+++ b/frontend/components/feed/Feed.vue
@@ -3,10 +3,7 @@
     v-if="feedItemUrls && feedItemNames"
     class="mt-3 flex items-center justify-start space-x-3"
   >
-    <div
-      v-for="(url, index) in feedItemUrls.slice(0, numberOfFeedItems)"
-      class="w-full"
-    >
+    <div v-for="(url, index) in feedItemUrls" class="w-full">
       <FeedItem :name="feedItemNames[index]" :url="url" />
     </div>
   </div>
diff --git a/frontend/components/feed/FeedItem.vue b/frontend/components/feed/FeedItem.vue
index cdf66463a..6203db738 100644
--- a/frontend/components/feed/FeedItem.vue
+++ b/frontend/components/feed/FeedItem.vue
@@ -1,6 +1,6 @@
 <template>
   <NuxtLink
-    :to="localePath(url)"
+    :to="localePath(item.url)"
     :aria-label="$t('components._global.navigate_to_group_aria_label')"
   >
     <div
diff --git a/frontend/components/menu/mobile/MenuMobileNavBar.vue b/frontend/components/menu/mobile/MenuMobileNavBar.vue
index 0f2e9ba35..232e0f11c 100644
--- a/frontend/components/menu/mobile/MenuMobileNavBar.vue
+++ b/frontend/components/menu/mobile/MenuMobileNavBar.vue
@@ -22,7 +22,7 @@
 
 <script setup lang="ts">
 const isActive = (routeUrl: string) => {
-  return isRouteActive(routeUrl);
+  return isTopLevelRouteActive(routeUrl);
 };
 
 const getSelectorId = (label: string) => {
diff --git a/frontend/components/modal/ModalSharePage.vue b/frontend/components/modal/ModalSharePage.vue
index cfb7f178e..0fb20e528 100644
--- a/frontend/components/modal/ModalSharePage.vue
+++ b/frontend/components/modal/ModalSharePage.vue
@@ -291,7 +291,7 @@ const getCurrentUrl = () => {
   if (props.organization) {
     return `${BASE_FRONTEND_URL}/organizations/${props.organization.id}`;
   } else if (props.group) {
-    return `${BASE_FRONTEND_URL}/organizations/${props.group.organization.id}/groups/${props.group.id}`;
+    return `${BASE_FRONTEND_URL}/organizations/${props.group.orgId}/groups/${props.group.id}`;
   } else if (props.event) {
     return `${BASE_FRONTEND_URL}/events/${props.event.id}`;
   } else if (props.resource) {
diff --git a/frontend/components/page/PageBreadcrumbs.vue b/frontend/components/page/PageBreadcrumbs.vue
index 9dc2c0c4b..5ff5fef03 100644
--- a/frontend/components/page/PageBreadcrumbs.vue
+++ b/frontend/components/page/PageBreadcrumbs.vue
@@ -84,10 +84,10 @@ const { locales } = useI18n();
 const localePath = useLocalePath();
 
 const paramsId = useRoute().params.id;
-const paramsIdGroup = useRoute().params.groupId;
+const paramsGroupId = useRoute().params.groupid;
 
 const id = typeof paramsId === "string" ? paramsId : undefined;
-const idGroup = typeof paramsIdGroup === "string" ? paramsIdGroup : undefined;
+const groupId = typeof paramsGroupId === "string" ? paramsGroupId : undefined;
 
 const organizationStore = useOrganizationStore();
 const groupStore = useGroupStore();
@@ -96,35 +96,29 @@ const eventStore = useEventStore();
 let organization: Organization;
 let group: Group;
 let event: Event;
+
 const organizationRegex =
   /^(http:\/\/localhost:\d+|https?:\/\/[\w.-]+)(\/[a-z]{2})?\/organizations\/[0-9a-fA-F-]+(\/about)?$/;
-const groupRegex = 
+const groupRegex =
   /^(http:\/\/localhost:\d+|https?:\/\/[\w.-]+)(\/[a-z]{2})?\/organizations\/[0-9a-fA-F-]+\/groups\/([0-9a-fA-F-]+)(\/about)?$/;
-const eventRegex = 
+const eventRegex =
   /^(http:\/\/localhost:\d+|https?:\/\/[\w.-]+)(\/[a-z]{2})?\/events\/([0-9a-fA-F-]+)(\/about)?$/;
 
 if (organizationRegex.test(url)) {
   pageType = "organization";
+
   await organizationStore.fetchById(id);
   organization = organizationStore.organization;
 } else if (groupRegex.test(url)) {
   pageType = "group";
-  const match = url.match(groupRegex);
-  const groupId = match ? match[4] : null;
 
-  if (groupId) {
-    await groupStore.fetchById(groupId);
-    group = groupStore.group;
-  }
+  await groupStore.fetchById(groupId);
+  group = groupStore.group;
 } else if (eventRegex.test(url)) {
   pageType = "event";
-  const match = url.match(eventRegex);
-  const eventId = match ? match[3] : null;
 
-  if (eventId) {
-    await eventStore.fetchById(eventId);
-    event = eventStore.event;
-  }
+  await eventStore.fetchById(id);
+  event = eventStore.event;
 }
 
 const breadcrumbs = ref<string[]>([]);
diff --git a/frontend/components/sidebar/left/SidebarLeftMainSectionSelectors.vue b/frontend/components/sidebar/left/SidebarLeftMainSectionSelectors.vue
index e66230656..c3998151f 100644
--- a/frontend/components/sidebar/left/SidebarLeftMainSectionSelectors.vue
+++ b/frontend/components/sidebar/left/SidebarLeftMainSectionSelectors.vue
@@ -18,7 +18,7 @@
 
 <script setup lang="ts">
 const isActive = (routeUrl: string) => {
-  return isRouteActive(routeUrl);
+  return isTopLevelRouteActive(routeUrl);
 };
 
 const getSelectorId = (label: string) => {
diff --git a/frontend/i18n/check/i18n_check_key_identifiers.py b/frontend/i18n/check/i18n_check_key_identifiers.py
index 828f2e37a..c25d8e351 100644
--- a/frontend/i18n/check/i18n_check_key_identifiers.py
+++ b/frontend/i18n/check/i18n_check_key_identifiers.py
@@ -75,7 +75,7 @@ def path_to_valid_key(p):
     """
     Converts a path to a valid key with period separators and all words being snake case.
 
-    Note: [id] is removed in this step as it doesn't add anything to keys.
+    Note: [id] and [group_id] are removed in this step as it doesn't add anything to keys.
     """
     # Insert underscores between words, but only if the word is preceded by a lowercase letter and followed by an uppercase letter (i.e. except for abbreviations).
     valid_key = ""
@@ -101,6 +101,7 @@ def path_to_valid_key(p):
         .replace("._", ".")
         .replace("-", "_")
         .replace(".[id]", "")
+        .replace(".[group_id]", "")
     )
 
 
diff --git a/frontend/pages/organizations/[id]/groups/[id]/about.vue b/frontend/pages/organizations/[id]/groups/[group-id]/about.vue
similarity index 93%
rename from frontend/pages/organizations/[id]/groups/[id]/about.vue
rename to frontend/pages/organizations/[id]/groups/[group-id]/about.vue
index 5ba133d8c..3255503ad 100644
--- a/frontend/pages/organizations/[id]/groups/[id]/about.vue
+++ b/frontend/pages/organizations/[id]/groups/[group-id]/about.vue
@@ -8,7 +8,7 @@
     <Head>
       <Title>{{ group.name }}</Title>
     </Head>
-    <HeaderAppPage :group="group">
+    <HeaderAppPage pageType="group">
       <div class="flex space-x-2 pb-3 lg:space-x-3 lg:pb-4">
         <BtnRouteExternal
           v-if="group.getInvolvedUrl"
@@ -85,21 +85,19 @@
 
 <script setup lang="ts">
 import { BreakpointMap } from "~/types/breakpoint-map";
-import type { Group } from "~/types/entities/group";
 import { IconMap } from "~/types/icon-map";
+import type { Group } from "~/types/entities/group";
 import { getGroupSubPages } from "~/utils/groupSubPages";
 
 const aboveLargeBP = useBreakpoint("lg");
 
-const { id } = useRoute().params;
+const paramsGroupId = useRoute().params.groupid;
+const groupId = typeof paramsGroupId === "string" ? paramsGroupId : undefined;
 
-const [resOrg] = await Promise.all([
-  useAsyncData(
-    async () => await fetchWithoutToken(`/entities/groups/${id}`, {})
-  ),
-]);
+const groupStore = useGroupStore();
+await groupStore.fetchById(groupId);
 
-const group = resOrg.data as unknown as Group;
+const group: Group = groupStore.group;
 
 const groupSubPages = getGroupSubPages();
 
diff --git a/frontend/pages/organizations/[id]/groups/[id]/events.vue b/frontend/pages/organizations/[id]/groups/[group-id]/events.vue
similarity index 100%
rename from frontend/pages/organizations/[id]/groups/[id]/events.vue
rename to frontend/pages/organizations/[id]/groups/[group-id]/events.vue
diff --git a/frontend/pages/organizations/[id]/groups/[id]/faq.vue b/frontend/pages/organizations/[id]/groups/[group-id]/faq.vue
similarity index 100%
rename from frontend/pages/organizations/[id]/groups/[id]/faq.vue
rename to frontend/pages/organizations/[id]/groups/[group-id]/faq.vue
diff --git a/frontend/pages/organizations/[id]/groups/[group-id]/index.vue b/frontend/pages/organizations/[id]/groups/[group-id]/index.vue
new file mode 100644
index 000000000..26bf0b29e
--- /dev/null
+++ b/frontend/pages/organizations/[id]/groups/[group-id]/index.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { BreakpointMap } from "~/types/breakpoint-map";
+import { onMounted } from "vue";
+
+const { id } = useRoute().params;
+const { groupid } = useRoute().params;
+
+const windowWidth = ref(window.innerWidth);
+
+const handleResize = () => {
+  windowWidth.value = window.innerWidth;
+  if (windowWidth.value > BreakpointMap.SMALL) {
+    const { locale } = useI18n();
+    const currentRoute = useRoute();
+
+    if (
+      currentRoute.path !==
+        `/${locale.value}/organizations/${id}/groups/${groupid}/about` ||
+      currentRoute.path === `/${locale.value}/organizations/${id}/`
+    ) {
+      navigateTo(
+        `/${locale.value}/organizations/${id}/groups/${groupid}/about`
+      );
+    }
+  }
+};
+
+onMounted(() => {
+  // Add event listener to handle resizing.
+  window.addEventListener("resize", handleResize);
+
+  // Verify that the user is on a mobile device.
+  handleResize();
+});
+</script>
diff --git a/frontend/pages/organizations/[id]/groups/[id]/resources.vue b/frontend/pages/organizations/[id]/groups/[group-id]/resources.vue
similarity index 100%
rename from frontend/pages/organizations/[id]/groups/[id]/resources.vue
rename to frontend/pages/organizations/[id]/groups/[group-id]/resources.vue
diff --git a/frontend/pages/organizations/[id]/groups/[id]/index.vue b/frontend/pages/organizations/[id]/groups/[id]/index.vue
deleted file mode 100644
index 58898c979..000000000
--- a/frontend/pages/organizations/[id]/groups/[id]/index.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<script setup lang="ts">
-import { onMounted } from "vue";
-
-const { id } = useRoute().params;
-
-const handleResize = () => {
-  window.removeEventListener("resize", handleResize);
-  navigateTo(`${id}/about`);
-};
-
-onMounted(() => {
-  // Add event listener to handle resizing.
-  window.addEventListener("resize", handleResize);
-
-  // Verify that the user is on a mobile device.
-  handleResize();
-});
-</script>
diff --git a/frontend/utils/routeUtils.ts b/frontend/utils/routeUtils.ts
index ca9af33fb..e0188d545 100644
--- a/frontend/utils/routeUtils.ts
+++ b/frontend/utils/routeUtils.ts
@@ -47,6 +47,25 @@ export function isRouteActive(routePath: string): boolean {
   );
 }
 
+export function isTopLevelRouteActive(routePath: string): boolean {
+  const route = useRoute();
+
+  const currentPath = normalizePath(route.path);
+  const targetPath = normalizePath(routePath);
+
+  let currentSegments = currentPath.split("/");
+  let targetSegments = targetPath.split("/");
+
+  // Remove locale segments from both current and target paths.
+  currentSegments = removeLocaleSegment(currentSegments);
+  targetSegments = removeLocaleSegment(targetSegments);
+
+  console.log(`currentSegments: ${currentSegments}`);
+  console.log(`targetSegments: ${targetSegments}`);
+
+  return currentSegments[0] === targetSegments[0];
+}
+
 export function isCurrentRoutePathSubpageOf(path: string, routeName: string) {
   // The first split is to remove the localization path.
   const segments = routeName.split("___")[0].split(path + "-");