Skip to content

Commit

Permalink
fix router and added countries list in PointCountryInfo
Browse files Browse the repository at this point in the history
  • Loading branch information
eloicasamayor committed Dec 22, 2024
1 parent 1baddbb commit 56c988f
Show file tree
Hide file tree
Showing 6 changed files with 79 additions and 34 deletions.
13 changes: 9 additions & 4 deletions src/App.css
Original file line number Diff line number Diff line change
Expand Up @@ -12,17 +12,22 @@ body {
}

#country-info {
display: flex;
background-color: white;
width: 100%;
background-color: rgb(179, 179, 179);
z-index: 10;
position: fixed;
bottom: 0px;
padding: 0.5rem;
}

.country-flag {
width: 8rem;
width: 3rem;
}

.map-container {
position: relative;
position: sticky;
top: 0;
background-color: white;
}

.tools {
Expand Down
15 changes: 3 additions & 12 deletions src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,12 @@ import "./App.css";
import { BrowserRouter, Route, Link, Routes } from "react-router-dom";

Check failure on line 4 in src/App.tsx

View workflow job for this annotation

GitHub Actions / deploy

'Link' is declared but its value is never read.
import { PointCountryGame } from "./pages/PointCountryGame";
import { PointCountryInfo } from "./pages/PointCountryInfo";
import { IntroPage } from "./pages/IntroPage";

function App() {
return (
<>
<BrowserRouter>
<nav>
<ul>
<li>
<Link to="/point-country-game">Point Country Game</Link>
</li>
<li>
<Link to="/point-country-info">Point Country info</Link>
</li>
</ul>
</nav>
<BrowserRouter basename="countries">
<Routes>
<Route
path="/point-country-game"
Expand All @@ -28,7 +19,7 @@ function App() {
path="/point-country-info"
element={<PointCountryInfo />}
></Route>
<Route path="/" element={<App />}></Route>
<Route path="/" element={<IntroPage />}></Route>
</Routes>
</BrowserRouter>
</>
Expand Down
10 changes: 9 additions & 1 deletion src/assets/Map.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,23 @@ import {
TransformComponent,
useControls,
useTransformContext,
zoom,
} from "react-zoom-pan-pinch";
import { MapControls } from "../components/MapControls";

export const Map = ({
onPathClick,
selectedCountry,
}: {
onPathClick: (e: MouseEvent) => void;
selectedCountry: string;
}) => {
const MAX_SCALE = 1000;
const maxStroke = 0.35;
const minStroke = 0.075;
const [strokeWidth, setStrokeWidth] = useState(0.07);
const ref = useRef();
const mapRef = useRef();

const onZoom = (a, b) => {
const newStrokeWidth = getStrokeWidth(a.state.scale);
Expand All @@ -39,14 +43,17 @@ export const Map = ({
return (
<div className="map-container">
<TransformWrapper ref={ref} maxScale={MAX_SCALE} onZoom={onZoom}>
{({ zoomIn, zoomOut, resetTransform, ...rest }) => (
{({ zoomIn, zoomOut, resetTransform, zoomToElement, ...rest }) => (
<>
<MapControls
isMaxScale={
ref?.current?.instance?.transformState?.scale === MAX_SCALE
}
isMinScale={ref?.current?.instance?.transformState?.scale === 1}
onZoomWithButtons={onZoomWithButtons}
zoomToElement={zoomToElement}
selectedCountry={selectedCountry}
wrapperRef={mapRef}
/>
<TransformComponent>
<svg
Expand All @@ -60,6 +67,7 @@ export const Map = ({
aspectRatio: "1.515",
preserveAspectRatio: "xMidYMid meet",
}}
ref={mapRef}
>
<path
d="m 479.68275,331.6274 -0.077,0.025 -0.258,0.155 -0.147,0.054 -0.134,0.027 -0.105,-0.011 -0.058,-0.091 0.006,-0.139 -0.024,-0.124 -0.02,-0.067 0.038,-0.181 0.086,-0.097 0.119,-0.08 0.188,0.029 0.398,0.116 0.083,0.109 10e-4,0.072 -0.073,0.119 z"
Expand Down
16 changes: 15 additions & 1 deletion src/components/MapControls.tsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,31 @@
import { useControls } from "react-zoom-pan-pinch";
import { useEffect } from "react";
import { ReactZoomPanPinchRef, useControls } from "react-zoom-pan-pinch";

type MapControlsProps = {
isMaxScale: boolean;
isMinScale: boolean;
onZoomWithButtons: Function;
zoomToElement: Function;
selectedCountry: string;
wrapperRef: React.Ref<ReactZoomPanPinchRef>;
};

export const MapControls = ({
isMaxScale,
isMinScale,
onZoomWithButtons,
zoomToElement,
selectedCountry,
wrapperRef,
}: MapControlsProps) => {
const { zoomIn, zoomOut /* resetTransform */ } = useControls();
useEffect(() => {
const countryPath = wrapperRef?.current?.querySelector(

Check failure on line 23 in src/components/MapControls.tsx

View workflow job for this annotation

GitHub Actions / deploy

Property 'current' does not exist on type '((instance: ReactZoomPanPinchRef | null) => void) | RefObject<ReactZoomPanPinchRef>'.
`[title="${selectedCountry}"]`
);
zoomToElement(countryPath);
//(node: HTMLElement | string, scale?: number, animationTime?: number, animationType?: keyof typeof animations) => void;
}, [selectedCountry]);
return (
<div className="tools">
<button
Expand Down
16 changes: 16 additions & 0 deletions src/pages/IntroPage.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { Link } from "react-router-dom";

export const IntroPage = () => {
return (
<nav>
<ul>
<li>
<Link to="/point-country-game">Point Country Game</Link>
</li>
<li>
<Link to="/point-country-info">Point Country info</Link>
</li>
</ul>
</nav>
);
};
43 changes: 27 additions & 16 deletions src/pages/PointCountryInfo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export function PointCountryInfo() {
official: "",
},
});
const [countryList, setCountryList] = useState([]);

useEffect(() => {
if (!country) {
Expand All @@ -39,6 +40,15 @@ export function PointCountryInfo() {
});
}, [country]);

useEffect(() => {
fetch(`https://restcountries.com/v3.1/all`)
.then((response) => response.json())
// 4. Setting *dogImage* to the image url that we received from the response above
.then((data) => {
setCountryList(data);
});
}, []);

function onClickPais(e: MouseEvent) {
if (selectedPath.current) {
selectedPath.current.setAttribute("style", "fill:black");
Expand All @@ -56,32 +66,33 @@ export function PointCountryInfo() {
}
return (
<div className="app-page">
<Map onPathClick={onClickPais} />
<Map onPathClick={onClickPais} selectedCountry={country} />

<div id="country-info">
{countryInfo ? (
<>
<div>
<h2>{country}</h2>{" "}
<p>
<img className="country-flag" src={countryInfo.flags.svg} />
</div>
<div>
<p>
<strong>Official name:</strong> {countryInfo.name.official}
</p>
<p>
<strong>Capital:</strong> {countryInfo?.capital}
</p>
<p>
<strong>Languages:</strong>{" "}
{Object.values(countryInfo?.languages).map((l) => l + ", ")}
</p>
</div>
<strong>{country}</strong>
<br />
{countryInfo.name.official}
<br />
<strong>Capital:</strong> {countryInfo?.capital}
</p>
</>
) : (
"no info :/"
)}
</div>
<div id="country-list">
<ul>
{countryList.map((country) => (
<li onClick={() => setCountry(country.name.common)}>

Check failure on line 90 in src/pages/PointCountryInfo.tsx

View workflow job for this annotation

GitHub Actions / deploy

Property 'name' does not exist on type 'never'.
{country.name.common}

Check failure on line 91 in src/pages/PointCountryInfo.tsx

View workflow job for this annotation

GitHub Actions / deploy

Property 'name' does not exist on type 'never'.
</li>
))}
</ul>
</div>
</div>
);
}

0 comments on commit 56c988f

Please sign in to comment.