Rename group route id + refactor to account for it

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();

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>

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

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) => {

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) {

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[]>([]);

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) => {

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]", "")
     )
 
 

frontend/pages/organizations/[id]/groups/[id]/about.vue → 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();
 

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>

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 + "-");