/yoke

display map with weather details project

Primary LanguageTypeScript

To run the project

  • On the terminal run the command

git clone https://github.com/Mykmicheals/yoke.git

Navigate to the project directory, and run:

cd yoke

Project Structure

  • src/: Source code directory

    • components/: React components directory
      • Header.js: Header component implementation
      • Sidebar.js: Sidebar component implementation
      • SearchComponent.tsx: Searchbar component
      • MapComponent.tsx : Component to display Map component
    • pages/: React pages directory
      • HomePage.tsx: Home page component implementation
      • Home.css: CSS styles for the Home page component
  • public/: Public directory

    • index.html: HTML template file
    • favicon.ico: Favicon icon file
    • assets/: Static assets directory
      • images/: Image files directory
  • package.json: NPM package configuration file

  • README.md: Project README file

Install all depenecies using :

yarn install

Run the app using the command

yarn start

The page will reload if you make edits.
You will also see any lint errors in the console.

The HomePage

homescreen

The Modal Page

modalhome

The Mobile View

mobile

The Mobile Sidebar View

sidebar

The Redex store


import { createSlice, configureStore } from "@reduxjs/toolkit";

interface sliceTypes {
  lat: number | null;
  lng: number | null;
}

const initialState: sliceTypes = {
  lat: 40.7128,
  lng: -74.006,
};

const mapSlice = createSlice({
  name: "map",
  initialState: initialState,
  reducers: {
    setLat(state, action) {
      state.lat = action.payload;
    },
    setLng(state, action) {
      state.lng = action.payload;
    },
  },
});

export const { setLat, setLng } = mapSlice.actions;

const store = configureStore({
  reducer: {
    map: mapSlice.reducer,
  },
});

type RootState = ReturnType<typeof store.getState>;

export const mapStore = (state: RootState) => state.map;

export default store;


Fetch Weather Function

const fetchWeather = useCallback(async () => {
     const fetchUrl = `https://api.openweathermap.org/data/2.5/onecall?lat=${value.lat}&lon=${value.lng}&exclude=minutely,hourly&units=metric&appid=${weatherApiKey}`
  setLoading(true);
  try {
    const response = await fetch(fetchUrl);
    if (!response.ok) {
      throw new Error('Weather data request failed');
    }
    const data = await response.json();
    setForecast(data?.daily.slice(0, 2));
    setLoading(false);
  } catch (error) {
    console.error('Error fetching weather data:', error);
   alert('error')
  }
}, [weatherApiKey, value.lat, value.lng]);

Render Map Logic


 <Map
        mapStyle="mapbox://styles/mapbox/streets-v9"
        mapboxAccessToken={process.env.REACT_APP_MAPBOX_ACCESS_TOKEN}
        style={{ height: '54vh' }}
        longitude={value.lng}
        latitude={value.lat}
        zoom={10}
      >
        <Marker
          longitude={value.lng}
          latitude={value.lat}
          anchor="bottom"
        >
          <HiLocationMarker  onClick={handleMarkerClick} size={32} color="red" />
        </Marker>

        {showPopup && (
          <Popup
            className="mt-28"
            longitude={value.lng}
            latitude={value.lat}
           
            onClose={() => setShowPopup(false)}
          closeOnClick={false}
            anchor="bottom"
          >
            <WeatherComponent showPopup = {showPopup} />
          </Popup>
         )} 
      </Map>