allowing select and deselect of pokemon

frozendragon / pokemon-go-trade

Browse code allowing select and deselect of pokemon master
1 parent a651a78 commit 48a5ebff600de5c09cb144339bbc26fd51c29fda Simon Lindgren authored on 13 Feb 2021

Patch

Showing 5 changed files

Ignore Space Show notes View .gitignore
.idea log vendor static/html/node_modules static/html/build .idea tmp stock-score stock-score-graph testData log static/html/node_modules static/html/build

Ignore Space Show notes View Makefile
PROJECT_NAME := LindgrensWares .PHONY: help help: @echo "------------------------------------------------------------------------" @echo "${PROJECT_NAME}" @echo "------------------------------------------------------------------------" @grep -E '^[a-zA-Z0-9_/%\-]+:.?## .$$' $(MAKEFILE_LIST) \| sort \| awk 'BEGIN {FS = ":.?## "}; {printf "\033[36m%-30s\033[0m %s\n", $$1, $$2}' .PHONY: build build: ## build application binaries go build -race ./cmd/web build-frontend: ## build application frontend cd static/html; npm run build cd static/html; npm install -g serve build-frontend-dev: ## build application frontend cd static/html; npm run build-dev .PHONY: build update: ## build application binaries go build -race ./cmd/web systemctl stop LindgrensWares mv web /opt/LindgrensWares cp -R static /opt/LindgrensWares cp -R config/production.json /opt/LindgrensWares/config/production.json systemctl start LindgrensWares .PHONY: deps deps: ## install latest build of dependency manager and linters go get -u github.com/golang/dep/cmd/dep .PHONY: deps-ensure deps-ensure: ## ensure dependencies are safely vendored in the project dep ensure .PHONY: install install: ## install application binaries go install ./cmd/web .PHONY: integration-test integration-test: go run -v -race ./integration/... .PHONY: test test: ## run unit tests go test -v -race ./cmd/... ./internal/... PROJECT_NAME := LindgrensWares .PHONY: help help: @echo "------------------------------------------------------------------------" @echo "${PROJECT_NAME}" @echo "------------------------------------------------------------------------" @grep -E '^[a-zA-Z0-9_/%\-]+:.?## .$$' $(MAKEFILE_LIST) \| sort \| awk 'BEGIN {FS = ":.?## "}; {printf "\033[36m%-30s\033[0m %s\n", $$1, $$2}' .PHONY: build build: ## build application binaries go build -race ./cmd/web build-frontend: ## build application frontend cd static/html npm run build npm install -g serve cd ../.. .PHONY: build update: ## build application binaries go build -race ./cmd/web systemctl stop LindgrensWares mv web /opt/LindgrensWares cp -R static /opt/LindgrensWares cp -R config/production.json /opt/LindgrensWares/config/production.json systemctl start LindgrensWares .PHONY: deps deps: ## install latest build of dependency manager and linters go get -u github.com/golang/dep/cmd/dep .PHONY: deps-ensure deps-ensure: ## ensure dependencies are safely vendored in the project dep ensure .PHONY: install install: ## install application binaries go install ./cmd/web .PHONY: integration-test integration-test: go run -v -race ./integration/... .PHONY: test test: ## run unit tests go test -v -race ./cmd/... ./internal/...

Ignore Space Show notes View

Makefile

PROJECT_NAME := LindgrensWares

