Merge pull request #306 from Alt-Org/joni/refactor/296-refactor-memberspage-to-integrate-with-directus

joni/refactor/296-refactor-memberspage-to-integrate-with-directus

Author: leolabdev

frontend-next-migration/src/entities/Member/api/index.ts

@@ -1 +1 @@
-export { useGetTeamsQuery } from './membersApi';
+export { useGetMembersQuery } from './membersApi';

frontend-next-migration/src/entities/Member/api/mappers.test.ts

@@ -0,0 +1,133 @@
+import { organizeMembers } from './mappers';
+import { Member, Team, Department } from '@/entities/Member/model/types/types';
+
+const mockTeams: Team[] = [
+    {
+        id: 1,
+        name: 'Development',
+        translations: [
+            { id: 101, teams_id: 1, languages_code: 'en-US', team: 'Development' },
+            { id: 102, teams_id: 1, languages_code: 'fi-FI', team: 'Ohjelmistokehitys' },
+        ],
+        members: [],
+        departments: [],
+    },
+    {
+        id: 2,
+        name: 'Game Design',
+        translations: [
+            { id: 103, teams_id: 2, languages_code: 'en-US', team: 'Game Design' },
+            { id: 104, teams_id: 2, languages_code: 'fi-FI', team: 'Pelisuunnittelu' },
+        ],
+        members: [],
+        departments: [],
+    },
+];
+
+describe('organizeMembers', () => {
+    const mockMembers: Member[] = [
+        {
+            id: 1,
+            name: 'Joni Roine',
+            email: '[email protected]',
+            github: 'https://github.com/Jonroi',
+            linkedin: 'https://www.linkedin.com/in/joni-roine/',
+            website: 'https://jonroi.netlify.app/',
+            team: mockTeams[0],
+            department: {
+                id: 10,
+                name: 'Website Developer',
+                translations: [
+                    {
+                        id: 110,
+                        departments_id: 10,
+                        languages_code: 'en-US',
+                        department: 'Website Developer',
+                    },
+                    {
+                        id: 111,
+                        departments_id: 10,
+                        languages_code: 'fi-FI',
+                        department: 'Verkkosivukehittäjä',
+                    },
+                ],
+                members: [],
+            } as Department,
+            translations: [],
+        },
+        {
+            id: 2,
+            name: 'Alice Smith',
+            email: '[email protected]',
+            github: 'https://github.com/AliceSmith',
+            linkedin: 'https://www.linkedin.com/in/alice-smith/',
+            website: 'https://alicesmith.com/',
+            team: mockTeams[1],
+            department: {
+                id: 20,
+                name: 'Game Developer',
+                translations: [
+                    {
+                        id: 120,
+                        departments_id: 20,
+                        languages_code: 'en-US',
+                        department: 'Game Developer',
+                    },
+                    {
+                        id: 121,
+                        departments_id: 20,
+                        languages_code: 'fi-FI',
+                        department: 'Pelikehittäjä',
+                    },
+                ],
+                members: [],
+            } as Department,
+            translations: [],
+        },
+    ];
+
+    it('should organize members into teams and departments with correct English translations', () => {
+        const result = organizeMembers(mockMembers, 'en');
+
+        const developmentTeam = result.teamsMap.get(1);
+        expect(developmentTeam).toBeDefined();
+        if (developmentTeam) {
+            expect(developmentTeam.name).toBe('Development');
+            expect(developmentTeam.departments[0].name).toBe('Website Developer');
+            expect(developmentTeam.departments[0].members[0].name).toBe('Joni Roine');
+        }
+
+        const designTeam = result.teamsMap.get(2);
+        expect(designTeam).toBeDefined();
+        if (designTeam) {
+            expect(designTeam.name).toBe('Game Design');
+            expect(designTeam.departments[0].name).toBe('Game Developer');
+            expect(designTeam.departments[0].members[0].name).toBe('Alice Smith');
+        }
+    });
+
+    it('should organize members into teams and departments with correct Finnish translations', () => {
+        const result = organizeMembers(mockMembers, 'fi');
+
+        const developmentTeam = result.teamsMap.get(1);
+        expect(developmentTeam).toBeDefined();
+        if (developmentTeam) {
+            expect(developmentTeam.name).toBe('Ohjelmistokehitys');
+            expect(developmentTeam.departments[0].name).toBe('Verkkosivukehittäjä');
+            expect(developmentTeam.departments[0].members[0].name).toBe('Joni Roine');
+        }
+
+        const designTeam = result.teamsMap.get(2);
+        expect(designTeam).toBeDefined();
+        if (designTeam) {
+            expect(designTeam.name).toBe('Pelisuunnittelu');
+            expect(designTeam.departments[0].name).toBe('Pelikehittäjä');
+            expect(designTeam.departments[0].members[0].name).toBe('Alice Smith');
+        }
+    });
+
+    it('should return an empty teams map if no members are provided', () => {
+        const result = organizeMembers([], 'en');
+        expect(result.teamsMap.size).toBe(0);
+    });
+});

