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

.github/workflows/ci.yml

@@ -36,6 +36,9 @@ jobs:
           NEXT_PUBLIC_API_LINK: ${{ secrets.NEXT_PUBLIC_API_LINK }}
           NEXT_PUBLIC_API_DOMAIN: ${{ secrets.NEXT_PUBLIC_API_DOMAIN }}
           NEXT_PUBLIC_LOCAL_HOST: ${{ secrets.NEXT_PUBLIC_LOCAL_HOST }}
+          NEXT_PUBLIC_STRAPI_API_URL: ${{ secrets.NEXT_PUBLIC_STRAPI_API_URL }}
+          NEXT_PUBLIC_STRAPI_HOST: ${{ secrets.NEXT_PUBLIC_STRAPI_HOST }}
+
 
       - name: Run tests
         run: npm test
@@ -44,6 +47,8 @@ jobs:
           NEXT_PUBLIC_API_LINK: ${{ secrets.NEXT_PUBLIC_API_LINK }}
           NEXT_PUBLIC_API_DOMAIN: ${{ secrets.NEXT_PUBLIC_API_DOMAIN }}
           NEXT_PUBLIC_LOCAL_HOST: ${{ secrets.NEXT_PUBLIC_LOCAL_HOST }}
+          NEXT_PUBLIC_STRAPI_API_URL: ${{ secrets.NEXT_PUBLIC_STRAPI_API_URL }}
+          NEXT_PUBLIC_STRAPI_HOST: ${{ secrets.NEXT_PUBLIC_STRAPI_HOST }}
 
 #      - name: Run Cypress tests
 #        run: npm run cypress:run

frontend-next-migration/next.config.js

@@ -39,31 +39,31 @@
 //     withBundleAnalyzer,
 // ], nextConfig);
 
-
 // module.exports = nextConfig;
 const path = require('path');
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  images: {
+    remotePatterns: [
+      { hostname: process.env.NEXT_PUBLIC_API_DOMAIN },
+      { hostname: 'hips.hearstapps.com' },
+      { hostname: 'www.thesprucepets.com' },
+      { hostname: 'heroes.ts.unsplash.com' },
+      { hostname: 'raw.githubusercontent.com' },
+      { hostname: 'localhost' }, // Add localhost for development
+      { hostname: new URL(process.env.NEXT_PUBLIC_STRAPI_HOST).hostname },
+    ],
+  },
+  sassOptions: {
+    includePaths: [path.join(__dirname, 'styles')],
+    // prependData: `@import "src/app/styles/variables/_mixins.scss";`,
+    prependData: `@import "src/app/_styles/variables/_mixins.scss";`,
+    // prependData: `@import "src/preparedApp/styles/variables/_mixins.scss";`,
+  },
+  output: 'standalone',
+  // experimental: {
+  //     webpackBuildWorker: true
+  // },
+};
 
-    images: {
-        remotePatterns: [
-            { hostname: process.env.NEXT_PUBLIC_API_DOMAIN },
-            { hostname: "hips.hearstapps.com" },
-            { hostname: "www.thesprucepets.com" },
-            { hostname: "heroes.ts.unsplash.com" },
-            { hostname: "raw.githubusercontent.com" },
-        ],
-    },
-    sassOptions: {
-        includePaths: [path.join(__dirname, 'styles')],
-        // prependData: `@import "src/app/styles/variables/_mixins.scss";`,
-        prependData: `@import "src/app/_styles/variables/_mixins.scss";`,
-        // prependData: `@import "src/preparedApp/styles/variables/_mixins.scss";`,
-    },
-    output: 'standalone',
-    // experimental: {
-    //     webpackBuildWorker: true
-    // },
-}
-
-module.exports = nextConfig
+module.exports = nextConfig;

frontend-next-migration/src/app/_providers/StoreProvider/config/StateSchema.ts

@@ -1,9 +1,8 @@
-import {AuthUserSchema} from "@/entities/Auth";
-import {gameApi} from "@/shared/api";
+import { AuthUserSchema } from '@/entities/Auth';
+import {gameApi, strapiApi} from '@/shared/api';
 
 export interface StateSchema {
-    authUser: AuthUserSchema;
-    [gameApi.reducerPath]: ReturnType<typeof gameApi.reducer>;
-    // todo add here strapiApi
+  authUser: AuthUserSchema;
+  [gameApi.reducerPath]: ReturnType<typeof gameApi.reducer>;
+  [strapiApi.reducerPath]: ReturnType<typeof strapiApi.reducer>;
 }
-

frontend-next-migration/src/app/_providers/StoreProvider/config/store.ts

@@ -1,79 +1,78 @@
-import {combineReducers, configureStore} from "@reduxjs/toolkit";
-import { persistStore, persistReducer } from 'redux-persist'
+import { combineReducers, configureStore } from '@reduxjs/toolkit';
+import { persistStore, persistReducer } from 'redux-persist';
 import createWebStorage from 'redux-persist/lib/storage/createWebStorage';
