October 2024 dependency bump and Todo rendering perf improvements (#158)

Use Immer properly to minimize updating todo items when fetching whole list
Memo TodoList & TodoItem components
Pin containers to Python 3.12 due to psycopg issue on 3.13
Remove setting host when proxying in dev env nginx since that was breaking sourcemaps

Jenkinsfile

@@ -339,7 +339,7 @@ pipeline {
                                     string(credentialsId: 'chalk-prod-cd-oauth-refresh-token', variable: 'CHALK_OAUTH_REFRESH_TOKEN'),
                                 ]) {
                                     dir('tests') {
-                                        sh 'pip install "playwright==1.46.0" "pytest==8.3.2"'
+                                        sh 'pip install "playwright==1.47.0" "pytest==8.3.3"'
                                         sh "pytest . --server_domain ${SERVER_IP} --junitxml=playwright_results.xml || true"
 
                                         junit testResults: 'playwright_results.xml'

dev_nginx.conf

@@ -68,7 +68,6 @@ http {
 
     location / {
         proxy_pass http://localhost:8081/;
-        proxy_set_header Host $host;
         proxy_set_header X-Real-IP $remote_addr;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
         proxy_set_header X-Forwarded-Proto $scheme;

jenkins/gcloud_helm.Dockerfile

@@ -4,7 +4,7 @@ RUN gcloud components install kubectl -q --no-user-output-enabled
 
 # Install Helm
 RUN mkdir helm_tmp \
-  && curl -o helm_tmp/helm.tar.gz https://get.helm.sh/helm-v3.15.4-linux-amd64.tar.gz \
+  && curl -o helm_tmp/helm.tar.gz https://get.helm.sh/helm-v3.16.1-linux-amd64.tar.gz \
   && tar -zxvf helm_tmp/helm.tar.gz -C helm_tmp \
   && mv helm_tmp/linux-amd64/helm /bin/helm \
   && rm -rf helm_tmp

jenkins/jenkins-worker-python.yml

@@ -3,7 +3,7 @@ kind: Pod
 spec:
   containers:
   - name: jenkins-worker-python
-    image: python:3
+    image: python:3.12-bookworm
     command:
     - cat
     tty: true

misc_containers/db_restorer/entrypoint.sh

@@ -5,7 +5,7 @@ export PGHOST="127.0.0.1"
 
 # Check if we can connect to the DB
 db_connected=0
-for i in {1.12}; do
+for i in {1..12}; do
     psql -c "SELECT 1 FROM pg_tables LIMIT 1" && \
     db_connected=1 && break || \
     echo "Unable to connect to the DB, retrying in 5 seconds" && sleep 5

server/Dockerfile

@@ -1,5 +1,5 @@
 # Django container
-FROM python:3-bookworm
+FROM python:3.12-bookworm
 WORKDIR /usr/src/app
 
 # Set log messages to immediately appear in the logs

server/chalk/settings/base.py

@@ -78,7 +78,7 @@
 
 DATABASES = {
     'default': {
-        'ENGINE': 'django.db.backends.postgresql_psycopg2',
+        'ENGINE': 'django.db.backends.postgresql',
         'NAME': os.getenv('DB_NAME', 'chalk'),
         'USER': os.getenv('DB_USER', 'chalk'),
         'PASSWORD': os.environ['DB_PASSWORD'],

server/dev-requirements.txt

@@ -2,7 +2,7 @@
 
 # These are used for development or linting
 flake8==7.1.1
-pylint==3.2.6
+pylint==3.3.1
 pylint-django==2.5.5
-pytest==8.3.2
+pytest==8.3.3
 yapf==0.40.2

server/requirements.txt

@@ -1,4 +1,4 @@
-Django==4.2.15
+Django==4.2.16
 djangorestframework==3.15.2
 django-simple-history==3.7.0
 google-auth-oauthlib==1.2.1

ui/js/.eslintrc

@@ -9,7 +9,7 @@
         "plugin:@typescript-eslint/recommended",
         "plugin:storybook/recommended"
     ],
-    "ignorePatterns": ["app.config.js", "babel.config.js", "jest.config.js", "**/__mocks__/**/*.js", "storybook-static"],
+    "ignorePatterns": ["app.config.js", "babel.config.js", "jest.config.js", "metro.config.js", "**/__mocks__/**/*.js", "storybook-static"],
     "parser": "@typescript-eslint/parser",
     "parserOptions": {
         "ecmaFeatures": {

ui/js/.gitignore

@@ -35,3 +35,4 @@ yarn-error.log*
 # !.yarn/cache
 
 *storybook.log
+junit.xml

ui/js/jest.config.js

@@ -4,7 +4,7 @@ module.exports = {
 
   reporters: ['default', 'jest-junit'],
   setupFiles: [
-    './node_modules/@react-native-google-signin/google-signin/jest/build/setup.js',
+    './node_modules/@react-native-google-signin/google-signin/jest/build/jest/setup.js',
   ],
   testPathIgnorePatterns: [
     '<rootDir>/src/__snapshots__/',

ui/js/package.json

@@ -5,86 +5,86 @@
   "dependencies": {
     "@expo-google-fonts/roboto": "^0.2.3",
     "@expo/metro-runtime": "~3.2.3",
-    "@react-native-google-signin/google-signin": "11.0.1",
+    "@react-native-google-signin/google-signin": "13.1.0",
     "@reduxjs/toolkit": "^2.2.7",
-    "@sentry/react-native": "5.31.1",
-    "expo": "^51.0.31",
+    "@sentry/react-native": "5.33.1",
+    "expo": "^51.0.36",
     "expo-application": "~5.9.1",
     "expo-auth-session": "~5.5.2",
     "expo-build-properties": "~0.12.5",
     "expo-constants": "~16.0.2",
-    "expo-dev-client": "~4.0.25",
+    "expo-dev-client": "~4.0.27",
     "expo-device": "~6.0.2",
-    "expo-font": "~12.0.9",
+    "expo-font": "~12.0.10",
     "expo-random": "~14.0.1",
-    "expo-splash-screen": "~0.27.5",
-    "expo-updates": "~0.25.24",
+    "expo-splash-screen": "~0.27.6",
+    "expo-updates": "~0.25.26",
     "expo-web-browser": "~13.0.3",
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
     "promise": "^8.3.0",
     "prop-types": "^15.8.1",
     "react": "~18.3.1",
     "react-dom": "~18.3.1",
-    "react-native": "0.74.5",
+    "react-native": "0.74.6",
     "react-native-draggable-flatlist": "4.0.1",
-    "react-native-gesture-handler": "~2.18.1",
+    "react-native-gesture-handler": "~2.20.0",
     "react-native-paper": "~5.12.5",
-    "react-native-reanimated": "~3.15.1",
-    "react-native-safe-area-context": "4.10.9",
+    "react-native-reanimated": "~3.15.4",
+    "react-native-safe-area-context": "4.11.0",
     "react-native-safe-area-view": "^1.1.1",
     "react-native-web": "~0.19.12",
     "react-redux": "^9.1.2",
     "redux": "^5.0.1",
     "redux-thunk": "^3.1.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.25.2",
-    "@storybook/addon-essentials": "^8.2.9",
-    "@storybook/addon-interactions": "^8.2.9",
-    "@storybook/addon-links": "^8.2.9",
-    "@storybook/addon-onboarding": "^8.2.9",
-    "@storybook/addon-react-native-web": "0.0.24",
+    "@babel/core": "^7.25.7",
+    "@storybook/addon-essentials": "~8.2.9",
+    "@storybook/addon-interactions": "~8.2.9",
+    "@storybook/addon-links": "~8.2.9",
+    "@storybook/addon-onboarding": "~8.2.9",
+    "@storybook/addon-react-native-web": "0.0.26",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/blocks": "^8.2.9",
-    "@storybook/react": "^8.2.9",
-    "@storybook/react-webpack5": "^8.2.9",
-    "@storybook/test": "^8.2.9",
+    "@storybook/blocks": "~8.2.9",
+    "@storybook/react": "~8.2.9",
+    "@storybook/react-webpack5": "~8.2.9",
+    "@storybook/test": "~8.2.9",
     "@storybook/test-runner": "^0.19.1",
     "@storybook/testing-library": "^0.2.2",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.5.2",
-    "@types/jest": "^29.5.12",
+    "@types/jest": "^29.5.13",
     "@types/js-cookie": "^3.0.6",
-    "@types/lodash": "^4.17.7",
-    "@types/node": "^20.16.2",
-    "@types/react": "~18.3.5",
+    "@types/lodash": "^4.17.10",
+    "@types/node": "^20.16.10",
+    "@types/react": "~18.3.11",
     "@types/react-dom": "~18.3.0",
-    "@types/react-redux": "^7.1.33",
-    "@typescript-eslint/eslint-plugin": "^8.3.0",
-    "@typescript-eslint/parser": "^8.3.0",
+    "@types/react-redux": "^7.1.34",
+    "@typescript-eslint/eslint-plugin": "^8.8.0",
+    "@typescript-eslint/parser": "^8.8.0",
     "babel-jest": "^29.7.0",
     "babel-plugin-react-native-web": "0.19.12",
-    "eslint": "^8.57.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-react": "^7.35.0",
-    "eslint-plugin-storybook": "^0.8.0",
+    "eslint": "^8.57.1",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-react": "^7.37.1",
+    "eslint-plugin-storybook": "^0.9.0",
     "fetch-mock-jest": "^1.5.1",
     "file-loader": "6.2.0",
     "http-server": "^14.1.1",
-    "husky": "^9.1.5",
+    "husky": "^9.1.6",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "jest-expo": "~51.0.4",
     "jest-junit": "^16.0.0",
-    "lint-staged": "^15.2.9",
+    "lint-staged": "^15.2.10",
     "metro-react-native-babel-preset": "0.77.0",
     "prettier": "^3.3.3",
     "react-test-renderer": "^18.3.1",
-    "storybook": "^8.2.9",
-    "typescript": "^5.5.4",
+    "storybook": "~8.2.9",
+    "typescript": "^5.6.2",
     "xmldom": "^0.6.0"
   },
   "scripts": {

ui/js/src/App.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StatusBar, StyleSheet, View, ViewStyle } from 'react-native';
+import { SafeAreaView, StatusBar, StyleSheet, ViewStyle } from 'react-native';
 import ErrorBar from './components/ErrorBar';
 import Login from './components/Login';
 import TodoList from './components/TodoList';
@@ -42,7 +42,7 @@ const App: React.FC = function () {
   const notificationText =
     notificationQueue.length > 0 ? notificationQueue[0] : null;
   return (
-    <View style={styles.root}>
+    <SafeAreaView style={styles.root}>
       <StatusBar
         animated={true}
         backgroundColor={BG_COLOR}
@@ -53,7 +53,7 @@ const App: React.FC = function () {
         key={notificationText}
         text={notificationText}
       />
-    </View>
+    </SafeAreaView>
   );
 };
 

ui/js/src/__snapshots__/App.stories.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`App Layout DefaultLayout smoke-test 1`] = `
 <div class="css-175oi2r r-13awgt0">
-  <div class="css-175oi2r r-173lkiy r-1pi2tsx r-13qz1uu">
+  <div class="css-175oi2r r-97e31f r-bv2aro r-hxflta r-10xqauy r-173lkiy r-1pi2tsx r-13qz1uu">
     <div class="css-175oi2r r-1pi2tsx r-f8sm7e r-1skwq7n r-1knelpx">
       <div class="css-175oi2r r-1kly57o r-13qz1uu">
         <div class="css-175oi2r"
@@ -272,7 +272,7 @@ exports[`App Layout DefaultLayout smoke-test 1`] = `
 
 exports[`App Layout LabelPickerLayout smoke-test 1`] = `
 <div class="css-175oi2r r-13awgt0">
-  <div class="css-175oi2r r-173lkiy r-1pi2tsx r-13qz1uu">
+  <div class="css-175oi2r r-97e31f r-bv2aro r-hxflta r-10xqauy r-173lkiy r-1pi2tsx r-13qz1uu">
     <div class="css-175oi2r r-1pi2tsx r-f8sm7e r-1skwq7n r-1knelpx">
       <div class="css-175oi2r r-1kly57o r-13qz1uu">
         <div class="css-175oi2r"
@@ -1892,7 +1892,7 @@ exports[`App Layout LabelPickerLayout smoke-test 1`] = `
 
 exports[`App Layout ListTodosLayout smoke-test 1`] = `
 <div class="css-175oi2r r-13awgt0">
-  <div class="css-175oi2r r-173lkiy r-1pi2tsx r-13qz1uu">
+  <div class="css-175oi2r r-97e31f r-bv2aro r-hxflta r-10xqauy r-173lkiy r-1pi2tsx r-13qz1uu">
     <div class="css-175oi2r r-1pi2tsx r-f8sm7e r-1skwq7n r-1knelpx">
       <div class="css-175oi2r r-1kly57o r-13qz1uu">
         <div class="css-175oi2r"
@@ -3055,7 +3055,7 @@ exports[`App Layout ListTodosLayout smoke-test 1`] = `
 
 exports[`App Layout NotificationLayout smoke-test 1`] = `
 <div class="css-175oi2r r-13awgt0">
-  <div class="css-175oi2r r-173lkiy r-1pi2tsx r-13qz1uu">
+  <div class="css-175oi2r r-97e31f r-bv2aro r-hxflta r-10xqauy r-173lkiy r-1pi2tsx r-13qz1uu">
     <div class="css-175oi2r r-1pi2tsx r-f8sm7e r-1skwq7n r-1knelpx">
       <div class="css-175oi2r r-1kly57o r-13qz1uu">
         <div class="css-175oi2r"

ui/js/src/components/Login.native.tsx

@@ -39,7 +39,8 @@ const Login: React.FC = function () {
     setInProgress(true);
     try {
       await GoogleSignin.hasPlayServices();
-      const userInfo = await GoogleSignin.signIn();
+      const signinData = await GoogleSignin.signIn();
+      const userInfo = signinData.data;
 
       setInProgress(false);
       if (userInfo.idToken) {
@@ -70,7 +71,7 @@ const Login: React.FC = function () {
 
   useEffect(() => {
     async function autoSignIn() {
-      if (await GoogleSignin.isSignedIn()) {
+      if (await GoogleSignin.hasPreviousSignIn()) {
         signIn();
       }
     }

ui/js/src/components/TodoItem.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { memo, useCallback, useState } from 'react';
 import {
   GestureResponderEvent,
   Platform,
@@ -85,7 +85,7 @@ const styles = StyleSheet.create<Style>({
   },
 });
 
-const TodoItem: React.FC<Props> = function (props: Props) {
+const TodoItem: React.FC<Props> = memo(function (props: Props) {
   const {
     editing,
     isDragging,
@@ -259,7 +259,8 @@ const TodoItem: React.FC<Props> = function (props: Props) {
       </Card.Content>
     </Card>
   );
-};
+});
+TodoItem.displayName = 'TodoItem';
 
 type Props = {
   editing: boolean;

ui/js/src/components/TodoList.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { memo, useCallback } from 'react';
 import { Platform, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 import DraggableFlatList, {
   RenderItemParams,
@@ -50,7 +50,7 @@ const styles = StyleSheet.create<Style>({
   },
 });
 
-const TodoList: React.FC = function () {
+const TodoList: React.FC = memo(function () {
   const dispatch = useAppDispatch()
   useDataLoader();
   const {
@@ -99,7 +99,7 @@ const TodoList: React.FC = function () {
     containerStyle = [containerStyle, topStyle];
   }
 
-  const renderItem = ({ item, drag, isActive }: RenderItemParams<Todo>) => (
+  const renderItem = useCallback(({ item, drag, isActive }: RenderItemParams<Todo>) => (
     <OpacityDecorator activeOpacity={0.65}>
       <TodoItem
         editing={item.id === editTodoId}
@@ -110,7 +110,7 @@ const TodoList: React.FC = function () {
         todo={item}
       />
     </OpacityDecorator>
-  );
+  ), [editTodoId, labelTodoId]);
 
   let labelFilter = null;
   let workContextFilter = null;
@@ -140,15 +140,16 @@ const TodoList: React.FC = function () {
   if (filteredTodos.length > 0) {
     draggableList = (
       <DraggableFlatList
-        activationDistance={1}
-        autoscrollSpeed={150}
+        activationDistance={Platform.OS === 'web' ? 10 : undefined}
+        autoscrollSpeed={Platform.OS === 'web' ? 50 : 150}
         containerStyle={styles.scrollView}
         data={filteredTodos}
         onDragEnd={handleReorder}
         keyExtractor={(item) => String(item.id || '')}
         refreshing={isLoading}
         renderItem={renderItem}
         testID="todo-list"
+        windowSize={Platform.OS === 'web' ? 3 : undefined}
       />
     );
   }
@@ -168,6 +169,7 @@ const TodoList: React.FC = function () {
       />
     </React.Fragment>
   );
-};
+});
+TodoList.displayName = 'TodoList';
 
 export default TodoList;