frontend-next-migration/src/entities/Member/api/mappers.ts

@@ -1,105 +1,122 @@
 import { faGithub, faLinkedin, faInstagram, faFacebook } from '@fortawesome/free-brands-svg-icons';
 import { faGlobe, faEnvelope } from '@fortawesome/free-solid-svg-icons';
-import { envHelper } from '@/shared/const/envHelper';
-import { Member, Department } from '../model/types/types';
+import { Member, Team } from '@/entities/Member/model/types/types';
+import { getDepartmentTranslation, getTeamTranslation, getLanguageCode } from './translations';
 
 /**
- * LinksMap provides a mapping of link types to FontAwesome icons.
+ * Provides a set of icon links for various platforms.
+ *
+ * @returns {object} An object containing font-awesome icons for different links.
  */
-export const getLinks = () => ({
-    website: faGlobe,
-    github: faGithub,
-    linkedin: faLinkedin,
-    facebook: faFacebook,
-    instagram: faInstagram,
-    email: faEnvelope,
-});
+export const getLinks = () => {
+    return {
+        website: faGlobe,
+        github: faGithub,
+        linkedin: faLinkedin,
+        facebook: faFacebook,
+        instagram: faInstagram,
+        email: faEnvelope,
+    };
+};
 
 /**
- * Maps raw member data from the API response to the Member type used in the application.
- * Sorts members alphabetically by name.
- * @param membersData An array of raw member data from the API.
- * @returns An array of members mapped to the Member type.
+ * Represents the organized data structure containing teams and departments.
+ *
+ * @typedef {Object} OrganizedData
+ * @property {Map<number, Team>} teamsMap - A map associating team IDs with team objects,
+ *                                           organized according to their translation and language preference.
  */
-export const getMembers = (membersData: any[]): Member[] => {
-    return (
-        membersData
-            .map((member: any) => {
-                const logoUrl = member.attributes.Logo?.data?.attributes?.url
-                    ? `${envHelper.strapiHost}${member.attributes.Logo.data.attributes.url}`
-                    : null;
-
-                return {
-                    id: member.id,
-                    name: member.attributes.Name,
-                    task: member.attributes.Task,
-                    email: member.attributes.Email,
-                    linkedin: member.attributes.Linkedin,
-                    website: member.attributes.Website,
-                    github: member.attributes.Github,
-                    logo: logoUrl,
-                    facebook: member.attributes.Facebook,
-                    instagram: member.attributes.Instagram,
-                    createdAt: member.attributes.createdAt,
-                    updatedAt: member.attributes.updatedAt,
-                    locale: member.attributes.locale,
-                };
-            })
-            .sort((a, b) => a.name.localeCompare(b.name)) || []
-    );
-};
 
 /**
- * Maps raw department data from the API response to the Department type used in the application.
- * Sorts departments based on a predefined order depending on the locale.
- * @param departmentsData An array of raw department data from the API.
- * @param locale The language locale used to find the localized department name.
- * @returns An array of departments mapped to the Department type.
+ * Organizes members into teams and departments based on their properties,
+ * and sorts both the members alphabetically within their teams and departments,
+ * as well as the teams based on a predefined order dictated by language.
+ *
+ * @param {Member[]} members - An array of member objects, each containing associated team and department data.
+ * @param {string} lng - The language code used to determine which language to use for translations and sorting.
+ * @returns {OrganizedData} The organized data containing teams mapped by their IDs.
  */