-import {envHelper} from "@/shared/const/envHelper";
-import {StateSchema} from "./StateSchema";
-import {authUserReducer, authMiddleware} from "@/entities/Auth";
-import {FLUSH, PAUSE, PERSIST, PURGE, REGISTER, REHYDRATE} from "redux-persist";
-import {setupListeners} from "@reduxjs/toolkit/query";
-import {gameApi} from "@/shared/api";
-
-
-const createNoopStorage= () => {
-    return {
-        getItem(_key: any){
-            return Promise.resolve(null)
-        },
-        setItem(_key: any, value: any){
-            return Promise.resolve(value)
-        },
-        removeItem(_key: any){
-            return Promise.resolve()
-        }
-
-    }
-}
+import { envHelper } from '@/shared/const/envHelper';
+import { StateSchema } from './StateSchema';
+import { authUserReducer, authMiddleware } from '@/entities/Auth';
+import {
+  FLUSH,
+  PAUSE,
+  PERSIST,
+  PURGE,
+  REGISTER,
+  REHYDRATE,
+} from 'redux-persist';
+import { setupListeners } from '@reduxjs/toolkit/query';
+import {gameApi, strapiApi} from '@/shared/api';
+
+const createNoopStorage = () => {
+  return {
+    getItem(_key: any) {
+      return Promise.resolve(null);
+    },
+    setItem(_key: any, value: any) {
+      return Promise.resolve(value);
+    },
+    removeItem(_key: any) {
+      return Promise.resolve();
+    },
+  };
+};
 
 const storage =
-    typeof window !== "undefined"
-        ? createWebStorage("local")
-        : createNoopStorage();
-
+  typeof window !== 'undefined'
+    ? createWebStorage('local')
+    : createNoopStorage();
 
 export function createReduxStore(initialState?: StateSchema) {
+  const rootReducer = combineReducers({
+    authUser: authUserReducer,
+    [gameApi.reducerPath]: gameApi.reducer,
+    [strapiApi.reducerPath]: strapiApi.reducer,
+  });
+
+  const persistConfig = {
+    key: 'root',
+    storage,
+    blacklist: [
+        gameApi.reducerPath,
+      strapiApi.reducerPath
+    ],
+  };
+
+  const persistedReducer = persistReducer(persistConfig, rootReducer);
+
+  const store = configureStore({
+    // reducer: rootReducer,
+    reducer: persistedReducer,
+    //only in dev mode
+    devTools: envHelper.isDevMode,
+    preloadedState: initialState,
+    middleware: (getDefaultMiddleware) =>
+      getDefaultMiddleware({
+        serializableCheck: {
+          ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
+        },
+      }).concat(
+          gameApi.middleware,
+          strapiApi.middleware,
+          authMiddleware
+      ),
+  });
 
-    const rootReducer = combineReducers({
-        authUser: authUserReducer,
-        [gameApi.reducerPath]: gameApi.reducer,
-        // todo add here strapiApi
-    });
-
-    const persistConfig = {
-        key: 'root',
-        storage,
-        // todo add here strapiApi
-        blacklist: [gameApi.reducerPath]
-    };
-
-
-    const persistedReducer = persistReducer(persistConfig, rootReducer);
-
-
-    const store = configureStore({
-        // reducer: rootReducer,
-        reducer: persistedReducer,
-        //only in dev mode
-        devTools: envHelper.isDevMode,
-
-        preloadedState: initialState,
-
-        middleware: (getDefaultMiddleware) =>
-            getDefaultMiddleware({
-                serializableCheck: {
-                    ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
-                },
-            }).concat(
-                gameApi.middleware,
-                authMiddleware,
-            ),
-
-    });
-
-    const persistor = persistStore(store);
-
-    setupListeners(store.dispatch);
+  const persistor = persistStore(store);
 
-    return { store, persistor };
+  setupListeners(store.dispatch);
 
+  return { store, persistor };
 }
-

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

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

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

@@ -0,0 +1,113 @@
+import { Member, Department } from '../model/types/types';
+import { faGlobe, faEnvelope } from '@fortawesome/free-solid-svg-icons';
+import { envHelper } from '@/shared/const/envHelper';
+import {
+  faGithub,
+  faLinkedin,
+  faInstagram,
+  faFacebook,
+} from '@fortawesome/free-brands-svg-icons';
+
+/**
+ * LinksMap provides a mapping of link types to FontAwesome icons.
+ */
+export const getLinks = () => ({
+  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.
+ */
+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.
+ */
+export const getDepartments = (
+  departmentsData: any[],
+  locale: string,
+): Department[] => {
+  const orderEn = [
+    'Lead Developers',
+    'Game Developer',
+    'Website Developer',
+    'Developers',
+    'Graphics',
+    'Graphical Game Development',
+    'Sound Design & Composition',
+    'Sound Design-Oriented Game Development',
+  ];
+
+  const orderFi = [
+    'Vastaava Ohjelmistokehittäjä',
+    'Pelikehittäjä',
+    'Verkkosivukehittäjä',
+    'Ohjelmistokehittäjät',
+    'Grafiikka',
+    'Graafinen pelikehitys',
+    'Äänisuunnittelu ja Sävellys',
+    'Äänisuunnittelullinen Pelikehitys',
+  ];
+
+  const order = locale === 'fi' ? orderFi : orderEn;
+
+  return (
+    departmentsData
+      .map((dept: any) => {
+        const localizedDept = dept.attributes.localizations?.data.find(
+          (loc: any) => loc.attributes.locale === locale,
+        );
+
+        const localizedDeptName = localizedDept
+          ? localizedDept.attributes.Name
+          : dept.attributes.Name;
+
+        const members = getMembers(dept.attributes.members?.data || []);
+
+        return {
+          id: dept.id,
+          name: localizedDeptName,
+          members,
+        };
+      })
+      .sort((a, b) => order.indexOf(a.name) - order.indexOf(b.name)) || []
+  );
+};