update dependencies

francoborrelli · Jul 3, 2024 · ddbef8d · ddbef8d
1 parent 1ab43ef
commit ddbef8d
Show file tree

Hide file tree

Showing 6 changed files with 387 additions and 301 deletions.
diff --git a/package.json b/package.json
@@ -4,19 +4,19 @@
   "homepage": "https://francoborrelli.github.io/portfolio/",
   "private": true,
   "dependencies": {
-    "antd": "^5.16.1",
+    "antd": "^5.19.0",
     "devicons-react": "^1.3.0",
     "html-react-parser": "^5.1.10",
-    "i18next": "^23.10.1",
+    "i18next": "^23.11.5",
     "lodash": "^4.17.21",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-full-screen": "^1.1.1",
-    "react-i18next": "^14.1.0",
-    "react-icons": "^5.0.1",
+    "react-i18next": "^14.1.2",
+    "react-icons": "^5.2.1",
     "react-player-controls": "^1.1.0",
-    "react-redux": "^9.1.0",
-    "react-router-dom": "^6.22.3",
+    "react-redux": "^9.1.2",
+    "react-router-dom": "^6.24.1",
     "react-scripts": "5.0.1",
     "redux-persist": "^6.0.0",
     "tinycolor2": "^1.6.0"
@@ -48,19 +48,19 @@
     ]
   },
   "devDependencies": {
-    "@reduxjs/toolkit": "^2.2.3",
+    "@reduxjs/toolkit": "^2.2.6",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
     "@types/jest": "^27.0.1",
-    "@types/lodash": "^4.17.0",
-    "@types/node": "^16.7.13",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
+    "@types/lodash": "^4.17.6",
+    "@types/node": "^20.14.9",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@types/tinycolor2": "^1.4.6",
     "gh-pages": "^6.1.1",
-    "sass": "^1.74.1",
+    "sass": "^1.77.6",
     "typescript": "^4.4.2",
-    "web-vitals": "^2.1.0"
+    "web-vitals": "^4.2.1"
   }
 }
diff --git a/src/components/Icons.tsx b/src/components/Icons.tsx
@@ -137,19 +137,22 @@ export const SkipNext = () => {
   );
 };
 
