#241 Upgrade React and Next Libraries

liferay-labs-br · Aug 7, 2022 · e03cfb3 · e03cfb3
1 parent 5c6aa86
commit e03cfb3
Show file tree

Hide file tree

Showing 26 changed files with 535 additions and 1,329 deletions.
diff --git a/packages/backend/src/index.ts b/packages/backend/src/index.ts
@@ -48,7 +48,7 @@ class App {
     try {
       const conn = await createTypeormConn();
 
-      logger.debug('Database connected success');
+      logger.debug('Database connected with success');
 
       const migrations = await conn.runMigrations({ transaction: 'all' });
 

diff --git a/packages/eslint-config-node/.eslintrc.js b/packages/eslint-config-node/.eslintrc.js
@@ -3,7 +3,7 @@ module.exports = {
     browser: true,
     es2020: true,
     node: true,
-    jest: true
+    jest: true,
   },
   extends: [
     'plugin:react/recommended',
@@ -12,36 +12,50 @@ module.exports = {
     'prettier/@typescript-eslint',
     'prettier/standard',
     'prettier/react',
-    'plugin:prettier/recommended'
+    'plugin:prettier/recommended',
   ],
   parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaFeatures: {
-      jsx: true
+      jsx: true,
     },
     ecmaVersion: 2020,
-    sourceType: 'module'
+    sourceType: 'module',
   },
-  plugins: ['react', '@typescript-eslint', 'prettier', 'simple-import-sort', 'sort-destructure-keys', 'sort-keys-fix'],
+  plugins: [
+    'react',
+    '@typescript-eslint',
+    'prettier',
+    'simple-import-sort',
+    'sort-destructure-keys',
+    'sort-keys-fix',
+  ],
   rules: {
-    'semi': ["error", "always"],
-    "simple-import-sort/sort": "error",
-    "sort-keys": ["error", "asc", { "caseSensitive": true, "natural": false, "minKeys": 2 }],
-    "sort-destructure-keys/sort-destructure-keys": [2, { "caseSensitive": false }],
-    "sort-keys-fix/sort-keys-fix": "warn",
-    "no-explicit-any": "off",
-    "camelcase": "off",
-    "react/display-name": "off",
-    "react/prop-types": "off",
-    "no-use-before-define": "off",
-    "@typescript-eslint/no-use-before-define": ["error"]
+    semi: ['error', 'always'],
+    'simple-import-sort/sort': 'error',
+    'sort-keys': [
+      'error',
+      'asc',
+      { caseSensitive: true, natural: false, minKeys: 2 },
+    ],
+    'sort-destructure-keys/sort-destructure-keys': [
+      2,
+      { caseSensitive: false },
+    ],
+    'sort-keys-fix/sort-keys-fix': 'warn',
+    'no-explicit-any': 'off',
+    camelcase: 'off',
+    'react/display-name': 'off',
+    'react/prop-types': 'off',
+    'no-use-before-define': 'off',
+    '@typescript-eslint/no-use-before-define': ['error'],
   },
   settings: {
     'import/resolver': {
-      typescript: {}
+      typescript: {},
     },
     react: {
       version: 'detect',
     },
-  }
-}
+  },
+};
diff --git a/packages/frontend/next-env.d.ts b/packages/frontend/next-env.d.ts
@@ -1,3 +1,5 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
-/// <reference types="next-images" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/packages/frontend/package-lock.json b/packages/frontend/package-lock.json
diff --git a/packages/frontend/package.json b/packages/frontend/package.json
@@ -40,10 +40,10 @@
     "graphql": "^15.5.0",
     "js-cookie": "^2.2.1",
     "moment": "^2.29.1",
-    "next": "10.0.7",
+    "next": "12.2.4",
     "next-images": "^1.7.0",
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-toastify": "^7.0.3",
     "recharts": "^2.0.9",
     "sass": "^1.32.7"