.PHONY: help
help:
	@echo "------------------------------------------------------------------------"
	@echo "${PROJECT_NAME}"
	@echo "------------------------------------------------------------------------"
	@grep -E '^[a-zA-Z0-9_/%\-]+:.*?## .*$$' $(MAKEFILE_LIST) | sort | awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-30s\033[0m %s\n", $$1, $$2}'

.PHONY: build
build: ## build application binaries
	go build -race ./cmd/web

build-frontend: ## build application frontend
	cd static/html; npm run build
	cd static/html; npm install -g serve

build-frontend-dev: ## build application frontend
	cd static/html; npm run build-dev

.PHONY: build
update: ## build application binaries
	go build -race ./cmd/web
	systemctl stop LindgrensWares
	mv web /opt/LindgrensWares
	cp -R static /opt/LindgrensWares
	cp -R config/production.json /opt/LindgrensWares/config/production.json
	systemctl start LindgrensWares

.PHONY: deps
deps: ## install latest build of dependency manager and linters
	go get -u github.com/golang/dep/cmd/dep

.PHONY: deps-ensure
deps-ensure: ## ensure dependencies are safely vendored in the project
	dep ensure

.PHONY: install
install: ## install application binaries
	go install ./cmd/web

.PHONY: integration-test
integration-test:
	go run -v -race ./integration/...

.PHONY: test
test: ## run unit tests
	go test -v -race ./cmd/... ./internal/...

PROJECT_NAME := LindgrensWares

.PHONY: build
build: ## build application binaries
	go build -race ./cmd/web

build-frontend: ## build application frontend
	cd static/html
	npm run build
	npm install -g serve
	cd ../..

.PHONY: deps
deps: ## install latest build of dependency manager and linters
	go get -u github.com/golang/dep/cmd/dep

.PHONY: deps-ensure
deps-ensure: ## ensure dependencies are safely vendored in the project
	dep ensure

.PHONY: install
install: ## install application binaries
	go install ./cmd/web

.PHONY: integration-test
integration-test:
	go run -v -race ./integration/...

.PHONY: test
test: ## run unit tests
	go test -v -race ./cmd/... ./internal/...

Ignore Space Show notes View static/html/src/components/connect-modal.js
import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import Modal from '@material-ui/core/Modal'; import PokemonList from './pokemon-list'; function getModalStyle() { const top = 50; const left = 50; return { top: `${top}%`, left: `${left}%`, transform: `translate(-${top}%, -${left}%)`, }; } const useStyles = makeStyles(theme => ({ paper: { position: 'absolute', width: 400, backgroundColor: theme.palette.background.paper, border: '2px solid #000', boxShadow: theme.shadows[5], padding: theme.spacing(2, 4, 3), }, })); export default function ConnectModal(props) { const classes = useStyles(); // getModalStyle is not a pure function, we roll the style only on the first render const [modalStyle] = React.useState(getModalStyle); const { pokemonList, onDeselectPokemon, open } = props; const body = ( <div style={modalStyle} className={classes.paper}> <PokemonList pokemonList={pokemonList} /> </div> ); return ( <div> <Modal open={open} onClose={onDeselectPokemon} aria-labelledby="simple-modal-title" aria-describedby="simple-modal-description" > {body} </Modal> </div> ); } import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import Modal from '@material-ui/core/Modal'; import PokemonList from "./pokemon-list"; function getModalStyle() { const top = 50; const left = 50; return { top: `${top}%`, left: `${left}%`, transform: `translate(-${top}%, -${left}%)`, }; } const useStyles = makeStyles(theme => ({ paper: { position: 'absolute', width: 400, backgroundColor: theme.palette.background.paper, border: '2px solid #000', boxShadow: theme.shadows[5], padding: theme.spacing(2, 4, 3), }, })); export default function ConnectModal(props) { const classes = useStyles(); // getModalStyle is not a pure function, we roll the style only on the first render const [modalStyle] = React.useState(getModalStyle); const [open, setOpen] = React.useState(false); const handleOpen = () => { setOpen(true); }; const handleClose = () => { setOpen(false); }; const body = ( <div style={modalStyle} className={classes.paper}> <PokemonList pokemonList={props.pokemonList} /> </div> ); return ( <div> <button type="button" onClick={handleOpen}> Open Modal </button> <Modal open={open} onClose={handleClose} aria-labelledby="simple-modal-title" aria-describedby="simple-modal-description" > {body} </Modal> </div> ); }

Ignore Space Show notes View

static/html/src/components/connect-modal.js

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Modal from '@material-ui/core/Modal';
import PokemonList from './pokemon-list';

function getModalStyle() {
  const top = 50;
  const left = 50;

return {
    top: `${top}%`,
    left: `${left}%`,
    transform: `translate(-${top}%, -${left}%)`,
  };
}

const useStyles = makeStyles(theme => ({
  paper: {
    position: 'absolute',
    width: 400,
    backgroundColor: theme.palette.background.paper,
    border: '2px solid #000',
    boxShadow: theme.shadows[5],
    padding: theme.spacing(2, 4, 3),
  },
}));

export default function ConnectModal(props) {
  const classes = useStyles();
  // getModalStyle is not a pure function, we roll the style only on the first render
  const [modalStyle] = React.useState(getModalStyle);

const { pokemonList, onDeselectPokemon, open } = props;

const body = (
    <div style={modalStyle} className={classes.paper}>
      <PokemonList pokemonList={pokemonList} />
    </div>
  );

return (
    <div>
      <Modal
        open={open}
        onClose={onDeselectPokemon}
        aria-labelledby="simple-modal-title"
        aria-describedby="simple-modal-description"
      >
        {body}
      </Modal>
    </div>
  );
}

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Modal from '@material-ui/core/Modal';
import PokemonList from "./pokemon-list";

function getModalStyle() {
  const top = 50;
  const left = 50;

return {
    top: `${top}%`,
    left: `${left}%`,
    transform: `translate(-${top}%, -${left}%)`,
  };
}

const handleOpen = () => {
    setOpen(true);
  };

const handleClose = () => {
    setOpen(false);
  };

const body = (
    <div style={modalStyle} className={classes.paper}>
      <PokemonList pokemonList={props.pokemonList} />
    </div>
  );

return (
    <div>
      <button type="button" onClick={handleOpen}>
        Open Modal
      </button>
      <Modal
        open={open}
        onClose={handleClose}
        aria-labelledby="simple-modal-title"
        aria-describedby="simple-modal-description"
      >
        {body}
      </Modal>
    </div>
  );
}

Ignore Space Show notes View static/html/src/components/pokemon.js
import React from 'react'; import style from './pokemon.css'; class Pokemon extends React.Component { constructor(props) { super(props); const deselect = () => { this.setState({ selected: false }); }; const handleAddPokemonClick = () => () => { const { onSelectPokemon } = this.props; const { selected, url } = this.state; if (onSelectPokemon !== undefined) { this.setState({ selected: !selected }); onSelectPokemon(!selected, url, deselect); } }; this.state = { url: props.url, selected: false, handleAddPokemonClick, }; } render() { const { url, selected, handleAddPokemonClick } = this.state; let className = ''; if (selected) { className = 'selected'; } return ( <div> <img className={className} src={url} onClick={handleAddPokemonClick()} /> </div> ); } } export default Pokemon; import React from 'react'; import style from './pokemon.css'; class Pokemon extends React.Component { constructor(props) { super(props); this.state = { url: props.url, selected: false, onSelectPokemon: props.onSelectPokemon, }; } render() { const { url, selected, onSelectPokemon } = this.state; let className = ''; if (selected) { className = 'selected'; } const handleAddPokemonClick = () => () => { const { selected } = this.state; this.setState({ selected: !selected }); onSelectPokemon(!selected, url); }; return ( <div> <img className={className} src={url} onClick={handleAddPokemonClick()} /> </div> ); } } export default Pokemon;

Ignore Space Show notes View

static/html/src/components/pokemon.js

Ignore Space Show notes View static/html/src/pages/index.js
import React, { Component } from 'react'; import * as ReactDOM from 'react-dom'; import PokemonList from '../components/pokemon-list'; import ConnectModal from '../components/connect-modal'; import Menu from '../components/menu'; class App extends Component { constructor(props) { super(props); this.state = { pokemonList: [], open: false, }; } componentDidMount() { fetch('/api/stored-pokemon?type=have') .then(response => response.json()) .then((data) => { this.setState({ pokemonList: data.pokemons }); }); } render() { const { pokemonList } = this.state; let { open } = this.state; const handleAddPokemonClick = () => () => { window.location.href = '/chose.html?type=have'; }; const onSelectPokemon = (selected, url, deselect) => { open = true; this.setState({ open, deselect }); }; const onDeselectPokemon = () => { const { deselect } = this.state; open = false; deselect(); this.setState({ open, deselect: undefined }); }; return ( <div> <Menu active={0} /> <PokemonList pokemonList={pokemonList} onSelectPokemon={onSelectPokemon} /> <button style={{ fontSize: '10em' }} type="button" onClick={handleAddPokemonClick()}>Add</button> <ConnectModal pokemonList={pokemonList} open={open} onDeselectPokemon={onDeselectPokemon} /> </div> ); } } ReactDOM.render(<App />, document.getElementById('main')); import React, { Component } from 'react'; import * as ReactDOM from 'react-dom'; import PokemonList from '../components/pokemon-list'; import ConnectModal from '../components/connect-modal'; import Menu from '../components/menu'; class App extends Component { constructor(props) { super(props); this.state = { pokemonList: [], }; } componentDidMount() { fetch('/api/stored-pokemon?type=have') .then(response => response.json()) .then((data) => { this.setState({ pokemonList: data.pokemons }); }); } render() { const { pokemonList } = this.state; const handleAddPokemonClick = () => () => { window.location.href = '/chose.html?type=have'; }; return ( <div> <Menu active={0} /> <PokemonList pokemonList={pokemonList} /> <button style={{ fontSize: '10em' }} type="button" onClick={handleAddPokemonClick()}>Add</button> <ConnectModal pokemonList={pokemonList}/> </div> ); } } ReactDOM.render(<App />, document.getElementById('main'));

Ignore Space Show notes View

static/html/src/pages/index.js

import React, { Component } from 'react';
import * as ReactDOM from 'react-dom';
import PokemonList from '../components/pokemon-list';
import ConnectModal from '../components/connect-modal';
import Menu from '../components/menu';

class App extends Component {
  constructor(props) {
    super(props);

this.state = {
      pokemonList: [],
      open: false,
    };
  }

componentDidMount() {
    fetch('/api/stored-pokemon?type=have')
      .then(response => response.json())
      .then((data) => {
        this.setState({ pokemonList: data.pokemons });
      });
  }

render() {
    const { pokemonList } = this.state;
    let { open } = this.state;

const handleAddPokemonClick = () => () => {
      window.location.href = '/chose.html?type=have';
    };

const onSelectPokemon = (selected, url, deselect) => {
      open = true;
      this.setState({ open, deselect });
    };

const onDeselectPokemon = () => {
      const { deselect } = this.state;
      open = false;
      deselect();
      this.setState({ open, deselect: undefined });
    };

return (
      <div>
        <Menu active={0} />
        <PokemonList pokemonList={pokemonList} onSelectPokemon={onSelectPokemon} />
        <button style={{ fontSize: '10em' }} type="button" onClick={handleAddPokemonClick()}>Add</button>
        <ConnectModal pokemonList={pokemonList} open={open} onDeselectPokemon={onDeselectPokemon} />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('main'));

class App extends Component {
  constructor(props) {
    super(props);

this.state = {
      pokemonList: [],
    };
  }

componentDidMount() {
    fetch('/api/stored-pokemon?type=have')
      .then(response => response.json())
      .then((data) => {
        this.setState({ pokemonList: data.pokemons });
      });
  }

render() {
    const { pokemonList } = this.state;

const handleAddPokemonClick = () => () => {
      window.location.href = '/chose.html?type=have';
    };

return (
      <div>
        <Menu active={0} />
        <PokemonList pokemonList={pokemonList} />
        <button style={{ fontSize: '10em' }} type="button" onClick={handleAddPokemonClick()}>Add</button>
        <ConnectModal pokemonList={pokemonList}/>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('main'));

Show line notes below