-export const Replay = (props: { active: boolean }) => (
-  <svg
-    {...props}
-    style={ControlStyle}
-    role='img'
-    aria-hidden='true'
-    viewBox='0 0 16 16'
-    data-encore-id='icon'
-    className={`hoverable-icon replay ${props.active ? 'active' : ''}`}
-  >
-    <path d='M0 4.75A3.75 3.75 0 0 1 3.75 1h8.5A3.75 3.75 0 0 1 16 4.75v5a3.75 3.75 0 0 1-3.75 3.75H9.81l1.018 1.018a.75.75 0 1 1-1.06 1.06L6.939 12.75l2.829-2.828a.75.75 0 1 1 1.06 1.06L9.811 12h2.439a2.25 2.25 0 0 0 2.25-2.25v-5a2.25 2.25 0 0 0-2.25-2.25h-8.5A2.25 2.25 0 0 0 1.5 4.75v5A2.25 2.25 0 0 0 3.75 12H5v1.5H3.75A3.75 3.75 0 0 1 0 9.75v-5z'></path>
-  </svg>
-);
+export const Replay = (props: { active: boolean }) => {
+  const { active, ...otherProps } = props;
+  return (
+    <svg
+      {...otherProps}
+      style={ControlStyle}
+      role='img'
+      aria-hidden='true'
+      viewBox='0 0 16 16'
+      data-encore-id='icon'
+      className={`hoverable-icon replay ${active ? 'active' : ''}`}
+    >
+      <path d='M0 4.75A3.75 3.75 0 0 1 3.75 1h8.5A3.75 3.75 0 0 1 16 4.75v5a3.75 3.75 0 0 1-3.75 3.75H9.81l1.018 1.018a.75.75 0 1 1-1.06 1.06L6.939 12.75l2.829-2.828a.75.75 0 1 1 1.06 1.06L9.811 12h2.439a2.25 2.25 0 0 0 2.25-2.25v-5a2.25 2.25 0 0 0-2.25-2.25h-8.5A2.25 2.25 0 0 0 1.5 4.75v5A2.25 2.25 0 0 0 3.75 12H5v1.5H3.75A3.75 3.75 0 0 1 0 9.75v-5z'></path>
+    </svg>
+  );
+};
 
 export const Pause = () => (
   <svg
@@ -284,20 +287,23 @@ export const Heart = () => (
   </svg>
 );
 
-export const DetailsIcon = (props: { active: boolean }) => (
-  <svg
-    {...props}
-    style={SongExtraControlStyle}
-    data-encore-id='icon'
-    role='img'
-    aria-hidden='true'
-    viewBox='0 0 16 16'
-    className={`hoverable-icon replay ${props.active ? 'active' : ''}`}
-  >
-    <path d='M11.196 8 6 5v6l5.196-3z'></path>
-    <path d='M15.002 1.75A1.75 1.75 0 0 0 13.252 0h-10.5a1.75 1.75 0 0 0-1.75 1.75v12.5c0 .966.783 1.75 1.75 1.75h10.5a1.75 1.75 0 0 0 1.75-1.75V1.75zm-1.75-.25a.25.25 0 0 1 .25.25v12.5a.25.25 0 0 1-.25.25h-10.5a.25.25 0 0 1-.25-.25V1.75a.25.25 0 0 1 .25-.25h10.5z'></path>
-  </svg>
-);
+export const DetailsIcon = (props: { active: boolean }) => {
+  const { active, ...otherProps } = props;
+  return (
+    <svg
+      {...otherProps}
+      style={SongExtraControlStyle}
+      data-encore-id='icon'
+      role='img'
+      aria-hidden='true'
+      viewBox='0 0 16 16'
+      className={`hoverable-icon replay ${active ? 'active' : ''}`}
+    >
+      <path d='M11.196 8 6 5v6l5.196-3z'></path>
+      <path d='M15.002 1.75A1.75 1.75 0 0 0 13.252 0h-10.5a1.75 1.75 0 0 0-1.75 1.75v12.5c0 .966.783 1.75 1.75 1.75h10.5a1.75 1.75 0 0 0 1.75-1.75V1.75zm-1.75-.25a.25.25 0 0 1 .25.25v12.5a.25.25 0 0 1-.25.25h-10.5a.25.25 0 0 1-.25-.25V1.75a.25.25 0 0 1 .25-.25h10.5z'></path>
+    </svg>
+  );
+};
 
 export const MicrophoneIcon = () => (
   <svg
@@ -312,18 +318,22 @@ export const MicrophoneIcon = () => (
   </svg>
 );
 
-export const ListIcon = (props: { active?: boolean }) => (
-  <svg
-    data-encore-id='icon'
-    role='img'
-    aria-hidden='true'
-    viewBox='0 0 16 16'
-    style={SongExtraControlStyle}
-    className={`hoverable-icon replay ${props.active ? 'active' : ''}`}
-  >
-    <path d='M15 15H1v-1.5h14V15zm0-4.5H1V9h14v1.5zm-14-7A2.5 2.5 0 0 1 3.5 1h9a2.5 2.5 0 0 1 0 5h-9A2.5 2.5 0 0 1 1 3.5zm2.5-1a1 1 0 0 0 0 2h9a1 1 0 1 0 0-2h-9z'></path>
-  </svg>
-);
+export const ListIcon = (props: { active?: boolean }) => {
+  const { active, ...otherProps } = props;
+  return (
+    <svg
+      {...otherProps}
+      data-encore-id='icon'
+      role='img'
+      aria-hidden='true'
+      viewBox='0 0 16 16'
+      style={SongExtraControlStyle}
+      className={`hoverable-icon replay ${active ? 'active' : ''}`}
+    >
+      <path d='M15 15H1v-1.5h14V15zm0-4.5H1V9h14v1.5zm-14-7A2.5 2.5 0 0 1 3.5 1h9a2.5 2.5 0 0 1 0 5h-9A2.5 2.5 0 0 1 1 3.5zm2.5-1a1 1 0 0 0 0 2h9a1 1 0 1 0 0-2h-9z'></path>
+    </svg>
+  );
+};
 
 export const DeviceIcon = () => (
   <svg

diff --git a/src/pages/Playlist/SongView.tsx b/src/pages/Playlist/SongView.tsx
@@ -56,12 +56,14 @@ const SongData = ({ song, index, hasSkills }: SongDataProps) => {
       className='tablet-hidden flex flex-row items-center justify-start flex-wrap space-x-2'
     >
       <Avatar.Group
-        maxCount={2}
-        maxStyle={{
-          color: '1cb955',
-          fontWeight: 700,
-          cursor: 'pointer',
-          backgroundColor: '#1d1d1d',
+        max={{
+          count: 2,
+          style: {
+            color: '1cb955',
+            fontWeight: 700,
+            cursor: 'pointer',
+            backgroundColor: '#1d1d1d',
+          },
         }}
       >
         {(song.skills || []).map((tag) => (

diff --git a/src/pages/Playlist/list.tsx b/src/pages/Playlist/list.tsx
@@ -59,7 +59,7 @@ export const PlaylistList: FC<PlaylistListProps> = memo(({ playlist }) => {
       </div>
       <div>
         {songs.map((song, index) => (
-          <SongView song={song} index={index} hasSkills={hasSkills} />
+          <SongView song={song} key={song.name} index={index} hasSkills={hasSkills} />
         ))}
       </div>
     </div>

diff --git a/src/reportWebVitals.ts b/src/reportWebVitals.ts
@@ -1,15 +1,9 @@
-import { ReportHandler } from 'web-vitals';
+import { onLCP, onINP, onCLS } from 'web-vitals/attribution';
 
-const reportWebVitals = (onPerfEntry?: ReportHandler) => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
+const reportWebVitals = () => {
+  onCLS(console.log);
+  onINP(console.log);
+  onLCP(console.log);
 };
 
 export default reportWebVitals;