ongoing course

02/.devcontainer/devcontainer.json

@@ -0,0 +1,40 @@
+// If you want to run as a non-root user in the container, see .devcontainer/docker-compose.yml.
+{
+	"name": "Existing Docker Compose (Extend)",
+
+	// Update the 'dockerComposeFile' list if you have more compose files or use different names.
+	// The .devcontainer/docker-compose.yml file contains any overrides you need/want to make.
+	"dockerComposeFile": [
+		"../../03/docker-compose.yml",
+		"docker-compose.yml"
+	],
+
+	// The 'service' property is the name of the service for the container that VS Code should
+	// use. Update this value and .devcontainer/docker-compose.yml to the real service name.
+	"service": "react",
+
+	// The optional 'workspaceFolder' property is the path VS Code should open by default when
+	// connected. This is typically a file mount in .devcontainer/docker-compose.yml
+	"workspaceFolder": "/workspace",
+
+	// Use 'settings' to set *default* container specific settings.json values on container create. 
+	// You can edit these settings after create using File > Preferences > Settings > Remote.
+	"settings": { 
+		// This will ignore your local shell user setting for Linux since shells like zsh are typically 
+		// not in base container images. You can also update this to an specific shell to ensure VS Code 
+		// uses the right one for terminals and tasks. For example, /bin/bash (or /bin/ash for Alpine).
+		"terminal.integrated.shell.linux": null
+	},
+
+	// Uncomment the next line if you want start specific services in your Docker Compose config.
+	// "runServices": [],
+
+	// Uncomment the next line if you want to keep your containers running after VS Code shuts down.
+	// "shutdownAction": "none",
+
+	// Uncomment the next line to run commands after the container is created - for example installing git.
+	// "postCreateCommand": "apt-get update && apt-get install -y git",
+
+	// Add the IDs of extensions you want installed when the container is created in the array below.
+	"extensions": []
+}

02/.devcontainer/docker-compose.yml

@@ -0,0 +1,39 @@
+#-------------------------------------------------------------------------------------------------------------
+# Copyright (c) Microsoft Corporation. All rights reserved.
+# Licensed under the MIT License. See https://go.microsoft.com/fwlink/?linkid=2090316 for license information.
+#-------------------------------------------------------------------------------------------------------------
+
+version: '3.7'
+services:
+  # Update this to the name of the service you want to work with in your docker-compose.yml file
+  react:
+    # You may want to add a non-root user to your Dockerfile. On Linux, this will prevent
+    # new files getting created as root. See https://aka.ms/vscode-remote/containers/non-root-user
+    # for the needed Dockerfile updates and then uncomment the next line.
+    # user: vscode
+
+    # Uncomment if you want to add a different Dockerfile in the .devcontainer folder
+    # build:
+    #   context: .
+    #   dockerfile: Dockerfile
+
+    # Uncomment if you want to expose any additional ports. The snippet below exposes port 3000.
+    # ports:
+    #   - 3000:3000
+    
+    volumes:
+      # Update this to wherever you want VS Code to mount the folder of your project
+      - .:/workspace
+
+      # Uncomment the next line to use Docker from inside the container. See https://aka.ms/vscode-remote/samples/docker-in-docker-compose for details.
+      # - /var/run/docker.sock:/var/run/docker.sock 
+
+    # Uncomment the next four lines if you will use a ptrace-based debugger like C++, Go, and Rust.
+    # cap_add:
+    #   - SYS_PTRACE
+    # security_opt:
+    #   - seccomp:unconfined
+
+    # Overrides default command so things don't shut down after the process ends.
+    command: /bin/sh -c "while sleep 1000; do :; done"
+ 

02/src/App.js

@@ -76,26 +76,20 @@ import Person from './Person/Person';
 class App extends React.Component {
   state = {
     character: [
-      { name: 'char1', ilvl: 320 },
-      { name: 'char2', ilvl: 110 },
-      { name: 'char3', ilvl: 78 }
+      { name: 'char1', ilvl: 0 },
+      { name: 'char2', ilvl: 0 },
+      { name: 'char3', ilvl: 0 }
     ],
     somethingElse: 'something something',
     showOrHide: false
   }
 
-  switchNameHandler = () => {
-    // console.log('\"CLICK\"');
-    // DON'T DO THIS: this.state.character[1].name = 'Schwarzgeist';
-    // Do not mutate state directly. Use setState()  react/no-direct-mutation-state
-    this.setState({
-      character: [
-        { name: 'Yutsuo', ilvl: 320 },
-        { name: 'Schwarzgeist', ilvl: 110 },
-        { name: 'Murom', ilvl: 79 }
-      ]
-    })
-  }
+deleteCharacterHandler = (index) => {
+  // const characters = this.state.character.slice();
+  const characters = [...this.state.character];
+  characters.splice(index, 1);
+  this.setState({characters: characters});
+}
 
   nameChangedHandler = (event) => {
     this.setState({
@@ -122,6 +116,18 @@ class App extends React.Component {
       cursor: 'pointer'
     };
 
+    let persons = null;
+
+    if (this.state.showOrHide) {
+      persons = (
+        <div>
+          {this.state.character.map((char, index) => {
+            return <Person click={this.deleteCharacterHandler.bind(index)} name={char.name} age={char.ilvl} />
+          })}
+        </div>
+      )
+    }
+
     return (
       <div className='App'>
         <h1>Hi, I'm a React App, I'm cute.</h1>
@@ -136,25 +142,7 @@ class App extends React.Component {
           onClick={this.showOrHide} >
           {this.state.showOrHide ? 'HIDE IT' : 'SHOW IT'}
         </button>
-        {this.state.showOrHide 
-        ?
-          <div>
-          <Person
-            name={this.state.character[0].name}
-            ilvl={this.state.character[0].ilvl}
-          />
-          <Person
-            name={this.state.character[1].name}
-            ilvl={this.state.character[1].ilvl}
-            click={this.switchNameHandler.bind(this, 'Schwarzgeist')}
-            changed={this.nameChangedHandler}
-          />
-          <Person
-            name={this.state.character[2].name}
-            ilvl={this.state.character[2].ilvl}
-          />
-          </div> : null
-        }
+        {persons}
       </div>
     );
   }

docker-compose-proxy.yml

@@ -20,8 +20,8 @@ services:
       - $PWD/src:/usr/src/app/src
       - $PWD/public:/usr/src/app/public
     ports:
-      - "3000:3000"
-      - "9229:9229"
+      - "4000:3000"
+      # - "9229:9229"
     # command: ["echo",$PWD/src]
     command: ["npm", "start"]
 networks:
@@ -29,4 +29,4 @@ networks:
     ipam:
       driver: default
       config:
-        - subnet: 172.17.0.0/24
+        - subnet: 172.17.3.0/24

docker-compose.yml

@@ -10,7 +10,7 @@ services:
       - $PWD/src:/usr/src/app/src
       - $PWD/public:/usr/src/app/public
     ports:
-      - "3000:3000"
+      - "4000:3000"
       - "9229:9229"
     # command: ["echo",$PWD/src]
     command: ["npm", "start"]