when-am-i / commit
cleanup
.vscode/settings.json | 5 +++++
README.md | 2 +-
src/App.tsx | 8 ++++----
src/Attribution.tsx | 11 -----------
src/MapPicker.tsx | 5 ++---
src/{ => assets}/calendar.png | Bin
src/components/Attribution.tsx | 2 +-
src/components/MapPicker.tsx | 6 +++---
src/index.ts | 2 --
src/react-app-env.d.ts | 4 ++++
10 files changed, 20 insertions(+), 25 deletions(-)
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..3fc4e9d
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+ "cSpell.words": [
+ "latlng"
+ ]
+}
\ No newline at end of file
diff --git a/README.md b/README.md
index 6d44e4e..285e640 100644
--- a/README.md
+++ b/README.md
@@ -56,4 +56,4 @@ MIT
- Map tiles and data: [OpenStreetMap](https://www.openstreetmap.org/)
- Map library: [Leaflet](https://leafletjs.com/)
-- Calendar icon: <a href="https://www.flaticon.com/free-icons/calendar" title="calendar icons">Calendar icons created by Icongeek26 - Flaticon</a>
\ No newline at end of file
+- Calendar icon: Calendar icons created by Icongeek26 - Flaticon (https://www.flaticon.com/free-icons/calendar)
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index 774f4c7..47ed9f6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,7 @@
+import calendar from './assets/calendar.png';
import React, { useState } from 'react';
-import MapPicker from './components/MapPicker';
-import Attribution from './components/Attribution';
-import calendar from './calendar.png';
+import { MapPicker } from './components/MapPicker';
+import { Attribution } from './components/Attribution';
function App() {
const [picked, setPicked] = useState<{ lat: number; lng: number } | null>(null);
@@ -13,7 +13,7 @@ function App() {
<h1 style={{ margin: 0 }}>WhatYearIsIt</h1>
</div>
<p>Pick a spot on the map and a date to see what year it was there!</p>
- <MapPicker onPick={(lat, lng) => setPicked({ lat, lng })} />
+ <MapPicker onPick={(lat: number, lng: number) => setPicked({ lat, lng })} />
{picked && (
<div style={{ marginTop: 16 }}>
<strong>Picked location:</strong> {picked.lat.toFixed(4)}, {picked.lng.toFixed(4)}
diff --git a/src/Attribution.tsx b/src/Attribution.tsx
deleted file mode 100644
index 2642aaf..0000000
--- a/src/Attribution.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-
-const Attribution: React.FC = () => (
- <footer style={{ marginTop: 32, fontSize: '0.9em', color: '#555' }}>
- <p>
- Calendar icon by <a href="https://www.flaticon.com/free-icons/calendar" title="calendar icons">Freepik - Flaticon</a>
- </p>
- </footer>
-);
-
-export default Attribution;
diff --git a/src/MapPicker.tsx b/src/MapPicker.tsx
index 83b0c1a..4367f61 100644
--- a/src/MapPicker.tsx
+++ b/src/MapPicker.tsx
@@ -11,7 +11,7 @@ const MapPicker: React.FC<MapPickerProps> = ({ onPick }) => {
function LocationMarker() {
useMapEvents({
- click(e) {
+ click(e: { latlng: { lat: number; lng: number; }; }) {
setPosition([e.latlng.lat, e.latlng.lng]);
onPick(e.latlng.lat, e.latlng.lng);
},
@@ -20,9 +20,8 @@ const MapPicker: React.FC<MapPickerProps> = ({ onPick }) => {
}
return (
- <MapContainer center={[20, 0]} zoom={2} style={{ height: '400px', width: '100%' }}>
+ <MapContainer style={{ height: '400px', width: '100%' }}>
<TileLayer
- attribution='© <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<LocationMarker />
diff --git a/src/calendar.png b/src/assets/calendar.png
similarity index 100%
rename from src/calendar.png
rename to src/assets/calendar.png
diff --git a/src/components/Attribution.tsx b/src/components/Attribution.tsx
index 2642aaf..d980e36 100644
--- a/src/components/Attribution.tsx
+++ b/src/components/Attribution.tsx
@@ -8,4 +8,4 @@ const Attribution: React.FC = () => (
</footer>
);
-export default Attribution;
+export { Attribution };
diff --git a/src/components/MapPicker.tsx b/src/components/MapPicker.tsx
index 83b0c1a..6c22c74 100644
--- a/src/components/MapPicker.tsx
+++ b/src/components/MapPicker.tsx
@@ -11,7 +11,7 @@ const MapPicker: React.FC<MapPickerProps> = ({ onPick }) => {
function LocationMarker() {
useMapEvents({
- click(e) {
+ click(e: L.LeafletMouseEvent) {
setPosition([e.latlng.lat, e.latlng.lng]);
onPick(e.latlng.lat, e.latlng.lng);
},
@@ -22,7 +22,7 @@ const MapPicker: React.FC<MapPickerProps> = ({ onPick }) => {
return (
<MapContainer center={[20, 0]} zoom={2} style={{ height: '400px', width: '100%' }}>
<TileLayer
- attribution='© <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
+ attribution='© OpenStreetMap contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<LocationMarker />
@@ -30,4 +30,4 @@ const MapPicker: React.FC<MapPickerProps> = ({ onPick }) => {
);
};
-export default MapPicker;
+export { MapPicker, type MapPickerProps };
diff --git a/src/index.ts b/src/index.ts
deleted file mode 100644
index 17485c8..0000000
--- a/src/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// Main app entry point
-export { };
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
new file mode 100644
index 0000000..0357e4f
--- /dev/null
+++ b/src/react-app-env.d.ts
@@ -0,0 +1,4 @@
+declare module "*.png";
+declare module "*.svg";
+declare module "*.jpeg";
+declare module "*.jpg";