refactor(mocks): ✨ enhance user mock data generation with notificatfi…

…cations (#129)

* refactor(mocks): ✨  enhance user mock data generation with notifications and team

* refactor(mocks): ♻️ convert functions to arrow functions

* test

* fix(eslint)

* save changes

* fix: refactor

* fix: date type

* fix: upgrade types

---------

Co-authored-by: Nikita Mashchenko <mashchenko1@icloud.com>

client/.eslintrc.json

@@ -28,7 +28,14 @@
   "rules": {
     "react/display-name": 0,
     // I suggest you add those two rules:
-    "@typescript-eslint/no-unused-vars": "error",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        "argsIgnorePattern": "^_",
+        "caughtErrorsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_"
+      }
+    ],
     "@typescript-eslint/no-explicit-any": "error",
     "@typescript-eslint/no-var-requires": "off"
   }

client/package.json

@@ -25,7 +25,7 @@
     "@react-oauth/google": "^0.11.1",
     "@storybook/addon-styling": "^1.3.6",
     "@tanstack/react-query": "beta",
-    "@teameights/types": "^1.1.17",
+    "@teameights/types": "^1.1.19",
     "@types/lodash.debounce": "^4.0.7",
     "@types/node": "20.4.8",
     "@types/react": "18.2.18",

client/src/app/page.tsx

@@ -1,98 +1,36 @@
 'use client';
-import { Typography, Button } from '@/shared/ui';
-import { useState } from 'react';
-import { ActionModal } from '@/widgets/modals';
-import { userResponseFixture } from '@/shared/fixtures/user';
-import { teamFixture } from '@/shared/fixtures/team';
-import { UserInfoModal } from '@/widgets/modals/info-modal/user';
-import { TeamInfoModal } from '@/widgets/modals/info-modal/team/team';
+import { Typography } from '@/shared/ui';
+import {
+  generateMockTeam,
+  generateMockUser,
+  generateSystemNotification,
+  generateTeamInvitationNotification,
+} from '@/shared/lib/mock';
+import { useEffect, useState } from 'react';
+import { IUserBase } from '@teameights/types';
 
 export default function Home() {
-  const [isOpenFirstModal, setIsOpenFirstModal] = useState(false);
-  const [isOpenThirdModal, setIsOpenThirdModal] = useState(false);
-  const [openModal, setOpenModal] = useState(false);
+  const [user, setUser] = useState<IUserBase>();
 
-  const openModalNew = () => {
-    setOpenModal(true);
-  };
-  const closeModalNew = () => {
-    setOpenModal(false);
-  };
+  useEffect(() => {
+    setUser(generateMockUser());
 
-  const openFirstModal = () => {
-    setIsOpenFirstModal(true);
-  };
-
-  const closeFirstModal = () => {
-    setIsOpenFirstModal(false);
-  };
-
-  const openThirdModal = () => {
-    setIsOpenThirdModal(true);
-  };
-
-  const closeThirdModal = () => {
-    setIsOpenThirdModal(false);
-  };
-
-  const handleJoin = () => {
-    console.log('Join button clicked');
-  };
+    console.log(generateTeamInvitationNotification());
+    console.log(generateMockTeam());
+    console.log(generateSystemNotification());
+  }, []);
 
   return (
     <>
       <Typography size='heading_l' variant='h6'>
         We are working hard to deliver teameights on NextJS/TS soon!
       </Typography>
 
-      <Typography>Hello, {userResponseFixture.username}!</Typography>
+      <Typography>Hello, {user?.username}!</Typography>
 
       <a href='/login' style={{ color: 'green' }}>
         Get to login
       </a>
-
-      <div>
-        <ActionModal
-          heading='Removing member'
-          sub='Are you sure you want to remove member from team?'
-          isOpen={isOpenFirstModal}
-          handleClose={closeFirstModal}
-        >
-          <Button typeBtn='danger' color='white' size='m' onClick={openFirstModal}>
-            Delete
-          </Button>
-          <Button typeBtn='primary' color='white' size='m' onClick={closeFirstModal}>
-            Cancel
-          </Button>
-        </ActionModal>
-        <Button typeBtn='primary' size='m' color='white' onClick={openFirstModal}>
-          First Modal
-        </Button>
-      </div>
-
-      <div>
-        <Button typeBtn='primary' size='m' color='white' onClick={openModalNew}>
-          Open Modal Team
-        </Button>
-        <TeamInfoModal
-          team={teamFixture}
-          user={userResponseFixture}
-          isOpenModal={openModal}
-          handleClose={closeModalNew}
-          handleJoin={handleJoin}
-        />
-      </div>
-
-      <div>
-        <Button typeBtn='primary' size='m' color='white' onClick={openThirdModal}>
-          Open Third Modal
-        </Button>
-        <UserInfoModal
-          user={userResponseFixture}
-          isOpenModal={isOpenThirdModal}
-          handleClose={closeThirdModal}
-        />
-      </div>
     </>
   );
 }

