.eslintrc.json

@@ -65,7 +65,9 @@
           "**/jest.setup.ts", // jest setup
           "**/setupTests.ts"
         ],
-        "optionalDependencies": false
+        "optionalDependencies": false,
+        "peerDependencies": false,
+        "packageDir": "./"
       }
     ],
     "indent": ["error", 2],
@@ -83,6 +85,12 @@
       "rules": {
         "@typescript-eslint/explicit-function-return-type": "error"
       }
+    },
+    {
+      // feel free to replace with your preferred file pattern - eg. 'src/**/*Slice.ts'
+      "files": ["src/**/*.slice.ts", "src/**/*.reducers.ts"],
+      // avoid state param assignment
+      "rules": { "no-param-reassign": ["error", { "props": false }] }
     }
   ],
   "settings": {

next-env.d.ts

 /// <reference types="next" />
+/// <reference types="next/image-types/global" />
 /// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited

package.json

@@ -28,23 +28,29 @@
   },
   "dependencies": {
     "@next/font": "^13.5.2",
+    "@reduxjs/toolkit": "^1.9.6",
     "@types/node": "20.6.2",
     "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",
     "autoprefixer": "10.4.15",
+    "axios": "^1.5.1",
     "eslint-config-next": "13.4.19",
     "next": "13.4.19",
     "postcss": "8.4.29",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-redux": "^8.1.2",
     "tailwind-merge": "^1.14.0",
-    "tailwindcss": "3.3.3"
+    "tailwindcss": "3.3.3",
+    "zod": "^3.22.2"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.7.1",
     "@commitlint/config-conventional": "^17.7.0",
     "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^14.0.0",
+    "@types/jest": "^29.5.5",
+    "@types/react-redux": "^7.1.26",
     "@typescript-eslint/eslint-plugin": "^6.7.0",
     "@typescript-eslint/parser": "^6.7.0",
     "cypress": "^13.2.0",

pages/_app.tsx

+import { AppWrapper } from '@/components/AppWrapper';
+import type { AppProps } from 'next/app';
+
+const MyApp = ({ Component, pageProps }: AppProps): JSX.Element => (
+  <AppWrapper>
+    <Component {...pageProps} />
+  </AppWrapper>
+);
+
+export default MyApp;

pages/redux-api-poc.tsx

+import { useSelector } from 'react-redux';
+import { selectSearchValue } from '@/redux/search/search.selectors';
+import { setSearchValue } from '@/redux/search/search.slice';
+import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
+import { getProjectById } from '@/redux/project/project.thunks';
+
+const ReduxPage = (): JSX.Element => {
+  const dispatch = useAppDispatch();
+  const searchValue = useSelector(selectSearchValue);
+
+  const triggerSyncUpdate = (): void => {
+    // eslint-disable-next-line prefer-template
+    const newValue = searchValue + 'test';
+    dispatch(setSearchValue(newValue));
+    dispatch(getProjectById('pd_map_winter_23'));
+  };
+
+  return (
+    <div>
+      {searchValue}
+      <button type="button" onClick={triggerSyncUpdate}>
+        sync update
+      </button>
+    </div>
+  );
+};
+
+export default ReduxPage;

src/components/AppWrapper/AppWrapper.component.tsx

+import { ReactNode } from 'react';
+import { Provider } from 'react-redux';
+import { store } from '@/redux/store';
+
+interface AppWrapperProps {
+  children: ReactNode;
+}
+
+export const AppWrapper = ({ children }: AppWrapperProps): JSX.Element => (
+  <Provider store={store}>{children}</Provider>
+);

src/components/AppWrapper/index.ts

+export { AppWrapper } from './AppWrapper.component';

src/components/FunctionalArea/TopBar/UserAvatar/UserAvatar.component.tsx

@@ -3,6 +3,6 @@ import avatarImg from '@/assets/images/user-avatar.png';
 
 export const UserAvatar = (): JSX.Element => (
   <div className="w-8 h-8 mr-7" data-testid="user-avatar">
-    <Image src={avatarImg} alt="user avatar" height={32} width={32} />
+    <Image src={avatarImg} alt="user avatar" width={32} height={32} />
   </div>
 );

src/constants/api.ts

+export const BASE_API_URL = 'https://corsproxy.io/?https://pdmap.uni.lu/minerva/api';

src/models/disease.ts

+import { z } from 'zod';
+
+export const disease = z.object({
+  link: z.string(),
+  type: z.string(),
+  resource: z.string(),
+  id: z.number(),
+  annotatorClassName: z.string(),
+});

src/models/organism.ts

+import { z } from 'zod';
+
+export const organism = z.object({
+  link: z.string(),
+  type: z.string(),
+  resource: z.string(),
+  id: z.number(),
+  annotatorClassName: z.string(),
+});

src/models/project.ts

+import { z } from 'zod';
+import { disease } from './disease';
+import { organism } from './organism';
+
+export const projectSchema = z.object({
+  version: z.string(),
+  disease,
+  organism,
+  idObject: z.number(),
+  status: z.string(),
+  directory: z.string(),
+  progress: z.number(),
+  notifyEmail: z.string(),
+  logEntries: z.boolean(),
+  name: z.string(),
+  sharedInMinervaNet: z.boolean(),
+  owner: z.string(),
+  projectId: z.string(),
+  creationDate: z.string(),
+  mapCanvasType: z.string(),
+  overviewImageViews: z.array(
+    z.object({
+      idObject: z.number(),
+      filename: z.string(),
+      width: z.number(),
+      height: z.number(),
+      links: z.array(
+        z.union([
+          z.object({
+            idObject: z.number(),
+            polygon: z.array(z.object({ x: z.number(), y: z.number() })),
+            imageLinkId: z.number(),
+            type: z.string(),
+          }),
+          z.object({
+            idObject: z.number(),
+            polygon: z.array(z.object({ x: z.number(), y: z.number() })),
+            zoomLevel: z.number(),
+            modelPoint: z.object({ x: z.number(), y: z.number() }),
+            modelLinkId: z.number(),
+            type: z.string(),
+          }),
+        ]),
+      ),
+    }),
+  ),
+});

src/redux/hooks/useAppDispatch.ts

+import { useDispatch } from 'react-redux';
+import { AppDispatch } from '@/redux/store';
+
+export const useAppDispatch: () => AppDispatch = useDispatch;

src/redux/hooks/useAppSelector.ts

+import { useSelector } from 'react-redux';
+import type { TypedUseSelectorHook } from 'react-redux';
+import { RootState } from '@/redux/store';
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

src/redux/project/project.reducers.ts

+import { ActionReducerMapBuilder } from '@reduxjs/toolkit';
+import { ProjectState } from '@/redux/project/project.types';
+import { getProjectById } from '@/redux/project/project.thunks';
+
+export const getProjectByIdReducer = (builder: ActionReducerMapBuilder<ProjectState>): void => {
+  builder.addCase(getProjectById.fulfilled, (state, action) => {
+    state.data = action.payload;
+    state.loading = 'succeeded';
+  });
+};

src/redux/project/project.slice.ts

+import { createSlice } from '@reduxjs/toolkit';
+import { ProjectState } from '@/redux/project/project.types';
+import { getProjectByIdReducer } from './project.reducers';
+
+const initialState: ProjectState = {
+  data: [],
+  loading: 'idle',
+  error: { name: '', message: '' },
+};
+
+const projectSlice = createSlice({
+  name: 'project',
+  initialState,
+  reducers: {},
+  extraReducers: builder => {
+    getProjectByIdReducer(builder);
+  },
+});
+
+export default projectSlice.reducer;

src/redux/project/project.thunks.ts

+import { createAsyncThunk } from '@reduxjs/toolkit';
+import { axiosInstance } from '@/services/api/utils/axiosInstance';
+import { Project } from '@/types/api';
+import { validateDataUsingZodSchema } from '@/utils/validateDataUsingZodSchema';
+import { projectSchema } from '@/models/project';
+
+export const getProjectById = createAsyncThunk(
+  'project/getUsersByIdStatus',
+  async (id: string): Promise<Project | undefined> => {
+    const response = await axiosInstance.get<Project>(`projects/${id}`);
+
+    const isDataValid = validateDataUsingZodSchema(response.data, projectSchema);
+
+    return isDataValid ? response.data : undefined;
+  },
+);

src/redux/project/project.types.ts

+import { Project } from '@/types/api';
+
+export type ProjectState = {
+  data: Project | undefined | [];
+  loading: 'idle' | 'pending' | 'succeeded' | 'failed';
+  error: Error;
+};