devcontainer, fix react-spring

.devcontainer/Dockerfile

@@ -0,0 +1,29 @@
+# Update the VARIANT arg in docker-compose.yml to pick a Node version: 10, 12, 14
+ARG VARIANT="14-buster"
+FROM mcr.microsoft.com/vscode/devcontainers/typescript-node:0-${VARIANT}
+
+ENV DOCKERDEV=true
+
+# Update args in docker-compose.yaml to set the UID/GID of the "node" user.
+ARG USER_UID=1000
+ARG USER_GID=$USER_UID
+RUN if [ "$USER_GID" != "1000" ] || [ "$USER_UID" != "1000" ]; then \
+    groupmod --gid $USER_GID node \
+    && usermod --uid $USER_UID --gid $USER_GID node \
+    && chmod -R $USER_UID:$USER_GID /home/node \
+    && chmod -R $USER_UID:root /usr/local/share/nvm /usr/local/share/npm-global; \
+    fi
+
+RUN sudo -u node npm config set unsafe-perm=true
+
+# [Optional] Uncomment this section to install additional OS packages.
+# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
+#     && apt-get -y install --no-install-recommends <your-package-list-here>
+
+# [Optional] Uncomment if you want to install an additional version of node using nvm
+# ARG EXTRA_NODE_VERSION=10
+# RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}"
+
+# [Optional] Uncomment if you want to install more global node packages
+# RUN sudo -u node npm install -g <your-package-list-here>
+

.devcontainer/devcontainer.json

@@ -0,0 +1,21 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
+// https://github.com/microsoft/vscode-dev-containers/tree/v0.140.1/containers/javascript-node-postgres
+// Update the VARIANT arg in docker-compose.yml to pick a Node.js version: 10, 12, 14
+{
+    "name": "DevEnv",
+    "dockerComposeFile": "docker-compose.yml",
+    "service": "app",
+    "workspaceFolder": "/workspace",
+    // Set *default* container specific settings.json values on container create.
+    "settings": {
+        "terminal.integrated.shell.linux": "/bin/bash"
+    },
+    // Add the IDs of extensions you want installed when the container is created.
+    "extensions": ["dbaeumer.vscode-eslint"],
+    // Use 'forwardPorts' to make a list of ports inside the container available locally.
+    "forwardPorts": [1234, 3000, 4000],
+    // Use 'postCreateCommand' to run commands after the container is created.
+    "postCreateCommand": "npm config set unsafe-perm=true && npm i && cd client && npm i",
+    // Uncomment to connect as a non-root user. See https://aka.ms/vscode-remote/containers/non-root.
+    "remoteUser": "node"
+}

.devcontainer/docker-compose.yml

@@ -0,0 +1,42 @@
+version: "3"
+
+services:
+  app:
+    build:
+      context: .
+      dockerfile: Dockerfile
+      args:
+        # [Choice] Node.js version: 14, 12, 10
+        VARIANT: 14
+        # On Linux, you may need to update USER_UID and USER_GID below if not your local UID is not 1000.
+        USER_UID: 1000
+        USER_GID: 1000
+
+    volumes:
+      - ..:/workspace:cached
+
+    # Overrides default command so things don't shut down after the process ends.
+    command: sleep infinity
+
+    # Runs app on the same network as the database container, allows "forwardPorts" in devcontainer.json function.
+    network_mode: service:db
+
+    # Uncomment the next line to use a non-root user for all processes.
+    user: node
+
+    # Use "forwardPorts" in **devcontainer.json** to forward an app port locally.
+    # (Adding the "ports" property to this file will not forward from a Codespace.)
+
+  db:
+    image: mongo:latest
+    restart: unless-stopped
+    volumes:
+      - todolistmongo-data:/data/db
+    environment:
+      MONGO_INITDB_DATABASE: todolist
+
+    # Add "forwardPorts": ["5432"] to **devcontainer.json** to forward MongoDB locally.
+    # (Adding the "ports" property to this file will not forward from a Codespace.)
+
+volumes:
+  todolistmongo-data:

.vscode/settings.json

@@ -1,11 +1,8 @@
 {
-  "eslint.workingDirectories": [
-    ".",
-    "./client"
-  ],
-  "search.exclude": {
-    "**/package-lock.json": true
-  },
-  "editor.insertSpaces": true,
-  "editor.tabSize": 4
+    "eslint.workingDirectories": [".", "./client"],
+    "search.exclude": {
+        "**/package-lock.json": true
+    },
+    "editor.insertSpaces": true,
+    "editor.tabSize": 4
 }

client/src/components/lists/ListActions.js

@@ -90,12 +90,13 @@ export default function ListActions({
                     restSpeedThreshold: 0.5,
                     restDisplacementThreshold: 0.5,
                 }}
+                items={actions}
                 keys={actions.map((action) => action({}).key)}
                 from={{ opacity: 0, height: 0, margin: 0, padding: 0 }}
                 enter={{ opacity: 1, height: 30, margin: 0, padding: 0 }}
                 leave={{ opacity: 0, height: 0, margin: 0, padding: 0 }}
             >
-                {actions}
+                {action => action}
             </Transition>
         </div>
     );

client/src/components/todolist/TodoList.js

@@ -42,7 +42,7 @@ export default function TodosContainer({
                     pointerEvents: "none",
                 }}
             >
-                {todos.map((todo) => (styles) => (
+                {todo => (styles) => (
                     <Todo
                         key={todo.id}
                         todo={todo}
@@ -51,7 +51,7 @@ export default function TodosContainer({
                         removeTodo={() => removeTodo(todo.id)}
                         editTodo={(text) => editTodo(todo.id, text)}
                     />
-                ))}
+                )}
             </Transition>
         </ul>
     );

client/src/components/todolist/TodosView.js

@@ -20,16 +20,18 @@ class Todos extends React.PureComponent {
                     from={{ opacity: 0, maxHeight: 0 }}
                     enter={{ opacity: 1, maxHeight: 38 }}
                     leave={{ opacity: 0, maxHeight: 0 }}
+                    items={list}
                 >
-                    {list && ((styles) => <Input styles={styles} />)}
+                    {list => list && ((styles) => <Input styles={styles} />)}
                 </Transition>
                 <TodoListContainer />
                 <Transition
                     from={{ opacity: 0, maxHeight: 0 }}
                     enter={{ opacity: 1, maxHeight: 32 }}
                     leave={{ opacity: 0, maxHeight: 0 }}
+                    items={list}
                 >
-                    {list && Filters}
+                    {list => list && Filters}
                 </Transition>
             </div>
         );