client/src/shared/constant/frameworks.ts

@@ -0,0 +1,31 @@
+export const frameworkOptions = [
+  { label: 'NodeJS', value: 'nodejs' },
+  { label: 'Ruby', value: 'ruby' },
+  { label: 'Angular', value: 'angular' },
+  { label: 'Hadoop', value: 'hadoop' },
+  { label: 'Ember', value: 'ember' },
+  { label: 'Django', value: 'django' },
+  { label: 'Redux', value: 'redux' },
+  { label: 'React', value: 'react' },
+  { label: 'Spring', value: 'spring' },
+  { label: 'Spark', value: 'spark' },
+  { label: 'Backbone', value: 'backbone' },
+  { label: 'Figma', value: 'figma' },
+  { label: 'Photoshop', value: 'photoshop' },
+  { label: 'jQuery', value: 'jquery' },
+  { label: 'MUI', value: 'mui' },
+  { label: 'ASP.NET', value: 'aspnet' },
+  { label: 'NumPy', value: 'numpy' },
+  { label: 'Flutter', value: 'flutter' },
+  { label: 'React N.', value: 'reactnative' },
+  { label: 'Flask', value: 'flask' },
+  { label: 'VueJS', value: 'vuejs' },
+  { label: 'Bootstrap', value: 'bootstrap' },
+  { label: 'KMM', value: 'kotlinmultiplatformmobile' },
+  { label: 'GraphQL', value: 'graphql' },
+  { label: 'Laravel', value: 'laravel' },
+  { label: 'PyTorch', value: 'pytorch' },
+  { label: 'Tensor F.', value: 'tensorflow' },
+  { label: 'Express', value: 'express' },
+  { label: 'Illustrator', value: 'illustrator' },
+];

client/src/shared/lib/mock/common.ts

@@ -0,0 +1,33 @@
+import { faker } from '@faker-js/faker';
+
+export const getRandomItemFromArray = (array: string[]): string => {
+  const randomIndex = faker.number.int({ min: 0, max: array.length - 1 });
+  return array[randomIndex];
+};
+
+export const getRandomItemFromObject = <T>(obj: { [key: string]: T }): T => {
+  const keys = Object.keys(obj);
+  const randomKey = getRandomItemFromArray(keys);
+  return obj[randomKey as keyof typeof obj];
+};
+
+export const getRandomNumberBetween = (min: number, max: number) => {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+};
+
+export const shuffleArray = <T>(array: T[]): T[] => {
+  let currentIndex = array.length,
+    randomIndex;
+
+  // While there remain elements to shuffle...
+  while (currentIndex !== 0) {
+    // Pick a remaining element...
+    randomIndex = Math.floor(Math.random() * currentIndex);
+    currentIndex--;
+
+    // And swap it with the current element.
+    [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
+  }
+
+  return array;
+};

client/src/shared/lib/mock/index.ts

@@ -0,0 +1,3 @@
+export * from './team';
+export * from './user';
+export * from './notification';