diff --git a/02/.devcontainer/devcontainer.json b/02/.devcontainer/devcontainer.json new file mode 100644 index 00000000..74bc44e1 --- /dev/null +++ b/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": [] +} diff --git a/02/.devcontainer/docker-compose.yml b/02/.devcontainer/docker-compose.yml new file mode 100644 index 00000000..cfc5c80c --- /dev/null +++ b/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" + diff --git a/02/src/App.js b/02/src/App.js index 733167ca..e32f1537 100644 --- a/02/src/App.js +++ b/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 = ( +
+ {this.state.character.map((char, index) => { + return + })} +
+ ) + } + return (

Hi, I'm a React App, I'm cute.

@@ -136,25 +142,7 @@ class App extends React.Component { onClick={this.showOrHide} > {this.state.showOrHide ? 'HIDE IT' : 'SHOW IT'} - {this.state.showOrHide - ? -
- - - -
: null - } + {persons}
); } diff --git a/docker-compose-proxy.yml b/docker-compose-proxy.yml index 09bd2a58..a1a98789 100644 --- a/docker-compose-proxy.yml +++ b/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 \ No newline at end of file + - subnet: 172.17.3.0/24 \ No newline at end of file diff --git a/docker-compose.yml b/docker-compose.yml index 077d27ec..dd84c35d 100644 --- a/docker-compose.yml +++ b/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"] \ No newline at end of file