Added viewport height styling to the aside element when there is an e…

…rror

src/components/layouts/MainContents.tsx

@@ -10,7 +10,9 @@ const MainContents: React.FC = () => {
   const [openSearch, setOpenSearch] = useState(false);
   const { fetchWeatherData, getLocationPosition } = useActions();
 
-  const { loading, woeid, coords } = useTypedSelector((state) => state.weather);
+  const { loading, woeid, coords, error } = useTypedSelector(
+    (state) => state.weather
+  );
 
   useEffect(() => {
     if (coords) {
@@ -28,7 +30,7 @@ const MainContents: React.FC = () => {
         <Spinner />
       ) : (
         <main className="main">
-          <aside className="aside">
+          <aside className={error ? "aside aside__error" : "aside"}>
             {!openSearch ? (
               <AsideContent
                 setOpenSearch={setOpenSearch}

src/sass/layout/_aside.scss

@@ -12,6 +12,10 @@
     height: 100%;
   }
 
+  &__error {
+    height: 100vh;
+  }
+
   &__background {
     max-width: 75em;
     position: absolute;

src/sass/layout/_main.scss

@@ -1,5 +1,5 @@
 .main {
   display: grid;
   grid-template-columns: 1fr 2fr;
-  // height: 100vh;
+  height: 100%;
 }

src/store/action-creators/index.ts

@@ -88,16 +88,23 @@ export const getLocationPosition =
 export const getCurrentLocation = () => (dispatch: Dispatch) => {
   const geolocation = navigator.geolocation;
   geolocation.getCurrentPosition(
-    (position) => {
+    async (position) => {
       console.log(position);
+
+      const { latitude, longitude } = position.coords;
+
+      const { data } = await axios.get(
+        `${BASE_URL}/search/?lattlong=${latitude},${longitude}`
+      );
+
       dispatch({
-        type: ActionTypes.GET_CURRENT_LOCATION_COORDINATES,
-        payload: position.coords,
+        type: ActionTypes.GET_CURRENT_LOCATION_POSITION,
+        payload: data[0].woeid,
       });
     },
     (error) => {
       dispatch({
-        type: ActionTypes.GET_CURRENT_LOCATION_COORDINATES_DENIED,
+        type: ActionTypes.GET_CURRENT_LOCATION_POSITION_DENIED,
         payload: error.message,
       });
     }

src/store/action-types/index.ts

@@ -7,6 +7,6 @@ export enum ActionTypes {
   WEATHER_DEGREE_IS_FAHRENHEIT = "WEATHER_DEGREE_IS_FAHRENHEIT",
   GET_LOCATION_FROM_MAP = "GET_LOCATION_FROM_MAP",
   GET_LOCATION_COORDINATES = "GET_LOCATION_COORDINATES",
-  GET_CURRENT_LOCATION_COORDINATES = "GET_CURRENT_LOCATION_COORDINATES",
-  GET_CURRENT_LOCATION_COORDINATES_DENIED = "GET_CURRENT_LOCATION_COORDINATES_DENIED",
+  GET_CURRENT_LOCATION_POSITION = "GET_CURRENT_LOCATION_POSITION",
+  GET_CURRENT_LOCATION_POSITION_DENIED = "GET_CURRENT_LOCATION_POSITION_DENIED",
 }

src/store/actions/index.ts

@@ -42,15 +42,12 @@ interface getLocationCoordsAction {
 }
 
 interface getCurrentLocationAction {
-  type: ActionTypes.GET_CURRENT_LOCATION_COORDINATES;
-  payload: {
-    lat: string;
-    lon: string;
-  };
+  type: ActionTypes.GET_CURRENT_LOCATION_POSITION;
+  payload: number;
 }
 
 interface getCurrentLocationDeniedAction {
-  type: ActionTypes.GET_CURRENT_LOCATION_COORDINATES_DENIED;
+  type: ActionTypes.GET_CURRENT_LOCATION_POSITION_DENIED;
   payload: string;
 }
 

src/store/reducers/weatherReducer.ts

@@ -106,18 +106,17 @@ const weatherReducer = (
         woeid: action.payload,
         error: null,
       };
-    case ActionTypes.GET_CURRENT_LOCATION_COORDINATES_DENIED:
+    case ActionTypes.GET_CURRENT_LOCATION_POSITION:
       return {
         ...state,
-        loading: false,
-        error: action.payload,
-        coords: null,
+        woeid: action.payload,
+        error: null,
       };
-    case ActionTypes.GET_CURRENT_LOCATION_COORDINATES:
+    case ActionTypes.GET_CURRENT_LOCATION_POSITION_DENIED:
       return {
         ...state,
-        coords: action.payload,
-        error: null,
+        loading: false,
+        coords: null,
       };
     default:
       return state;