Skip to content

Commit

Permalink
Redeployed, now using shared types
Browse files Browse the repository at this point in the history
  • Loading branch information
kenerwin88 committed Jan 4, 2022
1 parent c246be6 commit 6daf791
Show file tree
Hide file tree
Showing 16 changed files with 353 additions and 299 deletions.
2 changes: 1 addition & 1 deletion backend/chart/values.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ OPENSEA_API_KEY: ""
SYNC_TO_AWS: "true"

replicaCount: 1
image: 389059433654.dkr.ecr.us-east-1.amazonaws.com/backend:1.2.11
image: 389059433654.dkr.ecr.us-east-1.amazonaws.com/backend:1.2.13
imagePullSecrets: []
nameOverride: ""
fullnameOverride: ""
Expand Down
2 changes: 1 addition & 1 deletion backend/src/metadata/metadata.service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,7 @@ export class MetadataService {
} else {
await fs.writeFileSync('cache/metadata/' + tile.id + '.json', JSON.stringify(tileMetaData, null, 2));
// Write data for /tile endpoint
await fs.writeFileSync('cache/tile/' + tile.id, JSON.stringify(pixelMapTile, null, 2));
await fs.writeFileSync('cache/tile/' + tile.id + '.json', JSON.stringify(pixelMapTile, null, 2));
await this.cacheManager.set('metadata-' + String(tile.id), jsonMetaData);
}
}
Expand Down
2 changes: 1 addition & 1 deletion frontend/chart/values/prod.yaml
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
IMAGE: 389059433654.dkr.ecr.us-east-1.amazonaws.com/frontend:1.2.8
IMAGE: 389059433654.dkr.ecr.us-east-1.amazonaws.com/frontend:1.2.13
API_ENDPOINT: https://api.pixelmap.io
DOMAINS:
- "pixelmap.io"
Expand Down
167 changes: 95 additions & 72 deletions frontend/components/EditTile.tsx
Original file line number Diff line number Diff line change
@@ -1,117 +1,140 @@
import { Disclosure,} from '@headlessui/react'
import { Disclosure } from "@headlessui/react";

import TileImage from './TileImage';
import { openseaLink, formatPrice } from '../utils/misc';
import TileImage from "./TileImage";
import { openseaLink, formatPrice } from "../utils/misc";

import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/outline'
import {TileAsset} from "../types/TileAsset";
import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/outline";
import { PixelMapTile } from "@pixelmap/common/types/PixelMapTile";

type Props = {
tile: TileAsset;
tile: PixelMapTile;
index: number;
handleImageEditor;
handleLinkChange;
handlePriceChange;
handleSave;
}
};

function EditTile({tile, index, handleImageEditor, handleLinkChange, handlePriceChange, handleSave}: Props) {
function EditTile({
tile,
index,
handleImageEditor,
handleLinkChange,
handlePriceChange,
handleSave,
}: Props) {
return (
<Disclosure key={tile.id}>
{({ open }) => (
<div className="mb-3">
<Disclosure.Button
className={`flex items-center py-3 px-4 bg-white w-full text-left font-medium nes-container nes-pointer ${open ? 'border-b-0' : ''}`}>

<Disclosure.Button
className={`flex items-center py-3 px-4 bg-white w-full text-left font-medium nes-container nes-pointer ${
open ? "border-b-0" : ""
}`}
>
<div className="bg-gray-200 h-6 w-6 mr-3">
<TileImage image={tile.image} className="h-full w-full" />
</div>

<span>Tile #{tile.id}</span>

<div className="ml-auto">
{ open &&
<ChevronUpIcon className="h-4 w-4 text-gray-400" />
}
{open && <ChevronUpIcon className="h-4 w-4 text-gray-400" />}

{ !open &&
<ChevronDownIcon className="h-4 w-4 text-gray-400"/>
}
{!open && <ChevronDownIcon className="h-4 w-4 text-gray-400" />}
</div>
</Disclosure.Button>

<Disclosure.Panel className="bg-white py-6 px-8 nes-container">
<>
<div className="flex justify-between space-x-12">
<div className="bg-gray-200 h-48 w-48">
<button onClick={() => handleImageEditor(tile)} className="block group relative nes-pointer">
<div className="z-10 absolute inset-0 bg-gray-900 bg-opacity-70 opacity-0 group-hover:opacity-100 flex items-center justify-center">
<span className="text-white">Change image</span>
</div>
<TileImage image={tile.image} className="h-48 w-48 z-10" />
</button>
</div>
<div className="flex flex-col w-full">
<div className="mb-3 nes-field">
<label htmlFor="link" className="block text-sm font-medium text-gray-700">
Link
</label>
<input
type="text"
name="link"
id="link"
className="mt-1 nes-input"
value={tile.url}
onChange={(e) => handleLinkChange(e.target.value, index)}
/>
<button
onClick={() => handleImageEditor(tile)}
className="block group relative nes-pointer"
>
<div className="z-10 absolute inset-0 bg-gray-900 bg-opacity-70 opacity-0 group-hover:opacity-100 flex items-center justify-center">
<span className="text-white">Change image</span>
</div>
<TileImage image={tile.image} className="h-48 w-48 z-10" />
</button>
</div>

{ !tile.wrapped &&
<div className="flex flex-col w-full">
<div className="mb-3 nes-field">
<label htmlFor="price" className="block text-sm font-medium text-gray-700">
Price
<label
htmlFor="link"
className="block text-sm font-medium text-gray-700"
>
Link
</label>
<div className="mt-1 relative">
<input
type="text"
name="price"
id="price"
className="nes-input pr-16"
value={tile.newPrice}
onChange={(e) => handlePriceChange(e.target.value, index)}
/>
<span className="absolute right-0 top-0 w-16 h-full text-center flex items-center justify-center text-sm">
ETH
</span>
</div>
<input
type="text"
name="link"
id="link"
className="mt-1 nes-input"
value={tile.url}
onChange={(e) => handleLinkChange(e.target.value, index)}
/>
</div>
}

{ tile.wrapped &&
<div className="mb-3">
<p className="">
Price: {formatPrice(tile)}
</p>
<span className="text-sm text-gray-600">Set the price on <a className="text-blue-500 underline" href={openseaLink(tile.id)} target="_blank" rel="noreferrer">OpenSea</a></span>
</div>
}
{!tile.wrapped && (
<div className="mb-3 nes-field">
<label
htmlFor="price"
className="block text-sm font-medium text-gray-700"
>
Price
</label>
<div className="mt-1 relative">
<input
type="text"
name="price"
id="price"
className="nes-input pr-16"
value={tile.newPrice}
onChange={(e) =>
handlePriceChange(e.target.value, index)
}
/>
<span className="absolute right-0 top-0 w-16 h-full text-center flex items-center justify-center text-sm">
ETH
</span>
</div>
</div>
)}

</div>
{tile.wrapped && (
<div className="mb-3">
<p className="">Price: {formatPrice(tile)}</p>
<span className="text-sm text-gray-600">
Set the price on{" "}
<a
className="text-blue-500 underline"
href={openseaLink(tile.id)}
target="_blank"
rel="noreferrer"
>
OpenSea
</a>
</span>
</div>
)}
</div>
</div>
<div className="flex justify-end mt-2">
<button
className="mt-3 ml-auto nes-btn is-primary transition duration-150 font-medium"
onClick={() => handleSave(tile)}
>
Save changes
</button>
className="mt-3 ml-auto nes-btn is-primary transition duration-150 font-medium"
onClick={() => handleSave(tile)}
>
Save changes
</button>
</div>
</>
</Disclosure.Panel>
</div>
)}
</Disclosure>
)
);
}

