Joni/feature/96-add-cms-for-members-page

[Jonroi]

Add starapi calls and implement attributes to sectionMembers component
Add nude CSS for later designing

[leolabdev]

It's my fault that I didn't add the rules about imports and exports earlier. But please now read and correct according to this wiki: https://github.com/Alt-Org/Altzone-WebPages/wiki/Project-Structure#relative-and-absolute-imports

[leolabdev]

Please make in rtk style and dont forget to connect it to app/_providers/StoreProvider , you can see examples in other enties.

Here's how it might look:

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
import { envHelper } from '@/shared/const/envHelper';
import { Team } from '../model/types';
import { mapMembers, mapDepartments } from './mappers';

export const membersApi = createApi({
  reducerPath: 'membersApi',
  baseQuery: fetchBaseQuery({ baseUrl: envHelper.strapiApiUrl }),
  endpoints: (builder) => ({
    getTeams: builder.query<Team[], string>({
      // Since this is a GET request, we only need to define the query URL
      query: (locale = 'en') => {
        // Define the Strapi locale based on the input locale
        const strapiLocale = locale === 'fi' ? 'fi-FI' : 'en';
        // Build the API request URL for a GET request
        return `/teams?locale=${strapiLocale}&populate=departments.localizations,members.Logo,departments.members.Logo`;
      },
      transformResponse: (response: any, meta, locale: string) => {
        // Map the response data to the appropriate types
        const teams: Team[] = response.data.map((item: any) => {
          // Map team-level members (members who are not part of a specific department)
          let members = mapMembers(item.attributes.members?.data || []);
          
          // Map departments associated with the team
          const departments = mapDepartments(
            item.attributes.departments?.data || [],
            locale === 'fi' ? 'fi-FI' : 'en'
          );

          // Collect all member IDs that are assigned to departments
          const departmentMemberIds = departments.flatMap((dept) =>
            dept.members.map((member) => member.id)
          );

          // Filter out members that are already in a department from team-level members
          members = members.filter(
            (member) => !departmentMemberIds.includes(member.id)
          );

          // Return the mapped team with its members and departments
          return {
            id: item.id,
            name: item.attributes.name,
            members,
            departments,
          };
        });

        // Define the sort order for teams based on the locale
        const orderEn = [
          'Game Design',
          'Mentoring',
          'Administration',
          'Development',
          'Marketing',
        ];

        const orderFi = [
          'Pelit Suunnittelu',
          'Mentorointi',
          'Hallinto',
          'Kehitys',
          'Markkinointi',
        ];

        const order = locale === 'fi' ? orderFi : orderEn;

        // Sort teams based on the predefined order
        return teams.sort(
          (a: Team, b: Team) => order.indexOf(a.name) - order.indexOf(b.name)
        );
      },
    }),
  }),
});

export const { useGetTeamsQuery } = membersApi;

Dont forget to export this hook via public api (see https://github.com/Alt-Org/Altzone-WebPages/wiki/Project-Structure#between-modules-absolute-imports-via-indexts)

[leolabdev]

So I think you just need to do this mapping inside "transformResponse" and pass it out through a hook that generates rtk query like "useGetTeamsQuery"

[leolabdev]

pay attention also on