Update all packages to the latest versions, install interactive-upgra…

…de plugin and fix a non-memoized selector issue

.yarnrc.yml

@@ -1,2 +1,7 @@
-yarnPath: .yarn/releases/yarn-3.3.1.cjs
 nodeLinker: pnp
+
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
+    spec: "@yarnpkg/plugin-interactive-tools"
+
+yarnPath: .yarn/releases/yarn-3.3.1.cjs

README.adoc

@@ -81,6 +81,16 @@ An example setup to detect regressions through https://ladle.dev/docs/visual-sna
 
 NOTE: These tests are not running automatically – adding them to your CI is up to you
 
+To run the playwright tests locally, first install the required browser binaries:
+
+`yarn playwright install`
+
+Then, to run the tests:
+
+1. Build ladle: `yarn ladle build`
+2. Start ladle: `yarn ladle preview -p 61000`
+3. Run playwright: `yarn playwright test ./src/e2e/snapshot.spec.ts`
+
 == Continuous Integration & Delivery
 
 On every push or pull request, a set of link:.github/workflows/main.yml[GitHub Actions] are kicked off:

package.json

@@ -58,47 +58,46 @@
     ]
   },
   "dependencies": {
-    "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.10.5",
-    "@mui/icons-material": "^5.11.0",
-    "@mui/material": "^5.11.4",
-    "@mui/system": "^5.11.4",
-    "@reduxjs/toolkit": "^1.9.1",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.14.9",
+    "@mui/material": "^5.14.9",
+    "@mui/system": "^5.14.9",
+    "@reduxjs/toolkit": "^1.9.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-redux": "8.0.5"
+    "react-redux": "8.1.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.12",
-    "@ladle/react": "^2.4.5",
-    "@playwright/test": "^1.29.2",
-    "@testing-library/dom": "^8.19.1",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
+    "@babel/core": "^7.22.19",
+    "@ladle/react": "^2.17.2",
+    "@playwright/test": "^1.38.0",
+    "@testing-library/dom": "^9.3.1",
+    "@testing-library/jest-dom": "^6.1.3",
+    "@testing-library/react": "^14.0.0",
     "@testing-library/react-hooks": "^8.0.1",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^29.2.5",
-    "@types/node": "18.11.18",
-    "@types/react": "^18.0.26",
-    "@types/react-dom": "^18.0.10",
-    "@types/react-redux": "7.1.25",
+    "@testing-library/user-event": "^14.5.0",
+    "@types/jest": "^29.5.4",
+    "@types/node": "20.6.1",
+    "@types/react": "^18.2.21",
+    "@types/react-dom": "^18.2.7",
+    "@types/react-redux": "7.1.26",
     "@types/sync-fetch": "^0.4.0",
-    "@types/testing-library__jest-dom": "^5.14.5",
-    "@vitejs/plugin-react": "^3.0.1",
-    "babel-loader": "^9.1.2",
-    "eslint": "^8.31.0",
+    "@vitejs/plugin-react": "^4.0.4",
+    "babel-loader": "^9.1.3",
+    "eslint": "^8.49.0",
     "eslint-config-react-app": "^7.0.1",
     "husky": "^8.0.3",
-    "jsdom": "^21.0.0",
-    "lint-staged": "13.1.0",
-    "node-fetch": "^3.3.0",
-    "prettier": "2.8.2",
-    "prettier-plugin-packagejson": "2.3.0",
-    "sync-fetch": "^0.4.2",
-    "typescript": "^4.9.4",
-    "vite": "^4.0.4",
-    "vite-plugin-checker": "^0.5.3",
-    "vitest": "^0.27.1"
+    "jsdom": "^22.1.0",
+    "lint-staged": "14.0.1",
+    "node-fetch": "^3.3.2",
+    "prettier": "3.0.3",
+    "prettier-plugin-packagejson": "2.4.5",
+    "sync-fetch": "^0.5.2",
+    "typescript": "^4.9.5",
+    "vite": "^4.4.9",
+    "vite-plugin-checker": "^0.6.2",
+    "vitest": "^0.34.4"
   },
   "packageManager": "[email protected]"
 }

src/chat/containers/ChatHistory.tsx

@@ -1,10 +1,11 @@
 import { ChatHistory as ChatHistoryComponent } from '../components/ChatHistory'
 import * as React from 'react'
-import { useAppDispatch, useAppSelector } from '../../store'
+import { useAppDispatch } from '../../store'
 import { deleteChatMessage } from '../chatSlice'
+import { useChatMessages } from '../hooks'
 
 export const ChatHistory = () => {
-  const messages = useAppSelector((s) => [...s.chat.messages].sort((m1, m2) => m2.timestamp - m1.timestamp))
+  const messages = useChatMessages()
 
   const dispatch = useAppDispatch()
   const onDeleteMessage = (timestamp: number) => dispatch(deleteChatMessage(timestamp))

src/chat/hooks.ts

@@ -0,0 +1,5 @@
+import { useAppSelector } from '../store'
+
+import { selectChatMessages } from './selectors'
+
+export const useChatMessages = () => useAppSelector(selectChatMessages)

src/chat/selectors.ts

@@ -0,0 +1,9 @@
+import { createSelector } from '@reduxjs/toolkit'
+
+import { RootState } from '../store'
+
+const selectChat = (state: RootState) => state.chat
+
+export const selectChatMessages = createSelector(selectChat, (chat) =>
+  [...chat.messages].sort((m1, m2) => m2.timestamp - m1.timestamp),
+)

tsconfig.json

@@ -17,5 +17,5 @@
     "jsx": "react-jsx",
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["./src"]
+  "include": ["./src", "./src/test/setup.ts"],
 }