export default EditTile;
export default EditTile;
8 changes: 4 additions & 4 deletions frontend/components/Map.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import React, { useState, useEffect } from "react";
import { useWeb3React } from "@web3-react/core";
import { TileAsset } from "../types/TileAsset";
import MapToggles from "./MapToggles";
import MapTiles from "./MapTiles";
import TileOverlay from "./TileOverlay";
import styles from "../styles/components/Map.module.scss";
import getConfig from "next/config";
import Image from "next/image";
import { PixelMapTile } from "@pixelmap/common/types/PixelMapTile";
const { publicRuntimeConfig } = getConfig();

export default function Map(props: any) {
Expand All @@ -28,7 +28,7 @@ export default function Map(props: any) {

useEffect(() => {
setOwnedTiles(
props.tiles.filter((tile: TileAsset) => {
props.tiles.filter((tile: PixelMapTile) => {
return (
account &&
account != "" &&
Expand All @@ -38,8 +38,8 @@ export default function Map(props: any) {
);

setForSaleTiles(
props.tiles.filter((tile: TileAsset) => {
return tile.openseaPrice && tile.openseaPrice != "0.00";
props.tiles.filter((tile: PixelMapTile) => {
return tile.openseaPrice && tile.openseaPrice != 0;
})
);
}, [props.tiles, account]);
Expand Down
30 changes: 14 additions & 16 deletions frontend/components/MapTiles.tsx
Original file line number Diff line number Diff line change
@@ -1,34 +1,32 @@
import React, { useState } from "react";

import { TileAsset } from '../types/TileAsset';
import TilePopover from "./TilePopover";
import { PixelMapTile } from "@pixelmap/common/types/PixelMapTile";

import TilePopover from './TilePopover';

function MapTiles({tiles}) {
let [currentTile, setCurrentTile] = useState<TileAsset | null>();
let [tileElement, setTileElement] = useState<HTMLButtonElement | null>()
function MapTiles({ tiles }) {
let [currentTile, setCurrentTile] = useState<PixelMapTile | null>();
let [tileElement, setTileElement] = useState<HTMLButtonElement | null>();

const handleClick = (tileIndex: number, ref: HTMLButtonElement) => {
setCurrentTile(tiles[tileIndex]);
setTileElement(ref);
}
};

return (
<>
{ tiles.map( (tile: TileAsset, idx: number) => (
<button
key={idx}
{tiles.map((tile: PixelMapTile, idx: number) => (
<button
key={idx}
onClick={(e) => {
handleClick(idx, e.currentTarget)
}}
className="block nes-pointer w-4 h-4 ring-green-600 hover:ring hover:bg-green-500 hover:bg-opacity-40 hover:ring-opacity-100">

</button>
handleClick(idx, e.currentTarget);
}}
className="block nes-pointer w-4 h-4 ring-green-600 hover:ring hover:bg-green-500 hover:bg-opacity-40 hover:ring-opacity-100"
></button>
))}

<TilePopover tile={currentTile} referenceElement={tileElement} />
</>
);
}

export default React.memo(MapTiles);
export default React.memo(MapTiles);
Loading

0 comments on commit 6daf791

Please sign in to comment.