@@ -55,9 +55,9 @@
     "@testing-library/user-event": "^12.8.3",
     "@types/classnames": "^2.2.11",
     "@types/js-cookie": "^2.2.6",
-    "@types/node": "^14.14.28",
-    "@types/react": "^17.0.2",
+    "@types/node": "^18.6.4",
+    "@types/react": "^18.0.16",
     "babel-jest": "^26.6.3",
-    "typescript": "^4.2.4"
+    "typescript": "^4.7.4"
   }
 }
diff --git a/packages/frontend/src/components/drop-down/DropDownTabs.tsx b/packages/frontend/src/components/drop-down/DropDownTabs.tsx
@@ -1,7 +1,7 @@
 import ClayDropDown, { Align } from '@clayui/drop-down';
 import ClayIcon from '@clayui/icon';
 import ClayTabs from '@clayui/tabs';
-import React, { useState } from 'react';
+import React, { ReactElement, useState } from 'react';
 
 import useLang from '@/hooks/useLang';
 
@@ -13,6 +13,7 @@ type Tab = {
 
 type ClayDropDownWithTabsProps = {
   tabs: Tab[];
+  children: ReactElement;
   offset: number;
   onClick?: (tab: Tab) => void;
 };

diff --git a/packages/frontend/src/components/empty-state/EmptyState.tsx b/packages/frontend/src/components/empty-state/EmptyState.tsx
@@ -1,9 +1,10 @@
 import ClayEmptyState from '@clayui/empty-state';
-import React from 'react';
+import React, { ReactElement } from 'react';
 
 import useLang from '@/hooks/useLang';
 
 export type EmptyStateProps = {
+  children?: ReactElement;
   description?: string;
   title?: string;
 };

diff --git a/packages/frontend/src/components/panel/Panel.tsx b/packages/frontend/src/components/panel/Panel.tsx
@@ -2,11 +2,12 @@ import ClayCard from '@clayui/card';
 import ClayLayout from '@clayui/layout';
 import ClayPanel from '@clayui/panel';
 import classNames from 'classnames';
-import React from 'react';
+import React, { ReactElement } from 'react';
 
 import ProgressBar from './ProgressBar';
 
 type IPanelItem = {
+  children: ReactElement;
   onClick?: () => void;
 };
 
@@ -44,6 +45,7 @@ const PanelBody: React.FC<React.HTMLAttributes<HTMLElement>> = ({
 };
 
 interface IPanelProps {
+  children: ReactElement;
   title: string;
   defaultExpanded?: boolean;
   displayType?: 'secondary' | 'unstyled';

diff --git a/packages/frontend/src/components/profile/index.tsx b/packages/frontend/src/components/profile/index.tsx
@@ -1,7 +1,7 @@
 import ClayCard from '@clayui/card';
 import ClayLayout from '@clayui/layout';
 import { useRouter } from 'next/router';
-import React, { useContext } from 'react';
+import React, { ReactElement, useContext } from 'react';
 
 import AppContext from '@/AppContext';
 import Header from '@/components/header';
@@ -25,6 +25,7 @@ const defaultSteps = [
 type Steps = typeof Sidebar.defaultProps.steps;
 
 type IProfileWrapper = {
+  children: ReactElement;
   me: User;
   steps?: Steps;
 };

diff --git a/packages/frontend/src/components/sidebar/Sidebar.tsx b/packages/frontend/src/components/sidebar/Sidebar.tsx
@@ -1,7 +1,7 @@
 import ClayIcon from '@clayui/icon';
 import classNames from 'classnames';
 import { useRouter } from 'next/router';
-import React from 'react';
+import React, { ReactElement } from 'react';
 
 import useLang from '@/hooks/useLang';
 
@@ -13,8 +13,9 @@ type Step = {
 
 type SidebarItemProps = {
   active?: boolean;
-  symbol: string;
+  children: ReactElement | string;
   onClick: () => void;
+  symbol: string;
 };
 
 type SidebarProps = {

diff --git a/packages/frontend/src/components/skill-management/SkillContextProvider.tsx b/packages/frontend/src/components/skill-management/SkillContextProvider.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useReducer, useState } from 'react';
+import React, { ReactElement, useEffect, useReducer, useState } from 'react';
 
 import { initializeApollo } from '@/graphql/nextApollo';
 import { allKnowledgeData } from '@/graphql/queries';
@@ -9,6 +9,7 @@ import SkillContext, { initialState, mainReducer } from './SkillContext';
 
 type SkillContextProvider = {
   defaultState?: SkillManagement;
+  children: ReactElement | ReactElement[];
   fetchData?: boolean;
 };
 

diff --git a/packages/frontend/src/components/skill-management/SkillManagementBars.tsx b/packages/frontend/src/components/skill-management/SkillManagementBars.tsx
@@ -288,11 +288,13 @@ const SkillListWithAverage: React.FC<SkillListWithAverageProps> = ({
 
         return (
           <Panel.Item key={index} onClick={() => handleClickSkill(skill)}>
-            <Panel.Title>{skill.name}</Panel.Title>
-            <Panel.Body>
-              <span>{matrizName}</span>
-            </Panel.Body>
-            <Panel.ProgressBar partialValue={matrizLevelAvg} />
+            <>
+              <Panel.Title>{skill.name}</Panel.Title>
+              <Panel.Body>
+                <span>{matrizName}</span>
+              </Panel.Body>
+              <Panel.ProgressBar partialValue={matrizLevelAvg} />
+            </>
           </Panel.Item>
         );
       })}

diff --git a/packages/frontend/src/components/templates/AuthTemplate.tsx b/packages/frontend/src/components/templates/AuthTemplate.tsx
@@ -20,7 +20,7 @@ type ServerInfo = {
   };
 };
 
-const AuthTemplate: React.FC = ({ children, className }: AuthProps) => {
+const AuthTemplate: React.FC<AuthProps> = ({ children, className }) => {
   const i18n = useLang();
 
   const frontendVersion = process.env.NEXT_PUBLIC_PACKAGE_VERSION;

diff --git a/packages/frontend/src/components/templates/HomeTemplate.tsx b/packages/frontend/src/components/templates/HomeTemplate.tsx
@@ -1,6 +1,6 @@
 import ClayCard from '@clayui/card';
 import ClayLayout from '@clayui/layout';
-import React from 'react';
+import React, { ReactElement } from 'react';
 
 import Sidebar from '@/components/sidebar/Sidebar';
 
@@ -17,7 +17,7 @@ const steps = [
   },
 ];
 
-const HomeTemplate: React.FC = ({ children }) => {
+const HomeTemplate: React.FC<{ children: ReactElement[] }> = ({ children }) => {
   return (
     <div className="home">
       <ClayLayout.ContainerFluid>

diff --git a/packages/frontend/src/components/templates/ProfileSkillTemplate.tsx b/packages/frontend/src/components/templates/ProfileSkillTemplate.tsx
@@ -1,6 +1,6 @@
 import ClayButton from '@clayui/button';
 import { useRouter } from 'next/router';
-import React, { useContext } from 'react';
+import React, { ReactElement, useContext } from 'react';
 
 import Profile, { ProfileWrapper } from '@/components/profile';
 import SkillContext from '@/components/skill-management/SkillContext';
@@ -36,6 +36,7 @@ const userSkillsPaths = [
 ];
 
 type ITemplateProps = {
+  children: ReactElement;
   me: User;
   title: string;
 };
@@ -88,8 +89,10 @@ const UserSkillTemplate: React.FC<ITemplateProps> = ({
     <Profile>
       <Meta title={i18n.sub('app-title-x', title)} />
       <ProfileWrapper steps={userSkillsPaths} me={me}>
-        <h1 className="mb-4">{title}</h1>
-        {children}
+        <>
+          <h1 className="mb-4">{title}</h1>
+          {children}
+        </>
       </ProfileWrapper>
     </Profile>
   );