-export const getDepartments = (departmentsData: any[], locale: string): Department[] => {
-    const orderEn = [
-        'Lead Developers',
-        'Game Developer',
-        'Website Developer',
-        'Developers',
+export const organizeMembers = (members: Member[], lng: string) => {
+    const teamsMap = new Map<number, Team>();
+    const fullLanguageCode = getLanguageCode(lng);
+
+    const enOrder = [
+        'Game Design',
+        'Mentoring',
+        'Development',
         'Graphics',
-        'Graphical Game Development',
-        'Sound Design & Composition',
-        'Sound Design-Oriented Game Development',
+        'Sounds',
+        'Comic Book',
+        'Production',
+        'Analysis',
+        'Game Art Education Package',
+        'Other Participants',
+        'Special Thanks',
     ];
 
-    const orderFi = [
-        'Vastaava Ohjelmistokehittäjä',
-        'Pelikehittäjä',
-        'Verkkosivukehittäjä',
-        'Ohjelmistokehittäjät',
+    const fiOrder = [
+        'Pelisuunnittelu',
+        'Mentorointi',
+        'Ohjelmistokehitys',
         'Grafiikka',
-        'Graafinen pelikehitys',
-        'Äänisuunnittelu ja Sävellys',
-        'Äänisuunnittelullinen Pelikehitys',
+        'Äänet',
+        'Sarjakuva',
+        'Tuotanto',
+        'Analyysi',
+        'Pelitaiteen Opetuspaketti',
+        'Muut Mukana Olleet',
+        'Erityiskiitokset',
     ];
 
-    const order = locale === 'fi' ? orderFi : orderEn;
+    const order = lng === 'fi' ? fiOrder : enOrder;
+
+    members.forEach((member: Member) => {
+        const memberTeam = member.team;
+        const memberDepartment = member.department;
+
+        if (memberTeam) {
+            let team = teamsMap.get(memberTeam.id);
+            if (!team) {
+                const teamName = getTeamTranslation(
+                    memberTeam.translations || [],
+                    fullLanguageCode,
+                );
+
+                team = { ...memberTeam, name: teamName, members: [], departments: [] };
+                teamsMap.set(memberTeam.id, team);
+            }
 
-    return (
-        departmentsData
-            .map((dept: any) => {
-                const localizedDept = dept.attributes.localizations?.data.find(
-                    (loc: any) => loc.attributes.locale === locale,
+            if (memberDepartment) {
+                let department = team.departments.find(
+                    (departmentItem) => departmentItem.id === memberDepartment.id,
                 );
+                if (!department) {
+                    const departmentName = getDepartmentTranslation(
+                        memberDepartment.translations || [],
+                        fullLanguageCode,
+                    );
 
-                const localizedDeptName = localizedDept
-                    ? localizedDept.attributes.Name
-                    : dept.attributes.Name;
+                    department = { ...memberDepartment, name: departmentName, members: [] };
+                    team.departments.push(department);
+                }
 
-                const members = getMembers(dept.attributes.members?.data || []);
+                department.members.push(member);
+            } else {
+                team.members.push(member);
+            }
+        }
+    });
+    teamsMap.forEach((team) => {
+        team.members.sort((a, b) => a.name.localeCompare(b.name));
+        team.departments.forEach((department) => {
+            department.members.sort((a, b) => a.name.localeCompare(b.name));
+        });
+    });
+    const sortedTeams = Array.from(teamsMap.values()).sort((a, b) => {
+        const indexA = order.indexOf(a.name);
+        const indexB = order.indexOf(b.name);
+        return indexA - indexB;
+    });
 
-                return {
-                    id: dept.id,
-                    name: localizedDeptName,
-                    members,
-                };
-            })
-            .sort((a, b) => order.indexOf(a.name) - order.indexOf(b.name)) || []
-    );
+    return { teamsMap: new Map(sortedTeams.map((team) => [team.id, team])) };
 };