= ({ city, setCity }) => {
const dispatch = useAppDispatch();
const handleOnClick = () => {
- dispatch(setCurrentCity(city));
- dispatch(setShowResult(true));
+ dispatch(addSearchedCity(city));
setCity("");
};
diff --git a/src/components/result/Result.tsx b/src/components/result/Result.tsx
deleted file mode 100644
index a698db5..0000000
--- a/src/components/result/Result.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { useEffect } from "react";
-
-import { useGetCityForcastQuery } from "api/apiSlice";
-import { useAppDispatch, useAppSelector } from "store/hooks";
-import { addPreviousCity } from "store/slices/citySlice";
-
-import History from "components/history";
-import Loading from "components/Loading";
-
-const Result: React.FC = () => {
- const dispatch = useAppDispatch();
- const city = useAppSelector((state) => state.city.currentCity);
- const { data, isLoading, isError, error } = useGetCityForcastQuery(city);
-
- useEffect(() => {
- if (data) {
- dispatch(addPreviousCity(data));
- }
- }, [data]);
-
- if (isLoading) return ;
- if (isError) return {(error as ApiError).data.message}
;
-
- return ;
-};
-
-export default Result;
diff --git a/src/components/result/index.ts b/src/components/result/index.ts
deleted file mode 100644
index 30bb156..0000000
--- a/src/components/result/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import Result from "./Result";
-
-export default Result;
diff --git a/src/components/utils.ts b/src/components/utils.ts
new file mode 100644
index 0000000..38dfb3d
--- /dev/null
+++ b/src/components/utils.ts
@@ -0,0 +1,25 @@
+export async function geocodeLatLng(
+ latitude: number,
+ longitude: number
+): Promise {
+ const latlng = new window.google.maps.LatLng(latitude, longitude);
+ const geocoder = new window.google.maps.Geocoder();
+ try {
+ const results = await geocoder.geocode({ location: latlng });
+ if (results !== null) {
+ return filterCityName(results.results);
+ }
+ } catch (_error) {}
+
+ return "";
+}
+
+function filterCityName(results: google.maps.GeocoderResult[]): string {
+ const singleResultsEntry = results[0].address_components;
+
+ const cityName = singleResultsEntry.filter(
+ (result) =>
+ result.types.includes("locality") && result.types.includes("political")
+ );
+ return cityName[0].long_name;
+}
diff --git a/src/config.ts b/src/config.ts
index e5a1217..3f09b06 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,4 +1,5 @@
-const API_KEY = import.meta.env.VITE_API_KEY as string;
+export const WEATHER_API_KEY = import.meta.env.VITE_WEATHER_API_KEY as string;
+export const MAPS_API_KEY = import.meta.env.VITE_MAPS_API_KEY as string;
-export const API_BASE_URL = "https://api.openweathermap.org/data/2.5/forecast";
-export { API_KEY };
+export const WEATHER_API_BASE_URL =
+ "https://api.openweathermap.org/data/2.5/forecast";
diff --git a/src/context/CoordinatesContext.tsx b/src/context/CoordinatesContext.tsx
new file mode 100644
index 0000000..269ea88
--- /dev/null
+++ b/src/context/CoordinatesContext.tsx
@@ -0,0 +1,27 @@
+import { createContext, useContext, useEffect, useState } from "react";
+
+export const CoordinatesContext = createContext({ latitude: 0, longitude: 0 });
+
+interface Props {
+ children: React.ReactNode;
+}
+
+const CoordinatesContextProdiver: React.FC = ({ children }) => {
+ const defaultCoordinates = useContext(CoordinatesContext);
+ const [coordinates, setCoordinates] = useState(defaultCoordinates);
+
+ useEffect(() => {
+ navigator.geolocation.getCurrentPosition((location) => {
+ const { latitude, longitude } = location.coords;
+ setCoordinates({ latitude, longitude });
+ });
+ }, []);
+
+ return (
+
+ {children}
+
+ );
+};
+
+export default CoordinatesContextProdiver;
diff --git a/src/main.tsx b/src/main.tsx
index 0af42b6..0f99b29 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,16 +1,21 @@
import React from "react";
import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";
+import { LoadScript } from "@react-google-maps/api";
import App from "./App";
import store from "store/store.ts";
import ThemeProvider from "theme/ThemeProvider";
+import { MAPS_API_KEY } from "./config";
+
ReactDOM.createRoot(document.getElementById("root")!).render(
-
+
+
+
diff --git a/src/pages/ComparePage.tsx b/src/pages/ComparePage.tsx
new file mode 100644
index 0000000..6aa35d4
--- /dev/null
+++ b/src/pages/ComparePage.tsx
@@ -0,0 +1,15 @@
+import { useAppSelector } from "store/hooks";
+import { ComparedCities } from "components/city";
+import Info from "components/Info";
+
+const ComparePage: React.FC = () => {
+ const searchedCities = useAppSelector((state) => state.city.searchedCities);
+
+ if (searchedCities.length < 1) {
+ return Please Search cities to compare;
+ }
+
+ return ;
+};
+
+export default ComparePage;
diff --git a/src/pages/MapPage.tsx b/src/pages/MapPage.tsx
new file mode 100644
index 0000000..809a968
--- /dev/null
+++ b/src/pages/MapPage.tsx
@@ -0,0 +1,63 @@
+import React, { useContext, useEffect, useRef, useState } from "react";
+import { Box, BoxProps, styled } from "@mui/material";
+
+import Resizable from "components/charts/Resizable";
+import CityChart from "components/city/CityChart";
+import { geocodeLatLng } from "components/utils";
+import { CoordinatesContext } from "src/context/CoordinatesContext";
+
+const StyledMapContainer = styled(Box)(() => ({
+ height: "100%",
+ width: "100%",
+ display: "flex",
+ flexDirection: "column",
+ alignItems: "center",
+}));
+
+const MapPage: React.FC = () => {
+ const [cityName, setCityName] = useState("");
+ const { latitude, longitude } = useContext(CoordinatesContext);
+
+ const mapRef = useRef();
+
+ useEffect(() => {
+ (async () => {
+ setCityName(await geocodeLatLng(latitude, longitude));
+ const mapOptions: google.maps.MapOptions = {
+ center: { lat: latitude, lng: longitude },
+ zoom: 10,
+ };
+
+ const map = new google.maps.Map(mapRef.current!, mapOptions);
+ new google.maps.Marker({
+ position: new window.google.maps.LatLng(latitude, longitude),
+ map: map,
+ });
+
+ google.maps.event.addListener(map, "click", async (event: any) => {
+ new google.maps.Marker({
+ position: event.latLng,
+ map: map,
+ });
+
+ const latitude = event.latLng.lat();
+ const longitude = event.latLng.lng();
+
+ setCityName(await geocodeLatLng(latitude, longitude));
+ });
+ })();
+ }, [latitude, longitude]);
+
+ return (
+
+
+
+
+
+
+
+
+ );
+};
+
+export default MapPage;
diff --git a/src/pages/SearchPage.tsx b/src/pages/SearchPage.tsx
new file mode 100644
index 0000000..1611083
--- /dev/null
+++ b/src/pages/SearchPage.tsx
@@ -0,0 +1,21 @@
+import Box from "@mui/material/Box";
+
+import { CurrentCity } from "components/city";
+import SearchedCities from "components/city/SearchedCities";
+import { useAppSelector } from "store/hooks";
+
+const SearchPage: React.FC = () => {
+ const searchedCities = useAppSelector((state) => state.city.searchedCities);
+
+ return (
+
+ {searchedCities.length > 0 ? (
+
+ ) : (
+
+ )}
+
+ );
+};
+
+export default SearchPage;
diff --git a/src/pages/index.ts b/src/pages/index.ts
new file mode 100644
index 0000000..92ec68a
--- /dev/null
+++ b/src/pages/index.ts
@@ -0,0 +1,3 @@
+export { default as SearchPage } from "./SearchPage";
+export { default as ComparePage } from "./ComparePage";
+export { default as MapPage } from "./MapPage";
diff --git a/src/store/slices/citySlice.ts b/src/store/slices/citySlice.ts
index 2c0a0b6..dfe0468 100644
--- a/src/store/slices/citySlice.ts
+++ b/src/store/slices/citySlice.ts
@@ -3,23 +3,18 @@ import { createSlice } from "@reduxjs/toolkit";
export const citySlice = createSlice({
name: "searchCity",
initialState: {
- currentCity: "",
- previousCities: [] as ApiResponse[],
+ searchedCities: [] as string[],
},
reducers: {
- setCurrentCity: (state, action) => {
- state.currentCity = action.payload;
+ addSearchedCity: (state, action) => {
+ state.searchedCities.unshift(action.payload);
},
- addPreviousCity: (state, action) => {
- state.previousCities.unshift(action.payload);
- },
-
- clearPreviousCities: (state) => {
- state.previousCities = [];
+ clearSearchedCities: (state) => {
+ state.searchedCities = [];
},
},
});
-export const { setCurrentCity, addPreviousCity } = citySlice.actions;
+export const { addSearchedCity, clearSearchedCities } = citySlice.actions;
export default citySlice.reducer;
diff --git a/src/store/slices/index.ts b/src/store/slices/index.ts
index 6ffd958..b018f4f 100644
--- a/src/store/slices/index.ts
+++ b/src/store/slices/index.ts
@@ -1,2 +1 @@
export { default as cityReducer } from "./citySlice";
-export { default as resultReducer } from "./resultSlice";
diff --git a/src/store/slices/resultSlice.ts b/src/store/slices/resultSlice.ts
deleted file mode 100644
index e9a86b3..0000000
--- a/src/store/slices/resultSlice.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { createSlice } from "@reduxjs/toolkit";
-
-export const resultSlice = createSlice({
- name: "result",
- initialState: {
- showResult: false,
- },
- reducers: {
- setShowResult: (state, action) => {
- state.showResult = action.payload;
- },
- },
-});
-
-export const { setShowResult } = resultSlice.actions;
-export default resultSlice.reducer;
diff --git a/src/store/store.ts b/src/store/store.ts
index 8f1e05c..9f75fc3 100644
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -1,10 +1,9 @@
import { configureStore } from "@reduxjs/toolkit";
import { apiSlice } from "api/apiSlice";
-import { cityReducer, resultReducer } from "./slices";
+import { cityReducer } from "./slices";
const store = configureStore({
reducer: {
- result: resultReducer,
city: cityReducer,
[apiSlice.reducerPath]: apiSlice.reducer,
},
diff --git a/src/theme/ThemeProvider.tsx b/src/theme/ThemeProvider.tsx
index fb6025e..5e93926 100644
--- a/src/theme/ThemeProvider.tsx
+++ b/src/theme/ThemeProvider.tsx
@@ -1,5 +1,4 @@
-import { ThemeProvider, CssBaseline } from "@mui/material";
-import { createTheme } from "@mui/material/styles";
+import { ThemeProvider, createTheme, CssBaseline } from "@mui/material";
import { getColorPalette } from "./theme";
import { createContext, useState } from "react";
diff --git a/src/types/api-response.d.ts b/src/types/api-response.d.ts
index 8adda3b..6c431e4 100644
--- a/src/types/api-response.d.ts
+++ b/src/types/api-response.d.ts
@@ -2,7 +2,7 @@ interface ApiResponse {
cod: string;
message: number;
cnt: 40;
- list: Forcast[];
+ list: Forecast[];
city: City;
}
diff --git a/src/types/data-set.d.ts b/src/types/data-set.d.ts
new file mode 100644
index 0000000..8eba3b7
--- /dev/null
+++ b/src/types/data-set.d.ts
@@ -0,0 +1,4 @@
+interface Dataset {
+ label: string;
+ data: number[];
+}
diff --git a/src/types/forecast.d.ts b/src/types/forecast.d.ts
index 1c09aa3..c82d7e5 100644
--- a/src/types/forecast.d.ts
+++ b/src/types/forecast.d.ts
@@ -1,4 +1,4 @@
-interface Forcast {
+interface Forecast {
dt: string;
main: {
temp: number;